[DAPS-14xx] Update tests, consts, fix tooltip

Author: AronPerez

docs_other/dev/design/graph/graph_schema.html

@@ -157,54 +157,15 @@
 
         function simTick() {
             //console.log("tick");
-
-            // Update node positions
-            nodes.attr("transform", function (d) {
-                return "translate(" + d.x + "," + d.y + ")";
-            });
-
-            // Update label positions with offsets if they exist
-            nodes.selectAll("text.label")
-                .attr("x", function(d) {
-                    // Base position (from original code)
-                    let baseX = d.locked ? r + 12 : r;
-
-                    // Apply offset if it exists
-                    if (d.labelOffsetX !== undefined) {
-                        return baseX + d.labelOffsetX;
-                    }
-                    return baseX;
-                })
-                .attr("y", function(d) {
-                    // Base position (from original code)
-                    let baseY = -r;
-
-                    // Apply offset if it exists
-                    if (d.labelOffsetY !== undefined) {
-                        return baseY + d.labelOffsetY;
-                    }
-                    return baseY;
-                });
-
-            // Update anchored status visual indicator
-            nodes.selectAll("circle.obj")
-                .classed("anchored", function(d) {
-                    return d.anchored === true;
-                });
+            nodes
+                .attr("transform", function(d) {
+                    return "translate(" + d.x + "," + d.y + ")"; });
 
             links
-                .attr("x1", function (d) {
-                    return d.source.x;
-                })
-                .attr("y1", function (d) {
-                    return d.source.y;
-                })
-                .attr("x2", function (d) {
-                    return d.target.x;
-                })
-                .attr("y2", function (d) {
-                    return d.target.y;
-                });
+                .attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
         }
 
         var r = 15;

web/static/components/provenance/customization_modal.js

@@ -32,16 +32,16 @@ function showCustomizationModal(node, x, y, currentCustomizationNode, renderGrap
                                 })
                                 .join("");
                     } else {
-                        nodeColorInput.value = "#6baed6"; // Default blue
+                        nodeColorInput.value = DEFAULTS.NODE_COLOR;
                     }
                 } else {
                     nodeColorInput.value = fillColor;
                 }
             } else {
-                nodeColorInput.value = "#6baed6"; // Default blue
+                nodeColorInput.value = DEFAULTS.NODE_COLOR;
             }
         } else {
-            nodeColorInput.value = "#6baed6"; // Default blue
+            nodeColorInput.value = DEFAULTS.NODE_COLOR;
         }
     }
 
