add a few smart model elements

arkitektio · Nov 9, 2024 · 8c1be2d · 8c1be2d
1 parent 3600c45
commit 8c1be2d
Show file tree

Hide file tree

Showing 20 changed files with 481 additions and 213 deletions.
diff --git a/graphql/mikro-next/fragments/views.graphql b/graphql/mikro-next/fragments/views.graphql
@@ -184,4 +184,11 @@ fragment DetailPixelView on PixelView {
   image {
     ...Image
   }
+  labelAccessors {
+    keys
+    table {
+      id
+      name
+    }
+  }
 }
diff --git a/graphql/mikro-next/queries/rows.graphql b/graphql/mikro-next/queries/rows.graphql
@@ -1,5 +1,7 @@
-
-
-query Rows($table: ID!, $filters: TableFilter, $pagination: TablePaginationInput) {
-  rows(table: $table, filters: $filters, pagination: $pagination) 
-}
+query Rows(
+  $table: ID!
+  $filters: RowFilter
+  $pagination: TablePaginationInput
+) {
+  rows(table: $table, filters: $filters, pagination: $pagination)
+}
diff --git a/package.json b/package.json
@@ -142,6 +142,7 @@
     "date-fns": "^4.1.0",
     "debounce": "^1.2.1",
     "deck.gl": "8",
+    "deep-equal": "^2.2.3",
     "dockview": "^1.16.1",
     "dockview-react": "^1.16.1",
     "embla-carousel-react": "^8.0.0",

diff --git a/src/app/AppProvider.tsx b/src/app/AppProvider.tsx
@@ -16,6 +16,7 @@ import { CommandProvider } from "@/providers/command/CommandProvider";
 import { DebugProvider } from "@/providers/debug/DebugProvider";
 import { DisplayProvider } from "@/providers/display/DisplayProvider";
 import { SelectionProvider } from "@/providers/selection/SelectionProvider";
+import { SettingsProvider } from "@/providers/settings/SettingsProvider";
 import { SmartProvider } from "@/providers/smart/provider";
 import { FlussWard } from "@/reaktion/FlussWard";
 import { RekuestNextWard } from "@/rekuest/RekuestNextWard";
