expand the inspector if its previous version was expanded (#1475)

* expand the inspector if its previous version was expanded
this should be revised more thoroughly when we fix observablehq/inspector#12

closes #1458

* fix multiple display; apply suggestions from code review

* fix comment

* preserve deep expanded state

* handle missing expanded state

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

src/client/inspect.js

@@ -1,8 +1,15 @@
 import {Inspector} from "observablehq:runtime";
 
-export function inspect(value) {
+export function inspect(value, expanded) {
   const node = document.createElement("div");
   new Inspector(node).fulfilled(value);
+  if (expanded) {
+    for (const path of expanded) {
+      let child = node;
+      for (const i of path) child = child?.childNodes[i];
+      child?.dispatchEvent(new Event("mouseup")); // restore expanded state
+    }
+  }
   return node;
 }
 

src/client/main.js

@@ -29,6 +29,7 @@ export function define(cell) {
   const root = rootsById.get(id);
   const loading = findLoading(root);
   root._nodes = [];
+  root._expanded = [];
   if (loading) root._nodes.push(loading);
   const pending = () => reset(root, loading);
   const rejected = (error) => reject(root, error);
@@ -67,7 +68,7 @@ export function define(cell) {
 function noop() {}
 
 function clear(root) {
-  for (const v of root._nodes) v.remove();
+  root._expanded = root._nodes.map((v) => (v.remove(), getExpanded(v)));
   root._nodes.length = 0;
 }
 
@@ -130,7 +131,7 @@ function displayInline(root, value) {
 }
 
 function displayBlock(root, value) {
-  displayNode(root, isNode(value) ? value : inspect(value));
+  displayNode(root, isNode(value) ? value : inspect(value, root._expanded[root._nodes.length]));
 }
 
 export function undefine(id) {
@@ -173,3 +174,21 @@ export function registerRoot(id, node) {
   if (node == null) rootsById.delete(id);
   else rootsById.set(id, node);
 }
+
+function getExpanded(node) {
+  const expanded = node.querySelectorAll(".observablehq--expanded");
+  return expanded.length ? Array.from(expanded, (e) => getNodePath(node, e)) : undefined;
+}
+
+function getNodePath(node, descendant) {
+  const path = [];
+  while (descendant !== node) {
+    path.push(getChildIndex(descendant));
+    descendant = descendant.parentNode;
+  }
+  return path.reverse();
+}
+
+function getChildIndex(node) {
+  return Array.prototype.indexOf.call(node.parentNode.childNodes, node);
+}

yarn.lock

@@ -271,9 +271,9 @@
     isoformat "^0.2.0"
 
 "@observablehq/inspector@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@observablehq/inspector/-/inspector-5.0.0.tgz#7dec08d4fa20dfb79977ce62f7cc4a814b44e595"
-  integrity sha512-Vvg/TQdsZTUaeYbH0IKxYEz37FbRO6kdowoz2PrHLQif54NC1CjEihEjg+ZMSBn587GQxTFABu0CGkFZgtR1UQ==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@observablehq/inspector/-/inspector-5.0.1.tgz#586280d0bc5da55da8e715ade86ba438dc14b056"
+  integrity sha512-euwWxwDa6KccU4G3D2JBD7GI/2McJh/z7HHEzJKbj2TDa7zhI37eTbTxiwE9rgTWBagvVBel+hAmnJRYBYOv2Q==
   dependencies:
     isoformat "^0.2.0"