@@ -51,7 +51,7 @@ function showCustomizationModal(node, x, y, currentCustomizationNode, renderGrap
     labelSizeValue.textContent = `${labelSizeSlider.value}px`;
 
     const labelColorInput = document.getElementById("label-color-input");
-    labelColorInput.value = node.labelColor || "#333333";
+    labelColorInput.value = node.labelColor || DEFAULTS.LABEL_COLOR;
 
     const anchorCheckbox = document.getElementById("anchor-checkbox");
     anchorCheckbox.checked = node.anchored || false;
@@ -136,7 +136,7 @@ function createCustomizationModal() {
     const nodeColorInput = document.createElement("input");
     nodeColorInput.type = "color";
     nodeColorInput.id = "node-color-input";
-    nodeColorInput.value = "#6baed6"; // Default blue color
+    nodeColorInput.value = DEFAULTS.NODE_COLOR;
 
     nodeColorRow.appendChild(nodeColorInput);
     nodeSection.appendChild(nodeColorRow);
@@ -180,7 +180,7 @@ function createCustomizationModal() {
     const labelColorInput = document.createElement("input");
     labelColorInput.type = "color";
     labelColorInput.id = "label-color-input";
-    labelColorInput.value = "#333333"; // Default text color
+    labelColorInput.value = DEFAULTS.LABEL_COLOR; // Default text color
 
     labelColorRow.appendChild(labelColorInput);
     labelSection.appendChild(labelColorRow);

web/static/components/provenance/panel_graph.js

@@ -329,41 +329,93 @@ function GraphPanel(a_id, a_frame, a_parent) {
     };
 
     // Add UI buttons for saving and loading graph state
-    this.addGraphControls = function (container) {
+    this.addGraphControls = function (containerSelector) {
+        const controlsId = "graph-controls";
+        const helpTipId = "graph-help-tooltip";
+        let controlsDiv = document.getElementById(controlsId);
+        let helpTip = document.getElementById(helpTipId);
+
         // Create container for graph controls if it doesn't exist
-        if (!document.getElementById("graph-controls")) {
-            const controlsDiv = document.createElement("div");
-            controlsDiv.id = "graph-controls";
+        if (!controlsDiv) {
+            controlsDiv = document.createElement("div");
+            controlsDiv.id = controlsId;
             controlsDiv.className = "graph-controls";
 
-            // Help tooltip
-            const helpTip = document.createElement("div");
+            // "Show Help" button
+            const showHelpButton = document.createElement("button");
+            showHelpButton.textContent = "Show Help";
+            showHelpButton.id = "show-graph-help-button";
+            showHelpButton.addEventListener("click", function () {
+                const tipElement = document.getElementById(helpTipId);
+                if (tipElement) {
+                    tipElement.style.display = "block";
+                }
+            });
+            controlsDiv.appendChild(showHelpButton);
+        }
+
+        // Create help tooltip if it doesn't exist
+        if (!helpTip) {
+            helpTip = document.createElement("div");
+            helpTip.id = helpTipId;
             helpTip.className = "graph-tooltip";
-            helpTip.innerHTML =
+
+            const closeButton = document.createElement("span");
+            closeButton.innerHTML = "×"; // X button
+            closeButton.className = "graph-tooltip-close";
+            closeButton.style.position = "absolute";
+            closeButton.style.top = "5px";
+            closeButton.style.right = "10px";
+            closeButton.style.cursor = "pointer";
+            closeButton.style.pointerEvents = "all";
+            closeButton.style.fontSize = "20px";
+            closeButton.addEventListener("click", function () {
+                const tipElement = document.getElementById(helpTipId);
+                if (tipElement) {
+                    tipElement.style.display = "none";
+                }
+            });
+            helpTip.appendChild(closeButton);
+
+            const helpText = document.createElement("div");
+            helpText.innerHTML =
                 "<strong>Graph Controls:</strong><br>" +
                 "• Drag nodes to move them<br>" +
                 "• Shift+Drag to anchor nodes<br>" +
                 "• Alt+Drag to move label<br>" +
                 "• Right-click for customization options<br>" +
                 "• Double-click to toggle anchor";
+            helpTip.appendChild(helpText);
+            helpTip.style.display = "block"; // Initially visible
+        }
 
-            // Add container to the graph
-            let graphContainer;
-            if (container) {
-                graphContainer = document.querySelector(container);
-            } else {
-                // Make sure we don't double-prefix with #
-                const selector = a_id.startsWith("#") ? a_id : "#" + a_id;
-                graphContainer = document.querySelector(selector);
+        // Add controls and tooltip to the graph container's parent
+        let graphContainerParent;
+        if (containerSelector) {
+            graphContainerParent = document.querySelector(containerSelector);
+        } else {
+            const selector = a_id.startsWith("#") ? a_id : "#" + a_id;
+            const svgElement = document.querySelector(selector);
+            if (svgElement && svgElement.parentElement) {
+                graphContainerParent = svgElement.parentElement;
             }
+        }
 
-            if (graphContainer) {
-                graphContainer.style.position = "relative";
-                graphContainer.appendChild(controlsDiv);
-                graphContainer.appendChild(helpTip);
-            } else {
-                console.error("Graph container not found:", container || "#" + a_id);
+        if (graphContainerParent) {
+            graphContainerParent.style.position = "relative"; // Important for absolute positioning of tooltip
+            if (!document.getElementById(controlsId) && controlsDiv) {
+                // Append only if not already there
+                graphContainerParent.appendChild(controlsDiv);
             }
+            if (!document.getElementById(helpTipId) && helpTip) {
+                // Append only if not already there
+                graphContainerParent.appendChild(helpTip);
+            }
+        } else {
+            console.error(
+                "Graph container parent not found for controls:",
+                containerSelector || a_id,
+            );
         }
     };
 
@@ -901,7 +953,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
                     //console.log("PRUNE ALL");
                     graphPrune(node_data, link_data, dest);
                 } else if (dest.row === undefined) {
-                    //console.log("PRUNE LOCAL EDGE ONLY");
                     graphPruneReset(link_data, node_data);
                     loc_trim.push(link);
                     //link.prune = true;
@@ -918,9 +969,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
                 }
                 graphPrune(link_data, node_data);
             }
-
-            //graphPruneReset();
-
             renderGraph();
         }
     };
@@ -956,8 +1004,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
 
     // Called automatically from API module when data records are impacted by edits or annotations
     this.updateData = function (a_data) {
-        //console.log( "graph updating:", a_data );
-
         let j,
             node,
             item,
@@ -967,9 +1013,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
             dep_cnt,
             render = false;
 
-        //if ( focus_node_id )
-        //    inst.load( focus_node_id, sel_node_id );
-
         // Scan updates for dependency changes that impact current graph,
         // if found, reload entire graph from DB
         // If not reloading, scan for changes to title, annotations, status...
@@ -1124,19 +1167,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
         )
         .append("g");
     // TODO add deselect selected node highlight on double-click
-    // .on("dblclick", function () {
-    //     // Clear selection when double-clicking on empty space
-    //     if (sel_node) {
-    //         d3.select(".highlight").attr("class", "select hidden");
-    //         sel_node = null;
-    //         sel_node_id = null;
-    //         panel_info.showSelectedInfo(null);
-    //         a_parent.updateBtnState();
-    //     }
-    //
-    //     // Stop event propagation
-    //     d3.event.stopPropagation();
-    // });
 
     defineArrowMarkerDeriv(svg);
     defineArrowMarkerComp(svg);

web/static/components/provenance/state.js

@@ -1,8 +1,8 @@
 const DEFAULTS = {
     NODE_SIZE: 10,
-    NODE_COLOR: null, // Use CSS default
+    NODE_COLOR: "#6baed6", // Use CSS default
     LABEL_SIZE: 14,
-    LABEL_COLOR: null, // Use CSS default
+    LABEL_COLOR: "#333333", // Use CSS default
 };
 
 // Observer pattern for state management