feat: ability to display vector data

outerbase · Jul 30, 2024 · 4c59bcd · 4c59bcd
1 parent 0aff07e
commit 4c59bcd
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 19 deletions.
diff --git a/src/components/gui/table-cell/generic-cell.tsx b/src/components/gui/table-cell/generic-cell.tsx
@@ -110,6 +110,50 @@ function ForeignKeyColumnSnippet(props: SneakpeakProps) {
   );
 }
 
+function BlobCellValue({
+  value,
+  vector,
+}: {
+  value: Uint8Array | ArrayBuffer | number[];
+  vector?: boolean;
+}) {
+  if (vector) {
+    const floatArray = [...new Float32Array(new Uint8Array(value).buffer)].join(
+      ", "
+    );
+
+    return (
+      <div className="flex">
+        <div className="mr-2 justify-center items-center flex-col">
+          <span className="bg-blue-500 text-white inline rounded p-1 pl-2 pr-2">
+            vec
+          </span>
+        </div>
+        <div className="text-orange-600">[{floatArray}]</div>
+      </div>
+    );
+  } else {
+    const sliceByte = value.slice(0, 64);
+    const base64Text = btoa(
+      new Uint8Array(sliceByte).reduce(
+        (data, byte) => data + String.fromCharCode(byte),
+        ""
+      )
+    );
+
+    return (
+      <div className="flex">
+        <div className="mr-2 justify-center items-center flex-col">
+          <span className="bg-blue-500 text-white inline rounded p-1 pl-2 pr-2">
+            blob
+          </span>
+        </div>
+        <div className="text-orange-600">{base64Text}</div>
+      </div>
+    );
+  }
+}
+
 export default function GenericCell({
   value,
   onFocus,
@@ -189,29 +233,21 @@ export default function GenericCell({
       );
     }
 
-    if (value instanceof ArrayBuffer || value instanceof Uint8Array) {
-      const sliceByte = value.slice(0, 64);
-      const base64Text = btoa(
-        new Uint8Array(sliceByte).reduce(
-          (data, byte) => data + String.fromCharCode(byte),
-          ""
-        )
-      );
-
+    if (
+      value instanceof ArrayBuffer ||
+      value instanceof Uint8Array ||
+      Array.isArray(value)
+    ) {
       return (
-        <div className="flex">
-          <div className="mr-2 justify-center items-center flex-col">
-            <span className="bg-blue-500 text-white inline rounded p-1 pl-2 pr-2">
-              blob
-            </span>
-          </div>
-          <div className="text-orange-600">{base64Text}</div>
-        </div>
+        <BlobCellValue
+          value={value}
+          vector={header.headerData?.type.includes("F32_BLOB")}
+        />
       );
     }
 
     return <span>{value.toString()}</span>;
-  }, [value, textBaseStyle, isChanged]);
+  }, [value, textBaseStyle, isChanged, header]);
 
   return (
     <div

diff --git a/src/drivers/turso-driver.tsx b/src/drivers/turso-driver.tsx
@@ -37,7 +37,12 @@ export function transformRawResult(raw: ResultSet): DatabaseResultSet {
 
   const rows = raw.rows.map((r) =>
     headers.reduce((a, b, idx) => {
-      a[b.name] = r[idx];
+      const cellValue = r[idx];
+      if (cellValue instanceof Uint8Array) {
+        a[b.name] = Array.from(cellValue);
+      } else {
+        a[b.name] = r[idx];
+      }
       return a;
     }, {} as DatabaseRow)
   );