Skip to content

Commit 6fd922e

Browse files
brettforbesbrettforbes
committed
Upodating layouts
1 parent d42d636 commit 6fd922e

File tree

2 files changed

+141
-115
lines changed

2 files changed

+141
-115
lines changed

‎src/js/panel._utils.js

+39-21
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,14 @@ window.Widgets.Panel.Utils = {};
8080
indentSpacing: 50,
8181
tooltipContent: 'summary', //'summary' or 'json'
8282
itemFont: '18px',
83+
edgeFontSize: '16px',
84+
edgeFontFamily: 'Wire One',
85+
layout: {
86+
left: 20,
87+
top: 20,
88+
distanceX: 50,
89+
distanceY: 50
90+
},
8391
boxSize: 10,
8492
tree_edge_thickness: 0.75,
8593
graph_edge_thickness: 1,
@@ -382,6 +390,7 @@ window.Widgets.Panel.Utils = {};
382390
// B. Update Data, Simulations and Drive Show Graph
383391
ns.processGraphData = function(graphData) {
384392
console.group('Widgets.Panel.Utils.updateGraph');
393+
console.log('graphData->', graphData);
385394

386395
let nodes = graphData.nodes;
387396
let edges = graphData.edges;
@@ -397,7 +406,10 @@ window.Widgets.Panel.Utils = {};
397406
ns.split.data = graphData;
398407

399408
ns.split.adjacency = new ns.Graph();
400-
ns.split.prom_node_IDs = [];
409+
410+
ns.split.promo_nodes_IDs = [];
411+
ns.split.promo_IDs = [];
412+
ns.split.promo_annotate_list = [];
401413

402414
// If Incident Management, then check for these promotoables
403415
ns.split.prom_types = [
@@ -454,34 +466,36 @@ window.Widgets.Panel.Utils = {};
454466
});
455467

456468
//3. Find first the promotable node ID's and collect all sub-graphs into promID's
457-
ns.split.promo_nodes_IDs = [];
458-
ns.split.promo_annotate_list = [];
459-
let centreX = 400/2 // ns.options.width/2; this is NaN
469+
let dummywidth = 400; // how to work out promo panel width and height????? TO DO
470+
let centreX = dummywidth/2 // ns.options.width/2; this is NaN
460471
console.log('&&&&&&----');
461472
console.log('centreX->', centreX);
462473
console.log('layout->', ns.options.layout);
463474
console.log('options->', ns.options);
475+
console.log('nodes->', nodes);
464476
// 4. Setup layout
465-
let j = 0;
477+
let j = -1;
466478
nodes.forEach(function(node) {
467479
let annotate = {};
468480
annotate.connections = [];
469481
annotate.prom_IDs = [];
470482
annotate.layouts = [];
483+
console.log('node type in annotate->', node.type);
471484
if (ns.split.prom_types.includes(node.type)) {
472485
j = j+1;
473486
annotate.id = node.id;
474-
annotate.centreX = centreX + j * ns.options.width;
487+
annotate.centreX = centreX + j * dummywidth;
475488
annotate.topY = ns.options.layout.top;
476489
if (node.type !== 'incident') {
477490
// If it is a level 1 object
478491
let layout_list = ns.split.level2_layouts[node.type];
492+
console.log('layout_list->', layout_list);
479493
// Setup left hand edge of level 1, centred around incident
480494
//check if the number is even or odd
481-
if(layout_list.length() % 2 == 0) {
482-
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length()/2 ) - 0.5));
495+
if(layout_list.length % 2 == 0) {
496+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length/2 ) - 0.5));
483497
} else {
484-
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
498+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length/2 )))
485499
}
486500
let node_orig = node.original;
487501
let i=0;
@@ -508,10 +522,10 @@ window.Widgets.Panel.Utils = {};
508522
let layout_list = ns.split.level1_layouts['incident']
509523
// Setup left hand edge of level 1, centred around incident
510524
//check if the number is even or odd
511-
if(layout_list.length() % 2 == 0) {
512-
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length()/2 ) - 0.5));
525+
if(layout_list.length % 2 == 0) {
526+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length/2 ) - 0.5));
513527
} else {
514-
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
528+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length/2 )))
515529
}
516530
let node_ext = node.original.extension["extension-definition—​ef765651-680c-498d-9894-99799f2fa126"];
517531
let i=0;
@@ -532,20 +546,24 @@ window.Widgets.Panel.Utils = {};
532546
i = i+1;
533547
});
534548
}
535-
annotate.prom_IDs = Array.from(
536-
ns.split.adjacency.dirs(ns.split.prom_node_IDs),
537-
(path) => path.at(-1),
538-
);
539549
ns.split.promo_annotate_list.push(annotate);
540-
ns.split.promo_nodes_IDs.concat(annotate.prom_IDs);
550+
ns.split.promo_nodes_IDs.push(node.id);
551+
// ns.split.promo_nodes_IDs.concat(annotate.prom_IDs);
541552
}
542553
});
554+
555+
ns.split.promo_IDs = Array.from(
556+
ns.split.adjacency.dirs(ns.split.promo_nodes_IDs),
557+
(path) => path.at(-1),
558+
);
559+
console.log('ns.split.promo_nodes_IDs->', ns.split.promo_nodes_IDs);
560+
console.log('ns.split.promo_IDs->', ns.split.promo_IDs);
543561

