Merge pull request #3 from arkitektio/dev

arkitektio · Jul 17, 2024 · 58eca44 · 58eca44
2 parents 9e87aa4 + b74c920
commit 58eca44
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/src/mikro-next/components/cards/StageTransformationViewCard.tsx b/src/mikro-next/components/cards/StageTransformationViewCard.tsx
@@ -10,7 +10,13 @@ interface Props {
   mates?: MateFinder[];
 }
 
-export const AffineInformation = ({ matrix }: { matrix: number[][] }) => {
+export const AffineInformation = ({
+  matrix,
+  shape,
+}: {
+  matrix: number[][];
+  shape: number[] | undefined;
+}) => {
   const x = matrix[0][3];
   const y = matrix[0][3];
   const z = matrix[0][3];
@@ -19,15 +25,23 @@ export const AffineInformation = ({ matrix }: { matrix: number[][] }) => {
   const yScale = matrix[1][1];
   const zScale = matrix[2][2];
 
+  const xSize = (shape?.at(4) || 1) * xScale;
+  const ySize = (shape?.at(3) || 1) * yScale;
+  const zSize = (shape?.at(2) || 1) * zScale;
+
   return (
     <>
       <div className="text-muted-foreground text-xs">
         x: {x.toPrecision(2)} y: {y.toPrecision(2)} z: {z.toPrecision(2)}
       </div>
       <div className="text-muted-foreground text-xs">
-        xp: {xScale.toPrecision(2)} yp: {yScale.toPrecision(2)} zp:{" "}
+        xScale: {xScale.toPrecision(2)} yScale: {yScale.toPrecision(2)} zScale:{" "}
         {zScale.toPrecision(2)}
       </div>
+      <div className="text-muted-foreground text-xs">
+        xSize: {xSize.toPrecision(4)} µm ySize: {ySize.toPrecision(4)} µm zSize:{" "}
+        {zSize.toPrecision(4)} µm
+      </div>
     </>
   );
 };
@@ -52,7 +66,10 @@ const CardItem = ({ view, mates }: Props) => {
             </MikroImage.DetailLink>
           </CardTitle>
 
-          <AffineInformation matrix={view.affineMatrix} />
+          <AffineInformation
+            matrix={view.affineMatrix}
+            shape={view.image.store.shape}
+          />
         </CardHeader>
       </ViewCard>
     </MikroAffineTransformationView.Smart>

diff --git a/src/mikro-next/components/lists/StageList.tsx b/src/mikro-next/components/lists/StageList.tsx
@@ -13,16 +13,15 @@ export type Props = {
 };
 
 const List = ({ filters, pagination }: Props) => {
-  const { data, error, subscribeToMore, refetch } = useGetStagesQuery;
-  ({
+  const { data, error, subscribeToMore, refetch } = useGetStagesQuery({
     variables: { filters, pagination },
   });
 
   return (
     <ListRender
       array={data?.stages}
       title={
-        <MikroStage.ListLink className="flex-0">Stages</MikroStage.ListLink>
+        <MikroStage.ListLink className="flex-0">Stagess</MikroStage.ListLink>
       }
       refetch={refetch}
     >

diff --git a/src/mikro-next/pages/ImagePage.tsx b/src/mikro-next/pages/ImagePage.tsx
@@ -40,6 +40,8 @@ import { UpdateImageForm } from "../forms/UpdateImageForm";
 
 export type IRepresentationScreenProps = {};
 
+export const dimensionOrder = ["c", "t", "z", "y", "x"];
+
 export default asDetailQueryRoute(useGetImageQuery, ({ data, refetch }) => {
   const x = data?.image?.store?.shape?.at(3);
   const y = data?.image?.store?.shape?.at(4);
@@ -188,7 +190,7 @@ export default asDetailQueryRoute(useGetImageQuery, ({ data, refetch }) => {
                       <span className="font-semibold">{val}</span>{" "}
                       <span className="text-xs font-light mr-1 ml-1 my-auto">
                         {" "}
-                        x
+                        {dimensionOrder[index]}
                       </span>
                     </div>
                   ))}

diff --git a/src/mikro-next/pages/StagePage.tsx b/src/mikro-next/pages/StagePage.tsx
@@ -165,7 +165,7 @@ const Page: React.FC<IRepresentationScreenProps> = () => {
         </ListRender>
       </DetailPane>
 
-      <div className="w-full h-full bg-gray-100">
+      <div className="w-full h-full">
         <MyCanvasComponent data={data} />
       </div>
     </ModelPageLayout>

diff --git a/src/mikro-next/pages/StagesPage.tsx b/src/mikro-next/pages/StagesPage.tsx
@@ -1,14 +1,14 @@
 import { PageLayout } from "@/components/layout/PageLayout";
 import React from "react";
-import ImageList from "../components/lists/ImageList";
+import StageList from "../components/lists/StageList";
 
 export type IRepresentationScreenProps = {};
 
 const ImagesPage: React.FC<IRepresentationScreenProps> = () => {
   return (
-    <PageLayout actions={<></>}>
+    <PageLayout actions={<></>} title="Stages">
       haahah
-      <ImageList pagination={{ limit: 30 }} />
+      <StageList pagination={{ limit: 30 }} />
     </PageLayout>
   );
 };