Results page (#109)

* Graph updates

* Component updates

* new report view

* Lazy load data

src/components/Graphs/DataTable.vue

@@ -18,9 +18,11 @@
         v-for="(groupedResult) in resultItem.data"
         :key="groupedResult.parameter"
         class="text-xs whitespace-no-wrap w-full flex hover:bg-gray-200"
+        :class="[isHighlighted(groupedResult) ? 'bg-green-100' : '']"
+        @click="onRowClicked(groupedResult)"
       >
         <td scope="row" class="m-2 w-3/6 line-clamp-3">
-          {{ groupedResult.parameter }}
+          {{ getTextAfterLastDot(groupedResult.parameter) }}
         </td>
         <td class="m-2 w-1/6">
           {{ getAmountWithUnit(groupedResult) }}
@@ -42,6 +44,8 @@
 import { defineComponent } from 'vue'
 
 import { emissionToNumber } from '@/utils/resultUtils'
+import { useProjectStore } from '@/stores/main'
+import { getTextAfterLastDot } from '@/utils/stringUtils'
 
 import type { PropType } from 'vue'
 import type { ResultItem, GroupedResults } from '@/models/result'
@@ -70,6 +74,7 @@ export default defineComponent({
       if (quantity?.pcs) return `${quantity.pcs} pcs`
       return '0'
     },
+    
     /**
      * Gets rounded emission for a grouped result
      * TODO: This should be a threshold or dynamic and atleast noramlized to sqm
@@ -80,7 +85,21 @@ export default defineComponent({
     },
   },
   setup() {
+    const projectStore = useProjectStore()
+
+    function isHighlighted(res: GroupedResults) {
+      return projectStore.highlightedLabel === getTextAfterLastDot(res.parameter)
+    }
+
+    function onRowClicked(res) {
+      projectStore.setHighlightedLabel(res.parameter)
+      projectStore.setObjectsById(res.data.geoId)
+    }
+
     return {
+      isHighlighted,
+      onRowClicked,
+      getTextAfterLastDot
     }
   },
 })

src/components/Graphs/GraphContainer.vue

@@ -35,7 +35,6 @@ import {
   geometryToChartData,
   geometryToNestedChartData,
   resultItemToChartData,
-  resultItemToNestedChartData
   } from '@/utils/resultUtils'
 
 // Type imports
@@ -101,6 +100,9 @@ const leftModule = computed(() => {
     case 'Benchmark':
       updateGraphProps("SelectablePieChart")
       return SelectablePieChart
+    case 'Report':
+      updateGraphProps("SelectablePieChart")
+      return SelectablePieChart
     default:
       return null
   }
@@ -153,12 +155,13 @@ const updateGraphProps = (chart: string = "") => {
       break
     }
     case "DivergingStackedBar": {
+      console.log("Selected result: ", selectedResult.value)
       let data: NestedChartData[]
       let options: ChartOptions = {
         aggregate: true,
         unit: "kgCO2e",
       }
-      
+
       data = geometryToNestedChartData(projectStore.currProject.geometry, selectedResult.value.parameter)
       graphProps.value = {
         data,

src/components/Graphs/SelectablePieChart.vue

@@ -19,11 +19,13 @@ import {
   createMouseEventHandlers,
   createBaseChart,
 } from '@/utils/chartUtils'
+import { getTextAfterLastDot } from '@/utils/stringUtils'
 
 import { truncateText } from '@/utils/stringUtils'
 import { roundNumber } from '@/utils/math'
 import type { ChartData, ChartOptions } from '@/models/chartModels'
 import { useResultStore } from '@/stores/result'
+import { useProjectStore } from '@/stores/main'
 
 export default {
   name: 'SelectablePieChart',
@@ -116,6 +118,7 @@ export default {
 
 function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
   const resultStore = useResultStore()
+  const projectStore = useProjectStore()
   // Setup options and default settings
   const width = ref(options.width || 400)
   const height = ref(options.height || 400)
@@ -245,16 +248,11 @@ function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
         } else {
           clickTimeout = setTimeout(() => {
             clickTimeout = null
-            resultStore.setReloadData(false)
 
+            resultStore.setReloadData(false)
+            projectStore.setHighlightedLabel(d.data.label)
+            
             updateSelectedObjects(d.data.ids)
-
-            d3.selectAll('.arc path')
-              .transition()
-              .duration(200)
-              .style('opacity', arcData => {
-                return arcData.data.label === d.data.label ? 1 : 0.1
-              })
           }, 300)
         }
       })
@@ -328,6 +326,17 @@ function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
           )
           break
       }
+
+      // Watch to see if highlightedLabel changes then change opacity of arcs
+      // TODO move this to common place with dataTable, and other graphs
+      watch(() => projectStore.highlightedLabel, (newLabel) => {
+        d3.selectAll('.arc path')
+          .transition()
+          .duration(200)
+          .style('opacity', arcData => {
+            return getTextAfterLastDot(arcData.data.label) === getTextAfterLastDot(newLabel) ? 1 : 0.1
+          })
+      })
   }
   return { drawChart }
 }
@@ -357,7 +366,6 @@ function groupDataFunc(data: ChartData[], total: { value: number }, options: Cha
   return _data
 }
 
-
 </script>
 
 <style>

src/components/Misc/Dropdown.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="relative inline-block text-left">
+  <div class="relative inline-block text-left w-min">
     <div class="max-w-xs">
       <button
         @click="toggleDropdown"
-        class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-6 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 truncate"
+        class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-6 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 truncate"
       >
         <div class="flex items-center space-x-2 truncate">
           {{ selectedItem }}
@@ -22,7 +22,7 @@
     >
       <div
         v-if="isOpen"
-        class="fixed z-[100] mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute z-[100] mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
       >
         <div class="py-1 max-h-60 overflow-y-auto">
           <DropdownMenuItem

src/components/Navbar.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-reserved-component-names -->
 <template>
-  <div id="nav" class="h-16">
+  <div id="nav" class="h-16 navbar-component">
     <Disclosure as="nav" class="fixed bg-gray-50 shadow w-full z-50" v-slot="{ open }">
       <div class="mx-auto px-4 sm:px-6 lg:px-8">
         <div class="relative flex h-16 justify-between">
@@ -239,13 +239,13 @@ export default defineComponent({
       navigationStore.toggleSettingsModal()
     }
 
-    //This should not href, but check if we are in dashboard and href if its active otherwise just switch in the store
     const steps: Step[] = [
       { name: 'Projects', href: '/projects' },
       { name: 'Overview', href: '/dashboard' },
       { name: 'Mapping', href: '/dashboard' },
       { name: 'Results', href: '/dashboard' },
       { name: 'Benchmark', href: '/benchmark' },
+      { name: 'Report', href: '/report' },
     ]
 
     return {

src/router/index.ts

@@ -7,6 +7,8 @@ import ProjectSelection from '@/views/ProjectSelection.vue'
 import Benchmark from '@/views/Benchmark.vue'
 import NotFound from '@/views/NotFound.vue'
 import TestZone from '@/views/TestZone.vue'
+import ReportPage from '@/views/ReportPage.vue'
+
 
 import LoginComponent from '@/components/SpeckleLogin.vue'
 
@@ -71,6 +73,16 @@ const router = createRouter({
         icon: '',
       },
     },
+    {
+      path: '/report',
+      name: 'Report',
+      component: ReportPage,
+      meta: {
+        requiresAuth: true,
+        title: 'Report',
+        icon: '',
+      },
+    },
     {
       path: '/:catchAll(.*)', // Wildcard for missing routes.
       name: 'NotFound', // 404 page.

src/stores/main.ts

@@ -29,6 +29,7 @@ export const useProjectStore = defineStore({
 			filterRegistry: null as FilterRegistry | null, // Filterregistry with current filters and filterCallStack
 			selectedGroup: null as NestedGroup | null, // NestedGroup that is currently selected
 			selectedObjects: [] as GeometryObject[], // GeometryObjects that are currently selected
+			highlightedLabel: null as string | null, // Label that is currently highlighted
 			hiddenObjects: [] as GeometryObject[], // GeometryObjects that are currently hidden
 		}
 	},
@@ -274,6 +275,14 @@ export const useProjectStore = defineStore({
 				this.currProject.results[index] = payload
 		},
 
+		/**
+		 * Set the highlighted label in the project
+		 * @param label
+		 */
+		setHighlightedLabel(label: string) {
+			this.highlightedLabel = label
+		},
+
 		/**
 		 * Set the selected group in the project
 		 * @param group

src/utils/preLoader.ts

@@ -0,0 +1,28 @@
+import { useProjectStore } from '@/stores/main'
+import { useMaterialStore } from '@/stores/material'
+
+import { getAssemblyList } from '@/utils/material'
+import { getRevaluBaseList } from '@/models/revaluDataSource'
+
+/**
+ * Preload data needed for the dashboard view
+ */
+export async function preloadDashboardData() {
+  const projectStore = useProjectStore()
+  const materialStore = useMaterialStore()
+
+  try {
+    // Example: Preload available parameter list
+    await projectStore.getAvailableParameterList()
+
+    materialStore.materialsFromJson()
+		getAssemblyList()
+		getRevaluBaseList()
+
+
+    // Add more preload calls here if needed
+    console.log('Dashboard data preloaded successfully.')
+  } catch (error) {
+    console.error('Error preloading dashboard data:', error)
+  }
+}

src/views/Dashboard.vue

@@ -31,7 +31,6 @@ import NavbarComponent from '@/components/Navbar.vue'
 import { useProjectStore } from '@/stores/main'
 import { useNavigationStore } from '@/stores/navigation'
 import { useSpeckleStore } from '@/stores/speckle'
-import { useMaterialStore } from '@/stores/material'
 
 // Utils
 import { 
@@ -41,8 +40,7 @@ import {
 } from '@/utils/projectUtils'
 import { EmissionCalculator } from '@/utils/emissionUtils'
 import { ResultCalculator } from '@/utils/resultUtils'
-import { getAssemblyList } from '@/utils/material'
-import { getRevaluBaseList } from '@/models/revaluDataSource'
+import { preloadDashboardData } from '@/utils/preLoader'
 
 // Modals
 import NewGroupModal from '@/components/Sidebar/NewGroupModal.vue'
@@ -74,12 +72,10 @@ export default {
 		const navStore = useNavigationStore()
 		const projectStore = useProjectStore()
 		const speckleStore = useSpeckleStore()
-		const materialStore = useMaterialStore()
-		
-		materialStore.materialsFromJson()
-		getAssemblyList()
-		getRevaluBaseList()
-		
+
+		// Preload all needed resources
+		preloadDashboardData()
+
 		// Watch for changes in the active page and update viewer colors
 		// TODO: Have this in the navStore instead?
 		watch(() => navStore.activePage , (newVal) => {