Skip to content

Commit

Permalink
working the promo layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@brettforbes
brettforbes committed Jul 14, 2024
1 parent eaea3de commit d42d636
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 122 deletions.
180 changes: 172 additions & 8 deletions src/js/panel._utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,8 @@ window.Widgets.Panel.Utils = {};





// JSON Syntax Highlighting - https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript
ns.syntaxHighlight = function(json) {
if (typeof json != 'string') {
Expand Down Expand Up @@ -331,6 +333,50 @@ window.Widgets.Panel.Utils = {};
return d.id;
};

//------------------------------------------
// process a layout
//
ns.processLayout = function (annotate_list, node) {
console.log('annotate_list->',annotate_list);
annotate_list.forEach(function(annotate) {
if (annotate.prom_IDs.includes(node.id)) {
//What level is the object?
//Is it the head object?
if (node.id === annotate.id) {
// Its the top level object
node.positionX = annotate.centreX;
node.positionY = annotate.topY;
return node;
} else {
// Is it in level 2 ?
if (annotate.connections.includes(node.id)) {
// its a 2nd layer thing
annotate.layouts.forEach(function(layout) {
if (layout.connections.includes(node.id)) {
node.positionX = layout.positionX;
node.positionY = layout.positionY;
return node;
}
});
} else {
// ist a 3rd level or 3.5 level
if (node.type === 'relationship') {
node.positionX = 0;
node.positionY = ns.options.layout.topY + 2.5*ns.options.layout.distanceY;
return node;
} else {
node.positionX = 0;
node.positionY = ns.options.layout.topY + 2*ns.options.layout.distanceY;
return node;
}
}
}

}
});

}



// B. Update Data, Simulations and Drive Show Graph
Expand All @@ -353,35 +399,153 @@ window.Widgets.Panel.Utils = {};
ns.split.adjacency = new ns.Graph();
ns.split.prom_node_IDs = [];

// 1. Setup variables and define promotable types
// If Incident Management, then check for these promotoables
ns.split.prom_types = [
'incident',
'task',
'impact',
'event',
'sighting',
];
// setup layout types for each object

ns.split.level1_layouts = {
'incident': [
{"label": "Event List", "field": "event_refs", "datatype": "list"},
{"label": "Impact List", "field": "impact_refs", "datatype": "list"},
{"label": "Task List", "field": "task_refs", "datatype": "list"},
{"label": "Sequence Start", "field": "sequence_start_refs", "datatype": "list"},
{"label": "Sequences", "field": "sequence_refs", "datatype": "list"},
{"label": "Other Objects", "field": "other_object_refs", "datatype": "list"},
],
}

ns.split.level2_layouts = {
'sighting': [
{"label": "What Sighted", "field": "sighting_of_ref", "datatype": "value"},
{"label": "Data Observed", "field": "observed_data_refs", "datatype": "list"},
{"label": "Where Sighted", "field": "where_sighted_refs", "datatype": "list"},
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
],
'task': [
{"label": "What Changed", "field": "changed_objects", "datatype": "list"},
{"label": "Owned By", "field": "owner", "datatype": "value"},
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
],
'event': [
{"label": "What Changed", "field": "changed_objects", "datatype": "list"},
{"label": "Sightings Made", "field": "sighting_refs", "datatype": "list"},
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
],
'impact': [
{"label": "What Impacted", "field": "impacted_refs", "datatype": "list"},
{"label": "Superseded By", "field": "superseded_by_ref", "datatype": "value"},
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
],
}
// Else if Setting up Options, Not Incident Management, then check these for promotables (not implemented yet)
ns.split.option_types = [
'identity',
]

// 2. Fill adjacency list with edges
edges.forEach(function(edge) {
ns.split.adjacency.addEdge(edge['source'], edge['target']);
});

//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
console.log('&&&&&&----');
console.log('centreX->', centreX);
console.log('layout->', ns.options.layout);
console.log('options->', ns.options);
// 4. Setup layout
let j = 0;
nodes.forEach(function(node) {
let annotate = {};
annotate.connections = [];
annotate.prom_IDs = [];
annotate.layouts = [];
if (ns.split.prom_types.includes(node.type)) {
ns.split.prom_node_IDs.push(node.id);
j = j+1;
annotate.id = node.id;
annotate.centreX = centreX + j * ns.options.width;
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];
// 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));
} else {
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
}
let node_orig = node.original;
let i=0;
// Then, if a layout is active, calculate its Position X, Position Y and add it to the returned layout instance
layout_list.forEach(function(layout) {
console.log('ns.options->', ns.options);
if (layout.field in node_orig) {
layout.positionX = annotate.leftX + (i * ns.options.layout.distanceX);
layout.positionY = ns.options.layout.top + ns.options.layout.distanceY;
layout.connections = []
if (layout.datatype === 'list') {
layout.connections.concat(node_orig[layout.field]);
annotate.connections.concat(node_orig[layout.field]);
} else {
layout.connections.push(node_orig[layout.field]);
annotate.connections.push(node_orig[layout.field]);
}
annotate.layouts.push(layout);
}
i = i+1;
});
} else if (node.type === 'incident') {
// If it is the level 0 object
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));
} else {
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;
layout_list.forEach(function(layout) {
if (layout.field in node_ext) {
layout.positionX = annotate.leftX + (i * ns.options.layout.distanceX);
layout.positionY = ns.options.layout.top + ns.options.layout.distanceY;
layout.connections = []
if (layout.datatype === 'list') {
layout.connections.concat(node_ext[layout.field]);
annotate.connections.concat(node_ext[layout.field]);
} else {
layout.connections.push(node_ext[layout.field]);
annotate.connections.push(node_ext[layout.field]);
}
annotate.layouts.push(layout);
}
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.prom_IDs = Array.from(
ns.split.adjacency.dirs(ns.split.prom_node_IDs),
(path) => path.at(-1),
);


// 4. Now split the Graphs and update the
nodes.forEach(function(node) {
if (ns.split.prom_IDs.includes(node.id)) {
if (ns.split.promo_nodes_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 Down
71 changes: 15 additions & 56 deletions src/js/panel.promo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ window.Widgets.Panel.Promo = {}
ns.menuItems = [
{
label: "Create SRO",
icon: '<i class="fa-thin fa-handshake-simple"></i>',
icon: '<i class="fa-regular fa-handshake"></i>',
action: () => console.log("create SRO"),
},
{
label: "Remove",
icon: '<i class="fa-solid fa-broom"></i>',
action: () => console.log("create SRO"),
},
];
Expand Down Expand Up @@ -117,7 +122,7 @@ window.Widgets.Panel.Promo = {}
.attr('id', function(d, i) {
return 'pedgelabel' + i;
})
.attr('font-size', ns.options.edgeFontSize)
.style('font-size', ns.options.edgeFontSize)
.style('font-family', ns.options.edgeFontFamily)
.attr('fill', panelUtilsNs.theme.edges);

Expand Down Expand Up @@ -153,60 +158,14 @@ window.Widgets.Panel.Promo = {}
.on('mouseover.tooltip', panelUtilsNs.mouseover)
.on("mousemove", panelUtilsNs.mousemove)
.on("mouseout.tooltip", panelUtilsNs.mouseleave)
.on('contextmenu', panelUtilsNs.contextmenu);
// .on('mouseover', function(d) {
// d3.select(this)
// .transition()
// .duration(options.duration)
// .attr('width', 70)
// .attr('height', 70);
// })
// .on('mouseout', function(d) {
// d3.select(this)
// .transition()
// .duration(options.duration)
// .attr('width', function(d) {
// return options.radius;
// })
// .attr('height', function(d) {
// return options.radius;
// });
// })
// .on('mouseover.tooltip', function(d) {
// ns.tooltip
// .transition()
// .duration(options.duration)
// .style('opacity', 0.8);
// ns.tooltip
// .html(
// '<h1>' +
// d.heading +
// '</h1>' +
// '<p> ' +
// d.description +
// '</p>',
// )
// .style('left', d3.event.pageX + 'px')
// .style('top', d3.event.pageY + 10 + 'px');
// })
// .on('mouseout.tooltip', function() {
// ns.tooltip
// .transition()
// .duration(100)
// .style('opacity', 0);
// })
// .on('mousemove', function() {
// ns.tooltip
// .style('left', d3.event.pageX + 'px')
// .style('top', d3.event.pageY + 10 + 'px');
// })
// .call(
// d3
// .drag() //sets the event listener for the specified typenames and returns the drag behavior.
// .on('start', pDragstarted) //start - after a new pointer becomes active (on mousedown or touchstart).
// .on('drag', pDragged) //drag - after an active pointer moves (on mousemove or touchmove).
// .on('end', pDragended), //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
// );
.on('contextmenu', panelUtilsNs.contextmenu)
.call(
d3
.drag() //sets the event listener for the specified typenames and returns the drag behavior.
.on('start', ns.dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart).
.on('drag', ns.dragged) //drag - after an active pointer moves (on mousemove or touchmove).
.on('end', ns.dragended), //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
);


ns.promotable_sim
Expand Down
Loading

0 comments on commit d42d636

Please sign in to comment.