feat: toggle features from map toolbar

components/geojson-map-toolbar.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ChevronDown } from "lucide-vue-next";
+
+import { useGeojsonStore } from "@/stores/use-geojson-store.ts";
+import type { GeojsonMapSchema } from "@/types/global.d";
+
+interface Props {
+	params: Zod.infer<typeof GeojsonMapSchema>["params"];
+}
+
+const props = defineProps<Props>();
+const { params } = toRefs(props);
+
+const GeojsonStore = useGeojsonStore();
+const { tables } = storeToRefs(GeojsonStore);
+
+const table = computed(() => tables.value.get(params.value.url));
+
+const categories = computed(() => {
+	return table.value?.getAllColumns().filter((column) => column.getCanHide());
+});
+function titleCase(s: string) {
+	return s
+		.replace(/^[-_]*(.)/, (_, c) => c.toUpperCase()) // Initial char (after -/_)
+		.replace(/[-_]+(.)/g, (_, c) => " " + c.toUpperCase()); // First char after each -/_
+}
+const isCollapsibleOpen = ref(categories.value!.map(() => false));
+</script>
+
+<template>
+	<div class="grid items-center border-b border-border bg-surface px-8 py-3 text-on-surface">
+		<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm font-medium text-on-surface/75">
+			<div v-for="(group, idx) in categories" :key="group.id">
+				<DropdownMenu v-slot="{ open }" v-model:open="isCollapsibleOpen[idx]">
+					<DropdownMenuTrigger class="flex w-full items-center gap-1 p-2 text-sm">
+						<span>{{ titleCase(group.id) }}</span>
+						<ChevronDown class="size-4" :class="open ? 'rotate-180' : ''"></ChevronDown>
+					</DropdownMenuTrigger>
+
+					<DropdownMenuContent class="">
+						<DropdownMenuCheckboxItem
+							v-for="column in group.columns"
+							:key="column.id"
+							:checked="column.getIsVisible()"
+							@select.prevent
+							@update:checked="
+								(value) => {
+									column.toggleVisibility(!!value);
+									column.setFilterValue([]);
+								}
+							"
+						>
+							{{ column.columnDef.header }}
+						</DropdownMenuCheckboxItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</div>
+	</div>
+</template>

components/geojson-map-window-content.vue

@@ -13,6 +13,7 @@ const props = defineProps<Props>();
 const { params } = toRefs(props);
 
 const GeojsonStore = useGeojsonStore();
+
 const { tables } = storeToRefs(GeojsonStore);
 
 const filteredMarkers = computed(() => {
@@ -26,19 +27,22 @@ const filteredMarkers = computed(() => {
 </script>
 
 <template>
-	<VisualisationContainer
-		v-slot="{ width, height }"
-		:class="{ 'opacity-50 grayscale': !filteredMarkers }"
-	>
-		<GeoMap
-			v-if="filteredMarkers"
-			:height="height"
-			:marker-type="params.markerType"
-			:markers="filteredMarkers as Array<Feature<Point, MarkerProperties>>"
-			:width="width"
-		/>
-		<Centered v-if="!filteredMarkers">
-			<LoadingIndicator />
-		</Centered>
-	</VisualisationContainer>
+	<div class="relative isolate grid size-full grid-rows-[auto_1fr]">
+		<GeojsonMapToolbar v-if="filteredMarkers" :params="params"></GeojsonMapToolbar>
+		<VisualisationContainer
+			v-slot="{ width, height }"
+			:class="{ 'opacity-50 grayscale': !filteredMarkers }"
+		>
+			<GeoMap
+				v-if="filteredMarkers"
+				:height="height"
+				:marker-type="params.markerType"
+				:markers="filteredMarkers as Array<Feature<Point, MarkerProperties>>"
+				:width="width"
+			/>
+			<Centered v-if="!filteredMarkers">
+				<LoadingIndicator />
+			</Centered>
+		</VisualisationContainer>
+	</div>
 </template>

components/ui/dropdown-menu/DropdownMenu.vue

@@ -13,7 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-	<DropdownMenuRoot v-bind="forwarded">
-		<slot />
+	<DropdownMenuRoot v-slot="{ open }" v-bind="forwarded">
+		<slot :open="open" />
 	</DropdownMenuRoot>
 </template>