fix: init model load

app/analyse/state/data.ts

@@ -15,11 +15,11 @@ import { type WindowType } from "@/server/data/windowTypes"
 import { useSelectedHouseIds } from "../ui/HousesPillsSelector"
 import { useElements } from "../../data/elements"
 import { useEnergyInfos } from "../../data/energyInfos"
-import { type House } from "../../data/houses"
 import { useMaterials } from "../../data/materials"
 import { useSpaceTypes } from "../../data/spaceTypes"
 import { useWindowTypes } from "../../data/windowTypes"
 import { useGetHouseModules, useHouses } from "../../design/state/houses"
+import { type House } from "../../db/user"
 
 export type SystemsData = {
   houseTypes: Array<HouseType>

app/analyse/ui/FloorAreaChart.tsx

@@ -51,7 +51,7 @@ const FloorAreaChart = () => {
                 pipe(
                   selectedHouses,
                   A.filterMap((selectedHouse) =>
-                    selectedHouse.id === houseId
+                    selectedHouse.houseId === houseId
                       ? O.some({
                           houseId,
                           floorArea,

app/api/trpc/[trpc]/route.ts

@@ -1,9 +1,6 @@
-import { initTRPC } from "@trpc/server"
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
 import { appRouter } from "@/server/trpc/router"
 
-const t = initTRPC.create()
-
 export type AppRouter = typeof appRouter
 
 const handler = async (request: Request) => {

app/build/layout.tsx

@@ -1,8 +1,8 @@
+"use client"
 import dynamic from "next/dynamic"
 import { PropsWithChildren } from "react"
-import Footer from "../ui/Footer"
 import { TrpcProvider } from "../ui/TrpcProvider"
-import { PreloadSpeckleObjects } from "../utils/speckle/useSpeckleObject"
+import { getLayoutsWorker, getSystemsWorker } from "../workers"
 import BuildNav from "./common/BuildNav"
 
 const HousesPillsSelector = dynamic(
@@ -13,6 +13,9 @@ const HousesPillsSelector = dynamic(
 )
 
 const BuildLayout = ({ children }: PropsWithChildren<{}>) => {
+  getSystemsWorker()
+  getLayoutsWorker()
+
   return (
     <TrpcProvider>
       <div className="flex-auto overflow-y-auto flex flex-col">
@@ -26,7 +29,6 @@ const BuildLayout = ({ children }: PropsWithChildren<{}>) => {
           <div className="flex-auto border-l border-grey-20">{children}</div>
         </div>
       </div>
-      <PreloadSpeckleObjects />
     </TrpcProvider>
   )
 }

app/build/materials/page.tsx

@@ -1,7 +1,11 @@
 "use client"
 import { Download } from "@carbon/icons-react"
+import dynamic from "next/dynamic"
 import { useState } from "react"
-import MaterialsListTable from "./MaterialsListTable"
+
+const MaterialsListTable = dynamic(() => import("./MaterialsListTable"), {
+  ssr: false,
+})
 
 const MaterialsListIndexPage = () => {
   const [csvDownloadUrl, setCsvDownloadUrl] = useState<string | null>(null)

app/build/materials/useMaterialsListRows.ts

@@ -136,7 +136,7 @@ export const useMaterialsListRows = () => {
               embodiedCarbonPerUnit,
               linkUrl,
               unit,
-            } = getElementMaterial(house.id, item)
+            } = getElementMaterial(house.houseId, item)
 
             const quantity = pipe(houseModules, A.reduce(0, reducer))
 

app/build/order/useOrderListData.ts

@@ -69,7 +69,7 @@ export const useOrderListData = () => {
 
     return pipe(
       selectedHouses,
-      A.chain(({ id: houseId, dnas: dnas, ...house }) =>
+      A.chain(({ houseId: houseId, dnas: dnas, ...house }) =>
         pipe(
           dnas,
           A.map((dna) => ({

app/build/overview/HousesView.tsx

@@ -1,12 +1,7 @@
 "use client"
 import DataInit from "~/data/DataInit"
 import GroupedApp from "~/design/ui-3d/grouped/GroupedApp"
-import React from "react"
-import dynamic from "next/dynamic"
-
-const AppInit = dynamic(() => import("~/design/ui-3d/init/AppInit"), {
-  ssr: false,
-})
+import AppInit from "../../design/ui-3d/init/AppInit"
 
 const HousesView = () => {
   return (

app/build/overview/page.tsx

@@ -1,13 +1,15 @@
 "use client"
 import { ArrowDown } from "@carbon/icons-react"
 import { pipe } from "fp-ts/lib/function"
+import dynamic from "next/dynamic"
 import { Fragment } from "react"
 import { A } from "~/utils/functions"
 import { useAnalyseData } from "../../analyse/state/data"
 import { useSiteCurrency } from "../../design/state/siteCtx"
-import HousesView from "./HousesView"
 import css from "./page.module.css"
 
+const HousesView = dynamic(() => import("./HousesView"), { ssr: false })
+
 const OverviewIndex = () => {
   const { formatWithSymbol } = useSiteCurrency()
 

app/data/elements.ts

@@ -1,11 +1,13 @@
 import { trpc } from "@/client/trpc"
+import { liveQuery } from "dexie"
 import { pipe } from "fp-ts/lib/function"
-import { useMemo } from "react"
-import { BufferGeometry } from "three"
+import { BufferGeometry, BufferGeometryLoader } from "three"
+import { proxy, ref, useSnapshot } from "valtio"
 import { O, R, RA, S } from "~/utils/functions"
 import { Element } from "../../server/data/elements"
-import { Module } from "../../server/data/modules"
-import useSpeckleObject from "../utils/speckle/useSpeckleObject"
+import layoutsDB from "../db/layouts"
+import systemsDB from "../db/systems"
+import { isSSR } from "../utils/next"
 
 export const useElements = (): Element[] => {
   const { data = [] } = trpc.elements.useQuery()
@@ -20,6 +22,34 @@ export const useSystemElements = ({
   return useElements().filter((x) => x.systemId === systemId)
 }
 
+export const ifcTagToElement = ({
+  systemId,
+  elements,
+  ifcTag,
+}: {
+  elements: Element[]
+  ifcTag: string
+  systemId: string
+}) => {
+  const result = pipe(
+    elements,
+    RA.findFirst((el) => {
+      return (
+        el.ifc4Variable.toUpperCase() === ifcTag && el.systemId === systemId
+      )
+    }),
+    O.toUndefined
+  )
+
+  if (result === undefined) {
+    console.log({
+      unmatchedIfcTag: { ifcTag },
+    })
+  }
+
+  return result
+}
+
 export const useIfcTagToElement = (systemId: string) => {
   const elements = useSystemElements({ systemId })
 
@@ -55,27 +85,43 @@ export const invertModuleElementGeometriesKey = (input: string) => {
   return { systemId, dna }
 }
 
-export const useModuleElements = ({
-  systemId,
-  speckleBranchUrl,
-}: Module): Record<string, BufferGeometry> => {
-  const ifcTagToElement = useIfcTagToElement(systemId)
-  const speckleObject = useSpeckleObject(speckleBranchUrl)
+const models = proxy<Record<string, Record<string, BufferGeometry>>>({})
 
-  return useMemo(
-    () =>
-      pipe(
-        speckleObject,
-        R.reduceWithIndex(S.Ord)({}, (ifcTag, acc, geometry) => {
-          const el = ifcTagToElement(ifcTag)
-          if (!el) return acc
-          return {
-            ...acc,
-            [el.name]: geometry,
-          }
-        })
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [speckleBranchUrl]
-  )
+const loader = new BufferGeometryLoader()
+
+if (!isSSR()) {
+  liveQuery(async () => {
+    const models = await layoutsDB.models.toArray()
+    const elements = await systemsDB.elements.toArray()
+    return { models, elements }
+  }).subscribe(({ models: dbModels, elements: dbElements }) => {
+    for (let { speckleBranchUrl, geometries, systemId } of dbModels) {
+      if (!(speckleBranchUrl in models)) {
+        const loadedModels: Record<string, BufferGeometry> = pipe(
+          geometries,
+          R.map((x) => loader.parse(x) as BufferGeometry),
+          R.reduceWithIndex(S.Ord)({}, (ifcTag, acc, geometry) => {
+            const el = ifcTagToElement({
+              systemId,
+              elements: dbElements,
+              ifcTag,
+            })
+            if (!el) return acc
+            return {
+              ...acc,
+              [el.name]: geometry,
+            }
+          })
+        )
+        models[speckleBranchUrl] = ref(loadedModels)
+      }
+    }
+  })
+}
+
+export const useSpeckleObject = (
+  speckleBranchUrl: string
+): O.Option<Record<string, BufferGeometry>> => {
+  const snap = useSnapshot(models) as typeof models
+  return R.lookup(speckleBranchUrl)(snap)
 }

app/data/modules.ts

@@ -101,13 +101,15 @@ export const filterCompatibleModules =
       "gridType",
     ]
   ) =>
-  (module: Module) =>
-    A.filter((m: Module) =>
-      ks.reduce(
-        (acc: boolean, k) =>
-          acc && m.structuredDna[k] === module.structuredDna[k],
-        true
-      )
+  (moduleA: Module) =>
+    A.filter(
+      (moduleB: Module) =>
+        moduleB.systemId === moduleA.systemId &&
+        ks.reduce(
+          (acc: boolean, k) =>
+            acc && moduleB.structuredDna[k] === moduleA.structuredDna[k],
+          true
+        )
     )
 
 export const keysFilter =