Fix/2719 error component

.changeset/chatty-tomatoes-play.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fixed Error Chart layering, updated Maps errorchart handling
+

packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte

@@ -15,7 +15,7 @@
 
 <div
 	width="100%"
-	class="grid grid-rows-auto box-content grid-cols-1 justify-center bg-red-50 text-grey-700 font-ui font-normal rounded border border-red-200 min-h-[{minHeight}px] py-5 px-8 my-5 print:break-inside-avoid relative z-[500]"
+	class="grid grid-rows-auto box-content grid-cols-1 justify-center bg-red-50 text-grey-700 font-ui font-normal rounded border border-red-200 min-h-[{minHeight}px] py-5 px-8 my-5 print:break-inside-avoid relative"
 >
 	<div class="m-auto w-full">
 		<div class="font-bold text-center text-lg">

packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte

@@ -75,13 +75,20 @@
 <QueryLoad {data} let:loaded>
 	<EmptyChart slot="empty" {emptyMessage} {emptySet} {chartType} {isInitial} />
 	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
-
 	<!-- Override default skeleton to match height of map -->
 	<div slot="skeleton" class="w-full" style="height: {height}px">
 		<Skeleton />
 	</div>
-
-	<BaseMap {startingLat} {startingLong} {startingZoom} {height} {basemap} {title} {legendPosition}>
+	<BaseMap
+		{startingLat}
+		{startingLong}
+		{startingZoom}
+		{height}
+		{basemap}
+		{title}
+		{legendPosition}
+		{chartType}
+	>
 		<Areas
 			data={loaded}
 			{geoJsonUrl}
@@ -91,6 +98,7 @@
 			{chartType}
 			{legend}
 			{...$$restProps}
+			on:error={(e) => (error = e.detail)}
 		/>
 	</BaseMap>
 </QueryLoad>

packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte

@@ -54,6 +54,17 @@
 		evidenceMap.updateLegendPosition(legendPosition);
 	}
 
+	let internalError = evidenceMap.internalError;
+
+	$: console.log($internalError);
+
+	$: if ($internalError !== undefined) {
+		error = $internalError;
+	}
+
+	/** @type {'Point Map'|'Area Map'|'Bubble Map'|'Map'} */
+	export let chartType = 'Map';
+
 	// Lifecycle hooks:
 	onMount(async () => {
 		if (browser) {
@@ -72,7 +83,7 @@
 </script>
 
 {#if error}
-	<ErrorChart {error} chartType="Map" />
+	<ErrorChart {error} {chartType} />
 {:else}
 	<div class="relative break-inside-avoid">
 		{#if title}
@@ -83,7 +94,9 @@
 			style="height: {height}px;"
 			bind:this={mapElement}
 		>
-			<slot></slot>
+			<div on:dispatcherror={(e) => (error = e.detail)}>
+				<slot />
+			</div>
 			{#if $legendData}
 				<Legend {legendData} {legendPosition} {height} />
 			{/if}

packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js

@@ -619,4 +619,17 @@ export class EvidenceMap {
 
 		return paneId;
 	}
+
+	handleInternalError(internalError) {
+		if (internalError) {
+			this.#internalError.set(internalError);
+		}
+	}
+
+	/**@type {import('svelte/store').Writable<string | undefined>} */
+	#internalError = writable(undefined);
+
+	get internalError() {
+		return readonly(this.#internalError);
+	}
 }

packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte

@@ -72,7 +72,7 @@
 <QueryLoad {data} let:loaded>
 	<EmptyChart slot="empty" {emptyMessage} {emptySet} {chartType} {isInitial} />
 	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
-
+	<!-- move dispatch error outside of points to render error outisde leafletmaps -->
 	<div class="relative">
 		<BaseMap
 			{startingLat}
@@ -82,6 +82,7 @@
 			{basemap}
 			{title}
 			{legendPosition}
+			{chartType}
 		>
 			<Points
 				data={loaded}
@@ -92,6 +93,7 @@
 				{chartType}
 				{...$$restProps}
 				{legend}
+				on:error={(e) => (error = e.detail)}
 			/>
 		</BaseMap>
 	</div>

packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte

@@ -8,9 +8,7 @@
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import MapArea from './MapArea.svelte';
 	import { uiColours } from '@evidence-dev/component-utilities/colours';
-	import ErrorChart from '../../core/ErrorChart.svelte';
 	import { nanoid } from 'nanoid';
-
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	const inputs = getInputContext();
 
@@ -334,6 +332,6 @@
 			/>
 		{/each}
 	{:catch e}
-		<ErrorChart error={e} chartType="Area Map" />
+		{map.handleInternalError(e)}
 	{/await}
 {/await}

packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte

@@ -7,7 +7,6 @@
 	import { getContext } from 'svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import Point from './Point.svelte';
-	import ErrorChart from '../../core/ErrorChart.svelte';
 	import { getColumnExtentsLegacy } from '@evidence-dev/component-utilities/getColumnExtents';
 
 	/** @type {import("../EvidenceMap.js").EvidenceMap | undefined} */
@@ -350,5 +349,5 @@
 		/>
 	{/each}
 {:catch e}
-	<ErrorChart error={e} chartType="Point Map" />
+	{map.handleInternalError(e)}
 {/await}

packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte

@@ -8,6 +8,11 @@
 	import ButtonGroupItem from '../../../atoms/inputs/button-group/ButtonGroupItem.svelte';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	import { expect, userEvent, within, fn } from '@storybook/test';
+	import Dropdown from '$lib/atoms/inputs/dropdown/Dropdown.svelte';
+	import PointMap from '../map/PointMap.svelte';
+	import AreaMap from '../map/AreaMap.svelte';
+	import BaseMap from '../map/BaseMap.svelte';
+	import Points from '../map/components/Points.svelte';
 
 	const mockGoto = fn();
 
@@ -331,3 +336,33 @@
 		{/if}
 	</DataTable>
 </Story>
+
+<Story name="error chart test">
+	{@const data2 = Query.create(`SELECT id as value, tag as label from hashtags`, query)}
+	<Dropdown name="test" {data2} value="value" label="label" />
+	{@const data = Query.create(`SELECT * from flightsERROR LIMIT 1000`, query)}
+	<DataTable {data} />
+	<Dropdown name="test" {data2} value="value" label="label" />
+	{@const la_locations = Query.create(`select * from la_locations order by 1`, query)}
+	<h3>PointMap Error</h3>
+	<PointMap data={la_locations} lat="lat" long="longERROR" value="sales" legend={false} />
+	<Dropdown name="test" {data2} value="value" label="label" />
+	<h3>BaseMap Error</h3>
+	<BaseMap>
+		<Points
+			data={la_locations}
+			lat="lat"
+			long="longERROR"
+			value="sales"
+			legend={false}
+			tooltipType="hover"
+		/>
+	</BaseMap>
+	<Dropdown name="test" {data2} value="value" label="label" />
+	{@const la_zip_sales = Query.create(
+		`select * from la_zip_sales where zip_code <> 90704 order by 1`,
+		query
+	)}
+	<h3>AreaMap Error</h3>
+	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codeERROR" />
+</Story>