Add pretty display support for ZLib-compressed blobs

README.md

@@ -8,6 +8,7 @@
 Administration GUI for the Google Cloud Datastore Emulator.
 
 - Supports browsing, editing, creating, deleting, querying (using GQL), import, export, ...
+- Supports formatted display of JSON properties & compressed properties
 - Supports large databases
 - Does not have problematic dependencies (such as gRPC, which are not available
   on all platforms)
@@ -30,7 +31,7 @@ features, had performance issues, were painful to set up, or had dependencies
 that prevented them from e.g. being installed in a non-x86 Docker image.
 
 This project tries to fix all of the issues with the other Datastore admin
-interfaces, and even improve on the original Google interface in some areas.
+interfaces, and bring improvements on the original Google interface.
 
 
 ## 🚧 Not yet implemented

package.json

@@ -17,6 +17,7 @@
     "http2-proxy": "^5.0.53",
     "jsesc": "^3.0.2",
     "node-static": "^0.7.11",
+    "pako": "^2.0.4",
     "yargs": "14.2.3"
   },
   "devDependencies": {

src/PropertyValueEdit.tsx

@@ -19,8 +19,26 @@ import PlusIcon from "./ui/icons/plus";
 import ExclamationCircle from "./ui/icons/exclamation-circle";
 import TrashIcon from "./ui/icons/trash";
 import LinkIcon from "./ui/icons/link";
+import ArrowsAngleContractIcon from "./ui/icons/arrows-angle-contract";
 import { Link } from "wouter";
 import Modal from "./ui/Modal";
+import { inflate } from "pako";
+
+function decompress(raw: string) {
+  if (raw.length < 1) {
+    return null;
+  }
+  const rawLength = raw.length;
+  const array = new Uint8Array(new ArrayBuffer(rawLength));
+  for (let i = 0; i < rawLength; i++) {
+    array[i] = raw.charCodeAt(i);
+  }
+  try {
+    return new TextDecoder().decode(inflate(array));
+  } catch (e) {
+    return null;
+  }
+}
 
 function toPrettyValue(v: string | null) {
   if (v == null) {
@@ -119,17 +137,26 @@ function BlobValueEdit({
   );
   let blob: string | null = null;
   let prettyValue: string | null = null;
+  let decompressedBlob: string | null = null;
   try {
     blob = atob(value);
-    prettyValue = toPrettyValue(blob);
+    decompressedBlob = decompress(blob);
+    prettyValue = toPrettyValue(decompressedBlob ?? blob);
   } catch (e) {
     //pass
   }
   return (
     <div className="mb-3">
       <div className="d-flex justify-content-between align-items-center mb-1">
         <label className="form-label mb-1">Value (Base64)</label>
-        {prettyValue != null ? <PrettyValueButton value={prettyValue} /> : null}
+        <div>
+          {decompressedBlob != null ? (
+            <ArrowsAngleContractIcon className="me-2" title="Compressed" />
+          ) : null}
+          {prettyValue != null ? (
+            <PrettyValueButton value={prettyValue} />
+          ) : null}
+        </div>
       </div>
       <textarea
         className={classNames("form-control", length == null && "is-invalid")}

src/ui/icons/arrows-angle-contract.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { IconProps } from "./icon";
+
+const ArrowsAngleContract = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    fill="currentColor"
+    className="bi"
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    {props.title != null ? <title>{props.title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z"
+    />
+  </svg>
+);
+
+export default ArrowsAngleContract;

types/pako.d.ts

@@ -0,0 +1,3 @@
+declare module "pako" {
+  export function inflate(input: Uint8Array);
+}

yarn.lock

@@ -4426,6 +4426,11 @@ pacote@^11.3.1:
     ssri "^8.0.1"
     tar "^6.1.0"
 
+pako@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d"
+  integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz"