Improve compression for workspaces

client/src/hooks/useWorkspace.tsx

@@ -1,9 +1,10 @@
 import { useSnackbar } from "components/generic/Snackbar";
 import download from "downloadjs";
 import { fileDialog as file } from "file-select-dialog";
-import sizeOf from "object-sizeof";
-import { find } from "lodash";
+import { getLayerHandler } from "layers/layerHandlers";
+import { find, pick } from "lodash";
 import memo from "memoizee";
+import sizeOf from "object-sizeof";
 import { useMemo } from "react";
 import { UIState, useUIState } from "slices/UIState";
 import { formatByte, useBusyState } from "slices/busy";
@@ -28,6 +29,26 @@ type Workspace = {
   layers: Layers;
 };
 
+const compressUIState = (state: UIState) => pick(state, "workspaceMeta");
+
+function minimise(ui: UIState, layers: Layers) {
+  return {
+    UIState: compressUIState(ui),
+    layers: {
+      layers: layers?.layers?.map((l) => {
+        const handler = getLayerHandler(l);
+        return {
+          ...l,
+          source: {
+            type: l.source?.type,
+            ...handler?.compress?.(l.source),
+          },
+        };
+      }),
+    },
+  };
+}
+
 export function useWorkspace() {
   const notify = useSnackbar();
   const [layers, setLayers] = useLayers();
@@ -63,7 +84,7 @@ export function useWorkspace() {
       },
       save: async (raw?: boolean, name?: string) => {
         notify("Saving workspace...");
-        const content = JSON.stringify({ layers, UIState });
+        const content = JSON.stringify(minimise(UIState, layers));
         const filename = name ?? id("-");
         if (raw) {
           const name = `${filename}.workspace.json`;
@@ -79,7 +100,7 @@ export function useWorkspace() {
         }
       },
       estimateWorkspaceSize: memo((raw?: boolean) => {
-        const size = sizeOf({ layers, UIState });
+        const size = sizeOf(minimise(UIState, layers));
         return size * (raw ? 1 : LZ_COMPRESSION_RATIO);
       }),
     }),

client/src/layers/LayerController.tsx

@@ -30,6 +30,7 @@ export type LayerController<K extends string, T> = {
     | { claimed: false }
   >;
   getSources?: (layer?: Layer<T>) => (Feature & { language?: string })[];
+  compress?: (t?: T) => any;
   onEditSource?: (
     layer?: Layer<T>,
     id?: string,

client/src/layers/map/index.tsx

@@ -18,6 +18,7 @@ import {
   isUndefined,
   keys,
   map,
+  pick,
   round,
   set,
   startCase,
@@ -45,6 +46,7 @@ export const controller = {
       ? `${layer.source.map.name} (${startCase(layer.source.map.format)})`
       : "Untitled Map",
   error: (layer) => layer?.source?.parsedMap?.error,
+  compress: (layer) => pick(layer, ["map", "options"]),
   claimImportedFile: async (file) =>
     keys(mapParsers).includes(ext(file.name))
       ? {

client/src/layers/query/index.tsx

@@ -18,7 +18,6 @@ import { LayerController, inferLayerName } from "layers";
 import { MapLayer, MapLayerData } from "layers/map";
 import { TraceLayerData, controller as traceController } from "layers/trace";
 import {
-  each,
   filter,
   find,
   isArray,
@@ -27,9 +26,10 @@ import {
   mapValues,
   merge,
   omit,
+  pick,
   reduce,
   set,
-  truncate,
+  truncate
 } from "lodash";
 import { nanoid as id } from "nanoid";
 import { produce, withProduce } from "produce";
@@ -71,6 +71,18 @@ export const controller = {
   ...omit(traceController, "claimImportedFile"),
   key: "query",
   icon: <RouteTwoTone />,
+  compress: (layer) =>
+    pick(layer, [
+      "mapLayerKey",
+      "query",
+      "start",
+      "end",
+      "algorithm",
+      "onion",
+      "step",
+      "code",
+      "breakpoints",
+    ]),
   editor: withProduce(({ value, produce }) => {
     const { algorithm } = value?.source ?? {};
     const {

client/src/layers/trace/index.tsx

@@ -52,6 +52,7 @@ import {
   mapValues,
   merge,
   negate,
+  pick,
   set,
   startCase,
 } from "lodash";
@@ -164,6 +165,8 @@ export const controller = {
   inferName: (layer) => layer.source?.trace?.name ?? "Untitled Trace",
   error: (layer) =>
     layer?.source?.trace?.error || layer?.source?.parsedTrace?.error,
+  compress: (layer) =>
+    pick(layer, ["trace", "onion", "step", "code", "breakpoints"]),
   claimImportedFile: async (file) =>
     isTraceFormat(file)
       ? {