noteconnection 1.1.2 → 1.3.0

package/dist/src/frontend/path_styles.css

@@ -0,0 +1,240 @@
+/* Path Mode Styles */
+
+.path-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #1e1e1e; /* Dark theme default */
+  z-index: 2000; /* Above main graph */
+  display: none; /* Hidden by default */
+  overflow: hidden;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.path-toolbar {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(30, 30, 30, 0.9);
+  backdrop-filter: blur(10px);
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 2005;
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #e0e0e0;
+  font-size: 0.9rem;
+}
+
+.toolbar-group select {
+  background: #333;
+  color: white;
+  border: 1px solid #555;
+  padding: 4px 8px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.toolbar-group select:hover {
+  border-color: #777;
+}
+
+.toolbar-group.right {
+  margin-left: 20px;
+  border-left: 1px solid #555;
+  padding-left: 20px;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: #ff6b6b;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 107, 107, 0.1);
+}
+
+#path-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#path-status {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: #888;
+  font-size: 0.9rem;
+  pointer-events: none;
+}
+
+/* Node Cards (if we use DOM overlays) */
+.path-node-card {
+  position: absolute;
+  background: #2d2d2d;
+  border: 1px solid #444;
+  border-radius: 6px;
+  padding: 10px;
+  width: 200px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+.path-node-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
+  border-color: #666;
+}
+
+.path-node-title {
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 1rem;
+}
+
+.path-node-meta {
+  color: #aaa;
+  font-size: 0.8rem;
+}
+
+.step-badge {
+  display: inline-block;
+  background: #4a9eff;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  margin-right: 5px;
+}
+
+/* v1.3 Path Mode Extensions */
+
+/* Action Buttons */
+#btn-mark-complete {
+  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
+  color: #000;
+  font-weight: bold;
+  border: none;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
+}
+
+#btn-mark-complete:hover {
+  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
+  transform: scale(1.05);
+}
+
+#btn-toggle-history {
+  color: #4a9eff;
+  border-color: #4a9eff;
+}
+
+/* Sidebar */
+.path-sidebar {
+  position: absolute;
+  top: 60px; /* Below toolbar */
+  right: 0;
+  width: 300px;
+  height: calc(100% - 60px);
+  background: rgba(30, 30, 30, 0.95);
+  border-left: 1px solid #444;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(
+    100%
+  ); /* Hidden state logic handled by display: none for now, but transform is smoother */
+  display: flex; /* Overridden by inline style */
+  flex-direction: column;
+  z-index: 1000;
+}
+
+.sidebar-header {
+  padding: 15px;
+  background: #252525;
+  border-bottom: 1px solid #444;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  color: #ffd700;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #aaa;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.history-item {
+  padding: 8px;
+  border-bottom: 1px solid #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: background 0.2s;
+}
+
+.history-item:hover {
+  background: #333;
+}
+
+.history-dot {
+  width: 10px;
+  height: 10px;
+  background: #ffd700;
+  border-radius: 50%;
+  box-shadow: 0 0 5px #ffd700;
+}
+
+.history-label {
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+/* Modal tweaks specific to Path Mode */
+#node-select-list li {
+  padding: 8px;
+  border-bottom: 1px solid #333;
+  cursor: pointer;
+  color: #ccc;
+}
+#node-select-list li:hover {
+  background: #444;
+  color: #fff;
+}

package/dist/src/frontend/path_worker.js

