From 64e49f5bf036a546bb730002f77f0381cd282173 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 5 Nov 2024 14:44:33 -0500
Subject: [PATCH 1/7] type handled errorchart for z-index issue

---
 .../src/lib/unsorted/viz/core/ErrorChart.svelte      | 10 +++++++++-
 .../lib/unsorted/viz/table/DataTable.stories.svelte  | 12 ++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
index dcaa114472..c59ce2ff20 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
@@ -8,6 +8,14 @@
 	export let chartType;
 	export let minHeight = '150';
 
+	let zIndex = 0;
+
+	console.log(chartType);
+
+	if (chartType.includes('Map')) {
+		zIndex = 500;
+	}
+
 	const DevMissingCredentialsError = 'SQL Error: Missing datasource connection.';
 	const ProdMissingCredentialsError =
 		'SQL Error: Missing database connection; set the EVIDENCE_DATABASE environment variable.';
@@ -15,7 +23,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 z-[{zIndex}]"
 >
 	<div class="m-auto w-full">
 		<div class="font-bold text-center text-lg">
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index 17baf29953..e0c79ab244 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -8,6 +8,8 @@
 	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';
 
 	const mockGoto = fn();
 
@@ -331,3 +333,13 @@
 		{/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 flight 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)}
+	<PointMap data={la_locations} lat="lat" long="longasdas" value="sales" legend={false} />
+</Story>

From 82d400f4d1a657154f2e2239ddfd7ab4ae6905a3 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 5 Nov 2024 16:05:15 -0500
Subject: [PATCH 2/7] moved error chart handling to appear before leaeflet map
 container renders

---
 .../lib/unsorted/viz/core/ErrorChart.svelte   | 10 +-------
 .../src/lib/unsorted/viz/map/AreaMap.svelte   |  8 +++++--
 .../src/lib/unsorted/viz/map/BaseMap.svelte   | 13 ++++++++++-
 .../src/lib/unsorted/viz/map/EvidenceMap.js   | 12 ++++++++++
 .../src/lib/unsorted/viz/map/PointMap.svelte  |  9 ++++++--
 .../unsorted/viz/map/components/Areas.svelte  |  5 ++--
 .../unsorted/viz/map/components/Points.svelte |  5 ++--
 .../viz/table/DataTable.stories.svelte        | 23 ++++++++++++++++++-
 8 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
index c59ce2ff20..df08935ea3 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte
@@ -8,14 +8,6 @@
 	export let chartType;
 	export let minHeight = '150';
 
-	let zIndex = 0;
-
-	console.log(chartType);
-
-	if (chartType.includes('Map')) {
-		zIndex = 500;
-	}
-
 	const DevMissingCredentialsError = 'SQL Error: Missing datasource connection.';
 	const ProdMissingCredentialsError =
 		'SQL Error: Missing database connection; set the EVIDENCE_DATABASE environment variable.';
@@ -23,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-[{zIndex}]"
+	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">
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
index 4f2e514c47..d76c1a9a8f 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
@@ -74,13 +74,13 @@
 
 <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>
-
+	<!-- move dispatch error outside of areas to render error outisde leafletmaps -->
+	{#if !error}
 	<BaseMap {startingLat} {startingLong} {startingZoom} {height} {basemap} {title} {legendPosition}>
 		<Areas
 			data={loaded}
@@ -91,6 +91,10 @@
 			{chartType}
 			{legend}
 			{...$$restProps}
+			on:error={(e) => error = e.detail}
 		/>
 	</BaseMap>
+	{:else}
+	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
+	{/if}
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
index 58b9089ab0..754b480ffd 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
@@ -54,6 +54,15 @@
 		evidenceMap.updateLegendPosition(legendPosition);
 	}
 
+
+	let internalError = evidenceMap.internalError;
+
+	$: console.log($internalError);
+
+	$: if ($internalError !== undefined) {
+		error = $internalError;
+	}
+
 	// Lifecycle hooks:
 	onMount(async () => {
 		if (browser) {
@@ -83,7 +92,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}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
index 63feed73c4..c35cdbd0e8 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
@@ -619,4 +619,16 @@ 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);
+	}
 }
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
index 73312f64b4..8b5dc642b3 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -71,8 +71,8 @@
 
 <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 -->
