Refactor filter and configuration handling (#227)

* Added functionality to delete filters and mapping.
* Refactored navigation and mapping for dynamic model handling.

Author: ocni-dtu

src/components/Base/Navbar.vue

@@ -115,7 +115,7 @@
 		MenuItem,
 		MenuItems
 	} from '@headlessui/vue'
-	import type { Step, PageType } from '@/models/pageModel'
+	import type { PageType, Step } from '@/models/pageModel'
 	import { useSpeckleStore } from '@/stores/speckleStore'
 	import { useNavigationStore } from '@/stores/navigationStore'
 	import router from '@/router'
@@ -139,15 +139,25 @@
 		navigationStore.toggleSettingsModal()
 	}
 
+	const modelId =
+		route.params.modelId ||
+		speckleStore.getProjectDetails?.stream.commits.items[0].id
+
 	const steps: Step[] = [
 		{ name: 'Projects', href: '/projects' },
 		{ name: 'Overview', href: `/projects/${route.params.projectId}/overview` },
 		{
 			name: 'Filtering',
-			href: `/projects/${route.params.projectId}/filtering`
+			href: `/projects/${route.params.projectId}/models/${modelId}/filtering`
+		},
+		{
+			name: 'Mapping',
+			href: `/projects/${route.params.projectId}/models/${modelId}/mapping`
+		},
+		{
+			name: 'Results',
+			href: `/projects/${route.params.projectId}/models/${modelId}/results`
 		},
-		{ name: 'Mapping', href: `/projects/${route.params.projectId}/mapping` },
-		{ name: 'Results', href: `/projects/${route.params.projectId}/results` },
 		{ name: 'Benchmark', href: '/benchmark' }
 	]
 </script>

src/components/ModelViewer/SpeckleViewer.vue

