Skip to content

Commit

Permalink
Upodating layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@brettforbes
brettforbes committed Jul 17, 2024
1 parent d42d636 commit 6fd922e
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 115 deletions.
60 changes: 39 additions & 21 deletions src/js/panel._utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,14 @@ window.Widgets.Panel.Utils = {};
indentSpacing: 50,
tooltipContent: 'summary', //'summary' or 'json'
itemFont: '18px',
edgeFontSize: '16px',
edgeFontFamily: 'Wire One',
layout: {
left: 20,
top: 20,
distanceX: 50,
distanceY: 50
},
boxSize: 10,
tree_edge_thickness: 0.75,
graph_edge_thickness: 1,
Expand Down Expand Up @@ -382,6 +390,7 @@ window.Widgets.Panel.Utils = {};
// B. Update Data, Simulations and Drive Show Graph
ns.processGraphData = function(graphData) {
console.group('Widgets.Panel.Utils.updateGraph');
console.log('graphData->', graphData);

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

ns.split.adjacency = new ns.Graph();
ns.split.prom_node_IDs = [];

ns.split.promo_nodes_IDs = [];
ns.split.promo_IDs = [];
ns.split.promo_annotate_list = [];

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

//3. Find first the promotable node ID's and collect all sub-graphs into promID's
ns.split.promo_nodes_IDs = [];
ns.split.promo_annotate_list = [];
let centreX = 400/2 // ns.options.width/2; this is NaN
let dummywidth = 400; // how to work out promo panel width and height????? TO DO
let centreX = dummywidth/2 // ns.options.width/2; this is NaN
console.log('&&&&&&----');
console.log('centreX->', centreX);
console.log('layout->', ns.options.layout);
console.log('options->', ns.options);
console.log('nodes->', nodes);
// 4. Setup layout
let j = 0;
let j = -1;
nodes.forEach(function(node) {
let annotate = {};
annotate.connections = [];
annotate.prom_IDs = [];
annotate.layouts = [];
console.log('node type in annotate->', node.type);
if (ns.split.prom_types.includes(node.type)) {
j = j+1;
annotate.id = node.id;
annotate.centreX = centreX + j * ns.options.width;
annotate.centreX = centreX + j * dummywidth;
annotate.topY = ns.options.layout.top;
if (node.type !== 'incident') {
// If it is a level 1 object
let layout_list = ns.split.level2_layouts[node.type];
console.log('layout_list->', layout_list);
// Setup left hand edge of level 1, centred around incident
//check if the number is even or odd
if(layout_list.length() % 2 == 0) {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length()/2 ) - 0.5));
if(layout_list.length % 2 == 0) {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length/2 ) - 0.5));
} else {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length/2 )))
}
let node_orig = node.original;
let i=0;
Expand All @@ -508,10 +522,10 @@ window.Widgets.Panel.Utils = {};
let layout_list = ns.split.level1_layouts['incident']
// Setup left hand edge of level 1, centred around incident
//check if the number is even or odd
if(layout_list.length() % 2 == 0) {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length()/2 ) - 0.5));
if(layout_list.length % 2 == 0) {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(( layout_list.length/2 ) - 0.5));
} else {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length/2 )))
}
let node_ext = node.original.extension["extension-definition—​ef765651-680c-498d-9894-99799f2fa126"];
let i=0;
Expand All @@ -532,20 +546,24 @@ window.Widgets.Panel.Utils = {};
i = i+1;
});
}
annotate.prom_IDs = Array.from(
ns.split.adjacency.dirs(ns.split.prom_node_IDs),
(path) => path.at(-1),
);
ns.split.promo_annotate_list.push(annotate);
ns.split.promo_nodes_IDs.concat(annotate.prom_IDs);
ns.split.promo_nodes_IDs.push(node.id);
// ns.split.promo_nodes_IDs.concat(annotate.prom_IDs);
}
});

ns.split.promo_IDs = Array.from(
ns.split.adjacency.dirs(ns.split.promo_nodes_IDs),
(path) => path.at(-1),
);
console.log('ns.split.promo_nodes_IDs->', ns.split.promo_nodes_IDs);
console.log('ns.split.promo_IDs->', ns.split.promo_IDs);


