perspective image display

packages/tools/src/stringTools.ts

@@ -46,6 +46,9 @@ export function stringifyCellValue(value) {
 }
 
 export function safeJsonParse(json, defaultValue?, logError = false) {
+  if (_isArray(json) || _isPlainObject(json)) {
+    return json;
+  }
   try {
     return JSON.parse(json);
   } catch (err) {
@@ -93,3 +96,22 @@ export function isWktGeometry(s) {
     /^POINT\s*\(|^LINESTRING\s*\(|^POLYGON\s*\(|^MULTIPOINT\s*\(|^MULTILINESTRING\s*\(|^MULTIPOLYGON\s*\(|^GEOMCOLLECTION\s*\(|^GEOMETRYCOLLECTION\s*\(/
   );
 }
+
+export function arrayBufferToBase64(buffer) {
+  var binary = '';
+  var bytes = [].slice.call(new Uint8Array(buffer));
+  bytes.forEach(b => (binary += String.fromCharCode(b)));
+  return btoa(binary);
+}
+
+export function getAsImageSrc(obj) {
+  if (obj?.type == 'Buffer' && _isArray(obj?.data)) {
+    return `data:image/png;base64, ${arrayBufferToBase64(obj?.data)}`;
+  }
+
+  if (_isString(obj) && (obj.startsWith('http://') || obj.startsWith('https://'))) {
+    return obj;
+  }
+
+  return null;
+}

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { safeJsonParse } from 'dbgate-tools';
+  import { getAsImageSrc, safeJsonParse } from 'dbgate-tools';
+  import { isArray } from 'lodash';
 
   import CellValue from '../datagrid/CellValue.svelte';
   import JSONTree from '../jsontree/JSONTree.svelte';
@@ -14,7 +15,14 @@
 <td rowspan={rowSpan} data-column={columnIndex}>
   {#if value !== undefined}
     {#if displayType == 'json'}
-      <JSONTree value={safeJsonParse(value)} slicedKeyCount={1} disableContextMenu />
+      <JSONTree value={safeJsonParse(value, value?.toString())} slicedKeyCount={1} disableContextMenu />
+    {:else if displayType == 'image'}
+      {@const src = getAsImageSrc(value)}
+      {#if src}
+        <img {src} />
+      {:else}
+        <span class="null"> (no image)</span>
+      {/if}
     {:else}
       <CellValue {rowData} {value} />
     {/if}
@@ -37,4 +45,8 @@
     border: 3px solid var(--theme-icon-blue);
     padding: 0px;
   }
+  .null {
+    color: var(--theme-font-3);
+    font-style: italic;
+  }
 </style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -236,13 +236,17 @@
             ] || 'default'
           })`,
           submenu: [
+            {
+              text: 'Default',
+              onClick: () => setColumnDisplay('default'),
+            },
             {
               text: 'JSON',
               onClick: () => setColumnDisplay('json'),
             },
             {
-              text: 'Default',
-              onClick: () => setColumnDisplay('default'),
+              text: 'Image',
+              onClick: () => setColumnDisplay('image'),
             },
           ],
         });