- Legend
-
-
-
- [[getLabel(legendKey)]]
-
-
-
-
-
- `;
- }
-}
-
-window.customElements.define('happi-graph-legend', HappiGraphLegend);
diff --git a/happi-graph.js b/happi-graph.js
deleted file mode 100644
index 73c02d3..0000000
--- a/happi-graph.js
+++ /dev/null
@@ -1,951 +0,0 @@
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import * as d3 from 'd3';
-import '@polymer/paper-icon-button/paper-icon-button.js';
-
-import './happi-graph-legend';
-import { compute } from './happi-graph-algorithms';
-import {
- addHeader,
- addIcon,
- addProperties,
- getNodeHeight,
- isSelected,
- getLinkCoordinates
-} from './happi-graph-helpers';
-
-import 'elkjs/lib/elk-api';
-import 'vis-network/dist/vis-network';
-
-class HappiGraph extends PolymerElement {
- constructor() {
- super();
-
- this.zooming = this.zooming.bind(this);
- this.onNodeClick = this.onNodeClick.bind(this);
- this.onLinkClick = this.onLinkClick.bind(this);
- }
-
- static get properties() {
- return {
- debug: {
- type: Boolean,
- value: false
- },
- algorithm: {
- type: String,
- value: 'ELK'
- },
- elkWorkerUrl: {
- type: String,
- value: '/node_modules/elkjs/lib/elk-worker.min.js'
- },
- iconsMap: {
- type: Object,
- value: null
- },
- propertiesMap: {
- type: Object,
- value: null
- },
- svg: {
- type: Object,
- value: null
- },
- zoom: {
- type: Object,
- value: null
- },
- allGroup: {
- type: Object,
- value: null
- },
- nodesGroup: {
- type: Object,
- value: null
- },
- linksGroup: {
- type: Object,
- value: null
- },
- linksTypeIconMap: {
- type: Array,
- value: []
- },
- graphDirection: {
- type: String,
- value: ''
- },
- nodes: {
- type: Array,
- value: []
- },
- links: {
- type: Array,
- value: []
- },
- graphData: {
- type: Object,
- value: null
- },
- isLoading: {
- type: Boolean,
- value: false
- },
- nodeCountLimit: {
- type: Number,
- value: 0
- },
- nodeDistanceX: {
- type: Number,
- value: 350
- },
- nodeDistanceY: {
- type: Number,
- value: 350
- },
- mousePosition: {
- type: Object,
- value: null
- },
- mousePositionEventListener: {
- type: Object,
- value: null
- }
- };
- }
-
- connectedCallback() {
- super.connectedCallback();
-
- this.init();
- }
-
- init() {
- if(this.graphData) {
- this.updateGraphData(this.graphData);
- } else {
- this.debug ? console.log('NO_GRAPH_DATA') : 0;
- }
- }
-
- updateGraphData(newGraphData) {
- this.debug ? console.log('updateGraphData(', newGraphData, ')') : 0 ;
-
- if(newGraphData && newGraphData.nodes.length >= 0 && newGraphData.links.length >= 0) {
- this.removeData();
-
- this.graphDirection = newGraphData.graphDirection ? newGraphData.graphDirection : this.graphDirection;
-
- this.nodes = newGraphData.nodes.map(n => {
- let keys = Object.keys(n.properties ? n.properties : {});
-
- let props = keys.map(k => {
- let camelCased = k.charAt(0).toUpperCase() + k.slice(1);
-
- return {
- value: n.properties[k],
- label: k,
- icon: this.propertiesMap[camelCased] ? this.propertiesMap[camelCased].icon : 'simple-square',
- groupName: camelCased
- }
- });
-
- let result = {
- id: n.id,
- type: this.propertiesMap[n.group] ? this.propertiesMap[n.group].icon : 'simple-square',
- value: n.label ? n.label : 'N/A',
- label: n.group ? n.group : 'N/A',
- selected: n.id === newGraphData.selectedNodeId,
- width: 300,
- height: getNodeHeight(props.length),
- properties: [
- ...props
- ]
- };
-
- return result;
- });
-
- this.links = [
- ...newGraphData.links.map(e => {
- return {
- id: e.id,
- label: e.label,
-
- from: this.nodes.filter(n => n.id === e.from).pop(),
- to: this.nodes.filter(n => n.id === e.to).pop(),
-
- source: e.from,
- target: e.to,
-
- connectionFrom: e.connectionFrom ? e.connectionFrom : false,
- connectionTo: e.connectionTo ? e.connectionTo : true,
-
- type: e.type
- };
- })
- ];
-
- switch(this.algorithm) {
- case 'ELK':
- if(this.graphDirection === 'VERTICAL') {
- this.visApproach();
- }
-
- if(this.graphDirection === 'HORIZONTAL') {
- this.elkApproach();
- }
-
- break;
- case 'VISJS':
- this.visApproach();
-
- break;
- case 'CUSTOM':
- this.initialApproach();
-
- break;
- default:
- console.log('NO_ALGORITHM_SELECTED');
-
- break;
- }
- } else {
- console.log('NEW_DATA_EMPTY');
- }
- }
-
- initialApproach() {
- let selectedNode = this.nodes.filter(n => n.selected === true).pop();
-
- this.nodes = selectedNode ?
- [...compute(selectedNode.id, this.nodes, this.links, this.graphDirection) ] :
- [];
-
- this.initGraph();
- this.addNodes();
- this.addLinks();
- this.centerGraph();
- }
-
- visApproach() {
- let nodeMap = {};
-
- var nodes = new vis.DataSet([
- ...this.nodes.map(n => {
- let _node = {
- ...n,
- value2: n.value
- };
-
- nodeMap[n.id] = _node;
-
- return _node;
- })
- ]);
-
- var edges = new vis.DataSet([
- ...this.links.map(e => {
- return {
- from: e.from.id,
- to: e.to.id
- }
- })
- ]);
-
- // /*
- var options = {
- autoResize: true,
- physics:{
- enabled:false,
- hierarchicalRepulsion: {
- avoidOverlap: 1,
- }
- },
- edges: {
- arrows: {
- to: {
- scaleFactor: 1
- }
- }
- },
- layout: {
- improvedLayout: false,
- hierarchical: {
- enabled:true,
- levelSeparation: this.nodeDistanceY,
- nodeSpacing: this.nodeDistanceX,
- treeSpacing: 200,
- direction: this.graphDirection === 'HORIZONTAL' ? 'LR' : 'DU', // UD, DU, LR, RL
- sortMethod: 'directed', // hubsize, directed
- shakeTowards: 'leaves' // roots, leaves
- }
- }
- };
-
- let data = {
- nodes: nodes,
- edges: edges
- }
-
- let e = document.createElement('div');
-
- var network = new vis.Network(e, data, options);
-
- let positions = network.getPositions();
-
- this.nodes = Object.keys(positions).map(id => {
- return {
- ...nodeMap[id],
- value: nodeMap[id].value2, // VisJS is somehow updating this value
- x: positions[id].x,
- y: positions[id].y
- };
- });
-
- this.links = this.links.map(l => {
- return {
- ...l,
- from: this.nodes.filter(n => n.id === l.from.id).pop(),
- to: this.nodes.filter(n => n.id === l.to.id).pop()
- }
- });
-
- // console.log(this.nodes, this.links);
-
- this.initGraph();
- this.addNodes();
- this.addLinks();
- this.whereToCenter();
- }
-
- elkApproach() {
- const elk = new ELK({
- workerUrl: this.elkWorkerUrl
- });
-
- const graph = {
- id: "root",
- layoutOptions: {
- "elk.algorithm": "layered",
- "elk.spacing.nodeNode": this.nodeDistanceY,
- "elk.layered.spacing.baseValue": this.nodeDistanceX,
- "elk.direction": this.graphDirection === 'HORIZONTAL' ? 'RIGHT' : 'UP'
- },
- children: [
- ...this.nodes
- ],
- edges: [
- ...this.links
- ]
- }
-
- this.isLoading = true;
-
- elk.layout(graph)
- .then((g) => {
-
- this.nodes = [ ...g.children ];
- this.links = [ ...g.edges ];
-
- this.isLoading = false;
-
- this.initGraph();
- this.addNodes();
- this.addLinks();
- this.whereToCenter();
- })
- // .catch(console.error)
- }
-
- removeData() {
- this.nodes = [];
- this.links = [];
- this.graphData = null;
-
- this.allGroup ? this.allGroup.remove() : (this.debug ? console.log('ALL_GROUP_EMPTY') : 0);
- }
-
- createMousePositionEventListener(){
- this.mousePositionEventListener = function (event) {
- this.mousePosition = {x: event.x, y: event.y};
- };
- }
-
- disconnectedCallback() {
- this.removeEventListener('mousemove', this.mousePositionEventListener);
- }
-
- initGraph() {
- this.svg = d3.select(this.$.svg);
-
- this.createMousePositionEventListener();
- this.addEventListener('mousemove', this.mousePositionEventListener);
-
- this.allGroup =
- this.svg
- .append('g')
- .attr('class', 'all-group');
-
- this.linksGroup = this.allGroup.append('g').attr('class', 'links-group');
- this.nodesGroup = this.allGroup.append('g').attr('class', 'nodes-group');
-
- let svgWidth = parseInt(this.svg.style('width'));
- let svgHeight = parseInt(this.svg.style('height'));
-
- this.zoom =
- d3.zoom()
- .extent([[0,0],[svgWidth, svgHeight]])
- .on('zoom', this.zooming)
-
- this.svg.call(this.zoom);
- }
-
- addNodes() {
- let self = this;
-
- let nodesGroup = this.nodesGroup.selectAll()
- .data(this.nodes)
- .enter();
-
- let nodeGroup =
- nodesGroup
- .append('g')
- .classed('node-group', true)
- .attr('id', (d) => d.id)
- .on('click', this.onNodeClick)
- .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
- .call(
- d3.drag()
- .on('start', (d) => {
- // console.log('DRAG_START', d);
- })
- .on('drag', function(d) {
- d.x = d3.event.x;
-
- if(self.graphDirection !== 'VERTICAL') {
- d.y = d3.event.y;
- }
-
- d3.select(this)
- .attr('transform', `translate(${d3.event.x}, ${d.y})`);
-
- let _links =
- d3.select(
- d3.select(this)
- .node()
- .parentNode
- .parentNode
- )
- .selectAll('.links-group')
- .selectAll('line');
-
- _links
- .filter(function(_d) {
- return _d.from.id === d.id;
- })
- .attr('x1', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return from.x;
- })
- .attr('y1', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return from.y;
- })
- .attr('x2', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return to.x;
- })
- .attr('y2', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return to.y;
- });
-
- _links
- .filter(function(_d) {
- return _d.to.id === d.id;
- })
- .attr('x1', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return from.x;
- })
- .attr('y1', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return from.y;
- })
- .attr('x2', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return to.x;
- })
- .attr('y2', (_d) => {
- let { from, to } = getLinkCoordinates(_d.from, _d.to, self.graphDirection);
-
- return to.y;
- });
- })
- .on('end', (d) => {
- // console.log('DRAG_END', d);
- })
- );
-
- nodeGroup
- .append('rect')
- .attr('width', (d) => d.width)
- .attr('height', (d) => d.height)
- .classed('node', true)
- .classed('is-selected', (d) => d.selected)
- .attr('rx', 20)
- .attr('ry', 20);
-
- isSelected(nodeGroup);
- addHeader(nodeGroup);
- addIcon(nodeGroup, this.iconsMap);
- addProperties(nodeGroup, this.iconsMap);
- }
-
- addLinks() {
- let self = this;
-
- let linksGroup = this.linksGroup.selectAll()
- .data(this.links)
- .enter();
-
- linksGroup
- .append('line')
- .style('stroke', 'black')
- .style('stroke-width', 2)
- .attr('stroke-dasharray', (d) => {
- return this.linksTypeIconMap[d.type] ? this.linksTypeIconMap[d.type].strokeDashArray : null;
- })
- .attr('marker-start', (d) => (d.connectionFrom) ? 'url(#arrow-start)' : null)
- .attr('marker-end', (d) => (d.connectionTo) ? 'url(#arrow-end)' : null)
- .attr('id', function(d) { return d.id; })
- .attr('from', function(d) { return d.from.id; })
- .attr('to', function(d) { return d.to.id; })
- .on('click', this.onLinkClick)
- .on('mouseover', function(d){
- let position = this.ownerSVGElement.createSVGPoint();
- position.x = self.mousePosition.x;
- position.y = self.mousePosition.y;
- position = position.matrixTransform(this.parentNode.getScreenCTM().inverse());
-
- let linkLabel = d.label;
- let sourceLabel = self.nodes.filter(n => n.id === d.from.id ).pop().value;
- let targetLabel = self.nodes.filter(n => n.id === d.to.id ).pop().value;
-
- let textBackground =
- d3.select(this.parentNode)
- .append('rect')
- .classed('link-popup-box', true)
- .attr('transform', `translate(20, -10)`)
- .style("fill", "#ffffff")
- .style("stroke", "#cccccc")
- .attr('rx', 10)
- .attr('ry', 10);
-
- let text =
- d3.select(this.parentNode)
- .append('text')
- .classed('link-popup-text', true)
- .attr('transform', `translate(30, 0)`)
- .attr('x', position.x + 10)
- .attr('y', position.y + 10)
- .text(() => sourceLabel + " :: "+ linkLabel + " :: " + targetLabel );
-
- let bBox = text.node().getBBox();
-
- textBackground
- .attr('x', bBox.x)
- .attr('y', bBox.y)
- .attr('height', bBox.height + 20)
- .attr('width', bBox.width + 20);
- })
- .on('mouseout', function(d){
- d3.select(this.ownerSVGElement.getElementsByClassName('link-popup-box')[0]).remove();
- d3.select(this.ownerSVGElement.getElementsByClassName('link-popup-text')[0]).remove();
- })
- .attr('x1', (d) => {
- let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection);
-
- return from.x;
- })
- .attr('y1', (d) => {
- let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection);
-
- return from.y;
- })
- .attr('x2', (d) => {
- let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection);
-
- return to.x;
- })
- .attr('y2', (d) => {
- let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection);
-
- return to.y;
- });
- }
-
- zooming() {
- this.allGroup.attr('transform', d3.event.transform);
- }
-
- customZoom(value) {
- if (value > 0) {
- this.zoom.scaleBy(this.svg.transition(), 1.3);
- } else {
- this.zoom.scaleBy(this.svg.transition(), 0.7);
- }
- }
-
- customZoomIn() {
- this.customZoom(1);
- }
-
- customZoomOut() {
- this.customZoom(-1);
- }
-
- whereToCenter() {
- let selectedNode = this.nodes.filter(n => n.selected === true).pop();
- let nodeCount = this.nodes.length;
- if(nodeCount < this.nodeCountLimit || this.nodeCountLimit == 0) {
- this.centerGraph();
- } else {
- this.centerToNode(selectedNode);
- }
- }
-
- centerToCoordinates(data, scaledBy) {
- let self = this;
- let { x, y, width, height } = data;
-
- let svgWidth = parseInt(this.svg.style('width'));
- let svgHeight = parseInt(this.svg.style('height'));
-
- let svgCenter = {
- x: svgWidth / 2,
- y: svgHeight / 2
- };
-
- this.svg.transition()
- .call(
- self.zoom.transform,
- d3.zoomIdentity
- .translate(
- svgCenter.x - ((x * scaledBy) + (width * scaledBy) / 2),
- svgCenter.y - ((y * scaledBy) + (height * scaledBy) / 2)
- )
- .scale(scaledBy)
- )
- }
-
- centerToNode(node) {
- let { x, y, width, height } = node;
-
- this.centerToCoordinates({x: x, y: y, width: width, height: height}, 0.6);
- }
-
- centerGraph() {
- let graphBBox = this.allGroup.node().getBBox();
-
- let svgWidth = parseInt(this.svg.style('width'));
- let svgHeight = parseInt(this.svg.style('height'));
-
- let data = {
- x: graphBBox.x,
- y: graphBBox.y,
- width: graphBBox.width,
- height: graphBBox.height
- };
-
- let scaledBy = Math.min(
- (svgWidth - 100) / graphBBox.width,
- (svgHeight - 100) / graphBBox.height,
- 1
- );
-
- this.centerToCoordinates(data, scaledBy);
- }
-
- cachedGraph() {
- this.removeData();
-
- this.dispatchEvent(
- new CustomEvent('happi-graph-on-cached-graph', {
- bubbles: true,
- detail: {
- id: this.id
- }
- })
- );
- }
-
- onNodeClick(node) {
- this.dispatchEvent(
- new CustomEvent('happi-graph-on-node-click', {
- bubbles: true,
- detail: {
- nodeId: node.id
- }
- })
- );
- }
-
- onLinkClick(link) {
- let element = this.shadowRoot.querySelector('#svg .all-group .links-group [id="'+ link.id +'"]')
- this.doLinkSelection(element);
-
- this.dispatchEvent(
- new CustomEvent('happi-graph-on-link-click', {
- bubbles: true,
- detail: {
- linkElement: element
- }
- })
- );
- }
-
- doLinkSelection( linkElement ) {
-
- if (this.sameLink(linkElement, this.selectedLink)) {
- this.invertLinkSelection(linkElement)
- } else {
- this.selectLink(linkElement)
-
- if(this.selectedLink){
- this.deselectLink(this.selectedLink)
- }
- }
- this.selectedLink = linkElement
- }
-
- sameLink(link, otherLink) {
- return link === otherLink
- }
-
- invertLinkSelection(linkElement){
- if(this.isLinkSelected(linkElement)){
- this.deselectLink(linkElement)
- }else{
- this.selectLink(linkElement)
- }
- }
-
- isLinkSelected(linkElement){
- let stroke = linkElement.style.getPropertyValue("stroke");
- let stroke_width = linkElement.style.getPropertyValue("stroke-width")
- let marker_end = linkElement.getAttribute("marker-end")
-
- return stroke === "var(--happi-graph-primary-color)" && stroke_width === "4" && marker_end === "url(#arrow-end-selected)";
- }
-
- deselectLink(linkElement){
- linkElement.style.setProperty("stroke", "black")
- linkElement.style.setProperty("stroke-width", "2")
- linkElement.setAttribute("marker-end", "url(#arrow-end)")
- }
-
- selectLink(linkElement){
- linkElement.style.setProperty("stroke", "var(--happi-graph-primary-color)")
- linkElement.style.setProperty("stroke-width", "4")
- linkElement.setAttribute("marker-end", "url(#arrow-end-selected)")
- }
-
- hasSize(a) {
- if(a) {
- return a.length > 0;
- } else {
- return false;
- }
- }
-
- static get template() {
- return html`
-
-
-
-  ]])
- [[ label ]]
-
-
-
- [[ label ]]
-
-
- `;
- }
-}
-
-window.customElements.define('happi-graph', HappiGraph);
diff --git a/index.html b/index.html
deleted file mode 100644
index dbf19e2..0000000
--- a/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Calculating...
-
-
+ }
+ onNodeClick={(d: any) => console.log(d)} />
+
+ ;
+}
diff --git a/src/components/HappiGraph/happi-graph-actions.component.tsx b/src/components/HappiGraph/happi-graph-actions.component.tsx
new file mode 100644
index 0000000..bfbdd1c
--- /dev/null
+++ b/src/components/HappiGraph/happi-graph-actions.component.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import HappiGraphListOfRelationships from './happi-graph-list-of-relationships.component';
+import HappiGraphStatistics from './happi-graph-statistics.component';
+
+interface Props {
+ zoomIn?: Function;
+ rawData?: any;
+}
+
+interface State {
+ nodes: any;
+ links: any;
+}
+
+/**
+ *
+ * React component used for displaying Action buttons.
+ *
+ * @since 0.1.0
+ * @access public
+ *
+ */
+class HappiGraphActions extends React.Component
+
+ );
+ }
+}
+
+export default HappiGraphLegend;
\ No newline at end of file
diff --git a/src/components/HappiGraph/happi-graph-legend.render.ts b/src/components/HappiGraph/happi-graph-legend.render.ts
new file mode 100644
index 0000000..ebbc7c6
--- /dev/null
+++ b/src/components/HappiGraph/happi-graph-legend.render.ts
@@ -0,0 +1,84 @@
+import {
+ simpleSquareIcon,
+ linksTypeIconMap,
+ iconsMap,
+ itemGroupIconMap
+} from "./happi-graph.render";
+
+import { pluralize } from '@capaj/pluralize';
+
+export const getIcon = (type: any, label: any, legendData: any) => {
+ let iconName = legendData[type][label];
+
+ if ((itemGroupIconMap[iconName] && iconsMap[itemGroupIconMap[iconName].icon])) {
+ return iconsMap[itemGroupIconMap[iconName].icon];
+ } else if (linksTypeIconMap[iconName] && iconsMap[linksTypeIconMap[iconName].icon]) {
+ return iconsMap[linksTypeIconMap[iconName].icon];
+ } else {
+ return simpleSquareIcon;
+ }
+};
+
+export const getLabel = (group: any) => {
+ return pluralize(group);
+};
+
+export const getLegendCategories = (legendData: any) => {
+ return Object.keys(legendData);//.map((k: any) => { return pluralize(k); });
+};
+
+export const getLegendLabels = (legendData: any, legendKey: any) => {
+ return [
+ // @ts-ignore
+ ...new Set( Object.keys(legendData[legendKey]) )
+ ];
+};
+
+export const graphLinksUpdateInLegendData = (newGraphLinks: object[]) => {
+ let _links = newGraphLinks;
+
+ let legendData: any = {};
+
+ if (_links.length) {
+ _links.forEach((l: any) => {
+ if (l.type && linksTypeIconMap[l.type]) {
+ let group = linksTypeIconMap[l.type].group;
+
+ if (!legendData[group]) {
+ legendData[group] = [];
+ }
+
+ legendData[group][linksTypeIconMap[l.type].label] = l.type;
+ }
+ });
+ }
+
+ return legendData;
+}
+
+export const graphNodesUpdateInLegendData = (newGraphNodes: any) => {
+ let _nodes = newGraphNodes;
+ let legendData: any = {};
+
+ if (_nodes.length) {
+ _nodes.forEach((n: any) => {
+ let group = itemGroupIconMap[n.label].group;
+
+ if (!legendData[group]) {
+ legendData[group] = [];
+ }
+
+ legendData[group][n.label] = n.label;
+
+ n.properties.forEach((p: any) => {
+ if (itemGroupIconMap[p.groupName]){
+ let propertiesGroup = itemGroupIconMap[p.groupName].group;
+
+ legendData[propertiesGroup][p.groupName] = p.groupName;
+ }
+ });
+ });
+ }
+
+ return legendData;
+}
diff --git a/src/components/HappiGraph/happi-graph-list-of-relationships.component.tsx b/src/components/HappiGraph/happi-graph-list-of-relationships.component.tsx
new file mode 100644
index 0000000..b313141
--- /dev/null
+++ b/src/components/HappiGraph/happi-graph-list-of-relationships.component.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Modal, Table, ActionIcon } from '@mantine/core';
+import {
+ BsCardChecklist
+} from 'react-icons/bs';
+
+
+interface Props {
+ nodes?: any;
+ links?: any;
+}
+
+interface State {
+ data: any;
+ opened: boolean;
+}
+
+/**
+ *
+ * React component used for displaying Action buttons.
+ *
+ * @since 0.1.0
+ * @access public
+ *
+ */
+class HappiGraphListOfRelationships extends React.Component
+ { this.toggleMinimise() }} />
+
+
+
+ { legendData && !isMinimised && getLegendCategories(legendData).map((legendKey: any, legendKeyId: number) => {
+ return }) }
+
+
+ { legendKey }
+
+
+
+ { legendData && legendKey && getLegendLabels(legendData, legendKey).map((label: any, labelId: number) => {
+ return
+
+ 
+
+ { label }
+
+ }) }
+ | From | +Mapping | +To | +
|---|---|---|
| {d.from.label} | +{d.mapping} | +{d.to.label} | +
| Key | +Occurences | +
|---|---|
| {d.key} | +{d.occurrences} | +
+ { isLoading &&
+ );
+ }
+}
+
+export default HappiGraph;
\ No newline at end of file
diff --git a/src/components/HappiGraph/happi-graph.helpers.test.tsx b/src/components/HappiGraph/happi-graph.helpers.test.tsx
new file mode 100644
index 0000000..8587f6c
--- /dev/null
+++ b/src/components/HappiGraph/happi-graph.helpers.test.tsx
@@ -0,0 +1,140 @@
+import { mapLinks, mapNodes } from './happi-graph.helpers';
+
+const nodes: any = [
+ {
+ "id": "ID",
+ "label": "This is a label example",
+ "group": "GlossaryCategory",
+ "properties": {
+ "glossary": "Bucket 1"
+ },
+ "level": 0,
+ "qualifiedName": "(category)=Bucket 1::(category)=This is a label example"
+ },
+ {
+ "id": "ID-02",
+ "label": "This is a label example 2",
+ "group": "GlossaryCategory",
+ "properties": {
+ "glossary": "Bucket 2"
+ },
+ "level": 0,
+ "qualifiedName": "(category)=Bucket 2::(category)=This is a label example"
+ }
+];
+
+const links: any = [
+ {
+ "from": "ID",
+ "to": "ID-02",
+ "label": "SemanticAssignment",
+ "type": null
+ }
+];
+
+describe("isLoading
} + + + +
+
+ customZoomIn(zoom, svg) } />
+
+
+
+ customZoomOut(zoom, svg) } />
+
+
+
+ centerGraph(allGroup, svg, zoom) } />
+
+
+
+ { !isFullscreen && this.setFullscreen() } /> }
+ { isFullscreen && this.setFullscreen() } /> }
+
+
+ { actions }
+
+
+
+
+
+