From dd7172ae8c2ad6850934ae947b5d7fc57e4656ef Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Mon, 25 Sep 2023 16:27:02 +0200
Subject: [PATCH 1/2] feat: use react json view for array lens

---
 package.json             |  1 +
 pnpm-lock.yaml           | 15 +++++++++++++++
 src/lenses/ArrayLens.tsx | 38 +++++++++++++-------------------------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 92876694..4abdd893 100644
--- 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
index a15a7ec0..9f23dea8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ dependencies:
   '@types/dompurify':
     specifier: ^3.0.2
     version: 3.0.2
+  '@uiw/react-json-view':
+    specifier: 2.0.0-alpha.7
+    version: 2.0.0-alpha.7(@babel/runtime@7.22.6)(react-dom@18.2.0)(react@18.2.0)
   chroma-js:
     specifier: ^2.4.2
     version: 2.4.2
@@ -2256,6 +2259,18 @@ packages:
       eslint-visitor-keys: 3.4.2
     dev: true
 
+  /@uiw/react-json-view@2.0.0-alpha.7(@babel/runtime@7.22.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-hhlDlQcszeg3IcwxIc7NLpkzOVs4A4rB0IgkVZkeUnLOEx2AMlE2hlybgxJfm4E0c9NoRmOFgrYkL1SbeXBW4w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.10.0'
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@babel/runtime': 7.22.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@use-gesture/core@10.2.27:
     resolution: {integrity: sha512-V4XV7hn9GAD2MYu8yBBVi5iuWBsAMfjPRMsEVzoTNGYH72tf0kFP+OKqGKc8YJFQIJx6yj+AOqxmEHOmx2/MEA==}
     dev: false
diff --git a/src/lenses/ArrayLens.tsx b/src/lenses/ArrayLens.tsx
index 6e790f55..a8800227 100644
--- a/src/lenses/ArrayLens.tsx
+++ b/src/lenses/ArrayLens.tsx
@@ -1,35 +1,23 @@
 import 'twin.macro';
-import dataformat from '../dataformat';
 import { Lens } from '../types';
+import JsonView from '@uiw/react-json-view';
+import { githubLightTheme } from '@uiw/react-json-view/githubLight';
 
-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 = { ...githubLightTheme, '--w-rjv-background-color': '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 +26,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;

From c1dc665423c789f9f5586ded8de63577e48ea8ae Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Mon, 25 Sep 2023 16:52:55 +0200
Subject: [PATCH 2/2] feat: use default colorscheme for rjv

---
 src/lenses/ArrayLens.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lenses/ArrayLens.tsx b/src/lenses/ArrayLens.tsx
index a8800227..a9056956 100644
--- a/src/lenses/ArrayLens.tsx
+++ b/src/lenses/ArrayLens.tsx
@@ -1,9 +1,8 @@
 import 'twin.macro';
 import { Lens } from '../types';
 import JsonView from '@uiw/react-json-view';
-import { githubLightTheme } from '@uiw/react-json-view/githubLight';
 
-const THEME = { ...githubLightTheme, '--w-rjv-background-color': 'transparent' };
+const THEME = { backgroundColor: 'transparent' };
 
 const ArrayLens: Lens = ({ value }) => {
     const array = value as Array<number>;