Daniel devtools tree

.gitignore

@@ -18,6 +18,7 @@ object_database/web/content/dist
 \#*
 \.#*
 *~
+.projectile
 
 # leading slash means only match at repo-root level
 /.python-version

object_database/web/content/src/CellHandler.js

@@ -62,6 +62,7 @@ class CellHandler {
         // devtools related messages
         this.sendMessageToDevtools = this.sendMessageToDevtools.bind(this);
         this.updateDevtools = this.updateDevtools.bind(this);
+        this.setupDevtools = this.setupDevtools.bind(this);
     }
 
     tearDownAllLiveCells() {
@@ -131,6 +132,7 @@ class CellHandler {
                  ])
              ])
         );
+        this.setupDevtools();
         this.sendMessageToDevtools({
             status: "initial load"
         });
@@ -507,6 +509,32 @@ class CellHandler {
         }
     }
 
+    /**
+      * Setup utilities for devtools to call using chrome.devtools.inspectedWindow.eval()
+      * TODO: potentially this should pass via the content-scripts
+      */
+    setupDevtools(){
+        const overlayId = "cells-devtools-overlay";
+        window.addDevtoolsHighlight = (id) => {
+            const cell = document.querySelector(`[data-cell-id="${id}"]`);
+            const rect = cell.getBoundingClientRect();
+            const overlay = document.createElement("div");
+            overlay.style.position = "absolute";
+            overlay.style.backgroundColor = "#cec848";
+            overlay.style.opacity = "0.5";
+            overlay.style.left = rect.left +"px";
+            overlay.style.top = rect.top + "px";
+            overlay.style.height = rect.height + "px";
+            overlay.style.width = rect.width + "px";
+            overlay.setAttribute("id", overlayId);
+            document.body.append(overlay);
+        }
+
+        window.removeDevtoolsHighlight = () => {
+            const overlays = document.querySelectorAll(`#${overlayId}`);
+            overlays.forEach((el) => el.remove());
+        }
+    }
     sendMessageToDevtools(msg){
         // TODO perhaps this should be run by a worker
         msg.type = "cells_devtools";
@@ -518,10 +546,12 @@ class CellHandler {
       **/
     updateDevtools(){
         const buildTree = (cell) => {
-            return {
-                name: cell.constructor.name,
-                identity: cell.identity,
-                children: mapChildren(cell.namedChildren)
+            if (cell.isCell) {
+                return {
+                    name: cell.constructor.name,
+                    id: cell.identity,
+                    children: mapChildren(cell.namedChildren)
+                }
             }
         }
         // NOTE: sometimes a named child is a cell, sometimes it's an array of cells
@@ -533,10 +563,16 @@ class CellHandler {
                     if (child){
                         if (child instanceof Array){
                             child.forEach((subchild) => {
-                                children.push(buildTree(subchild));
+                                const subTree = buildTree(subchild);
+                                if (subTree){
+                                    children.push(buildTree(subchild));
+                                }
                             })
                         }
-                        children.push(buildTree(child));
+                        const subTree = buildTree(child);
+                        if (subTree) {
+                            children.push(buildTree(child));
+                        }
                     }
                 })
             }

object_database/web/devtools/background.js

@@ -29,7 +29,7 @@ function connected(port) {
             // from the target window we forward this message to the panels
             // if the connection is not alive we log this in the devtools's
             // debugger console
-            notifyDevtoolsPabel(msg.data);
+            notifyDevtoolsPanel(msg.data);
         });
     }
     // notify if the port has disconnected
@@ -42,7 +42,7 @@ function connected(port) {
 
 chrome.runtime.onConnect.addListener(connected);
 
-function notifyDevtoolsPabel(msg){
+function notifyDevtoolsPanel(msg){
     if (portFromPanel){
         portFromPanel.postMessage(msg);
     } else {

object_database/web/devtools/cells_panel.css

@@ -22,6 +22,9 @@ div#cell-info {
     justify-content: center;
     align-items: center;
     min-width: 30%;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 20px;
 }
 
 .node {

object_database/web/devtools/cells_panel.html

@@ -3,8 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <title>Cells</title>
-    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
+    <script src="tree/dist/tree.bundle.js"></script>
     <link rel="stylesheet" type="text/css" href="cells_panel.css">
+    <link rel="stylesheet" href="tree/tree.css" />
   </head>
   <body>
       <div id="main"></div>

object_database/web/devtools/js/cell_panel.js

@@ -1,4 +1,4 @@
-import {CellsTree} from './tree.js';
+// import {CellsTree} from './tree.js';
 
 // GLOBALS (TODO: should be handled better)
 let state = null;
@@ -44,13 +44,69 @@ const reconnectingDisplay = () => {
     main.textContent = "Reconnecting: no cells loaded";
 }
 
+const updateInfoPanel = (node) => {
+    const infoPanel = document.getElementById("cell-info");
+    const id = node.getAttribute("data-original-id");
+    const name = node.name;
+    let info = `${name}\ncell-id: ${id}`;
+    const tree = document.querySelector("tree-graph");
+    const parentSubtree = tree.findParentSubTree(id, tree.data);
+    if (parentSubtree.name.match("Subscribed")) {
+        info = `${info}\nsubscribed to cell-id: ${parentSubtree.id}`;
+    }
+    /*
+    const nodeTree = parentSubtree.children.filter((n) => {
+        return n.id = node.id;
+    })[0]
+    let childIds = "";
+    nodeTree.children.forEach((c) => {
+        childIds = `${childIds}, ${c.id}`;
+    });
+    info = `${info}\nchild node ids: ${childIds}`;
+    */
+    infoPanel.innerText = info;
+}
+
 const cellsTreeDisplay = (cells) => {
     clearDisplay();
     // init and run
     // NOTE: the tree class itself attaches the
     // svg element to #main
-    const cTree = new CellsTree(cells);
-    cTree.setupTree();
+    // const cTree = new CellsTree(cells);
+    // cTree.setupTree();
+    const tree = document.createElement("tree-graph");
+    const main = document.getElementById("main");
+    main.append(tree);
+    tree.setAttribute("display-depth", 4);
+    // setup node hover event listeners
+    // NOTE: these are defined on window by CellHandler
+    tree.onNodeMouseover = (event) => {
+        // highlight the corresponding element in the target window
+        const id = event.target.getAttribute("data-original-id");
+        chrome.devtools.inspectedWindow.eval(
+            `window.addDevtoolsHighlight(${id})`
+        );
+    }
+    tree.onNodeMouseleave = (event) => {
+        // un-highlight the corresponding element in the target window
+        chrome.devtools.inspectedWindow.eval(
+            `window.removeDevtoolsHighlight()`
+        );
+    }
+
+    tree.onNodeClick = (event) => {
+        updateInfoPanel(event.target);
+    }
+    tree.customizeNode = (node) => {
+        if (node.name == "Subscribed") {
+            node.style.backgroundColor = "var(--palette-beige)";
+        }
+        // customize a tooltip here
+        const id = node.getAttribute("data-original-id");
+        node.title = `cell-id: ${id}`;
+    }
+    // displaying tree
+    tree.setup(cells);
 }