url params handling dimension grid

evidence-dev · Feb 13, 2025 · 706bf19 · 706bf19
1 parent e77188a
commit 706bf19
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 51 deletions.
diff --git a/packages/lib/sdk/src/utils/svelte/index.js b/packages/lib/sdk/src/utils/svelte/index.js
@@ -3,4 +3,4 @@ import { addBasePath as _addBasePath } from './addBasePath.js';
 import { config } from '$evidence/config';
 /** @type {(path: string) => string} */
 export const addBasePath = (path) => _addBasePath(path, config);
-export { hydrateFromUrlParam, updateUrlParam } from "./useUrlParams.js"
+export { hydrateFromUrlParam, updateUrlParam } from './useUrlParams.js';
diff --git a/packages/lib/sdk/src/utils/svelte/useUrlParams.js b/packages/lib/sdk/src/utils/svelte/useUrlParams.js
@@ -1,41 +1,3 @@
-// import { onMount } from "svelte"
-// import { get } from "svelte/store"
-// // @ts-expect-error
-// import { page } from '$app/stores';
-// // @ts-expect-error
-// import { browser } from '$app/environment';
-
-// /**
-//  * @param {string} key
-//  * @param {(value: string | null) => unknown} [hydrate]
-//  */
-// export function useUrlParams(key, hydrate) {
-//     if(browser){
-//         onMount(() => {
-//             /** @type {{url: URL}} */
-//             const {url} = get(page)
-//             if (url.searchParams.has(key)) {
-//                 hydrate?.(url.searchParams.get(key))
-//             }
-//         })
-//         /**
-//          * @param {string | null} value
-//         */
-//        return (value) => {
-
-//            /** @type {{url: URL}} */
-//            const {url} = get(page)
-//            if(!url.searchParams.has(key) && value){
-//                url.searchParams.append(key, value)
-//             } else if (value)
-//                 url.searchParams.set(key, value)
-//                 else
-//                 url.searchParams.delete(key)
-
-//             history.replaceState(null, "", `?${url.searchParams.toString()}`);
-//         }
-//     }
-// }
 // @ts-expect-error
 import { browser } from '$app/environment';
 
