Merge pull request #249 from Renumics/feature/better-array-view

feat: use react json view for array lens
Renumics · Sep 25, 2023 · a8d100d · a8d100d
2 parents 69948e5 + c1dc665
commit a8d100d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
         "@tailwindcss/typography": "^0.5.9",
         "@tippyjs/react": "^4.2.6",
         "@types/dompurify": "^3.0.2",
+        "@uiw/react-json-view": "2.0.0-alpha.7",
         "chroma-js": "^2.4.2",
         "comlink": "^4.4.1",
         "cropperjs": "^1.5.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lenses/ArrayLens.tsx b/src/lenses/ArrayLens.tsx
@@ -1,35 +1,22 @@
 import 'twin.macro';
-import dataformat from '../dataformat';
 import { Lens } from '../types';
+import JsonView from '@uiw/react-json-view';
 
-interface ArrayProps {
-    value: Array<number>;
-}
-
-const ArrayComponent = ({ value }: ArrayProps): JSX.Element => {
-    return (
-        <>
-            <div tw="font-bold">[</div>
-            {value.map((element, i) =>
-                Array.isArray(element) ? (
-                    <ArrayComponent value={element} key={i} />
-                ) : (
-                    <div tw="m-1" key={i}>
-                        {dataformat.formatNumber(element)}
-                    </div>
-                )
-            )}
-            <div tw="font-bold">]</div>
-        </>
-    );
-};
+const THEME = { backgroundColor: 'transparent' };
 
 const ArrayLens: Lens = ({ value }) => {
     const array = value as Array<number>;
 
     return (
-        <div tw="text-xs px-1 py-0.5 flex flex-wrap content-center items-center h-full">
-            <ArrayComponent value={array} />
+        <div tw="w-full h-full overflow-y-auto">
+            <JsonView
+                value={array}
+                style={THEME}
+                displayObjectSize={false}
+                displayDataTypes={false}
+                highlightUpdates={false}
+                enableClipboard={false}
+            />
         </div>
     );
 };
@@ -38,7 +25,7 @@ ArrayLens.key = 'ArrayLens';
 ArrayLens.dataTypes = ['array', 'Embedding', 'Window'];
 ArrayLens.defaultHeight = 22;
 ArrayLens.minHeight = 22;
-ArrayLens.maxHeight = 128;
+ArrayLens.maxHeight = 512;
 ArrayLens.displayName = 'Array';
 
 export default ArrayLens;