Bump js-yaml from 4.1.0 to 4.1.1

Bumps [js-yaml](https://github.com/nodeca/js-yaml) from 4.1.0 to 4.1.1.
- [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nodeca/js-yaml/compare/4.1.0...4.1.1)

---
updated-dependencies:
- dependency-name: js-yaml
  dependency-version: 4.1.1
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

galaxy/static/bundled/galaxy/galaxy-index.js

@@ -0,0 +1,138 @@
+import { default as ForceGraph3D } from "3d-force-graph";
+import { forceX, forceY, forceZ } from "d3-force-3d";
+// biome-ignore lint/style/noNamespaceImport: This is how it should be imported
+import * as Three from "three";
+import SpriteText from "three-spritetext";
+
+/**
+ * @typedef GalaxyConfig
+ * @property {number} nodeId id of the current user node
+ * @property {string} dataUrl url to fetch the galaxy data from
+ **/
+
+/**
+ * Load the galaxy of an user
+ * @param {GalaxyConfig} config
+ **/
+window.loadGalaxy = (config) => {
+  window.getNodeFromId = (id) => {
+    return Graph.graphData().nodes.find((n) => n.id === id);
+  };
+
+  window.getLinksFromNodeId = (id) => {
+    return Graph.graphData().links.filter(
+      (l) => l.source.id === id || l.target.id === id,
+    );
+  };
+
+  window.focusNode = (node) => {
+    highlightNodes.clear();
+    highlightLinks.clear();
+
+    hoverNode = node || null;
+    if (node) {
+      // collect neighbors and links for highlighting
+      for (const link of window.getLinksFromNodeId(node.id)) {
+        highlightLinks.add(link);
+        highlightNodes.add(link.source);
+        highlightNodes.add(link.target);
+      }
+    }
+
+    // refresh node and link display
+    Graph.nodeThreeObject(Graph.nodeThreeObject())
+      .linkWidth(Graph.linkWidth())
+      .linkDirectionalParticles(Graph.linkDirectionalParticles());
+
+    // Aim at node from outside it
+    const distance = 42;
+    const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+    const newPos =
+      node.x || node.y || node.z
+        ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
+        : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
+
+    Graph.cameraPosition(
+      newPos, // new position
+      node, // lookAt ({ x, y, z })
+      3000, // ms transition duration
+    );
+  };
+
+  const highlightNodes = new Set();
+  const highlightLinks = new Set();
+  let hoverNode = null;
+
+  const grpahDiv = document.getElementById("3d-graph");
+  const Graph = ForceGraph3D();
+  Graph(grpahDiv);
+  Graph.jsonUrl(config.dataUrl)
+    .width(
+      grpahDiv.parentElement.clientWidth > 1200
+        ? 1200
+        : grpahDiv.parentElement.clientWidth,
+    ) // Not perfect at all. JS-fu master from the future, please fix this :-)
+    .height(1000)
+    .enableNodeDrag(false) // allow easier navigation
+    .onNodeClick((node) => {
+      const camera = Graph.cameraPosition();
+      const distance = Math.sqrt(
+        (node.x - camera.x) ** 2 + (node.y - camera.y) ** 2 + (node.z - camera.z) ** 2,
+      );
+      if (distance < 120 || highlightNodes.has(node)) {
+        window.focusNode(node);
+      }
+    })
+    .linkWidth((link) => (highlightLinks.has(link) ? 0.4 : 0.0))
+    .linkColor((link) =>
+      highlightLinks.has(link) ? "rgba(255,160,0,1)" : "rgba(128,255,255,0.6)",
+    )
+    .linkVisibility((link) => highlightLinks.has(link))
+    .nodeVisibility((node) => highlightNodes.has(node) || node.mass > 4)
+    // .linkDirectionalParticles(link => highlightLinks.has(link) ? 3 : 1) // kinda buggy for now, and slows this a bit, but would be great to help visualize lanes
+    .linkDirectionalParticleWidth(0.2)
+    .linkDirectionalParticleSpeed(-0.006)
+    .nodeThreeObject((node) => {
+      const sprite = new SpriteText(node.name);
+      sprite.material.depthWrite = false; // make sprite background transparent
+      sprite.color = highlightNodes.has(node)
+        ? node === hoverNode
+          ? "rgba(200,0,0,1)"
+          : "rgba(255,160,0,0.8)"
+        : "rgba(0,255,255,0.2)";
+      sprite.textHeight = 2;
+      sprite.center = new Three.Vector2(1.2, 0.5);
+      return sprite;
+    })
+    .onEngineStop(() => {
+      window.focusNode(window.getNodeFromId(config.nodeId));
+      Graph.onEngineStop(() => {
+        /* nope */
+      }); // don't call ourselves in a loop while moving the focus
+    });
+
+  // Set distance between stars
+  Graph.d3Force("link").distance((link) => link.value);
+
+  // Set high masses nearer the center of the galaxy
+  // TODO: quick and dirty strength computation, this will need tuning.
+  Graph.d3Force(
+    "positionX",
+    forceX().strength((node) => {
+      return 1 - 1 / node.mass;
+    }),
+  );
+  Graph.d3Force(
+    "positionY",
+    forceY().strength((node) => {
+      return 1 - 1 / node.mass;
+    }),
+  );
+  Graph.d3Force(
+    "positionZ",
+    forceZ().strength((node) => {
+      return 1 - 1 / node.mass;
+    }),
+  );
+};

galaxy/static/bundled/galaxy/galaxy-index.ts

@@ -1,137 +0,0 @@
-import { exportToHtml } from "#core:utils/globals";
-
-import cytoscape from "cytoscape";
-import d3Force, { type D3ForceLayoutOptions } from "cytoscape-d3-force";
-
-cytoscape.use(d3Force);
-
-interface GalaxyConfig {
-  nodeId: number;
-  dataUrl: string;
-}
-
-async function getGraphData(dataUrl: string) {
-  const response = await fetch(dataUrl);
-  if (!response.ok) {
-    return [];
-  }
-
-  const content = await response.json();
-  const nodes = content.nodes.map((node, i) => {
-    return {
-      group: "nodes",
-      data: {
-        id: node.id,
-        name: node.name,
-        mass: node.mass,
-      },
-    };
-  });
-
-  const edges = content.links.map((link) => {
-    return {
-      group: "edges",
-      data: {
-        id: `edge_${link.source}_${link.value}`,
-        source: link.source,
-        target: link.target,
-        value: link.value,
-      },
-    };
-  });
-
-  return { nodes: nodes, edges: edges };
-}
-
-exportToHtml("loadGalaxy", async (config: GalaxyConfig) => {
-  const graphDiv = document.getElementById("3d-graph");
-  const elements = await getGraphData(config.dataUrl);
-  const cy = cytoscape({
-    container: graphDiv,
-    elements: elements,
-    style: [
-      {
-        selector: "node",
-        style: {
-          label: "data(name)",
-          "background-color": "red",
-        },
-      },
-      {
-        selector: ".focused",
-        style: {
-          "border-width": "5px",
-          "border-style": "solid",
-          "border-color": "black",
-          "target-arrow-color": "black",
-          "line-color": "black",
-        },
-      },
-      {
-        selector: "edge",
-        style: {
-          width: 0.1,
-        },
-      },
-      {
-        selector: ".direct",
-        style: {
-          width: "5px",
-          "line-color": "red",
-        },
-      },
-    ],
-    layout: {
-      name: "d3-force",
-      animate: true,
-      fit: false,
-      ungrabifyWhileSimulating: true,
-      fixedAfterDragging: true,
-
-      linkId: (node) => {
-        return node.id;
-      },
-
-      linkDistance: (link) => {
-        return elements.nodes.length * 10;
-      },
-
-      linkStrength: (link) => {
-        return 1 / Math.max(1, link?.value);
-      },
-
-      linkIterations: 10,
-
-      manyBodyStrength: (node) => {
-        return node?.mass;
-      },
-
-      // manyBodyDistanceMin: 500,
-      collideRadius: () => {
-        return 50;
-      },
-
-      ready: (e) => {
-        // Center on current user node at the start of the simulation
-        // Color all direct paths from that citizen to it's neighbor
-        const citizen = e.cy.nodes(`#${config.nodeId}`)[0];
-        citizen.addClass("focused");
-        citizen.connectedEdges().addClass("direct");
-        e.cy.center(citizen);
-      },
-
-      tick: () => {
-        // Center on current user node during simulation
-        const citizen = cy.nodes(`#${config.nodeId}`)[0];
-        cy.center(citizen);
-      },
-
-      stop: (e) => {
-        // Disable user grabbing of nodes
-        // This has to be disabled after the simulation is done
-        // Otherwise the simulation can't move nodes
-        e.cy.autolock(true);
-      },
-    } as D3ForceLayoutOptions,
-  });
-});

galaxy/templates/galaxy/user.jinja

@@ -5,14 +5,14 @@
 {% endblock %}
 
 {% block additional_js %}
-  <script type="module" src="{{ static('bundled/galaxy/galaxy-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/galaxy/galaxy-index.js') }}"></script>
 {% endblock %}
 
 
 {% block content %}
   {% if object.current_star %}
     <div style="display: flex; flex-wrap: wrap;">
-      <div style="width: 100%; height: 70vh; display: block" id="3d-graph"></div>
+      <div id="3d-graph"></div>
 
       <div style="margin: 1em;">
         <p><a onclick="window.focusNode(window.getNodeFromId({{ object.id }}))">Reset on {{ object.get_display_name() }}</a></p>

package-lock.json

@@ -25,7 +25,6 @@
         "country-flag-emoji-polyfill": "^0.1.8",
         "cytoscape": "^3.33.1",
         "cytoscape-cxtmenu": "^3.5.0",
-        "cytoscape-d3-force": "^1.1.4",
         "cytoscape-klay": "^3.1.4",
         "d3-force-3d": "^3.0.6",
         "easymde": "^2.20.0",
@@ -47,7 +46,6 @@
         "@rollup/plugin-inject": "^5.0.5",
         "@types/alpinejs": "^3.13.11",
         "@types/cytoscape-cxtmenu": "^3.4.5",
-        "@types/cytoscape-d3-force": "^1.0.0",
         "@types/cytoscape-klay": "^3.1.5",
         "@types/js-cookie": "^3.0.6",
         "typescript": "^5.9.3",
@@ -2892,16 +2890,6 @@
         "cytoscape": "^3.31"
       }
     },
