Skip to content

Commit 2b55a60

Browse files
AronPerezAronPerez
committed
[DAPS-14xx] Update tests, consts, fix tooltip
1 parent f715f10 commit 2b55a60

File tree

5 files changed

+107
-68
lines changed

5 files changed

+107
-68
lines changed

‎web/static/components/provenance/customization_modal.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@ function showCustomizationModal(node, x, y, currentCustomizationNode, renderGrap
3232
})
3333
.join("");
3434
} else {
35-
nodeColorInput.value = "#6baed6"; // Default blue
35+
nodeColorInput.value = DEFAULTS.NODE_COLOR;
3636
}
3737
} else {
3838
nodeColorInput.value = fillColor;
3939
}
4040
} else {
41-
nodeColorInput.value = "#6baed6"; // Default blue
41+
nodeColorInput.value = DEFAULTS.NODE_COLOR;
4242
}
4343
} else {
44-
nodeColorInput.value = "#6baed6"; // Default blue
44+
nodeColorInput.value = DEFAULTS.NODE_COLOR;
4545
}
4646
}
4747

@@ -51,7 +51,7 @@ function showCustomizationModal(node, x, y, currentCustomizationNode, renderGrap
5151
labelSizeValue.textContent = `${labelSizeSlider.value}px`;
5252

5353
const labelColorInput = document.getElementById("label-color-input");
54-
labelColorInput.value = node.labelColor || "#333333";
54+
labelColorInput.value = node.labelColor || DEFAULTS.LABEL_COLOR;
5555

5656
const anchorCheckbox = document.getElementById("anchor-checkbox");
5757
anchorCheckbox.checked = node.anchored || false;
@@ -136,7 +136,7 @@ function createCustomizationModal() {
136136
const nodeColorInput = document.createElement("input");
137137
nodeColorInput.type = "color";
138138
nodeColorInput.id = "node-color-input";
139-
nodeColorInput.value = "#6baed6"; // Default blue color
139+
nodeColorInput.value = DEFAULTS.NODE_COLOR;
140140

141141
nodeColorRow.appendChild(nodeColorInput);
142142
nodeSection.appendChild(nodeColorRow);
@@ -180,7 +180,7 @@ function createCustomizationModal() {
180180
const labelColorInput = document.createElement("input");
181181
labelColorInput.type = "color";
182182
labelColorInput.id = "label-color-input";
183-
labelColorInput.value = "#333333"; // Default text color
183+
labelColorInput.value = DEFAULTS.LABEL_COLOR; // Default text color
184184

185185
labelColorRow.appendChild(labelColorInput);
186186
labelSection.appendChild(labelColorRow);

‎web/static/components/provenance/panel_graph.js

Lines changed: 73 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -329,41 +329,93 @@ function GraphPanel(a_id, a_frame, a_parent) {
329329
};
330330

331331
// Add UI buttons for saving and loading graph state
332-
this.addGraphControls = function (container) {
332+
this.addGraphControls = function (containerSelector) {
333+
const controlsId = "graph-controls";
334+
const helpTipId = "graph-help-tooltip";
335+
let controlsDiv = document.getElementById(controlsId);
336+
let helpTip = document.getElementById(helpTipId);
337+
333338
// Create container for graph controls if it doesn't exist
334-
if (!document.getElementById("graph-controls")) {
335-
const controlsDiv = document.createElement("div");
336-
controlsDiv.id = "graph-controls";
339+
if (!controlsDiv) {
340+
controlsDiv = document.createElement("div");
341+
controlsDiv.id = controlsId;
337342
controlsDiv.className = "graph-controls";
338343

339-
// Help tooltip
340-
const helpTip = document.createElement("div");
344+
// "Show Help" button
345+
const showHelpButton = document.createElement("button");
346+
showHelpButton.textContent = "Show Help";
347+
showHelpButton.id = "show-graph-help-button";
348+
showHelpButton.addEventListener("click", function () {
349+
const tipElement = document.getElementById(helpTipId);
350+
if (tipElement) {
351+
tipElement.style.display = "block";
352+
}
353+
});
354+
controlsDiv.appendChild(showHelpButton);
355+
}
356+
357+
// Create help tooltip if it doesn't exist
358+
if (!helpTip) {
359+
helpTip = document.createElement("div");
360+
helpTip.id = helpTipId;
341361
helpTip.className = "graph-tooltip";
342-
helpTip.innerHTML =
362+
363+
const closeButton = document.createElement("span");
364+
closeButton.innerHTML = "×"; // X button
365+
closeButton.className = "graph-tooltip-close";
366+
closeButton.style.position = "absolute";
367+
closeButton.style.top = "5px";
368+
closeButton.style.right = "10px";
369+
closeButton.style.cursor = "pointer";
370+
closeButton.style.pointerEvents = "all";
371+
closeButton.style.fontSize = "20px";
372+
closeButton.addEventListener("click", function () {
373+
const tipElement = document.getElementById(helpTipId);
374+
if (tipElement) {
375+
tipElement.style.display = "none";
376+
}
377+
});
378+
helpTip.appendChild(closeButton);
379+
380+
const helpText = document.createElement("div");
381+
helpText.innerHTML =
343382
"<strong>Graph Controls:</strong><br>" +
344383
"• Drag nodes to move them<br>" +
345384
"• Shift+Drag to anchor nodes<br>" +
346385
"• Alt+Drag to move label<br>" +
347386
"• Right-click for customization options<br>" +
348387
"• Double-click to toggle anchor";
388+
helpTip.appendChild(helpText);
389+
helpTip.style.display = "block"; // Initially visible
390+
}
349391

350-
// Add container to the graph
351-
let graphContainer;
352-
if (container) {
353-
graphContainer = document.querySelector(container);
354-
} else {
355-
// Make sure we don't double-prefix with #
356-
const selector = a_id.startsWith("#") ? a_id : "#" + a_id;
357-
graphContainer = document.querySelector(selector);
392+
// Add controls and tooltip to the graph container's parent
393+
let graphContainerParent;
394+
if (containerSelector) {
395+
graphContainerParent = document.querySelector(containerSelector);
396+
} else {
397+
const selector = a_id.startsWith("#") ? a_id : "#" + a_id;
398+
const svgElement = document.querySelector(selector);
399+
if (svgElement && svgElement.parentElement) {
400+
graphContainerParent = svgElement.parentElement;
358401
}
402+
}
359403

360-
if (graphContainer) {
361-
graphContainer.style.position = "relative";
362-
graphContainer.appendChild(controlsDiv);
363-
graphContainer.appendChild(helpTip);
364-
} else {
365-
console.error("Graph container not found:", container || "#" + a_id);
404+
if (graphContainerParent) {
405+
graphContainerParent.style.position = "relative"; // Important for absolute positioning of tooltip
406+
if (!document.getElementById(controlsId) && controlsDiv) {
407+
// Append only if not already there
408+
graphContainerParent.appendChild(controlsDiv);
366409
}
410+
if (!document.getElementById(helpTipId) && helpTip) {
411+
// Append only if not already there
412+
graphContainerParent.appendChild(helpTip);
413+
}
414+
} else {
415+
console.error(
416+
"Graph container parent not found for controls:",
417+
containerSelector || a_id,
418+
);
367419
}
368420
};
369421

@@ -901,7 +953,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
901953
//console.log("PRUNE ALL");
902954
graphPrune(node_data, link_data, dest);
903955
} else if (dest.row === undefined) {
904-
//console.log("PRUNE LOCAL EDGE ONLY");
905956
graphPruneReset(link_data, node_data);
906957
loc_trim.push(link);
907958
//link.prune = true;
@@ -918,9 +969,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
918969
}
919970
graphPrune(link_data, node_data);
920971
}
921-
922-
//graphPruneReset();
923-
924972
renderGraph();
925973
}
926974
};
@@ -956,8 +1004,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
9561004

9571005
// Called automatically from API module when data records are impacted by edits or annotations
9581006
this.updateData = function (a_data) {
959-
//console.log( "graph updating:", a_data );
960-
9611007
let j,
9621008
node,
9631009
item,
@@ -967,9 +1013,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
9671013
dep_cnt,
9681014
render = false;
9691015

970-
//if ( focus_node_id )
971-
// inst.load( focus_node_id, sel_node_id );
972-
9731016
// Scan updates for dependency changes that impact current graph,
9741017
// if found, reload entire graph from DB
9751018
// If not reloading, scan for changes to title, annotations, status...
@@ -1124,19 +1167,6 @@ function GraphPanel(a_id, a_frame, a_parent) {
11241167
)
11251168
.append("g");
11261169
// TODO add deselect selected node highlight on double-click
1127-
// .on("dblclick", function () {
1128-
// // Clear selection when double-clicking on empty space
1129-
// if (sel_node) {
1130-
// d3.select(".highlight").attr("class", "select hidden");
1131-
// sel_node = null;
1132-
// sel_node_id = null;
1133-
// panel_info.showSelectedInfo(null);
1134-
// a_parent.updateBtnState();
1135-
// }
1136-
//
1137-
// // Stop event propagation
1138-
// d3.event.stopPropagation();
1139-
// });
11401170

11411171
defineArrowMarkerDeriv(svg);
11421172
defineArrowMarkerComp(svg);

‎web/static/components/provenance/state.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const DEFAULTS = {
22
NODE_SIZE: 10,
3-
NODE_COLOR: null, // Use CSS default
3+
NODE_COLOR: "#6baed6", // Use CSS default
44
LABEL_SIZE: 14,
5-
LABEL_COLOR: null, // Use CSS default
5+
LABEL_COLOR: "#333333", // Use CSS default
66
};
77

88
// Observer pattern for state management

‎web/test/components/provenance/state.test.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,18 @@ describe("state", function () {
66
it("should have the expected default values", function () {
77
expect(DEFAULTS).to.be.an("object");
88
expect(DEFAULTS.NODE_SIZE).to.equal(10);
9-
expect(DEFAULTS.NODE_COLOR).to.be.null;
9+
expect(DEFAULTS.NODE_COLOR).to.equal("#6baed6");
1010
expect(DEFAULTS.LABEL_SIZE).to.equal(14);
11-
expect(DEFAULTS.LABEL_COLOR).to.be.null;
11+
expect(DEFAULTS.LABEL_COLOR).to.be.equal("#333333");
1212
});
1313
});
1414

1515
describe("GraphState", function () {
1616
let graphState;
1717

1818
beforeEach(function () {
19-
// Create a fresh GraphState instance before each test
2019
graphState = new GraphState();
2120

22-
// Mock localStorage
2321
global.localStorage = {
2422
items: {},
2523
getItem: function (key) {
@@ -30,7 +28,6 @@ describe("state", function () {
3028
},
3129
};
3230

33-
// Mock console.error
3431
global.console.error = function () {};
3532
});
3633

@@ -87,8 +84,8 @@ describe("state", function () {
8784
const nodeData = [
8885
{
8986
id: "node1",
90-
nodeSize: 20, // Different from default
91-
nodeColor: "red", // Different from default
87+
nodeSize: 20,
88+
nodeColor: "red",
9289
},
9390
];
9491

@@ -104,14 +101,21 @@ describe("state", function () {
104101
const nodeData = [
105102
{
106103
id: "node1",
107-
nodeSize: DEFAULTS.NODE_SIZE, // Same as default
108-
nodeColor: DEFAULTS.NODE_COLOR, // Same as default
104+
nodeSize: DEFAULTS.NODE_SIZE,
105+
nodeColor: DEFAULTS.NODE_COLOR,
109106
},
110107
];
111108

112109
graphState.saveState(nodeData);
113110

114-
expect(graphState.state.nodeStyles).to.be.an("object").that.is.empty;
111+
expect(graphState.state.nodeStyles)
112+
.to.be.an("object")
113+
.to.deep.equal({
114+
[nodeData[0].id]: {
115+
size: nodeData[0].nodeSize,
116+
color: nodeData[0].nodeColor,
117+
},
118+
});
115119
});
116120

117121
it("should save label offsets correctly", function () {
@@ -129,8 +133,8 @@ describe("state", function () {
129133
const nodeData = [
130134
{
131135
id: "node1",
132-
labelSize: 20, // Different from default
133-
labelColor: "blue", // Different from default
136+
labelSize: 20,
137+
labelColor: "blue",
134138
},
135139
];
136140

@@ -146,14 +150,21 @@ describe("state", function () {
146150
const nodeData = [
147151
{
148152
id: "node1",
149-
labelSize: DEFAULTS.LABEL_SIZE, // Same as default
150-
labelColor: DEFAULTS.LABEL_COLOR, // Same as default
153+
labelSize: DEFAULTS.LABEL_SIZE,
154+
labelColor: DEFAULTS.LABEL_COLOR,
151155
},
152156
];
153157

154158
graphState.saveState(nodeData);
155159

156-
expect(graphState.state.labelStyles).to.be.an("object").that.is.empty;
160+
expect(graphState.state.labelStyles)
161+
.to.be.an("object")
162+
.to.deep.equal({
163+
[nodeData[0].id]: {
164+
size: nodeData[0].labelSize,
165+
color: nodeData[0].labelColor,
166+
},
167+
});
157168
});
158169

159170
it("should store state in localStorage", function () {
@@ -174,7 +185,6 @@ describe("state", function () {
174185
});
175186

176187
it("should handle errors when saving state", function () {
177-
// Mock localStorage to throw an error
178188
global.localStorage.setItem = function () {
179189
throw new Error("Storage error");
180190
};

‎web/test/components/provenance/utils.test.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,6 @@ describe("utils", function () {
275275
const nodeData = [node1, node2];
276276
const linkData = [link1];
277277

278-
// To check for modifications, store original states
279278
const originalNodeData = [...nodeData];
280279
const originalLinkData = [...linkData];
281280
const originalNode1Links = [...node1.links];

0 commit comments

Comments
 (0)