From dac693845f88fb53cac7bd6c0ec20429f5050019 Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Fri, 20 Sep 2024 21:37:38 +0200
Subject: [PATCH] Basic filter, timeline links

---
 package-lock.json                  |  45 ++++++++++++
 package.json                       |   1 +
 src/lib/components/CaseCard.svelte |  13 +++-
 src/lib/components/Timeline.svelte | 112 +++++++++++++----------------
 src/routes/+page.svelte            |  98 +++++++++++++++----------
 5 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e56314e..6a4fb84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"svelte": "^4.2.7",
+				"svelte-select": "^5.8.3",
 				"vite": "^5.0.3"
 			}
 		},
@@ -524,6 +525,31 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+			"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.11",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+			"integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+			"dev": true
+		},
 		"node_modules/@humanwhocodes/module-importer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -2673,6 +2699,16 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/svelte-floating-ui": {
+			"version": "1.5.8",
+			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.5.8.tgz",
+			"integrity": "sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/core": "^1.5.0",
+				"@floating-ui/dom": "^1.5.3"
+			}
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.16.0",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
@@ -2685,6 +2721,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-select": {
+			"version": "5.8.3",
+			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.8.3.tgz",
+			"integrity": "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA==",
+			"dev": true,
+			"dependencies": {
+				"svelte-floating-ui": "1.5.8"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index 4cf2fd7..eb2b7b3 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
+		"svelte-select": "^5.8.3",
 		"vite": "^5.0.3"
 	},
 	"type": "module"
diff --git a/src/lib/components/CaseCard.svelte b/src/lib/components/CaseCard.svelte
index 4fab19a..091bfbe 100644
--- a/src/lib/components/CaseCard.svelte
+++ b/src/lib/components/CaseCard.svelte
@@ -1,13 +1,14 @@
 <script>
+    import { fade } from 'svelte/transition'
 	export let cardData;
 </script>
 
-<div class="card">
-	<div class="card-header">
+<div class="card" transition:fade id={"case-" + cardData.attribution_id}>
+	<!--div class="card-header">
 		<div class="card-header-title">
 			<h2 class="is-size-3">Don't cases have titles?</h2>
 		</div>
-	</div>
+	</div-->
 	<div class="card-image">
 		<figure class="image">
 			<img src={cardData.image_url} alt={cardData.image_credit} />
@@ -25,3 +26,9 @@
 		</div>
 	</div>
 </div>
+
+<style>
+    div.card {
+        max-width: 780px;
+    }
+</style>
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 9b671be..823db96 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -1,73 +1,61 @@
 <script>
-    import { scaleUtc } from "d3-scale"
-    import { extent } from "d3-array"
-    import { utcFormat } from "d3-time-format"
-    
-    export let cases
+	import { scaleUtc } from 'd3-scale';
+	import { extent } from 'd3-array';
+	import { utcFormat } from 'd3-time-format';
 
-    const margins = {
-        top: 24,
-        right: 24,
-        bottom: 24,
-        left: 24
-    }
+	export let cases;
 
-    let width
-    let height = 120
+	const margins = {
+		top: 24,
+		right: 24,
+		bottom: 24,
+		left: 24
+	};
 
-    $: dateExtent = extent(cases.map(d => new Date(d.attribution_date)))
+	let width;
+	let height = 120;
 
-    $: xScale = scaleUtc(dateExtent, [0, width - margins.right - margins.left])
-    $: ticks = xScale.ticks(5)
-    
-    
+	$: dateExtent = extent(cases.map((d) => new Date(d.attribution_date)));
+
+	$: xScale = scaleUtc(dateExtent, [0, width - margins.right - margins.left]);
+	$: ticks = xScale.ticks(5);
 </script>
 
 <div class="timeline-container" bind:clientWidth={width}>