-    "node_modules/@types/cytoscape-d3-force": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/cytoscape-d3-force/-/cytoscape-d3-force-1.0.0.tgz",
-      "integrity": "sha512-1eRd9xr/DvJ4MIA5lCEG8DMX2Ha87qAbpP7irpuKZun0ZCBQPpoOBo9mPl0WrkJbXH+hHwG8s3E2CpUz3HxLrw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/cytoscape": "^3.0.9"
-      }
-    },
     "node_modules/@types/cytoscape-klay": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@types/cytoscape-klay/-/cytoscape-klay-3.1.5.tgz",
@@ -3571,18 +3559,6 @@
         "cytoscape": "^3.2.0"
       }
     },
-    "node_modules/cytoscape-d3-force": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/cytoscape-d3-force/-/cytoscape-d3-force-1.1.4.tgz",
-      "integrity": "sha512-8NjI/yEoB3YqVsdf7ud7Oh8Kyi+C9Lhh1fICmtemIo6EC1ZUtm8KcPNLkQySYO8nRS2mQKj5eVdCr7W0L8ONoQ==",
-      "license": "MIT",
-      "dependencies": {
-        "d3-force": "^2.0.1"
-      },
-      "peerDependencies": {
-        "cytoscape": "^3.2.0"
-      }
-    },
     "node_modules/cytoscape-klay": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
