Skip to content

Commit d42d636

Browse files
brettforbesbrettforbes
committed
working the promo layout
1 parent eaea3de commit d42d636

File tree

4 files changed

+211
-122
lines changed

4 files changed

+211
-122
lines changed

‎src/js/panel._utils.js

+172-8
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ window.Widgets.Panel.Utils = {};
154154

155155

156156

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

336+
//------------------------------------------
337+
// process a layout
338+
//
339+
ns.processLayout = function (annotate_list, node) {
340+
console.log('annotate_list->',annotate_list);
341+
annotate_list.forEach(function(annotate) {
342+
if (annotate.prom_IDs.includes(node.id)) {
343+
//What level is the object?
344+
//Is it the head object?
345+
if (node.id === annotate.id) {
346+
// Its the top level object
347+
node.positionX = annotate.centreX;
348+
node.positionY = annotate.topY;
349+
return node;
350+
} else {
351+
// Is it in level 2 ?
352+
if (annotate.connections.includes(node.id)) {
353+
// its a 2nd layer thing
354+
annotate.layouts.forEach(function(layout) {
355+
if (layout.connections.includes(node.id)) {
356+
node.positionX = layout.positionX;
357+
node.positionY = layout.positionY;
358+
return node;
359+
}
360+
});
361+
} else {
362+
// ist a 3rd level or 3.5 level
363+
if (node.type === 'relationship') {
364+
node.positionX = 0;
365+
node.positionY = ns.options.layout.topY + 2.5*ns.options.layout.distanceY;
366+
return node;
367+
} else {
368+
node.positionX = 0;
369+
node.positionY = ns.options.layout.topY + 2*ns.options.layout.distanceY;
370+
return node;
371+
}
372+
}
373+
}
374+
375+
}
376+
});
377+
378+
}
379+
334380

335381

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

356-
// 1. Setup variables and define promotable types
402+
// If Incident Management, then check for these promotoables
357403
ns.split.prom_types = [
358404
'incident',
359405
'task',
360406
'impact',
361407
'event',
362408
'sighting',
363409
];
410+
// setup layout types for each object
411+
412+
ns.split.level1_layouts = {
413+
'incident': [
414+
{"label": "Event List", "field": "event_refs", "datatype": "list"},
415+
{"label": "Impact List", "field": "impact_refs", "datatype": "list"},
416+
{"label": "Task List", "field": "task_refs", "datatype": "list"},
417+
{"label": "Sequence Start", "field": "sequence_start_refs", "datatype": "list"},
418+
{"label": "Sequences", "field": "sequence_refs", "datatype": "list"},
419+
{"label": "Other Objects", "field": "other_object_refs", "datatype": "list"},
420+
],
421+
}
422+
423+
ns.split.level2_layouts = {
424+
'sighting': [
425+
{"label": "What Sighted", "field": "sighting_of_ref", "datatype": "value"},
426+
{"label": "Data Observed", "field": "observed_data_refs", "datatype": "list"},
427+
{"label": "Where Sighted", "field": "where_sighted_refs", "datatype": "list"},
428+
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
429+
],
430+
'task': [
431+
{"label": "What Changed", "field": "changed_objects", "datatype": "list"},
432+
{"label": "Owned By", "field": "owner", "datatype": "value"},
433+
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
434+
],
435+
'event': [
436+
{"label": "What Changed", "field": "changed_objects", "datatype": "list"},
437+
{"label": "Sightings Made", "field": "sighting_refs", "datatype": "list"},
438+
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
439+
],
440+
'impact': [
441+
{"label": "What Impacted", "field": "impacted_refs", "datatype": "list"},
442+
{"label": "Superseded By", "field": "superseded_by_ref", "datatype": "value"},
443+
{"label": "Recorded By", "field": "created_by_ref", "datatype": "value"},
444+
],
445+
}
446+
// Else if Setting up Options, Not Incident Management, then check these for promotables (not implemented yet)
447+
ns.split.option_types = [
448+
'identity',
449+
]
364450

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