@@ -61,6 +23,7 @@ let timeout;
  * @param {string | null} value
  */
 export function updateUrlParam(key, value, debounceDelay = null) {
+	console.log('updateUrlParam', key, value);
 	if (browser) {
 		const url = new URL(window.location.href);
 
@@ -115,7 +78,7 @@ function parseUrlValue(value) {
 		parsed = JSON.parse(base64Decoded);
 		console.log('parsed', parsed);
 		// Return the parsed object if it's a valid object or array
-		if (typeof parsed === 'object' && parsed !== null) {
+		if ((typeof parsed === 'object' || typeof parsed === 'boolean') && parsed !== null) {
 			return parsed;
 		}
 	} catch {

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.stories.svelte
@@ -72,7 +72,7 @@
 <Story name="URL Params" let:args>
 	<Checkbox title="string true" defaultValue="true" name="string_true_url" {...args} />
 	<p>{$inputStore.string_true}</p>
-	<Checkbox title="boolean true" defaultValue={true} name="boolean_true_url" {...args} />
+	<Checkbox title="boolean true" checked={true} name="boolean_true_url" {...args} />
 	<p>{$inputStore.boolean_true}</p>
 
 	<div class="mt-4">URL: {storyIframeURL}</div>

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.svelte b/packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.svelte
@@ -36,17 +36,22 @@
 	/** @type {boolean | string} */
 	export let defaultValue = false;
 
-	hydrateFromUrlParam(name, (v) => (defaultValue = v ?? defaultValue));
-	$: defaultValue = toBoolean(defaultValue);
-	$: updateUrlParam(name, $inputs[name]);
-
 	if (defaultValue !== undefined) {
 		console.warn('`defaultValue` is deprecated. Please use the `checked` prop instead.');
 	}
+	hydrateFromUrlParam(name, (v) => {
+		if (v !== undefined && v !== null) {
+			checked = v;
+			defaultValue = v;
+		}
+	});
 
-	let isChecked = toBoolean(defaultValue) || toBoolean(checked);
+	$: isChecked = toBoolean(defaultValue) || toBoolean(checked);
 
-	$: $inputs[name] = isChecked;
+	$: {
+		$inputs[name] = isChecked;
+		updateUrlParam(name, isChecked);
+	}
 
 	// Error Handling
 	/** @type {[string]} */

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -211,7 +211,7 @@
 		!selectedDateInput &&
 		!selectedPreset &&
 		presets.length
-	){
+	) {
 		applyPreset(defaultValue);
 	}
 

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte b/packages/ui/core-components/src/lib/atoms/inputs/slider/_Slider.svelte
@@ -115,7 +115,7 @@
 
 	// URL params hydration
 	hydrateFromUrlParam(name, (v) => {
-		if (v[0]) {
+		if (v?.[0]) {
 			value = [v];
 		}
 	});

diff --git a/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionCut.svelte b/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionCut.svelte
@@ -36,6 +36,15 @@
 	/** @type {string | string[] | undefined}*/
 	let selectedValue = multiple ? [] : undefined;
 
+	if (multiple) {
+		selectedValue =
+			$selectedDimensions.filter((d) => d.dimension === dimension.column_name)[0]?.value ?? [];
+		console.log(selectedValue);
+	} else {
+		selectedValue = $selectedDimensions.filter((d) => d.dimension === dimension.column_name)[0]
+			?.value;
+	}
+
 	$: {
 		if (
 			selectedValue === undefined ||
@@ -174,6 +183,9 @@
 					{/each}
 				{/if}
 			</div>
+			<!-- this leaks no records for all columns causing user to get stuck -->
+			<!-- occurs during column update, users can click on 2 values that results in no records for all columns -->
+			<!-- seems to only be possible with slow updating columns after initial column value click, due to large data set -->
 		{:else}
 			<p class="text-xs text-base-content-muted p-2 my-2 w-full border border-dashed rounded">
 				No Records

diff --git a/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionGrid.stories.svelte b/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionGrid.stories.svelte
@@ -21,6 +21,35 @@
 	const dataPlay = Query.create('select plane, airline from flights', query);
 
 	const nullComboData = Query.create('select * from flights limit 1000', query);
+
+	let storyIframeURL = '';
+
+	const updateURL = () => {
+		storyIframeURL = window.location.href;
+
+		// Try forcing Storybook to recognize the change
+		const iframe = document.querySelector('iframe');
+		if (iframe) {
+			iframe.src = iframe.src; // Force reload
+		}
+	};
+
+	(function () {
+		const pushState = history.pushState;
+		const replaceState = history.replaceState;
+
+		history.pushState = function () {
+			pushState.apply(history, arguments);
+			updateURL();
+		};
+
+		history.replaceState = function () {
+			replaceState.apply(history, arguments);
+			updateURL();
+		};
+
+		window.addEventListener('popstate', updateURL);
+	})();
 </script>
 
 <Story name="Basic Usage">
@@ -252,3 +281,23 @@
 >
 	<DimensionGrid data={nullComboData} multiple fmt="usd" />
 </Story>
+<Story name="URL Params">
+	<DimensionGrid {data} name="urlParams" />
+	<div class="mt-4">URL: {storyIframeURL}</div>
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
+</Story>
+<Story name="URL Params Multiple">
+	<DimensionGrid {data} multiple name="urlParamsMultiple" />
+	<div class="mt-4">URL: {storyIframeURL}</div>
+	<button
+		class="mt-4 p-1 border bg-info/60 hover:bg-info/40 active:bg-info/20 rounded-md text-sm
+
+	"
+		on:click={() => window.open(storyIframeURL, '_blank')}>Go to URL</button
+	>
+</Story>
diff --git a/packages/ui/core-components/src/lib/molecules/dimension-grid/_DimensionGrid.svelte b/packages/ui/core-components/src/lib/molecules/dimension-grid/_DimensionGrid.svelte
@@ -26,14 +26,21 @@
 	export let title = undefined;
 	/** @type {string | undefined}*/
 	export let subtitle = undefined;
+	/** @type {string | string[] | undefined}*/
+	let selectedValue = [];
 
 	$: dimensions = data?.columns?.filter((col) => col.column_type === 'VARCHAR');
 	let selectedDimensions = writable([]);
 	setContext('selected-dimensions', selectedDimensions);
 
 	const inputs = getInputContext();
+	hydrateFromUrlParam(name, (v) => {
+		if (v !== undefined && v !== null) {
+			$selectedDimensions = v;
+		}
+	});
 	$: $inputs[name] = getWhereClause($selectedDimensions);
-	$: updateUrlParam(name, encodeURIComponent($inputs[name]));
+	$: updateUrlParam(name, $selectedDimensions);
 </script>
 
 {#if data === undefined}
@@ -57,7 +64,16 @@
 		{/if}
 		<div class="flex flex-nowrap overflow-auto sm:flex-wrap select-none">
 			{#each dimensions as dimension}
-				<DimensionCut {data} {dimension} {metric} {limit} {metricLabel} {multiple} {fmt} />
+				<DimensionCut
+					{data}
+					{dimension}
+					{metric}
+					{limit}
+					{metricLabel}
+					{multiple}
+					{fmt}
+					{selectedValue}
+				/>
 			{/each}
 		</div>
 	</div>