// 4. Now split the Graphs and update the
nodes.forEach(function(node) {
if (ns.split.promo_nodes_IDs.includes(node.id)) {
node = ns.processLayout(ns.split.promo_annotate_list, node);
if (ns.split.promo_IDs.includes(node.id)) {
// node = ns.processLayout(ns.split.promo_annotate_list, node);
ns.split.promo.nodes.push(node);
} else {
ns.split.scratch.nodes.push(node);
Expand All @@ -554,8 +572,8 @@ window.Widgets.Panel.Utils = {};

edges.forEach(function(edge) {
if (
ns.split.prom_IDs.includes(edge.source) &&
ns.split.prom_IDs.includes(edge.target)
ns.split.promo_IDs.includes(edge.source) &&
ns.split.promo_IDs.includes(edge.target)
) {
ns.split.promo.edges.push(edge);
} else {
Expand Down
196 changes: 102 additions & 94 deletions src/js/widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,89 +10,89 @@ window.Widgets.Widget = {};
ns.selectorTooltipContainer = 'body';


ns.options = {
duration: 350,
radius: 6, // radius of curve for links
barHeight: 40,
margin: {
top: 30,
left: 30,
bottom: 50,
right: 30,
},
svg_spacing: 500,
svg_height: "100%",
// Icons
prefix:
'https://raw.githubusercontent.com/os-threat/images/main/img/',
shape: 'rnd-',
icon_size: 36,
textPadding: 8,
corner: 5,
// the tree view
minHeight: 20,
width: "100%",
height: "100%",
lineSpacing: 50,
indentSpacing: 50,
tooltipContent: 'summary', //'summary' or 'json'
itemFont: '18px',
edgeFontSize: '6px',
edgeFontFamily: 'Wire One',
layout: {
left: 20,
top: 20,
distanceX: 50,
distanceY: 50
},
boxSize: 10,
tree_edge_thickness: 0.75,
graph_edge_thickness: 1,
linkStrength: 200,
nodeStrength: -100,
centreStrength: 80,
theme: 'light',
light_theme: {
fill: 'white',
svgName: 'black',
svgBorder: 'black',
checkColour: 'gray',
checkText: 'white',
select: 'yellow',
edges: 'black',
tooltip: {
fill: 'white',
stroke: '1px',
scolour: 'black',
corner: 5,
tcolour: 'black',
tsize: '11px',
padding: '5px',
maxwidth: '900px',
overflow: 'auto'
},
},
dark_theme: {
fill: 'gray',
svgName: 'white',
svgBorder: 'white',
checkColour: 'white',
checkText: 'gray',
select: 'yellow',
edges: 'white',
tooltip: {
fill: 'lightgray',
stroke: '1px',
scolour: 'white',
corner: 5,
tcolour: 'white',
tsize: '11px',
padding: '5px',
maxwidth: '900px',
overflow: 'auto'
},
},
};
// ns.options = {
// duration: 350,
// radius: 6, // radius of curve for links
// barHeight: 40,
// margin: {
// top: 30,
// left: 30,
// bottom: 50,
// right: 30,
// },
// svg_spacing: 500,
// svg_height: "100%",
// // Icons
// prefix:
// 'https://raw.githubusercontent.com/os-threat/images/main/img/',
// shape: 'rnd-',
// icon_size: 36,
// textPadding: 8,
// corner: 5,
// // the tree view
// minHeight: 20,
// width: "100%",
// height: "100%",
// lineSpacing: 50,
// indentSpacing: 50,
// tooltipContent: 'summary', //'summary' or 'json'
// itemFont: '18px',
// edgeFontSize: '6px',
// edgeFontFamily: 'Wire One',
// layout: {
// left: 20,
// top: 20,
// distanceX: 50,
// distanceY: 50
// },
// boxSize: 10,
// tree_edge_thickness: 0.75,
// graph_edge_thickness: 1,
// linkStrength: 200,
// nodeStrength: -100,
// centreStrength: 80,
// theme: 'light',
// light_theme: {
// fill: 'white',
// svgName: 'black',
// svgBorder: 'black',
// checkColour: 'gray',
// checkText: 'white',
// select: 'yellow',
// edges: 'black',
// tooltip: {
// fill: 'white',
// stroke: '1px',
// scolour: 'black',
// corner: 5,
// tcolour: 'black',
// tsize: '11px',
// padding: '5px',
// maxwidth: '900px',
// overflow: 'auto'
// },
// },
// dark_theme: {
// fill: 'gray',
// svgName: 'white',
// svgBorder: 'white',
// checkColour: 'white',
// checkText: 'gray',
// select: 'yellow',
// edges: 'white',
// tooltip: {
// fill: 'lightgray',
// stroke: '1px',
// scolour: 'white',
// corner: 5,
// tcolour: 'white',
// tsize: '11px',
// padding: '5px',
// maxwidth: '900px',
// overflow: 'auto'
// },
// },
// };

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

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



if (!ns.theme) {
if (ns.options.theme === 'light') {
ns.theme = ns.options.light_theme
// if (!ns.theme) {
// if (ns.options.theme === 'light') {
// ns.theme = ns.options.light_theme
// } else {
// ns.theme = ns.options.dark_theme
// }
// }

if (!panelUtilsNs.theme) {
if (panelUtilsNs.options.theme === 'light') {
panelUtilsNs.theme = panelUtilsNs.options.light_theme
} else {
ns.theme = ns.options.dark_theme
panelUtilsNs.theme = panelUtilsNs.options.dark_theme
}
}

Expand All @@ -132,14 +140,14 @@ window.Widgets.Widget = {};
.style('display', 'block')
.style("position", "absolute")
.style("z-index", "10")
.style("background-color", ns.theme.tooltip.fill)
.style("background-color", panelUtilsNs.theme.tooltip.fill)
.style("border", "solid")
.style("border-width", ns.theme.tooltip.stroke)
.style("border-color", ns.theme.tooltip.scolour)
.style("border-radius", ns.theme.tooltip.corner)
.style("max-width", ns.theme.tooltip.maxwidth)
.style("overflow-x", ns.theme.tooltip.overeflow)
.style("padding", ns.theme.tooltip.padding)
.style("border-width", panelUtilsNs.theme.tooltip.stroke)
.style("border-color", panelUtilsNs.theme.tooltip.scolour)
.style("border-radius", panelUtilsNs.theme.tooltip.corner)
.style("max-width", panelUtilsNs.theme.tooltip.maxwidth)
.style("overflow-x", panelUtilsNs.theme.tooltip.overeflow)
.style("padding", panelUtilsNs.theme.tooltip.padding)
.style('opacity', 0);


Expand Down

0 comments on commit 6fd922e

Please sign in to comment.