+	{#if !error}
 	<div class="relative">
 		<BaseMap
 			{startingLat}
@@ -92,7 +92,12 @@
 				{chartType}
 				{...$$restProps}
 				{legend}
+				on:error={(e) => error = e.detail}
 			/>
 		</BaseMap>
 	</div>
+	{:else}
+	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
+	{/if}
 </QueryLoad>
+
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
index 8979c1b1a9..ee0f9503cf 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
@@ -8,8 +8,9 @@
 	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 { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	const inputs = getInputContext();
@@ -334,6 +335,6 @@
 			/>
 		{/each}
 	{:catch e}
-		<ErrorChart error={e} chartType="Area Map" />
+		{map.handleInternalError(e)}
 	{/await}
 {/await}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
index 952cc22a59..e36288df62 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
@@ -7,8 +7,9 @@
 	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';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 
 	/** @type {import("../EvidenceMap.js").EvidenceMap | undefined} */
 	const map = getContext(mapContextKey);
@@ -350,5 +351,5 @@
 		/>
 	{/each}
 {:catch e}
-	<ErrorChart error={e} chartType="Point Map" />
+	{map.handleInternalError(e)}
 {/await}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index e0c79ab244..d96a7cc734 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -10,6 +10,10 @@
 	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 Point from "../map/components/Point.svelte";
+	import Points from "../map/components/Points.svelte";
 
 	const mockGoto = fn();
 
@@ -341,5 +345,22 @@
 	<DataTable {data} />
 	<Dropdown name="test" {data2} value="value" label="label" />
 	{@const la_locations = Query.create(`select * from la_locations order by 1`, query)}
-	<PointMap data={la_locations} lat="lat" long="longasdas" value="sales" legend={false} />
+	<PointMap data={la_locations} lat="lat" long="longg" value="sales" legend={false} />
+	<Dropdown name="test" {data2} value="value" label="label" />
+	<BaseMap>
+		<Points
+			data={la_locations}
+			lat="lat"
+			long="longg"
+			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
+	)}
+	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codesadasdasds" />
 </Story>

From 77e4fb35b1113dc4059a1762a0fa2381506eedcb Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 5 Nov 2024 16:09:27 -0500
Subject: [PATCH 3/7] chore: format

---
 .../src/lib/unsorted/viz/map/AreaMap.svelte   | 36 ++++++++------
 .../src/lib/unsorted/viz/map/BaseMap.svelte   |  7 ++-
 .../src/lib/unsorted/viz/map/EvidenceMap.js   |  5 +-
 .../src/lib/unsorted/viz/map/PointMap.svelte  | 49 +++++++++----------
 .../viz/table/DataTable.stories.svelte        |  8 +--
 5 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
index d76c1a9a8f..9bbf3237de 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
@@ -81,20 +81,28 @@
 	</div>
 	<!-- move dispatch error outside of areas to render error outisde leafletmaps -->
 	{#if !error}
-	<BaseMap {startingLat} {startingLong} {startingZoom} {height} {basemap} {title} {legendPosition}>
-		<Areas
-			data={loaded}
-			{geoJsonUrl}
-			{geoId}
-			{areaCol}
-			{legendType}
-			{chartType}
-			{legend}
-			{...$$restProps}
-			on:error={(e) => error = e.detail}
-		/>
-	</BaseMap>
+		<BaseMap
+			{startingLat}
+			{startingLong}
+			{startingZoom}
+			{height}
+			{basemap}
+			{title}
+			{legendPosition}
+		>
+			<Areas
+				data={loaded}
+				{geoJsonUrl}
+				{geoId}
+				{areaCol}
+				{legendType}
+				{chartType}
+				{legend}
+				{...$$restProps}
+				on:error={(e) => (error = e.detail)}
+			/>
+		</BaseMap>
 	{:else}
-	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
+		<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
 	{/if}
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
index 754b480ffd..ceaab2971b 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
@@ -54,7 +54,6 @@
 		evidenceMap.updateLegendPosition(legendPosition);
 	}
 
-
 	let internalError = evidenceMap.internalError;
 
 	$: console.log($internalError);
@@ -92,9 +91,9 @@
 			style="height: {height}px;"
 			bind:this={mapElement}
 		>