370456
//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
460+
console.log('&&&&&&----');
461+
console.log('centreX->', centreX);
462+
console.log('layout->', ns.options.layout);
463+
console.log('options->', ns.options);
464+
// 4. Setup layout
465+
let j = 0;
371466
nodes.forEach(function(node) {
467+
let annotate = {};
468+
annotate.connections = [];
469+
annotate.prom_IDs = [];
470+
annotate.layouts = [];
372471
if (ns.split.prom_types.includes(node.type)) {
373-
ns.split.prom_node_IDs.push(node.id);
472+
j = j+1;
473+
annotate.id = node.id;
474+
annotate.centreX = centreX + j * ns.options.width;
475+
annotate.topY = ns.options.layout.top;
476+
if (node.type !== 'incident') {
477+
// If it is a level 1 object
478+
let layout_list = ns.split.level2_layouts[node.type];
479+
// Setup left hand edge of level 1, centred around incident
480+
//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));
483+
} else {
484+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
485+
}
486+
let node_orig = node.original;
487+
let i=0;
488+
// Then, if a layout is active, calculate its Position X, Position Y and add it to the returned layout instance
489+
layout_list.forEach(function(layout) {
490+
console.log('ns.options->', ns.options);
491+
if (layout.field in node_orig) {
492+
layout.positionX = annotate.leftX + (i * ns.options.layout.distanceX);
493+
layout.positionY = ns.options.layout.top + ns.options.layout.distanceY;
494+
layout.connections = []
495+
if (layout.datatype === 'list') {
496+
layout.connections.concat(node_orig[layout.field]);
497+
annotate.connections.concat(node_orig[layout.field]);
498+
} else {
499+
layout.connections.push(node_orig[layout.field]);
500+
annotate.connections.push(node_orig[layout.field]);
501+
}
502+
annotate.layouts.push(layout);
503+
}
504+
i = i+1;
505+
});
506+
} else if (node.type === 'incident') {
507+
// If it is the level 0 object
508+
let layout_list = ns.split.level1_layouts['incident']
509+
// Setup left hand edge of level 1, centred around incident
510+
//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));
513+
} else {
514+
annotate.leftX = annotate.centreX - (ns.options.layout.distanceX*(Math.floor( layout_list.length()/2 )))
515+
}
516+
let node_ext = node.original.extension["extension-definition—​ef765651-680c-498d-9894-99799f2fa126"];
517+
let i=0;
518+
layout_list.forEach(function(layout) {
519+
if (layout.field in node_ext) {
520+
layout.positionX = annotate.leftX + (i * ns.options.layout.distanceX);
521+
layout.positionY = ns.options.layout.top + ns.options.layout.distanceY;
522+
layout.connections = []
523+
if (layout.datatype === 'list') {
524+
layout.connections.concat(node_ext[layout.field]);
525+
annotate.connections.concat(node_ext[layout.field]);
526+
} else {
527+
layout.connections.push(node_ext[layout.field]);
528+
annotate.connections.push(node_ext[layout.field]);
529+
}
530+
annotate.layouts.push(layout);
531+
}
532+
i = i+1;
533+
});
534+
}
535+
annotate.prom_IDs = Array.from(
536+
ns.split.adjacency.dirs(ns.split.prom_node_IDs),
537+
(path) => path.at(-1),
538+
);
539+
ns.split.promo_annotate_list.push(annotate);
540+
ns.split.promo_nodes_IDs.concat(annotate.prom_IDs);
374541
}
375542
});
376-
377-
ns.split.prom_IDs = Array.from(
378-
ns.split.adjacency.dirs(ns.split.prom_node_IDs),
379-
(path) => path.at(-1),
380-
);
543+
381544

