Fix graph issue when deleting node (#401)

* create commonjs modules

This is to fix a problem at startup regarding instantiation of objects.
See:
- foambubble/foam#394 (comment)
- https://discord.com/channels/729975036148056075/737970741324152882/784180656560275507

* minor style tweaks

* fix(dataviz): selected nodes must exist after updating graph data (#397)

* add graph view errors to foam log

packages/foam-core/tsconfig.json

@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "importHelpers": true,
     "downlevelIteration": true,
-    "target": "es2019",
     // commonjs module format is used so that the incremental
     // tsc build-mode ran during development can replace individual
     // files (as opposed to generate the .cjs.development.js bundle.

packages/foam-vscode/src/features/dataviz.ts

@@ -1,7 +1,7 @@
 import * as vscode from "vscode";
 import * as path from "path";
 import { FoamFeature } from "../types";
-import { Foam } from "foam-core";
+import { Foam, Logger } from "foam-core";
 import { TextDecoder } from "util";
 import { getTitleMaxLength } from "../settings";
 import { isSome } from "../utils";
@@ -120,6 +120,10 @@ async function createGraphPanel(foam: Foam, context: vscode.ExtensionContext) {
             vscode.window.showTextDocument(doc, vscode.ViewColumn.One);
           });
           break;
+
+        case "error":
+          Logger.error("An error occurred in the graph view", message.payload);
+          break;
       }
     },
     undefined,

packages/foam-vscode/static/graphs/default/graph.js

@@ -9,7 +9,7 @@ function getStyle(name, fallback) {
 
 const style = {
   background: getStyle(`--vscode-panel-background`, "#202020"),
-  fontSize: parseInt(getStyle(`--vscode-font-size`, 12)),
+  fontSize: parseInt(getStyle(`--vscode-font-size`, 12)) - 2,
   highlightedForeground: getStyle(
     "--vscode-list-highlightForeground",
     "#f9c74f"
@@ -27,7 +27,7 @@ const style = {
 const sizeScale = d3
   .scaleLinear()
   .domain([0, 30])
-  .range([1, 3])
+  .range([0.5, 2])
   .clamp(true);
 
 const labelAlpha = d3
@@ -97,6 +97,12 @@ const Actions = {
       });
       m.data.links = links; // links can be swapped out without problem
 
+      // check that selected/hovered nodes are still valid (see #397)
+      m.hoverNode = remaining.has(m.hoverNode) ? m.hoverNode : null;
+      m.selectedNodes = new Set(
+        Array.from(m.selectedNodes).filter(nId => remaining.has(nId))
+      );
+
       // annoying we need to call this function, but I haven't found a good workaround
       graph.graphData(m.data);
     }),
@@ -124,7 +130,7 @@ function initDataviz(channel) {
     .d3Force("x", d3.forceX())
     .d3Force("y", d3.forceY())
     .d3Force("collide", d3.forceCollide(graph.nodeRelSize()))
-    .linkWidth(0.5)
+    .linkWidth(0.2)
     .linkDirectionalParticles(1)
     .linkDirectionalParticleWidth(link =>
       getLinkState(link, model) === "highlighted" ? 1 : 0
@@ -142,7 +148,7 @@ function initDataviz(channel) {
       const label = info.title;
 
       Draw(ctx)
-        .circle(node.x, node.y, size + 0.5, border)
+        .circle(node.x, node.y, size + 0.2, border)
         .circle(node.x, node.y, size, fill)
         .text(label, node.x, node.y + size + 1, fontSize, textColor);
     })
@@ -260,6 +266,19 @@ try {
       type: "webviewDidLoad"
     });
   };
+  window.addEventListener("error", error => {
+    vscode.postMessage({
+      type: "error",
+      payload: {
+        message: error.message,
+        filename: error.filename,
+        lineno: error.lineno,
+        colno: error.colno,
+        error: error.error
+      }
+    });
+  });
+
   window.addEventListener("message", event => {
     const message = event.data;
 

tsconfig.base.json

@@ -4,6 +4,8 @@
     "declaration": true,
     "declarationMap": true,
     "baseUrl": ".",
+    "module": "commonjs",
+    "target": "ES2019",
     "paths": {
       "foam-core": ["./packages/foam-core/src"],
       "foam-cli": ["./packages/foam-cli/src"],