-		<div on:dispatcherror={(e) => (error = e.detail)}>
-			<slot />
-		  </div>
+			<div on:dispatcherror={(e) => (error = e.detail)}>
+				<slot />
+			</div>
 			{#if $legendData}
 				<Legend {legendData} {legendPosition} {height} />
 			{/if}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
index c35cdbd0e8..ff95d652e5 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
@@ -620,9 +620,10 @@ export class EvidenceMap {
 		return paneId;
 	}
 
-	handleInternalError (internalError) {
+	handleInternalError(internalError) {
 		if (internalError) {
-			this.#internalError.set(internalError);		}
+			this.#internalError.set(internalError);
+		}
 	}
 
 	/**@type {import('svelte/store').Writable<string | undefined>} */
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
index 8b5dc642b3..cbda62b49b 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -73,31 +73,30 @@
 	<EmptyChart slot="empty" {emptyMessage} {emptySet} {chartType} {isInitial} />
 	<!-- move dispatch error outside of points to render error outisde leafletmaps -->
 	{#if !error}
-	<div class="relative">
-		<BaseMap
-			{startingLat}
-			{startingLong}
-			{startingZoom}
-			{height}
-			{basemap}
-			{title}
-			{legendPosition}
-		>
-			<Points
-				data={loaded}
-				{lat}
-				{long}
-				{colorPalette}
-				{legendType}
-				{chartType}
-				{...$$restProps}
-				{legend}
-				on:error={(e) => error = e.detail}
-			/>
-		</BaseMap>
-	</div>
+		<div class="relative">
+			<BaseMap
+				{startingLat}
+				{startingLong}
+				{startingZoom}
+				{height}
+				{basemap}
+				{title}
+				{legendPosition}
+			>
+				<Points
+					data={loaded}
+					{lat}
+					{long}
+					{colorPalette}
+					{legendType}
+					{chartType}
+					{...$$restProps}
+					{legend}
+					on:error={(e) => (error = e.detail)}
+				/>
+			</BaseMap>
+		</div>
 	{:else}
-	<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
+		<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
 	{/if}
 </QueryLoad>
-
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index d96a7cc734..2de3af9d9b 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -10,10 +10,10 @@
 	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 Point from "../map/components/Point.svelte";
-	import Points from "../map/components/Points.svelte";
+	import AreaMap from '../map/AreaMap.svelte';
+	import BaseMap from '../map/BaseMap.svelte';
+	import Point from '../map/components/Point.svelte';
+	import Points from '../map/components/Points.svelte';
 
 	const mockGoto = fn();
 

From 6ecef713ff14934a62d61c89a8cd162bbc265141 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 5 Nov 2024 16:17:02 -0500
Subject: [PATCH 4/7] chore: changeset

---
 .changeset/chatty-tomatoes-play.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/chatty-tomatoes-play.md

diff --git a/.changeset/chatty-tomatoes-play.md b/.changeset/chatty-tomatoes-play.md
new file mode 100644
index 0000000000..d269c40619
--- /dev/null
+++ b/.changeset/chatty-tomatoes-play.md
@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fixed Error Chart layering, updated Maps errorchart handling
+

From aef6d6138c20095bef3639c7581b9e3174a86f2b Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Tue, 5 Nov 2024 16:59:34 -0500
Subject: [PATCH 5/7] chore: linted

---
 .../src/lib/unsorted/viz/map/components/Areas.svelte           | 3 ---
 .../src/lib/unsorted/viz/map/components/Points.svelte          | 2 --
 .../src/lib/unsorted/viz/table/DataTable.stories.svelte        | 1 -
 3 files changed, 6 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
index ee0f9503cf..f554889f06 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
@@ -9,9 +9,6 @@
 	import MapArea from './MapArea.svelte';
 	import { uiColours } from '@evidence-dev/component-utilities/colours';
 	import { nanoid } from 'nanoid';
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	const inputs = getInputContext();
 
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
index e36288df62..ae9c6d6868 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
@@ -8,8 +8,6 @@
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import Point from './Point.svelte';
 	import { getColumnExtentsLegacy } from '@evidence-dev/component-utilities/getColumnExtents';
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
 
 	/** @type {import("../EvidenceMap.js").EvidenceMap | undefined} */
 	const map = getContext(mapContextKey);
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index 2de3af9d9b..daf12ed745 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -12,7 +12,6 @@
 	import PointMap from '../map/PointMap.svelte';
 	import AreaMap from '../map/AreaMap.svelte';
 	import BaseMap from '../map/BaseMap.svelte';
-	import Point from '../map/components/Point.svelte';
 	import Points from '../map/components/Points.svelte';
 
 	const mockGoto = fn();

From ed46b8d2ece0b913300f7086f2de7859c9a588bf Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Wed, 6 Nov 2024 09:29:08 -0500
Subject: [PATCH 6/7] cleaned up error message chart type

---
 .../core-components/src/lib/unsorted/viz/map/AreaMap.svelte  | 1 +
 .../core-components/src/lib/unsorted/viz/map/BaseMap.svelte  | 5 ++++-
 .../core-components/src/lib/unsorted/viz/map/PointMap.svelte | 1 +
 .../src/lib/unsorted/viz/table/DataTable.stories.svelte      | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
index 9bbf3237de..36c04a5277 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
@@ -89,6 +89,7 @@
 			{basemap}
 			{title}
 			{legendPosition}
+			{chartType}
 		>
 			<Areas
 				data={loaded}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
index ceaab2971b..8cd0ce2166 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.svelte
@@ -62,6 +62,9 @@
 		error = $internalError;
 	}
 
+	/** @type {'Point Map'|'Area Map'|'Bubble Map'|'Map'} */
+	export let chartType = 'Map';
+
 	// Lifecycle hooks:
 	onMount(async () => {
 		if (browser) {
@@ -80,7 +83,7 @@
 </script>
 
 {#if error}
-	<ErrorChart {error} chartType="Map" />
+	<ErrorChart {error} {chartType} />
 {:else}
 	<div class="relative break-inside-avoid">
 		{#if title}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
index cbda62b49b..3e6acd8b16 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -82,6 +82,7 @@
 				{basemap}
 				{title}
 				{legendPosition}
+				{chartType}
 			>
 				<Points
 					data={loaded}
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index daf12ed745..433711eff0 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -343,7 +343,7 @@
 	{@const data = Query.create(`SELECT * from flight 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)}
+	{@const la_locations = Query.create(`select * from la_locati order by 1`, query)}
 	<PointMap data={la_locations} lat="lat" long="longg" value="sales" legend={false} />
 	<Dropdown name="test" {data2} value="value" label="label" />
 	<BaseMap>

From 2611d5c4ea753ace0606807b5e7f7a26f2d4b044 Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Wed, 6 Nov 2024 09:39:24 -0500
Subject: [PATCH 7/7] fine tuned error messaging

---
 .../src/lib/unsorted/viz/map/AreaMap.svelte   | 49 ++++++++----------
 .../src/lib/unsorted/viz/map/PointMap.svelte  | 51 +++++++++----------
 .../viz/table/DataTable.stories.svelte        | 13 +++--
 3 files changed, 54 insertions(+), 59 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
index 36c04a5277..fe95402ae1 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
@@ -74,36 +74,31 @@
 
 <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>
-	<!-- move dispatch error outside of areas to render error outisde leafletmaps -->
-	{#if !error}
-		<BaseMap
-			{startingLat}
-			{startingLong}
-			{startingZoom}
-			{height}
-			{basemap}
-			{title}
-			{legendPosition}
+	<BaseMap
+		{startingLat}
+		{startingLong}
+		{startingZoom}
+		{height}
+		{basemap}
+		{title}
+		{legendPosition}
+		{chartType}
+	>
+		<Areas
+			data={loaded}
+			{geoJsonUrl}
+			{geoId}
+			{areaCol}
+			{legendType}
 			{chartType}
-		>
-			<Areas
-				data={loaded}
-				{geoJsonUrl}
-				{geoId}
-				{areaCol}
-				{legendType}
-				{chartType}
-				{legend}
-				{...$$restProps}
-				on:error={(e) => (error = e.detail)}
-			/>
-		</BaseMap>
-	{:else}
-		<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
-	{/if}
+			{legend}
+			{...$$restProps}
+			on:error={(e) => (error = e.detail)}
+		/>
+	</BaseMap>
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
index 3e6acd8b16..a4b25c6e0b 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -71,33 +71,30 @@
 
 <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 -->
-	{#if !error}
-		<div class="relative">
-			<BaseMap
-				{startingLat}
-				{startingLong}
-				{startingZoom}
-				{height}
-				{basemap}
-				{title}
-				{legendPosition}
+	<div class="relative">
+		<BaseMap
+			{startingLat}
+			{startingLong}
+			{startingZoom}
+			{height}
+			{basemap}
+			{title}
+			{legendPosition}
+			{chartType}
+		>
+			<Points
+				data={loaded}
+				{lat}
+				{long}
+				{colorPalette}
+				{legendType}
 				{chartType}
-			>
-				<Points
-					data={loaded}
-					{lat}
-					{long}
-					{colorPalette}
-					{legendType}
-					{chartType}
-					{...$$restProps}
-					{legend}
-					on:error={(e) => (error = e.detail)}
-				/>
-			</BaseMap>
-		</div>
-	{:else}
-		<ErrorChart let:loaded slot="error" {chartType} error={error ?? loaded.error.message} />
-	{/if}
+				{...$$restProps}
+				{legend}
+				on:error={(e) => (error = e.detail)}
+			/>
+		</BaseMap>
+	</div>
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
index 433711eff0..f05e94ba15 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
@@ -340,17 +340,19 @@
 <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 flight LIMIT 1000`, query)}
+	{@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_locati order by 1`, query)}
-	<PointMap data={la_locations} lat="lat" long="longg" value="sales" legend={false} />
+	{@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="longg"
+			long="longERROR"
 			value="sales"
 			legend={false}
 			tooltipType="hover"
@@ -361,5 +363,6 @@
 		`select * from la_zip_sales where zip_code <> 90704 order by 1`,
 		query
 	)}
-	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codesadasdasds" />
+	<h3>AreaMap Error</h3>
+	<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codeERROR" />
 </Story>