@@ -0,0 +1,176 @@
+/**
+ * Path Mode Worker
+ * Bundles Core Algorithms and Layout Logic
+ */
+
+importScripts("libs/d3.v7.min.js");
+// We will rely on a bundled version of the core being importable
+// The build script will generate 'libs/path_core.js' which defines 'Graph' and 'PathEngine' classes globally or via a shim
+importScripts("libs/path_core.js");
+
+let graph = null;
+let engine = null;
+let rawNodes = [];
+let rawLinks = [];
+
+onmessage = function(e) {
+    const { type, payload } = e.data;
+
+    try {
+        switch (type) {
+            case 'initData':
+                initData(payload);
+                break;
+            case 'computePath':
+                computePath(payload);
+                break;
+        }
+    } catch (err) {
+        console.error('Worker Error:', err);
+    }
+};
+
+function initData(data) {
+    // Reconstruct Graph object
+    // Assuming Graph class is globally available from path_core.js
+    graph = new Graph();
+    data.nodes.forEach(n => graph.addNode(n));
+    data.links.forEach(l => graph.addEdge(l.source, l.target, l.type, l.weight));
+    
+    engine = new PathEngine(graph);
+    postMessage({ type: 'log', payload: `Graph Initialized: ${data.nodes.length} nodes` });
+}
+
+function computePath(config) {
+    if (!engine) return;
+
+    const { mode, strategy, layout, targetId } = config;
+    let result;
+
+    if (mode === 'domain') {
+        result = engine.domainLearning(null, strategy);
+    } else {
+        // Validation for Diffusion Mode
+        if (!targetId || targetId === 'null' || !graph.hasNode(targetId)) {
+            console.warn(`[PathWorker] Invalid target '${targetId}' for Diffusion. Fallback to Domain.`);
+            result = engine.domainLearning(null, 'foundational'); // Fallback
+        } else {
+            result = engine.diffusionLearning(targetId, strategy);
+        }
+    }
+    
+    // Layout Calculation
+    // We need to assign x,y coordinates to the result nodes
+    // Structure: result.nodes is a linear sequence or a set.
+    // For Tree layout, we need to reconstruct the hierarchy passed in result.edges (which are relevant dependencies)
+    
+    const layoutData = runLayout(result.nodes, result.edges, layout);
+    
+    postMessage({ 
+        type: 'pathResult', 
+        payload: {
+            nodes: layoutData.nodes,
+            edges: layoutData.edges
+        }
+    });
+}
+
+function runLayout(nodes, edges, type) {
+    // Convert to D3 Stratify structure if possible, or use d3-dag
+    // Simple approach: Build a hierarchy from stepOrder or dependencies
+    
+    // Create a hierarchy object for D3
+    // Root is a virtual node connecting to all step 1 nodes?
+    // Or finds roots (in-degree 0) in the subgraph
+    
+    // 1. Map nodes for quick access
+    const nodeMap = new Map();
+    nodes.forEach(n => {
+        // Clone to avoid mutating original logic objects if needed
+        nodeMap.set(n.id, { ...n, children: [] });
+    });
+    
+    // 2. Build Tree Structure
+    // Note: Graph might be DAG, D3 Tree requires strict Tree.
+    // We break cycles/multi-parents by just taking the first parent found in this path?
+    // Or use graph layout. For MVP, we use a simple Level-based layout based on 'stepOrder'.
+    
+    if (type === 'horizontal' || type === 'vertical') {
+        const levelHeight = 100;
+        const levelWidth = 80;
+        
+        // Group by stepOrder
+        const levels = [];
+        nodes.forEach(node => {
+            if (!levels[node.stepOrder]) levels[node.stepOrder] = [];
+            levels[node.stepOrder].push(nodeMap.get(node.id));
+        });
+        
+        // Assign coordinates
+        levels.forEach((level, i) => {
+            const y = i * levelHeight;
+            const xStart = -(level.length * levelWidth) / 2;
+            level.forEach((node, j) => {
+                if (type === 'vertical') {
+                    node.x = xStart + j * levelWidth;
+                    node.y = y;
+                } else {
+                    node.x = y; 
+                    node.y = xStart + j * levelWidth;
+                }
+            });
+        });
+    } else if (type === 'radial') {
+         // Radial: Angle based on index, Radius based on step
+         const radiusStep = 120;
+         
+         // Group by step for better radial distribution
+         const levels = [];
+         nodes.forEach(node => {
+            const step = node.stepOrder || 1;
+            if (!levels[step]) levels[step] = [];
+            levels[step].push(nodeMap.get(node.id));
+         });
+
+         levels.forEach((level, stepIndex) => {
+             if (!level) return;
+             const r = stepIndex * radiusStep;
+             level.forEach((node, i) => {
+                 // Distribute nodes in this level around the circle
+                 const angle = (i / level.length) * 2 * Math.PI; 
+                 // Rotate slightly per level to avoid overlap
+                 const offset = stepIndex * 0.2; 
+                 
+                 node.x = r * Math.cos(angle + offset);
+                 node.y = r * Math.sin(angle + offset);
+             });
+         });
+    } else if (type === 'orbital') {
+        // Orbital: Central node at 0,0. Neighbors in orbit.
+        // We need to identify the "Central" node. 
+        // Strategy: First node in the list is assumed central/focus for now, 
+        // OR the app should pass a 'focusId'.
+        // For Path Mode, usually the first node (step 1) or the "current" node is central.
+        // Let's assume nodes[0] is the center if not specified.
+        
+        const centerNode = nodes[0];
+        if (centerNode) {
+            nodeMap.get(centerNode.id).x = 0;
+            nodeMap.get(centerNode.id).y = 0;
+            
+            const radius = 200;
+            const peripherals = nodes.slice(1);
+            peripherals.forEach((n, i) => {
+                const node = nodeMap.get(n.id);
+                const angle = (i / peripherals.length) * 2 * Math.PI;
+                node.x = radius * Math.cos(angle);
+                node.y = radius * Math.sin(angle);
+            });
+        }
+    }
+    
+    return {
+        nodes: Array.from(nodeMap.values()),
+        edges: edges 
+    };
+}

package/dist/src/frontend/styles.css

@@ -658,7 +658,7 @@ div.tooltip {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
-  z-index: 1500;
+  z-index: 2500; /* Must be higher than path-container (2000) */
   display: flex;
   justify-content: center;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noteconnection",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Hierarchical Knowledge Graph Visualization System",
   "main": "dist/src/electron/main.js",
   "bin": {
@@ -13,8 +13,10 @@
     "electron:dev:mini": "npm run build:mini && electron .",
     "electron:build": "npm run build && electron-builder",
     "electron:build:mini": "npm run build:mini && electron-builder",
-    "build": "tsc && node scripts/copy-assets.js",
+    "build": "tsc && node scripts/copy-assets.js && node scripts/bundle_path_core.js",
     "build:mini": "tsc && node scripts/copy-assets.js --mini",
+    "pathmode:dev": "node -r ts-node/register src/server.ts --pathmode",
+    "pathmode:test": "jest --testPathPatterns=Path",
     "prepublishOnly": "npm run build",
     "test": "jest"
   },
@@ -60,8 +62,10 @@
     "@capacitor/cli": "^8.0.0",
     "@capacitor/core": "^8.0.0",
     "@types/d3-force": "^3.0.10",
+    "@types/ws": "^8.18.1",
     "d3-force": "^3.0.0",
     "electron-squirrel-startup": "^1.0.1",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "ws": "^8.19.0"
   }
 }