From 4ced94f07065029ad10d952f0f2cdfee5ceb2fe6 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 15 Sep 2022 16:48:57 +0200
Subject: [PATCH] perspective image display

---
 packages/tools/src/stringTools.ts             | 22 +++++++++++++++++++
 .../src/perspectives/PerspectiveCell.svelte   | 16 ++++++++++++--
 .../src/perspectives/PerspectiveTable.svelte  |  8 +++++--
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/tools/src/stringTools.ts b/packages/tools/src/stringTools.ts
index 0b5f7bbf1..8705ac370 100644
--- a/packages/tools/src/stringTools.ts
+++ b/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;
+}
diff --git a/packages/web/src/perspectives/PerspectiveCell.svelte b/packages/web/src/perspectives/PerspectiveCell.svelte
index c3793a4be..c161732bd 100644
--- a/packages/web/src/perspectives/PerspectiveCell.svelte
+++ b/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>
diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte
index 168f45652..7a4ada018 100644
--- a/packages/web/src/perspectives/PerspectiveTable.svelte
+++ b/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'),
             },
           ],
         });