@@ -3631,17 +3607,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-force": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
-      "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-dispatch": "1 - 2",
-        "d3-quadtree": "1 - 2",
-        "d3-timer": "1 - 2"
-      }
-    },
     "node_modules/d3-force-3d": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/d3-force-3d/-/d3-force-3d-3.0.6.tgz",
@@ -3658,24 +3623,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-force/node_modules/d3-dispatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
-      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/d3-force/node_modules/d3-quadtree": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
-      "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/d3-force/node_modules/d3-timer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
-      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -4474,9 +4421,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -31,7 +31,6 @@
     "@rollup/plugin-inject": "^5.0.5",
     "@types/alpinejs": "^3.13.11",
     "@types/cytoscape-cxtmenu": "^3.4.5",
-    "@types/cytoscape-d3-force": "^1.0.0",
     "@types/cytoscape-klay": "^3.1.5",
     "@types/js-cookie": "^3.0.6",
     "typescript": "^5.9.3",
@@ -56,7 +55,6 @@
     "country-flag-emoji-polyfill": "^0.1.8",
     "cytoscape": "^3.33.1",
     "cytoscape-cxtmenu": "^3.5.0",
-    "cytoscape-d3-force": "^1.1.4",
     "cytoscape-klay": "^3.1.4",
     "d3-force-3d": "^3.0.6",
     "easymde": "^2.20.0",