@@ -116,10 +116,10 @@
 
 	// Initialize and mount the viewer
 	onMounted(async () => {
+		// await loadProject(false)
 		const renderParent = document.getElementById('renderParent') as HTMLElement
 		const container = document.getElementById('renderer') as HTMLElement
 		window.addEventListener('keydown', handleEscKey)
-		// window.addEventListener('keydown', handleSelectAll)
 
 		viewer = new Viewer(container, DefaultViewerParams)
 		await viewer.init()

src/components/ProjectSelection/ProjectGrid.vue

@@ -24,7 +24,7 @@
 				:key="project.name"
 				class="col-span-1 flex flex-col styled-element hoverable pressable cursor-pointer"
 				:style="{ backgroundColor: projectColors[index] }"
-				@click="startTransition(project, projectColors[index])"
+				@click="onProjectClick(project, projectColors[index])"
 			>
 				<!-- Project Iterator. -->
 				<div class="flex flex-1 flex-col p-8 min-h-40">
@@ -84,7 +84,6 @@
 	import { emissionToNumber, getResultLogEmissions } from '@/utils/resultUtils'
 	import { ColorManager } from '@/utils/colorUtils'
 	import router from '@/router'
-	import { useNavigationStore } from '@/stores/navigationStore'
 	import { roundNumber } from '@/utils/mathUtils'
 	import LoadingCubes from '@/components/LoadingCubes/LoadingCubes.vue'
 
@@ -94,10 +93,6 @@
 	const speckleStore = useSpeckleStore()
 	const firebaseStore = useFirebaseStore()
 	const settingsStore = useSettingsStore()
-	const navStore = useNavigationStore()
-
-	const selectedProjectId = ref('')
-	const selectedProjectName = ref('')
 
 	const loading = ref(false)
 
@@ -201,28 +196,13 @@
 	}
 
 	// Updated transition function
-	const startTransition = async (project: ProjectId, color: string) => {
-		activeColor.value = color
-		selectedProjectId.value = project.id
-		selectedProjectName.value = project.name
-
-		// Start flash sequence
-		backgroundVisible.value = true
-
-		// Load data during the flash
-		navStore.setActiveColor(color)
-
-		// Complete transition and navigate
-		setTimeout(() => {
-			router.push({
-				name: 'Overview',
-				params: {
-					projectId: project.id,
-					id: project.id,
-					color: color
-				}
-			})
-		}, 100)
+	const onProjectClick = async (project: ProjectId, color: string) => {
+		await firebaseStore.addOrUpdateProjectSettings({
+			projectId: project.id,
+			name: project.name,
+			settings: { color }
+		})
+		await router.push({ name: 'Overview', params: { projectId: project.id } })
 	}
 
 	onMounted(() => {
@@ -238,26 +218,3 @@
 		}
 	)
 </script>
-
-<style scoped>
-	.origin-center {
-		transform-origin: center;
-	}
-
-	/* Flash transition */
-	.flash-enter-active {
-		transition: opacity 0.15s step-end;
-	}
-
-	.flash-enter-from {
-		opacity: 0;
-	}
-
-	.flash-leave-active {
-		transition: opacity 0.15s step-start;
-	}
-
-	.flash-leave-to {
-		opacity: 0;
-	}
-</style>

src/components/Settings/SettingsProjectOverview.vue

@@ -97,7 +97,6 @@
 	import router from '@/router'
 
 	import type { dropdownItem } from '@/components/Base/DropdownMenuItem.vue'
-	import type { ProjectSettingsLog } from '@/models/firebaseModel'
 	import { useFirebaseStore } from '@/stores/firebaseStore'
 	import CheckBox from '@/components/Base/CheckBox.vue'
 	import { EnergyType } from '@/models/materialModel'
@@ -112,8 +111,9 @@
 	const changedVersion = ref(false)
 
 	onMounted(async () => {
-		const projectSettingsLog: ProjectSettingsLog =
-			await firebaseStore.fetchProjectSettings(projectStore.currProject.id)
+		const projectSettingsLog = await firebaseStore.fetchProjectSettings(
+			projectStore.currProject?.id
+		)
 		if (projectSettingsLog)
 			settingsStore.updateProjectSettings(projectSettingsLog.settings)
 	})
@@ -156,10 +156,10 @@
 	 */
 	const selectProject = () => {
 		// Save the projectSettings
-		firebaseStore.addProjectSettings(
-			projectStore.currProject.id,
-			settingsStore.projectSettings
-		)
+		firebaseStore.addOrUpdateProjectSettings({
+			projectId: projectStore.currProject.id,
+			settings: settingsStore.projectSettings
+		})
 
 		// If version changed we load it otherwise just route it
 		if (changedVersion.value) {

src/components/Sidebar/GroupCard.vue

@@ -117,10 +117,10 @@
 	import { getMappedMaterial, mapMaterial } from '@/utils/materialUtils'
 
 	import { useProjectStore } from '@/stores/projectStore'
-	import { useNavigationStore } from '@/stores/navigationStore'
 	import { storeToRefs } from 'pinia'
 	import { lightenHSLColor } from '@/utils/colorUtils'
 	import { roundNumber } from '@/utils/mathUtils'
+	import { useRoute } from 'vue-router'
 
 	// Add defineOptions to inherit attrs
 	defineOptions({
@@ -142,7 +142,7 @@
 
 	// Store initialization
 	const projectStore = useProjectStore()
-	const navStore = useNavigationStore()
+
 	// Reactive refs
 	const isExpanded = ref(false)
 	const toggleExpand = () => {
@@ -151,8 +151,8 @@
 	}
 
 	// Store refs
-	const { activePage } = storeToRefs(navStore)
 	const { selectedGroup } = storeToRefs(projectStore)
+	const route = useRoute()
 
 	// Computed properties
 	const inGroups = computed(() => ({
@@ -184,7 +184,7 @@
 	}
 
 	const currGroupTotal = computed(() => {
-		switch (activePage.value) {
+		switch (route.name) {
 			case 'Filtering':
 				return OverviewGroupCard
 			case 'Mapping':
@@ -199,7 +199,7 @@
 	})
 
 	const leftInfo = computed(() => {
-		switch (activePage.value) {
+		switch (route.name) {
 			case 'Filtering':
 				return inGroups.value.objects.length + ' Elements'
 			case 'Mapping':
@@ -214,7 +214,7 @@
 	})
 
 	const rightInfo = computed(() => {
-		switch (activePage.value) {
+		switch (route.name) {
 			case 'Filtering':
 				return inGroups.value.objects.length + ' Elements'
 			case 'Mapping':
@@ -241,7 +241,7 @@
 	// Add drop handler
 	const onDrop = async () => {
 		if (inGroups.value) {
-			mapMaterial(inGroups.value)
+			await mapMaterial(inGroups.value)
 		}
 	}
 

src/components/Sidebar/Sidebar.vue

@@ -38,19 +38,21 @@
 	import ActionButton from '@/components/Base/ActionButton.vue'
 
 	import { useNavigationStore } from '@/stores/navigationStore'
+	import { useRoute } from 'vue-router'
 
 	import { useFetchDropdownItems } from '@/composables/useFetchDropdownItems'
 	import { useHandleSelected } from '@/composables/useHandleSelected'
 
-	import type { NavigationButtonConfig } from '@/models/pageModel'
+	import type { NavigationButtonConfig, PageType } from '@/models/pageModel'
 
 	// Store initialization
 	const navStore = useNavigationStore()
+	const route = useRoute()
 
 	// Compute visible buttons for current page
 	const visibleButtons = computed(() =>
 		sidebarButtons.filter((button) =>
-			button.showOn.includes(navStore.activePage)
+			button.showOn.includes(route.name as PageType)
 		)
 	)
 
@@ -72,16 +74,17 @@
 
 	// Watch for page changes to update dropdown items
 	watch(
-		() => navStore.activePage,
+		() => route.name,
+		() => {
+			fetchDropdownItems()
+		},
+		{ immediate: true }
+	)
+	watch(
+		() => navStore.shouldDropdownRefresh,
 		() => {
 			fetchDropdownItems()
 		},
 		{ immediate: true }
 	)
 </script>
-
-<style scoped>
-	.ghost {
-		opacity: 0.5;
-	}
-</style>

src/components/SlideOver/ModifyFilter.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="relative flex-1 px-4">
+	<div class="relative flex-1 px-4 mt-4">
+		<SaveFilters :modify="true" />
+		<h3 class="font-semibold mb-2 mt-8">Filter Groups</h3>
+
 		<Draggable
 			v-if="callStack"
 			:list="callStack"
@@ -196,6 +199,7 @@
 	import type { SimpleParameters } from '@/models/geometryModel'
 	import type { dropdownItem } from '@/components/Base/Dropdown.vue'
 	import type { CustomGeo } from '@/models/filterModel'
+	import SaveFilters from '@/components/SlideOver/SaveFilters.vue'
 
 	// Store initialization
 	const projectStore = useProjectStore()
@@ -285,11 +289,6 @@
 
 	// Update store when component unmounts
 	onUnmounted(() => {
-		projectStore.updateRegistryStack(
-			'test',
-			callStack.value,
-			customGeoList.value
-		)
 		updateProjectGroups()
 	})
 </script>

src/components/SlideOver/SaveFilters.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="space-y-12">
-		<h2 class="styled-header">Save to firebase</h2>
-		<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+		<div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
 			<div class="sm:col-span-4">
 				<label for="name" class="block styled-text normal-case"> Name </label>
 				<div class="mt-2">
@@ -19,6 +18,7 @@
 
 	<div class="mt-6 flex items-center justify-start gap-x-6">
 		<ActionButton text="Save" @on-click="saveData" />
+		<ActionButton text="Delete" v-if="props.modify" @on-click="deleteData" />
 	</div>
 </template>
 
@@ -31,27 +31,45 @@
 	import InputText from '@/components/Base/InputText.vue'
 	import ActionButton from '@/components/Base/ActionButton.vue'
 
+	const props = defineProps({
+		modify: { type: Boolean, default: false }
+	})
+
 	const navStore = useNavigationStore()
 	const projectStore = useProjectStore()
 	const firebaseStore = useFirebaseStore()
 
 	const formData = ref({
-		name: ''
+		name: props.modify ? projectStore.filterRegistry.filterList.name : ''
 	})
 
 	const saveData = () => {
-		const filters: Filter[] = projectStore.getRegistryStack()
+		let filters: Filter[] = []
+		if (props.modify) {
+			filters = projectStore.getRegistryStack()
+		}
+
 		const filterList: FilterList = {
 			id: crypto.randomUUID(),
 			name: formData.value.name,
 			callStack: filters,
-			customGeo: projectStore.filterRegistry.filterList.customGeo
+			customGeo: projectStore.filterRegistry.filterList.customGeo || []
 		}
 		firebaseStore.addFilterList(
 			projectStore.currProject.id,
 			filterList,
 			formData.value.name
 		)
 		navStore.toggleSlideover()
+		navStore.refreshDropdown()
+	}
+
+	const deleteData = () => {
+		firebaseStore.deleteFilters(
+			projectStore.currProject.id,
+			projectStore.filterRegistry.filterList.name
+		)
+		navStore.toggleSlideover()
+		navStore.refreshDropdown()
 	}
 </script>