don’t redraw on resize

examples/api/docs/components/apiHeatmap.js

@@ -15,11 +15,25 @@ const marginRight = margin;
 const marginBottom = margin;
 const marginLeft = margin;
 
+const canvasCache = new WeakSet();
+
 export function ApiHeatmap(
   table,
-  {color, width, height = 550, y1, y2, title, label, yMetric, fillMetric, routeFilter, type = "route"}
+  {
+    canvas = document.createElement("canvas"),
+    color,
+    width,
+    height = 550,
+    y1,
+    y2,
+    title,
+    label,
+    yMetric,
+    fillMetric,
+    routeFilter,
+    type = "route"
+  }
 ) {
-  const canvasCache = new WeakMap();
   const count = table.getChild(yMetric);
   const route = table.getChild(fillMetric);
   const plot = Plot.plot({
@@ -43,9 +57,8 @@ export function ApiHeatmap(
   const div = document.createElement("div");
   div.style = "position: relative;";
 
-  let canvas = canvasCache.get(table);
-  if (!canvas) {
-    canvasCache.set(table, (canvas = document.createElement("canvas")));
+  if (!canvasCache.has(canvas)) {
+    canvasCache.add(canvas);
     canvas.width = dx;
     canvas.height = dy;
     canvas.style = `

examples/api/docs/index.md

@@ -12,6 +12,12 @@ const heatmaps = FileAttachment("data/api-heatmaps.arrow").arrow();
 const summary = FileAttachment("data/summary.csv").csv();
 ```
 
+```js
+const latencyByRouteCanvas = document.createElement("canvas");
+const latencyCanvas = document.createElement("canvas");
+const latencyFilterCanvas = document.createElement("canvas");
+```
+
 ```js
 const total = d3.sum(heatmaps.getChild("duration_count"))
 const color = Plot.scale({
@@ -36,7 +42,7 @@ const endpointLegend = (endpoint) => Plot.rect([endpoint], { x1: 0, y1: 0, x2: 1
 Analyzing API logs can be helpful for finding under-performing endpoints and web scrapers, but looking at this data in aggregate often hides interesting trends. This visualization shows a heatmap of ${d3.format('.2s')(total)} API requests for [observablehq.com](https://observablehq.com/) from a sampled 7-day period. Each cell is colored by the most common endpoint at the point in time and duration. Hover over a pixel to read the name of the endpoint.
 
 <div class="grid grid-cols-1" style="grid-auto-rows: 611px;">
-  <div class="card">${resize((width) => ApiHeatmap(heatmaps, {color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route'}))}</div>
+  <div class="card">${resize((width) => ApiHeatmap(heatmaps, {canvas: latencyByRouteCanvas, color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route'}))}</div>
 </div>
 
 What do we see? There are clear intervals of activity for certain endpoints, such as ${endpointLegend(`document/{id}@{version}`)} `document/{id}@{version}`, the endpoint used to request a specific verson of an Observable notebook, and ${endpointLegend(`documents/{at}`)} `documents/{at}`, which returns all the notebooks for a given user.
@@ -53,7 +59,7 @@ If we want to identify general periodicity in our data, we can change our catego
 
 <div class="grid grid-cols-1" style="grid-auto-rows: 651px;">
   <div class="card">
-    <div>${resize((width) => ApiHeatmap(heatmaps, {color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route', type: 'frequency'}))}</div>
+    <div>${resize((width) => ApiHeatmap(heatmaps, {canvas: latencyCanvas, color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route', type: 'frequency'}))}</div>
     <div style="float: right">${Plot.legend({color: {domain: d3.extent(count, d => d / 2), nice: true }})}</div>
 </div>
 
@@ -63,7 +69,7 @@ ${routeDropdown}
 
 <div class="grid grid-cols-1" style="grid-auto-rows: 651px;">
   <div class="card">
-    <div>${resize((width) => ApiHeatmap(heatmaps, {color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route', type: 'frequency', routeFilter}))}</div>
+    <div>${resize((width) => ApiHeatmap(heatmaps, {canvas: latencyFilterCanvas, color, width, title: "Response latency heatmap", label: "Duration (ms)", y1: 0.5, y2: 10_000, yMetric: 'duration_count', fillMetric: 'duration_route', type: 'frequency', routeFilter}))}</div>
     <div style="float: right">${Plot.legend({color: {domain: d3.extent(count, d => d / 2), nice: true }})}</div>
 </div>
 

examples/api/package.json

@@ -6,7 +6,7 @@
     "postinstall": "ln -sf ../../../../bin/observable-init.js node_modules/.bin/observable"
   },
   "dependencies": {
-    "@observablehq/cli": "link:../.."
+    "@observablehq/framework": "link:../.."
   },
   "engines": {
     "node": ">=20.6"

examples/chess/package.json

@@ -6,7 +6,7 @@
     "postinstall": "ln -sf ../../../../bin/observable-init.js node_modules/.bin/observable"
   },
   "dependencies": {
-    "@observablehq/cli": "link:../..",
+    "@observablehq/framework": "link:../..",
     "d3-fetch": "^3.0.1",
     "d3-time-format": "^4.1.0",
     "jszip": "^3.10.1"

examples/eia/package.json

@@ -6,7 +6,7 @@
     "postinstall": "ln -sf ../../../../bin/observable-init.js node_modules/.bin/observable"
   },
   "dependencies": {
-    "@observablehq/cli": "link:../..",
+    "@observablehq/framework": "link:../..",
     "d3": "^7.8.5",
     "d3-array": "^3.2.4",
     "d3-dsv": "^3.0.1",