544562

545563
// 4. Now split the Graphs and update the
546564
nodes.forEach(function(node) {
547-
if (ns.split.promo_nodes_IDs.includes(node.id)) {
548-
node = ns.processLayout(ns.split.promo_annotate_list, node);
565+
if (ns.split.promo_IDs.includes(node.id)) {
566+
// node = ns.processLayout(ns.split.promo_annotate_list, node);
549567
ns.split.promo.nodes.push(node);
550568
} else {
551569
ns.split.scratch.nodes.push(node);
@@ -554,8 +572,8 @@ window.Widgets.Panel.Utils = {};
554572

555573
edges.forEach(function(edge) {
556574
if (
557-
ns.split.prom_IDs.includes(edge.source) &&
558-
ns.split.prom_IDs.includes(edge.target)
575+
ns.split.promo_IDs.includes(edge.source) &&
576+
ns.split.promo_IDs.includes(edge.target)
559577
) {
560578
ns.split.promo.edges.push(edge);
561579
} else {

‎src/js/widget.js

+102-94
Original file line numberDiff line numberDiff line change
@@ -10,89 +10,89 @@ window.Widgets.Widget = {};
1010
ns.selectorTooltipContainer = 'body';
1111

1212

13-
ns.options = {
14-
duration: 350,
15-
radius: 6, // radius of curve for links
16-
barHeight: 40,
17-
margin: {
18-
top: 30,
19-
left: 30,
20-
bottom: 50,
21-
right: 30,
22-
},
23-
svg_spacing: 500,
24-
svg_height: "100%",
25-
// Icons
26-
prefix:
27-
'https://raw.githubusercontent.com/os-threat/images/main/img/',
28-
shape: 'rnd-',
29-
icon_size: 36,
30-
textPadding: 8,
31-
corner: 5,
32-
// the tree view
33-
minHeight: 20,
34-
width: "100%",
35-
height: "100%",
36-
lineSpacing: 50,
37-
indentSpacing: 50,
38-
tooltipContent: 'summary', //'summary' or 'json'
39-
itemFont: '18px',
40-
edgeFontSize: '6px',
41-
edgeFontFamily: 'Wire One',
42-
layout: {
43-
left: 20,
44-
top: 20,
45-
distanceX: 50,
46-
distanceY: 50
47-
},
48-
boxSize: 10,
49-
tree_edge_thickness: 0.75,
50-
graph_edge_thickness: 1,
51-
linkStrength: 200,
52-
nodeStrength: -100,
53-
centreStrength: 80,
54-
theme: 'light',
55-
light_theme: {
56-
fill: 'white',
57-
svgName: 'black',
58-
svgBorder: 'black',
59-
checkColour: 'gray',
60-
checkText: 'white',
61-
select: 'yellow',
62-
edges: 'black',
63-
tooltip: {
64-
fill: 'white',
65-
stroke: '1px',
66-
scolour: 'black',
67-
corner: 5,
68-
tcolour: 'black',
69-
tsize: '11px',
70-
padding: '5px',
71-
maxwidth: '900px',
72-
overflow: 'auto'
73-
},
74-
},
75-
dark_theme: {
76-
fill: 'gray',
77-
svgName: 'white',
78-
svgBorder: 'white',
79-
checkColour: 'white',
80-
checkText: 'gray',
81-
select: 'yellow',
82-
edges: 'white',
83-
tooltip: {
84-
fill: 'lightgray',
85-
stroke: '1px',
86-
scolour: 'white',
87-
corner: 5,
88-
tcolour: 'white',
89-
tsize: '11px',
90-
padding: '5px',
91-
maxwidth: '900px',
92-
overflow: 'auto'
93-
},
94-
},
95-
};
13+
// ns.options = {
14+
// duration: 350,
15+
// radius: 6, // radius of curve for links
16+
// barHeight: 40,
17+
// margin: {
18+
// top: 30,
19+
// left: 30,
20+
// bottom: 50,
21+
// right: 30,
22+
// },
23+
// svg_spacing: 500,
24+
// svg_height: "100%",
25+
// // Icons
26+
// prefix:
27+
// 'https://raw.githubusercontent.com/os-threat/images/main/img/',
28+
// shape: 'rnd-',
29+
// icon_size: 36,
30+
// textPadding: 8,
31+
// corner: 5,
32+
// // the tree view
33+
// minHeight: 20,
34+
// width: "100%",
35+
// height: "100%",
36+
// lineSpacing: 50,
37+
// indentSpacing: 50,
38+
// tooltipContent: 'summary', //'summary' or 'json'
39+
// itemFont: '18px',
40+
// edgeFontSize: '6px',
41+
// edgeFontFamily: 'Wire One',
42+
// layout: {
43+
// left: 20,
44+
// top: 20,
45+
// distanceX: 50,
46+
// distanceY: 50
47+
// },
48+
// boxSize: 10,
49+
// tree_edge_thickness: 0.75,
50+
// graph_edge_thickness: 1,
51+
// linkStrength: 200,
52+
// nodeStrength: -100,
53+
// centreStrength: 80,
54+
// theme: 'light',
55+
// light_theme: {
56+
// fill: 'white',
57+
// svgName: 'black',
58+
// svgBorder: 'black',
59+
// checkColour: 'gray',
60+
// checkText: 'white',
61+
// select: 'yellow',
62+
// edges: 'black',
63+
// tooltip: {
64+
// fill: 'white',
65+
// stroke: '1px',
66+
// scolour: 'black',
67+
// corner: 5,
68+
// tcolour: 'black',
69+
// tsize: '11px',
70+
// padding: '5px',
71+
// maxwidth: '900px',
72+
// overflow: 'auto'
73+
// },
74+
// },
75+
// dark_theme: {
76+
// fill: 'gray',
77+
// svgName: 'white',
78+
// svgBorder: 'white',
79+
// checkColour: 'white',
80+
// checkText: 'gray',
81+
// select: 'yellow',
82+
// edges: 'white',
83+
// tooltip: {
84+
// fill: 'lightgray',
85+
// stroke: '1px',
86+
// scolour: 'white',
87+
// corner: 5,
88+
// tcolour: 'white',
89+
// tsize: '11px',
90+
// padding: '5px',
91+
// maxwidth: '900px',
92+
// overflow: 'auto'
93+
// },
94+
// },
95+
// };
9696

9797
ns.scratch = 'data/scratch.json';
9898

@@ -103,11 +103,19 @@ window.Widgets.Widget = {};
103103

104104

105105

106-
if (!ns.theme) {
107-
if (ns.options.theme === 'light') {
108-
ns.theme = ns.options.light_theme
106+
// if (!ns.theme) {
107+
// if (ns.options.theme === 'light') {
108+
// ns.theme = ns.options.light_theme
109+
// } else {
110+
// ns.theme = ns.options.dark_theme
111+
// }
112+
// }
113+
114+
if (!panelUtilsNs.theme) {
115+
if (panelUtilsNs.options.theme === 'light') {
116+
panelUtilsNs.theme = panelUtilsNs.options.light_theme
109117
} else {
110-
ns.theme = ns.options.dark_theme
118+
panelUtilsNs.theme = panelUtilsNs.options.dark_theme
111119
}
112120
}
113121

@@ -132,14 +140,14 @@ window.Widgets.Widget = {};
132140
.style('display', 'block')
133141
.style("position", "absolute")
134142
.style("z-index", "10")
135-
.style("background-color", ns.theme.tooltip.fill)
143+
.style("background-color", panelUtilsNs.theme.tooltip.fill)
136144
.style("border", "solid")
137-
.style("border-width", ns.theme.tooltip.stroke)
138-
.style("border-color", ns.theme.tooltip.scolour)
139-
.style("border-radius", ns.theme.tooltip.corner)
140-
.style("max-width", ns.theme.tooltip.maxwidth)
141-
.style("overflow-x", ns.theme.tooltip.overeflow)
142-
.style("padding", ns.theme.tooltip.padding)
145+
.style("border-width", panelUtilsNs.theme.tooltip.stroke)
146+
.style("border-color", panelUtilsNs.theme.tooltip.scolour)
147+
.style("border-radius", panelUtilsNs.theme.tooltip.corner)
148+
.style("max-width", panelUtilsNs.theme.tooltip.maxwidth)
149+
.style("overflow-x", panelUtilsNs.theme.tooltip.overeflow)
150+
.style("padding", panelUtilsNs.theme.tooltip.padding)
143151
.style('opacity', 0);
144152

145153

0 commit comments

Comments
 (0)