Optimizing caches

plugs/federation/federation.ts

@@ -119,13 +119,12 @@ export async function readFile(
   name: string,
 ): Promise<{ data: Uint8Array; meta: FileMeta } | undefined> {
   const url = federatedPathToUrl(name);
-  console.log("Fetching fedderated file", url);
+  console.log("Fetching federated file", url);
   const r = await nativeFetch(url);
   if (r.status === 503) {
     throw new Error("Offline");
   }
   const fileMeta = await responseToFileMeta(r, name);
-  console.log("Fetching", url);
   if (r.status === 404) {
     throw Error("Not found");
   }

web/client.ts

@@ -1016,32 +1016,15 @@ export class Client {
   private widgetHeightCache = new LimitedMap<number>(100); // bodytext -> height
 
   async loadCaches() {
-    const [imageHeightCache, widgetHeightCache, widgetCache] = await this
+    const [widgetHeightCache, widgetCache] = await this
-      .stateDataStore.batchGet([["cache", "imageHeight"], [
+      .stateDataStore.batchGet([[
         "cache",
         "widgetHeight",
       ], ["cache", "widgets"]]);
-    this.imageHeightCache = new LimitedMap(100, imageHeightCache || {});
     this.widgetHeightCache = new LimitedMap(100, widgetHeightCache || {});
     this.widgetCache = new LimitedMap(100, widgetCache || {});
   }
 
-  debouncedImageCacheFlush = throttle(() => {
-    this.stateDataStore.set(["cache", "imageHeight"], this.imageHeightCache)
-      .catch(
-        console.error,
-      );
-    console.log("Flushed image height cache to store");
-  }, 2000);
-
-  setCachedImageHeight(url: string, height: number) {
-    this.imageHeightCache.set(url, height);
-    this.debouncedImageCacheFlush();
-  }
-  getCachedImageHeight(url: string): number {
-    return this.imageHeightCache.get(url) ?? -1;
-  }
-
   debouncedWidgetHeightCacheFlush = throttle(() => {
     this.stateDataStore.set(
       ["cache", "widgetHeight"],

web/cm_plugins/inline_image.ts

@@ -25,7 +25,7 @@ class InlineImageWidget extends WidgetType {
   }
 
   get estimatedHeight(): number {
-    const cachedHeight = this.client.getCachedImageHeight(this.url);
+    const cachedHeight = this.client.getCachedWidgetHeight(`image:${this.url}`);
     // console.log("Estimated height requested", this.url, cachedHeight);
     return cachedHeight;
   }
@@ -35,11 +35,13 @@ class InlineImageWidget extends WidgetType {
     let url = this.url;
     url = resolvePath(this.client.currentPage!, url, true);
     // console.log("Creating DOM", this.url);
-    const cachedImageHeight = this.client.getCachedImageHeight(url);
+    const cachedImageHeight = this.client.getCachedWidgetHeight(
+      `image:${this.url}`,
+    );
     img.onload = () => {
       // console.log("Loaded", this.url, "with height", img.height);
       if (img.height !== cachedImageHeight) {
-        this.client.setCachedImageHeight(url, img.height);
+        this.client.setCachedWidgetHeight(`image:${this.url}`, img.height);
       }
     };
     img.src = url;

web/cm_plugins/table.ts

@@ -6,18 +6,20 @@ import {
 } from "./util.ts";
 
 import { renderMarkdownToHtml } from "../../plugs/markdown/markdown_render.ts";
-import { ParseTree } from "$sb/lib/tree.ts";
+import { ParseTree, renderToText } from "$sb/lib/tree.ts";
 import { lezerToParseTree } from "../../common/markdown_parser/parse_tree.ts";
 import type { Client } from "../client.ts";
 import { resolveAttachmentPath } from "$sb/lib/resolve.ts";
 
 class TableViewWidget extends WidgetType {
+  tableBodyText: string;
   constructor(
     readonly pos: number,
-    readonly editor: Client,
+    readonly client: Client,
     readonly t: ParseTree,
   ) {
     super();
+    this.tableBodyText = renderToText(t);
   }
 
   toDOM(): HTMLElement {
@@ -27,7 +29,7 @@ class TableViewWidget extends WidgetType {
       // Pulling data-pos to put the cursor in the right place, falling back
       // to the start of the table.
       const dataAttributes = (e.target as any).dataset;
-      this.editor.editorView.dispatch({
+      this.client.editorView.dispatch({
         selection: {
           anchor: dataAttributes.pos ? +dataAttributes.pos : this.pos,
         },
@@ -40,15 +42,37 @@ class TableViewWidget extends WidgetType {
       annotationPositions: true,
       translateUrls: (url) => {
         if (!url.includes("://")) {
-          url = resolveAttachmentPath(this.editor.currentPage!, decodeURI(url));
+          url = resolveAttachmentPath(this.client.currentPage!, decodeURI(url));
         }
 
         return url;
       },
       preserveAttributes: true,
     });
+
+    setTimeout(() => {
+      this.client.setCachedWidgetHeight(
+        `table:${this.tableBodyText}`,
+        dom.clientHeight,
+      );
+    });
     return dom;
   }
+
+  get estimatedHeight(): number {
+    const height = this.client.getCachedWidgetHeight(
+      `table:${this.tableBodyText}`,
+    );
+    console.log("Calling estimated height for table", height);
+    return height;
+  }
+
+  eq(other: WidgetType): boolean {
+    return (
+      other instanceof TableViewWidget &&
+      other.tableBodyText === this.tableBodyText
+    );
+  }
 }
 
 export function tablePlugin(editor: Client) {

web/components/panel_html.ts

@@ -99,17 +99,6 @@ function loadJsByUrl(url) {
   });
 }
 </script>
-<!-- Load SB's own CSS here too -->
-<link rel="stylesheet" href="/.client/main.css">
-<style>
-html,
-body {
-    height: initial !important;
-    overflow-x: initial !important;
-    overflow-y: hidden !important;
-    background-color: var(--root-background-color);
-}
-</style>
 </head>
 <body>