Functional date filter

src/lib/components/Controls.svelte

@@ -14,12 +14,16 @@
 		attributionScoreFilter,
 		attributionScoreDef,
 		textSearchFilter,
+		timeRangeFilter,
+		fullTimeRange
 	} from '../../stores/filters';
 
 	export let cases;
 
 	function handleButtonClick() {
 		selectAllFilters();
+		timeRangeFilter.set($fullTimeRange);
+		timeDummyRange = [0, 10]
 		/*contextData.unselectAll();
     $highlightPolarization = false;
     $highlightCib = false;
@@ -44,6 +48,8 @@
 				.filter((a) => a === d.id).length
 		}));
 	}
+
+	let timeDummyRange = [0, 10]
 </script>
 
 {#if cases}
@@ -96,11 +102,11 @@
 				on:itemsRemoved={(e) => methodFilter.unselect(e.detail)}
 			></Dropdown>
 			<DateRangeSlider
-				value={[0, 20]}
-				label="Date range"
+				value={timeDummyRange}
+				label="Date Range"
 				min={0}
-				max={20}
-				showHandleLabels={true}
+				max={10}
+				showHandleLabels={false}
 				startColor={'#ffffff'}
 				stopColor={'#000000'}
 			/>

src/lib/components/Timeline.svelte

@@ -15,16 +15,16 @@
 	export let metrics;
 
 	const margins = {
-		top: 24,
+		top: 0,
 		right: 24,
-		bottom: 38,
+		bottom: 28,
 		left: 120
 	};
 
 	let width;
-	let height = 280;
+	let height = 200;
+
 
-	$: dateExtent = extent(cases.map((d) => new Date(d.attribution_date)));
 
 	$: xScale = scaleTime($timeRangeFilter, [0, width - margins.right - margins.left]);
 	$: ticks = xScale.ticks(5);
@@ -32,7 +32,7 @@
 	const actorNations = ['Key event', 'China', 'Iran', 'North Korea', 'Russia'];
 	const colors = ['#555555', '#0f4c8a', '#8a0f8a', '#8a4d0f', '#0f8a0f'];
 
-	let yScale = scalePoint(actorNations, [height - margins.bottom - margins.top, 0]).padding(1);
+	let yScale = scalePoint(actorNations, [height - margins.bottom - margins.top, 0]).padding(0.5);
 	let colorScale = scaleOrdinal(actorNations, colors);
 
 	$: displayCountryMetrics = $actorNationFilter.filter(d => d.selected).map(d => d.name)

src/routes/+page.svelte

@@ -81,7 +81,6 @@
         })     
 	});
     
-    $: console.log($timeRangeFilter)
     $: if (cases) {
         cases = cases.map(d => ({
             ...d,
@@ -91,6 +90,7 @@
                 && haveOverlap($sourceCategoryFilter, d.Source_Category)
                 && haveOverlap($methodFilter, d.methods)
                 && withinRange($attributionScoreFilter, d.attribution_total_score)
+                && withinRange($timeRangeFilter, d.attribution_date)
                 && includesTextSearch($textSearchFilter, d.search)
         }))
     }

src/stores/filters.js

@@ -1,4 +1,6 @@
 import { writable } from 'svelte/store';
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
 //import { uniq } from 'lodash';
 
 function createRangeFilter() {
@@ -13,7 +15,10 @@ function createRangeFilter() {
 }
 
 function createTimeRangeFilter() {
-  const { subscribe, set, update } = writable([new Date('2024-01-01'), new Date()]);
+  const { subscribe, set, update } = tweened([new Date('2024-01-01'), new Date()], {
+		duration: 750,
+		easing: cubicOut
+	});
 
   return {
     subscribe,