[feat] Add figures blob uri lazy loading in boards (#2945)

aimhubio · Jul 26, 2023 · ad977f3 · ad977f3
1 parent 32df391
commit ad977f3
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 49 deletions.
diff --git a/src/aimcore/web/ui/src/components/FigureBox/FigureBox.tsx b/src/aimcore/web/ui/src/components/FigureBox/FigureBox.tsx
@@ -70,7 +70,7 @@ function FigureBox(props: FigureBoxProps) {
             onUpdate={onAutoSize}
           />
         ) : (
-          <Spinner />
+          <Spinner size={24} />
         )}
       </div>
     </ErrorBoundary>

diff --git a/src/aimcore/web/ui/src/pages/Board/Board.tsx b/src/aimcore/web/ui/src/pages/Board/Board.tsx
@@ -39,7 +39,7 @@ import BoardConsole from './components/BoardConsole';
 import FormVizElement from './components/VisualizationElements/FormVizElement';
 import useBoardStore from './BoardStore';
 
-const liveUpdateEnabled = true;
+const liveUpdateEnabled = false;
 const liveUpdateInterval = 5000;
 
 function Board({

diff --git a/src/aimcore/web/ui/src/pages/Board/components/AudiosList.tsx b/src/aimcore/web/ui/src/pages/Board/components/AudiosList.tsx
@@ -12,19 +12,22 @@ function AudiosList(props: any) {
     ...audio.record,
   }));
 
+  const boxStyle = {
+    margin: '5px',
+    height: 50,
+    width: 'calc(100% - 10px)',
+    flex: 1,
+  };
+  const boxKey = (item: any) =>
+    `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
+      item.step
+    }_${item.index}`;
   return (
     <div className='AudiosList' style={{ height: '100%', overflow: 'auto' }}>
-      {data.map((item: any, i: number) => (
+      {data.map((item: any) => (
         <AudioBox
-          key={`${item?.container?.hash}_${item.name}_${JSON.stringify(
-            item.context,
-          )}_${item.step}_${item.index}`}
-          style={{
-            margin: '5px',
-            height: 50,
-            width: 'calc(100% - 10px)',
-            flex: 1,
-          }}
+          key={boxKey(item)}
+          style={boxStyle}
           blobData={item.blobs.data}
           format={item.format}
           caption={item.caption}

diff --git a/src/aimcore/web/ui/src/pages/Board/components/FiguresList.tsx b/src/aimcore/web/ui/src/pages/Board/components/FiguresList.tsx
@@ -1,38 +1,44 @@
 import * as React from 'react';
 
-import Figure from 'modules/BaseExplorer/components/Figure';
+import FigureBox from 'components/FigureBox';
+
+import pyodideEngine from 'services/pyodide/store';
 
 function FiguresList(props: any) {
-  console.log(props.data);
+  const data = props.data.map((figure: any) => ({
+    ...figure,
+    ...figure.data,
+    ...figure.figures,
+    ...figure.record,
+  }));
+
+  const boxStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 5,
+  };
+  const boxKey = (item: any) =>
+    `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
+      item.step
+    }`;
   return (
-    <div
-      style={{
-        height: '100%',
-        overflow: 'auto',
-      }}
-    >
-      {props.data.map((item: any, i: number) => (
-        <div
-          key={i}
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            margin: 5,
+    <div className='FiguresList' style={{ height: '100%', overflow: 'auto' }}>
+      {data.map((item: any) => (
+        <FigureBox
+          key={boxKey(item)}
+          style={boxStyle}
+          blobData={item.blobs.data}
+          format={item.format}
+          name={item.name}
+          context={item.context}
+          step={item.step}
+          engine={{
+            blobURI: pyodideEngine.blobURI,
           }}
-        >
-          <Figure
-            data={{ data: item }}
-            style={{
-              display: 'flex',
-              flex: 1,
-              width: '100%',
-              height: '100%',
-            }}
-          />
-        </div>
+        />
       ))}
     </div>
   );

diff --git a/src/aimcore/web/ui/src/pages/Board/components/ImagesList.tsx b/src/aimcore/web/ui/src/pages/Board/components/ImagesList.tsx
@@ -12,16 +12,21 @@ function ImagesList(props: any) {
     ...image.record,
   }));
 
+  const boxStyle = {
+    margin: '5px',
+    height: 'calc(100% - 10px)',
+    flex: 1,
+  };
+  const boxKey = (item: any) =>
+    `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
+      item.step
+    }_${item.index}`;
   return (
-    <div style={{ height: '100%', overflow: 'auto' }}>
-      {data.map((item: any, i: number) => (
+    <div className='ImagesList' style={{ height: '100%', overflow: 'auto' }}>
+      {data.map((item: any) => (
         <ImageBox
-          key={`${item.blobs.data}-${i}`}
-          style={{
-            margin: '5px',
-            height: 'calc(100% - 10px)',
-            flex: 1,
-          }}
+          key={boxKey(item)}
+          style={boxStyle}
           blobData={item.blobs.data}
           format={item.format}
           caption={item.caption}