-    <svg {width} {height}>
-        {#if xScale}
-        <g transform={`translate(${margins.left},${margins.top})`}>
-            <line
-                x1={0}
-                x2={width}
-                y1={0}
-                y2={0}
-                stroke={'#000000'}
-                stroke-width={2}
-                ></line>
-            {#each ticks as tick}
-                <line
-                    x1={xScale(tick)}
-                    x2={xScale(tick)}
-                    y1={0}
-                    y2={12}
-                    stroke={'#000000'}
-                    stroke-width={2}
-                ></line>
-                <text
-                    x={xScale(tick)}
-                    y={32}
-                    text-anchor={'middle'}
-                >{utcFormat("%b")(tick)}</text>
-            {/each}
-            {#each cases as attrCase}
-                <circle
-                    cx={xScale(new Date(attrCase.attribution_date))}
-                    cy={0}
-                    r={6}
-                    fill={'#000000'}
-                    stroke={'#ffffff'}
-                    stroke-width={2}
-                ></circle>
-            {/each}
-
-        </g>
-        {/if}
-    </svg>
+	<svg {width} {height}>
+		{#if xScale}
+			<g transform={`translate(${margins.left},${margins.top})`}>
+				<line x1={0} x2={width} y1={0} y2={0} stroke={'#000000'} stroke-width={2}></line>
+				{#each ticks as tick}
+					<line
+						x1={xScale(tick)}
+						x2={xScale(tick)}
+						y1={0}
+						y2={12}
+						stroke={'#000000'}
+						stroke-width={2}
+					></line>
+					<text x={xScale(tick)} y={32} text-anchor={'middle'}>{utcFormat('%b %d')(tick)}</text>
+				{/each}
+				{#each cases as attrCase}
+					<a href={'#case-' + attrCase.attribution_id}>
+						<circle
+							cx={xScale(new Date(attrCase.attribution_date))}
+							cy={0}
+							r={6}
+							fill={'#000000'}
+							stroke={'#ffffff'}
+							stroke-width={2}
+						></circle>
+					</a>
+				{/each}
+			</g>
+		{/if}
+	</svg>
 </div>
 
 <style>
-    .timeline-container {
-        width: 100%;
-    }
-</style>
\ No newline at end of file
+	.timeline-container {
+		width: 100%;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index afce530..84ce5e6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,53 +1,79 @@
 <script>
-    import copy from "../data/copy.json"
-    import { onMount } from "svelte";
-    import { csv } from "d3-fetch"
-    import { base } from '$app/paths';
-    import CaseCard from "$lib/components/CaseCard.svelte";
-    import CaseTable from "$lib/components/CaseTable.svelte";
-    import Timeline from "$lib/components/Timeline.svelte";
+	import copy from '../data/copy.json';
+	import { onMount } from 'svelte';
+	import { csv } from 'd3-fetch';
+	import { base } from '$app/paths';
+	import CaseCard from '$lib/components/CaseCard.svelte';
+	import CaseTable from '$lib/components/CaseTable.svelte';
+	import Timeline from '$lib/components/Timeline.svelte';
+	import Select from 'svelte-select';
 
-    let cases = []
+	let cases = [];
 
-    onMount(async function () {
-        //const response = await csv(`https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/Demo_Attribution_Data.csv`);
-        const response = await csv(`${base}/Demo_Attribution_Data.csv`);
-        cases = response
-    })
+	onMount(async function () {
+		//const response = await csv(`https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/Demo_Attribution_Data.csv`);
+		const response = await csv(`${base}/Demo_Attribution_Data.csv`);
+		cases = response;
+	});
+
+	$: actorNations =
+		cases.length > 0 ? [...new Set(cases.map((d) => d.actor_nation.split(', ')).flat())] : [];
+	$: actorNationsUnique = [...new Set(actorNations)];
+	let selectedActorNations = null;
+
+	$: filteredCases = selectedActorNations
+		? cases.filter((d) => d.actor_nation.includes(selectedActorNations[0].value))
+		: cases;
 </script>
 
 <section class="section">
 	<div class="container has-text-centered">
 		<h1 class="is-size-1">{copy.meta.title}</h1>
-        {#each copy.content as block}
-            {#if block.type == "text"}
-                <p>{block.text}</p>
-            {/if}
-        {/each}
+		{#each copy.content as block}
+			{#if block.type == 'text'}
+				<p>{block.text}</p>
+			{/if}
+		{/each}
 	</div>
 </section>
 
 <section class="section">
-    <div>
-<Timeline {cases}></Timeline>
-</div>
+	<div class="select-container">
+		<Select
+			items={actorNationsUnique}
+			multiple={true}
+			bind:value={selectedActorNations}
+			placeholder={'Select 1 or more actor countries'}
+		></Select>
+	</div>
 </section>
 
-<section>
-    <div class="container">
-        <div class="grid is-col-min-16">
-        {#each cases as attrCase}
-            <div class="cell">
-                <CaseCard cardData={attrCase}>
+<section class="section">
+	<div>
+		<Timeline cases={filteredCases}></Timeline>
+	</div>
+</section>
 
-                </CaseCard>
-            </div>
-        {/each}
-        </div>
-    </div>
+<section class="section">
+	<div class="container">
+		<div class="grid is-col-min-12">
+			{#each filteredCases as attrCase}
+				<div class="cell">
+					<CaseCard cardData={attrCase}></CaseCard>
+				</div>
+			{/each}
+		</div>
+	</div>
 </section>
-<section>
-    <div class="container">
-        <CaseTable {cases}></CaseTable>
-    </div>
+
+<section class="section">
+	<div class="container">
+		<CaseTable cases={filteredCases}></CaseTable>
+	</div>
 </section>
+
+<style>
+	.select-container {
+		width: 360px;
+	}
+</style>