From d4baeb722bf25523c58f725de613960e43cdfa0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Mon, 9 Dec 2024 15:07:24 +0100
Subject: [PATCH 1/6] feat: add legend to geojson map (#177)

---
 components/geojson-map-legend.vue         | 40 +++++++++++++++++++++++
 components/geojson-map-window-content.vue |  5 +++
 2 files changed, 45 insertions(+)
 create mode 100644 components/geojson-map-legend.vue

diff --git a/components/geojson-map-legend.vue b/components/geojson-map-legend.vue
new file mode 100644
index 0000000..6a24aa9
--- /dev/null
+++ b/components/geojson-map-legend.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { GeojsonMapSchema } from "@/types/global";
+
+interface Props {
+	params: Zod.infer<typeof GeojsonMapSchema>["params"];
+}
+
+const props = defineProps<Props>();
+const { params } = toRefs(props);
+
+const { colors } = useColorsStore();
+const GeojsonStore = useGeojsonStore();
+const { tables } = storeToRefs(GeojsonStore);
+
+const table = computed(() => tables.value.get(params.value.url));
+const activeFeatures = computed(() =>
+	table.value?.getVisibleLeafColumns().filter((col) => col.getCanHide()),
+);
+const activeRows = computed(() => table.value?.getFilteredRowModel().rows);
+function getMatchingRowCount(columnId: string) {
+	return activeRows.value?.filter((row) => (row.getValue(columnId) as Array<unknown>).length > 0)
+		.length;
+}
+</script>
+
+<template>
+	<div class="bg-white/80 p-2 text-xs">
+		<span
+			><b>{{ activeRows?.length }} total markers</b></span
+		>
+		<div v-for="feature in activeFeatures" :key="feature.id" class="flex items-start gap-2">
+			<svg class="mt-0.5 size-3.5">
+				<use :fill="colors.get(feature.id)?.colorCode" href="#petal"></use>
+			</svg>
+			<span class="w-32"
+				>{{ feature.columnDef.header }} ({{ getMatchingRowCount(feature.id) }})</span
+			>
+		</div>
+	</div>
+</template>
diff --git a/components/geojson-map-window-content.vue b/components/geojson-map-window-content.vue
index f870662..a2aebd0 100644
--- a/components/geojson-map-window-content.vue
+++ b/components/geojson-map-window-content.vue
@@ -43,6 +43,11 @@ const filteredMarkers = computed(() => {
 			<Centered v-if="!filteredMarkers">
 				<LoadingIndicator />
 			</Centered>
+			<GeojsonMapLegend
+				v-if="filteredMarkers"
+				class="absolute bottom-0 left-0"
+				:params="params"
+			></GeojsonMapLegend>
 		</VisualisationContainer>
 	</div>
 </template>

From 4f97b9e931452d9fe7e1bf67899fde61cc732de6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Mon, 9 Dec 2024 16:46:29 +0100
Subject: [PATCH 2/6] chore: set color automatically when column visibility
 changes

---
 components/data-table/data-table.vue        | 6 +++++-
 components/geojson-map-toolbar.vue          | 3 +--
 components/geojson-table-window-content.vue | 9 ++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/data-table/data-table.vue b/components/data-table/data-table.vue
index f7b3db2..022da1b 100644
--- a/components/data-table/data-table.vue
+++ b/components/data-table/data-table.vue
@@ -83,7 +83,11 @@ const table = useVueTable({
 			typeof updaterOrValue === "function"
 				? updaterOrValue(columnVisibility.value)
 				: updaterOrValue;
-		emit("columnVisibilityChange", table);
+		emit("columnVisibilityChange", {
+			table,
+			//@ts-expect-error missing optional argument for updaterOrValue()
+			col: typeof updaterOrValue === "function" ? updaterOrValue() : updaterOrValue,
+		});
 	},
 	getCoreRowModel: getCoreRowModel(),
 	getPaginationRowModel: getPaginationRowModel(),
diff --git a/components/geojson-map-toolbar.vue b/components/geojson-map-toolbar.vue
index 4ae80f4..e4855ad 100644
--- a/components/geojson-map-toolbar.vue
+++ b/components/geojson-map-toolbar.vue
@@ -32,7 +32,7 @@ const isCollapsibleOpen = ref(
 	),
 );
 
-const { colors, addColor, setColor } = useColorsStore();
+const { colors, setColor } = useColorsStore();
 </script>
 
 <template>
@@ -87,7 +87,6 @@ const { colors, addColor, setColor } = useColorsStore();
 										(value) => {
 											column.toggleVisibility(!!value);
 											column.setFilterValue([]);
-											if (!colors.has(column.id)) addColor(column.id);
 										}
 									"
 								>
diff --git a/components/geojson-table-window-content.vue b/components/geojson-table-window-content.vue
index 23c85e8..14ca55d 100644
--- a/components/geojson-table-window-content.vue
+++ b/components/geojson-table-window-content.vue
@@ -149,6 +149,13 @@ function applyGlobalFilter(table: Table<FeatureType>) {
 	table.setGlobalFilter(true);
 }
 
+const { colors, addColor } = useColorsStore();
+function onVisibilityChange(props: { table: Table<FeatureType>; col: Record<string, boolean> }) {
+	applyGlobalFilter(props.table);
+	const changedColumnKey = Object.keys(props.col)[0]!;
+	const visibilityValue = props.col[changedColumnKey]!;
+	if (visibilityValue && !colors.has(changedColumnKey)) addColor(changedColumnKey);
+}
 function registerTable(table: Table<FeatureType>) {
 	tables.value.set(url, table);
 	const mw = findWindowByTypeAndParam("GeojsonMap", "url", url);
@@ -202,7 +209,7 @@ function registerTable(table: Table<FeatureType>) {
 			:initial-column-visibility="columnVisibility"
 			:items="fetchedData.get(url)?.features as Array<never>"
 			:min-header-depth="2"
-			@column-visibility-change="applyGlobalFilter"
+			@column-visibility-change="onVisibilityChange"
 			@table-ready="registerTable"
 		></DataTable>
 		<div class="grid justify-items-end py-2">

From 815471f977350929bd7d8dad901a70ebb03dbfe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Tue, 10 Dec 2024 10:35:49 +0100
Subject: [PATCH 3/6] style: make legend collapsible

---
 components/geojson-map-legend.vue | 33 ++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/geojson-map-legend.vue b/components/geojson-map-legend.vue
index 6a24aa9..f1634f0 100644
--- a/components/geojson-map-legend.vue
+++ b/components/geojson-map-legend.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ChevronDown } from "lucide-vue-next";
+
 import type { GeojsonMapSchema } from "@/types/global";
 
 interface Props {
@@ -8,7 +10,6 @@ interface Props {
 const props = defineProps<Props>();
 const { params } = toRefs(props);
 
-const { colors } = useColorsStore();
 const GeojsonStore = useGeojsonStore();
 const { tables } = storeToRefs(GeojsonStore);
 
@@ -21,20 +22,28 @@ function getMatchingRowCount(columnId: string) {
 	return activeRows.value?.filter((row) => (row.getValue(columnId) as Array<unknown>).length > 0)
 		.length;
 }
+const collapsibleOpen = ref(true);
 </script>
 
 <template>
-	<div class="bg-white/80 p-2 text-xs">
-		<span
-			><b>{{ activeRows?.length }} total markers</b></span
-		>
-		<div v-for="feature in activeFeatures" :key="feature.id" class="flex items-start gap-2">
-			<svg class="mt-0.5 size-3.5">
-				<use :fill="colors.get(feature.id)?.colorCode" href="#petal"></use>
-			</svg>
-			<span class="w-32"
-				>{{ feature.columnDef.header }} ({{ getMatchingRowCount(feature.id) }})</span
+	<Collapsible v-model:open="collapsibleOpen">
+		<div class="w-48 bg-white/80 p-3 text-xs">
+			<CollapsibleTrigger class="flex w-full justify-between"
+				><b>{{ activeRows?.length }} total markers</b
+				><ChevronDown class="size-4" :class="collapsibleOpen ? '' : 'rotate-180'"></ChevronDown
+			></CollapsibleTrigger>
+			<CollapsibleContent>
+				<div
+					v-for="feature in activeFeatures"
+					:key="feature.id"
+					class="my-1 flex items-start gap-2"
+				>
+					<svg class="mt-0.5 size-3.5">
+						<use href="#petal" :style="{ fill: `var(--${feature.id})` }"></use>
+					</svg>
+					<span>{{ feature.columnDef.header }} ({{ getMatchingRowCount(feature.id) }})</span>
+				</div></CollapsibleContent
 			>
 		</div>
-	</div>
+	</Collapsible>
 </template>

From 1536a1a42f5da5657baa876f8dbe2320f134b474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Tue, 10 Dec 2024 15:39:44 +0100
Subject: [PATCH 4/6] fix: filter empty subcategories

---
 components/geojson-table-window-content.vue | 79 +++++++++++----------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/components/geojson-table-window-content.vue b/components/geojson-table-window-content.vue
index 14ca55d..ffaa9a3 100644
--- a/components/geojson-table-window-content.vue
+++ b/components/geojson-table-window-content.vue
@@ -47,44 +47,49 @@ const columns = computed(() => {
 		if (col.header in categories) {
 			subcategoryColumns = Object.entries(
 				categories[col.header]?.subcategories ?? { [col.header]: categories[col.header]?.title },
-			).map(([categoryName, categoryLabel]) => {
-				return columnHelper.group({
-					header: String(categoryLabel),
-					id: String(categoryName),
-					//@ts-expect-error type mismatch in accessorFn
-					columns: columnHeadings
-						.filter((heading) => heading.category === categoryName)
-						.map((heading) => {
-							return {
-								id: Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "",
-								header: heading[Object.keys(heading).find((key) => /ft_*/.test(key)) ?? ""],
-								cell: (cell: CellContext<FeatureType, never>) => {
-									return h(resolveComponent("GeojsonTablePropertyCell"), {
-										value: cell.row.original.properties[cell.column.columnDef.id!],
-									});
-								},
-								accessorFn: (cell: FeatureType) => {
-									return Object.keys(
-										cell.properties[
-											String(Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "")
-										] ?? {},
-									);
-								},
-								filterFn: (row, columnId, filterValue) => {
-									if (!row.getVisibleCells().find((cell) => cell.column.id === columnId)) {
-										return true;
-									}
-									if (Object.keys(filterValue).length === 0) return true;
-									const filter = Object.values(filterValue).some((val) =>
-										(row.getValue(columnId) as Array<string>).includes(String(val)),
-									);
-									return filter;
-								},
-								enableGlobalFilter: true,
-							};
-						}),
+			)
+				.filter(
+					([categoryName, _]) =>
+						columnHeadings!.filter((heading) => heading.category === categoryName).length > 0,
+				)
+				.map(([categoryName, categoryLabel]) => {
+					return columnHelper.group({
+						header: String(categoryLabel),
+						id: String(categoryName),
+						//@ts-expect-error type mismatch in accessorFn
+						columns: columnHeadings
+							.filter((heading) => heading.category === categoryName)
+							.map((heading) => {
+								return {
+									id: Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "",
+									header: heading[Object.keys(heading).find((key) => /ft_*/.test(key)) ?? ""],
+									cell: (cell: CellContext<FeatureType, never>) => {
+										return h(resolveComponent("GeojsonTablePropertyCell"), {
+											value: cell.row.original.properties[cell.column.columnDef.id!],
+										});
+									},
+									accessorFn: (cell: FeatureType) => {
+										return Object.keys(
+											cell.properties[
+												String(Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "")
+											] ?? {},
+										);
+									},
+									filterFn: (row, columnId, filterValue) => {
+										if (!row.getVisibleCells().find((cell) => cell.column.id === columnId)) {
+											return true;
+										}
+										if (Object.keys(filterValue).length === 0) return true;
+										const filter = Object.values(filterValue).some((val) =>
+											(row.getValue(columnId) as Array<string>).includes(String(val)),
+										);
+										return filter;
+									},
+									enableGlobalFilter: true,
+								};
+							}),
+					});
 				});
-			});
 		} else {
 			subcategoryColumns = [
 				columnHelper.group({

From c6bed2aa56e02130b37499777e213d60aed9fee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Mon, 16 Dec 2024 12:50:13 +0100
Subject: [PATCH 5/6] chore: custom color picker design

---
 components/geojson-map-toolbar.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/geojson-map-toolbar.vue b/components/geojson-map-toolbar.vue
index e4855ad..aa2b78c 100644
--- a/components/geojson-map-toolbar.vue
+++ b/components/geojson-map-toolbar.vue
@@ -91,9 +91,21 @@ const { colors, setColor } = useColorsStore();
 									"
 								>
 									<span class="flex-1">{{ column.columnDef.header }}</span>
-									<label v-if="column.getIsVisible()" class="grow-0 basis-0 p-0">
+
+									<label
+										v-if="column.getIsVisible()"
+										class="ml-3 flex grow-0 basis-0 items-center p-0"
+										@click.capture.stop
+									>
+										<div
+											class="size-4 rounded"
+											:style="{
+												backgroundColor: `var(--${column.id})`,
+												stroke: `var(--${column.id})`,
+											}"
+										></div>
 										<input
-											class="size-5"
+											class="size-0"
 											type="color"
 											:value="colors.get(column.id)?.colorCode || '#cccccc'"
 											@click.capture.stop

From 8b52345ee062ac17a5aff20491bcb2cdc57f88ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Mon, 16 Dec 2024 12:56:19 +0100
Subject: [PATCH 6/6] style: group category label and badge

---
 components/geojson-map-toolbar.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/geojson-map-toolbar.vue b/components/geojson-map-toolbar.vue
index aa2b78c..bac788f 100644
--- a/components/geojson-map-toolbar.vue
+++ b/components/geojson-map-toolbar.vue
@@ -61,15 +61,20 @@ const { colors, setColor } = useColorsStore();
 							<CollapsibleTrigger
 								class="flex w-full items-center justify-between gap-1 p-2 text-left text-sm"
 							>
-								<span>{{ titleCase(subcategory.id) }}</span>
-								<Badge
-									v-if="
-										subcategory.columns.length > 0 &&
-										subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
-									"
-									variant="outline"
-									>{{ subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length }}</Badge
-								>
+								<div>
+									<span>{{ titleCase(subcategory.id) }}</span>
+									<Badge
+										v-if="
+											subcategory.columns.length > 0 &&
+											subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
+										"
+										class="ml-2"
+										variant="outline"
+										>{{
+											subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
+										}}</Badge
+									>
+								</div>
 
 								<ChevronDown
 									class="size-4 shrink-0 grow-0"