382545
// 4. Now split the Graphs and update the
383546
nodes.forEach(function(node) {
384-
if (ns.split.prom_IDs.includes(node.id)) {
547+
if (ns.split.promo_nodes_IDs.includes(node.id)) {
548+
node = ns.processLayout(ns.split.promo_annotate_list, node);
385549
ns.split.promo.nodes.push(node);
386550
} else {
387551
ns.split.scratch.nodes.push(node);

‎src/js/panel.promo.js

+15-56
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ window.Widgets.Panel.Promo = {}
1111
ns.menuItems = [
1212
{
1313
label: "Create SRO",
14-
icon: '<i class="fa-thin fa-handshake-simple"></i>',
14+
icon: '<i class="fa-regular fa-handshake"></i>',
15+
action: () => console.log("create SRO"),
16+
},
17+
{
18+
label: "Remove",
19+
icon: '<i class="fa-solid fa-broom"></i>',
1520
action: () => console.log("create SRO"),
1621
},
1722
];
@@ -117,7 +122,7 @@ window.Widgets.Panel.Promo = {}
117122
.attr('id', function(d, i) {
118123
return 'pedgelabel' + i;
119124
})
120-
.attr('font-size', ns.options.edgeFontSize)
125+
.style('font-size', ns.options.edgeFontSize)
121126
.style('font-family', ns.options.edgeFontFamily)
122127
.attr('fill', panelUtilsNs.theme.edges);
123128

@@ -153,60 +158,14 @@ window.Widgets.Panel.Promo = {}
153158
.on('mouseover.tooltip', panelUtilsNs.mouseover)
154159
.on("mousemove", panelUtilsNs.mousemove)
155160
.on("mouseout.tooltip", panelUtilsNs.mouseleave)
156-
.on('contextmenu', panelUtilsNs.contextmenu);
157-
// .on('mouseover', function(d) {
158-
// d3.select(this)
159-
// .transition()
160-
// .duration(options.duration)
161-
// .attr('width', 70)
162-
// .attr('height', 70);
163-
// })
164-
// .on('mouseout', function(d) {
165-
// d3.select(this)
166-
// .transition()
167-
// .duration(options.duration)
168-
// .attr('width', function(d) {
169-
// return options.radius;
170-
// })
171-
// .attr('height', function(d) {
172-
// return options.radius;
173-
// });
174-
// })
175-
// .on('mouseover.tooltip', function(d) {
176-
// ns.tooltip
177-
// .transition()
178-
// .duration(options.duration)
179-
// .style('opacity', 0.8);
180-
// ns.tooltip
181-
// .html(
182-
// '<h1>' +
183-
// d.heading +
184-
// '</h1>' +
185-
// '<p> ' +
186-
// d.description +
187-
// '</p>',
188-
// )
189-
// .style('left', d3.event.pageX + 'px')
190-
// .style('top', d3.event.pageY + 10 + 'px');
191-
// })
192-
// .on('mouseout.tooltip', function() {
193-
// ns.tooltip
194-
// .transition()
195-
// .duration(100)
196-
// .style('opacity', 0);
197-
// })
198-
// .on('mousemove', function() {
199-
// ns.tooltip
200-
// .style('left', d3.event.pageX + 'px')
201-
// .style('top', d3.event.pageY + 10 + 'px');
202-
// })
203-
// .call(
204-
// d3
205-
// .drag() //sets the event listener for the specified typenames and returns the drag behavior.
206-
// .on('start', pDragstarted) //start - after a new pointer becomes active (on mousedown or touchstart).
207-
// .on('drag', pDragged) //drag - after an active pointer moves (on mousemove or touchmove).
208-
// .on('end', pDragended), //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
209-
// );
161+
.on('contextmenu', panelUtilsNs.contextmenu)
162+
.call(
163+
d3
164+
.drag() //sets the event listener for the specified typenames and returns the drag behavior.
165+
.on('start', ns.dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart).
166+
.on('drag', ns.dragged) //drag - after an active pointer moves (on mousemove or touchmove).
167+
.on('end', ns.dragended), //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
168+
);
210169

211170

212171
ns.promotable_sim

0 commit comments

Comments
 (0)