@@ -87,54 +88,56 @@ export const BackNavigationErrorCatcher = ({
 // Additionally, it wraps the DisplayProvider, which allows for the configuration of the display registry.
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   return (
-    <DebugProvider>
-      <HashRouter>
-        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-          {/* This is where we configure the application automatically based on facts */}
+    <SettingsProvider>
+      <DebugProvider>
+        <HashRouter>
+          <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+            {/* This is where we configure the application automatically based on facts */}
 
-          <Arkitekt.Provider>
-            <DisplayProvider registry={displayRegistry}>
-              <WellKnownDiscovery
-                endpoints={WELL_KNOWN_ENDPOINTS} // this configures fakts to use the well known endpoints in order to discover the other services
-              />
-              <SelectionProvider>
-                <CommandProvider>
-                  <SmartProvider>
-                    <WidgetRegistryProvider>
-                      <CommandMenu />
-                      <Guard.Rekuest fallback={<></>}>
-                        {/* Here we registed both the GraphQL Postman that will take care of assignments, and reserverations */}
-                        <AssignationUpdater />
-                        <ReservationUpdater />
-                        {/* We register the Shadn powered widgets to the widget registry. */}
-                        <RekuestNextWard />
-                        <ShadnWigets />
-                        <Toaster />
-                      </Guard.Rekuest>
-                      <Guard.Kabinet fallback={<></>}>
-                        <KabinetWard key="kabinet" />
-                      </Guard.Kabinet>
+            <Arkitekt.Provider>
+              <DisplayProvider registry={displayRegistry}>
+                <WellKnownDiscovery
+                  endpoints={WELL_KNOWN_ENDPOINTS} // this configures fakts to use the well known endpoints in order to discover the other services
+                />
+                <SelectionProvider>
+                  <CommandProvider>
+                    <SmartProvider>
+                      <WidgetRegistryProvider>
+                        <CommandMenu />
+                        <Guard.Rekuest fallback={<></>}>
+                          {/* Here we registed both the GraphQL Postman that will take care of assignments, and reserverations */}
+                          <AssignationUpdater />
+                          <ReservationUpdater />
+                          {/* We register the Shadn powered widgets to the widget registry. */}
+                          <RekuestNextWard />
+                          <ShadnWigets />
+                          <Toaster />
+                        </Guard.Rekuest>
+                        <Guard.Kabinet fallback={<></>}>
+                          <KabinetWard key="kabinet" />
+                        </Guard.Kabinet>
 
-                      <Guard.Mikro fallback={<></>}>
-                        <MikroNextWard key="mikro" />
-                      </Guard.Mikro>
-                      <Guard.Fluss fallback={<></>}>
-                        <FlussWard key="fluss" />
-                      </Guard.Fluss>
-                      <Guard.Lok fallback={<></>}>
-                        <SystemMessageDisplay />
-                      </Guard.Lok>
-                      <BackNavigationErrorCatcher>
-                        {children}
-                      </BackNavigationErrorCatcher>
-                    </WidgetRegistryProvider>
-                  </SmartProvider>
-                </CommandProvider>
-              </SelectionProvider>
-            </DisplayProvider>
-          </Arkitekt.Provider>
-        </ThemeProvider>
-      </HashRouter>
-    </DebugProvider>
+                        <Guard.Mikro fallback={<></>}>
+                          <MikroNextWard key="mikro" />
+                        </Guard.Mikro>
+                        <Guard.Fluss fallback={<></>}>
+                          <FlussWard key="fluss" />
+                        </Guard.Fluss>
+                        <Guard.Lok fallback={<></>}>
+                          <SystemMessageDisplay />
+                        </Guard.Lok>
+                        <BackNavigationErrorCatcher>
+                          {children}
+                        </BackNavigationErrorCatcher>
+                      </WidgetRegistryProvider>
+                    </SmartProvider>
+                  </CommandProvider>
+                </SelectionProvider>
+              </DisplayProvider>
+            </Arkitekt.Provider>
+          </ThemeProvider>
+        </HashRouter>
+      </DebugProvider>
+    </SettingsProvider>
   );
 };
diff --git a/src/index.css b/src/index.css
@@ -4,7 +4,11 @@
 @tailwind utilities;
 
 
-
+/* Add this to your CSS */
+.smartdraggable {
+  -webkit-user-drag: none;
+  user-select: none;
+}
 
 
 @layer base {

diff --git a/src/mikro-next/api/graphql.ts b/src/mikro-next/api/graphql.ts
diff --git a/src/mikro-next/components/render/DelegatingImageRender.tsx b/src/mikro-next/components/render/DelegatingImageRender.tsx
@@ -0,0 +1,28 @@
+import {
+  ListRgbContextFragment,
+  ListRoiFragment,
+} from "@/mikro-next/api/graphql";
+import { useSettings } from "@/providers/settings/SettingsContext";
+import { Matrix4 } from "@math.gl/core";
+import { RGBD } from "./TwoDThree";
+import { VivRenderer } from "./VivRenderer";
+
+export interface DelegatingImageRenderProps {
+  context: ListRgbContextFragment;
+  rois: ListRoiFragment[];
+  modelMatrix?: Matrix4;
+  className?: string;
+  follow?: "width" | "height";
+}
+
+export const DelegatingImageRender: React.FC<DelegatingImageRenderProps> = (
+  props,
+) => {
+  const { settings } = useSettings();
+  // console.log
+  if (settings.experimentalViv) {
+    return <VivRenderer {...props} />;
+  } else {
+    return <RGBD {...props} />;
+  }
+};
diff --git a/src/mikro-next/components/render/DelegatingPixelViewRender.tsx b/src/mikro-next/components/render/DelegatingPixelViewRender.tsx
@@ -0,0 +1,24 @@
+import {
+  ListRgbContextFragment,
+  ListRoiFragment,
+  PixelViewFragment,
+} from "@/mikro-next/api/graphql";
+import { useSettings } from "@/providers/settings/SettingsContext";
+import { VivRenderer } from "./VivRenderer";
+import { RGBD } from "./TwoDThree";
+import { Matrix4 } from "@math.gl/core";
+
+export interface DelegatingPixelViewRenderProps {
+  view: PixelViewFragment;
+  modelMatrix?: Matrix4;
+  className?: string;
+  follow?: "width" | "height";
+}
+
+export const DelegatingPixelViewRender: React.FC<
+  DelegatingPixelViewRenderProps
+> = (props) => {
+  const { settings } = useSettings();
+
+  return <RGBD {...props} />;
+};
diff --git a/src/mikro-next/components/render/TwoDThree.tsx b/src/mikro-next/components/render/TwoDThree.tsx
@@ -45,6 +45,7 @@ export interface RGBDProps {
   rois: ListRoiFragment[];
   className?: string;
   follow?: "width" | "height";
+  onValueClick?: (value: number) => void;
 }
 
 export type PassThroughProps = {
@@ -288,6 +289,7 @@ const ImageBitmapTextureMesh = ({
   context,
   rois,
   setOpenPanels,
+  onValueClick,
 }: RGBDProps & PassThroughProps) => {
   const texture = useAsyncTexture(context);
 
@@ -297,7 +299,13 @@ const ImageBitmapTextureMesh = ({
   if (!texture) return null;
   return (
     <group>
-      <mesh rotation={[0, 0, Math.PI]} onClick={() => setOpenPanels([])}>
+      <mesh
+        rotation={[0, 0, Math.PI]}
+        onClick={(e) => {
+          setOpenPanels([]);
+          alert(JSON.stringify(e.uv1));
+        }}
+      >
         <planeGeometry args={[2, 2]} />
         <meshStandardMaterial map={texture} />
       </mesh>
@@ -352,7 +360,11 @@ export const RGBD = (props: RGBDProps) => {
         <ambientLight intensity={1} />
         <AutoZoomCamera setOpenPanels={setOpenPanels} />
         <OrbitControls enableRotate={false} enablePan={true} regress={false} />
-        <ImageBitmapTextureMesh {...props} setOpenPanels={setOpenPanels} />
+        <ImageBitmapTextureMesh
+          {...props}
+          setOpenPanels={setOpenPanels}
+          onValueClick={props.onValueClick}
+        />
       </Canvas>
 
       {openPanels.map((panel) => (

diff --git a/src/mikro-next/components/render/VivRenderer.tsx b/src/mikro-next/components/render/VivRenderer.tsx
@@ -371,6 +371,9 @@ export const VivRenderer = ({
                 deckProps={{
                   layers: [roiLayer],
                 }}
+                onHover={(hover) => {
+                  console.log(hover);
+                }}
               />
             )}
           </>

diff --git a/src/mikro-next/graphql.schema.json b/src/mikro-next/graphql.schema.json
@@ -21674,6 +21674,30 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "labelAccessors",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "LabelAccessor",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "labels",
             "description": null,
@@ -25838,7 +25862,7 @@
                 "description": null,
                 "type": {
                   "kind": "INPUT_OBJECT",
-                  "name": "TableFilter",
+                  "name": "RowFilter",
                   "ofType": null
                 },
                 "defaultValue": "null",
@@ -30021,6 +30045,30 @@
         ],
         "possibleTypes": null
       },
+      {
+        "kind": "INPUT_OBJECT",
+        "name": "RowFilter",
+        "description": null,
+        "isOneOf": false,
+        "fields": null,
+        "inputFields": [
+          {
+            "name": "clause",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "defaultValue": "null",
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "ScaleView",

diff --git a/src/mikro-next/pages/ImagePage.tsx b/src/mikro-next/pages/ImagePage.tsx
@@ -41,6 +41,7 @@ import { PinToggle } from "../components/ui/PinToggle";
 import { AddImageViewForm } from "../forms/AddImageViewForm";
 import { UpdateImageForm } from "../forms/UpdateImageForm";
 import { Image } from "@/components/ui/image";
+import { DelegatingImageRender } from "../components/render/DelegatingImageRender";
 
 export type IRepresentationScreenProps = {};
 
@@ -93,10 +94,12 @@ export default asDetailQueryRoute(useGetImageQuery, ({ data, refetch }) => {
               <div className="p-3 flex flex-col gap-2">
                 {data.image.renders.map((render, index) => (
                   <Card className="p-2 truncate">
-                    <Image
-                      src={resolve(render.store.presignedUrl)}
-                      className="w-full"
-                    />
+                    {render.__typename == "Snapshot" && (
+                      <Image
+                        src={resolve(render.store.presignedUrl)}
+                        className="w-full"
+                      />
+                    )}
                     <a href={resolve(render.store.presignedUrl)} download>
                       <Download size={24} />
                       {render.__typename}
@@ -121,7 +124,7 @@ export default asDetailQueryRoute(useGetImageQuery, ({ data, refetch }) => {
             {data?.image?.rgbContexts?.map((context, index) => (
               <div className={"h-full w-full mt-0 rounded rounded-md relative"}>
                 <div className="w-full h-full items-center flex justify-center flex-col">
-                  <RGBD
+                  <DelegatingImageRender
                     context={context}
                     rois={data.image.rois}
                     modelMatrix={modelMatrix}
@@ -269,14 +272,16 @@ export default asDetailQueryRoute(useGetImageQuery, ({ data, refetch }) => {
                   <div className="font-light">Derived Images</div>
                   <div className="flex flex-col gap-2 mt-2">
                     {data?.image.derivedFromViews?.map((view, index) => (
-                      <MikroImage.DetailLink
-                        object={view.image?.id}
-                        className="cursor-pointer"
-                      >
-                        <Card className="flex flex-row gap-2 px-2 py-1">
-                          <span className="text-md">{view.image?.name}</span>
-                        </Card>
-                      </MikroImage.DetailLink>
+                      <MikroImage.Smart object={view.image.id}>
+                        <MikroImage.DetailLink
+                          object={view.image?.id}
+                          className="cursor-pointer"
+                        >
+                          <Card className="flex flex-row gap-2 px-2 py-1">
+                            <span className="text-md">{view.image?.name}</span>
+                          </Card>
+                        </MikroImage.DetailLink>
+                      </MikroImage.Smart>
                     ))}
                   </div>
                 </>