Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

Commit

Permalink
Merge pull request #39 from sarbull/react
Browse files Browse the repository at this point in the history 
Build happi-graph
  • Loading branch information
@sarbull
sarbull authored Aug 4, 2022
2 parents b44c38c + 0a91cf0 commit f307d3f
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 17 deletions.
14 changes: 7 additions & 7 deletions dist/esm/happi-graph-legend.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
import React from 'react';
import { Switch as MantineSwitch } from '@mantine/core';
import { getIcon, getLegendCategories, getLegendLabels, graphLinksUpdateInLegendData, graphNodesUpdateInLegendData } from './happi-graph-legend.render';
import { v4 as uuidv4 } from 'uuid';
/**
*
* React component used for displaying Action buttons.
Expand All @@ -15,6 +14,7 @@ class HappiGraphLegend extends React.Component {
constructor(props) {
super(props);
this.state = {
debug: props.debug ? true : false,
nodes: [...props.nodes],
links: [...props.links],
isMinimised: true,
Expand All @@ -26,20 +26,20 @@ class HappiGraphLegend extends React.Component {
this.setState({ isMinimised: !isMinimised });
}
componentDidMount() {
const { nodes, links } = this.state;
const { nodes, links, debug } = this.state;
let data = {};
data = Object.assign(Object.assign({}, graphLinksUpdateInLegendData(links)), graphNodesUpdateInLegendData(nodes));
console.log(data);
debug && console.log(data);
this.setState({
legendData: Object.assign({}, data)
});
}
render() {
const { isMinimised, legendData } = this.state;
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: "happi-graph-legend" }, { children: [_jsx("div", Object.assign({ className: "toggler" }, { children: _jsx(MantineSwitch, { label: "Legend", checked: !isMinimised, onClick: () => { this.toggleMinimise(); } }) })), _jsx("div", Object.assign({ className: "contents" }, { children: legendData && !isMinimised && getLegendCategories(legendData).map((legendKey, legendKeyId) => {
return _jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "icon-title" }, { children: _jsx("b", { children: legendKey }) }), `${uuidv4()}-${legendKeyId}`), _jsx("div", Object.assign({ className: "svg-icons" }, { children: legendData && legendKey && getLegendLabels(legendData, legendKey).map((label, labelId) => {
return _jsxs("div", Object.assign({ className: "svg-icon" }, { children: [_jsx("img", { src: `data:image/svg+xml;utf8,${getIcon(legendKey, label, legendData)}`, alt: "icon" }), _jsx("span", { children: label })] }), `${uuidv4()}-${labelId}`);
}) }))] });
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: "happi-graph-legend" }, { children: [_jsx("div", Object.assign({ className: "toggler" }, { children: _jsx(MantineSwitch, { label: "Legend", checked: !isMinimised, onChange: () => { this.toggleMinimise(); } }) })), _jsx("div", Object.assign({ className: "contents" }, { children: legendData && !isMinimised && getLegendCategories(legendData).map((legendKey, legendKeyId) => {
return _jsxs("div", { children: [_jsx("div", Object.assign({ className: "icon-title" }, { children: _jsx("b", { children: legendKey }) })), _jsx("div", Object.assign({ className: "svg-icons" }, { children: legendData && legendKey && getLegendLabels(legendData, legendKey).map((label, labelId) => {
return _jsxs("div", Object.assign({ className: "svg-icon" }, { children: [_jsx("img", { src: `data:image/svg+xml;utf8,${getIcon(legendKey, label, legendData)}`, alt: "icon" }), _jsx("span", { children: label })] }), `${labelId}`);
}) }))] }, legendKeyId);
}) }))] })) }));
}
}
Expand Down
21 changes: 11 additions & 10 deletions dist/esm/happi-graph.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { AiOutlineFullscreen, AiOutlineFullscreenExit } from 'react-icons/ai';
class HappiGraph extends React.Component {
constructor(props) {
super(props);
console.warn('render()');
const mappedNodes = mapNodes(props.rawData.nodes, props.selectedNodeId);
const mappedLinks = mapLinks(props.rawData.edges, mappedNodes);
this.state = {
Expand Down Expand Up @@ -76,31 +75,33 @@ class HappiGraph extends React.Component {
}
}
componentDidMount() {
const { happiGraph } = this.state;
console.log("componentDidMount()", this.state);
const { happiGraph, debug } = this.state;
debug && console.log("componentDidMount()", this.state);
this.setState({
svg: d3.select(happiGraph.current)
}, () => {
this.selectAlgorithm(() => {
console.log('Everything is ready.');
debug && console.log('Everything is ready.');
this.init();
});
});
}
componentDidUpdate() {
console.log("componentDidUpdate()", this.state);
const { debug } = this.state;
debug && console.log("componentDidUpdate()", this.state);
}
init() {
console.log('init()');
const { debug } = this.state;
debug && console.log('init()');
const { svg, nodes, links, graphDirection } = this.state;
const allGroup = svg.append('g')
.attr('class', 'all-group');
const linksGroup = allGroup.append('g').attr('class', 'links-group');
const nodesGroup = allGroup.append('g').attr('class', 'nodes-group');
let svgWidth = parseInt(svg.style('width'));
let svgHeight = parseInt(svg.style('height'));
console.log('svgWitdh = ', svgWidth);
console.log('svgHeight = ', svgHeight);
debug && console.log('svgWitdh = ', svgWidth);
debug && console.log('svgHeight = ', svgHeight);
this.setState({
allGroup: allGroup,
zoom: d3.zoom()
Expand All @@ -127,8 +128,8 @@ class HappiGraph extends React.Component {
}
render() {
const { actions } = this.props;
const { isLoading, happiGraph, zoom, svg, nodes, links, allGroup, isFullscreen } = this.state;
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: `happi-graph-wrapper ${isFullscreen ? 'happi-graph-fullscreen' : ''}` }, { children: [isLoading && _jsx("h1", { children: "isLoading" }), _jsx("svg", Object.assign({ id: "happi-graph", ref: happiGraph }, { children: _jsxs("defs", { children: [_jsx("marker", Object.assign({ id: "arrow-start", markerWidth: "10", markerHeight: "10", refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M9,0 L9,6 L0,3 z", className: "arrow" }) })), _jsx("marker", Object.assign({ id: "arrow-start-selected", markerWidth: "10", markerHeight: "10", refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M9,0 L9,6 L0,3 z", className: "arrow-selected" }) })), _jsx("marker", Object.assign({ id: "arrow-end", markerWidth: "10", markerHeight: "10", refX: "7", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M0,0 L0,6 L9,3 z", className: "arrow" }) })), _jsx("marker", Object.assign({ id: "arrow-end-selected", markerWidth: "10", markerHeight: "10", refX: "7", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M0,0 L0,6 L9,3 z", className: "arrow-selected" }) }))] }) })), _jsxs("div", Object.assign({ className: "happi-graph-actions" }, { children: [_jsx(ActionIcon, Object.assign({ title: "Zoom In", variant: "hover", size: 35 }, { children: _jsx(MdZoomIn, { size: 25, onClick: () => customZoomIn(zoom, svg) }) })), _jsx(ActionIcon, Object.assign({ title: "Zoom Out", variant: "hover", size: 35 }, { children: _jsx(MdZoomOut, { size: 25, onClick: () => customZoomOut(zoom, svg) }) })), _jsx(ActionIcon, Object.assign({ title: "Fit to screen", variant: "hover", size: 35 }, { children: _jsx(MdOutlineCenterFocusWeak, { size: 25, onClick: () => centerGraph(allGroup, svg, zoom) }) })), _jsxs(ActionIcon, Object.assign({ title: "Fullscreen", variant: "hover", size: 35 }, { children: [!isFullscreen && _jsx(AiOutlineFullscreen, { size: 25, onClick: () => this.setFullscreen() }), isFullscreen && _jsx(AiOutlineFullscreenExit, { size: 25, onClick: () => this.setFullscreen() })] })), actions] })), _jsx("div", Object.assign({ className: "happi-graph-legend-wrapper" }, { children: _jsx(HappiGraphLegend, { nodes: nodes, links: links }) }))] })) }));
const { isLoading, happiGraph, zoom, svg, nodes, links, allGroup, isFullscreen, debug } = this.state;
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: `happi-graph-wrapper ${isFullscreen ? 'happi-graph-fullscreen' : ''}` }, { children: [isLoading && _jsx("h1", { children: "isLoading" }), _jsx("svg", Object.assign({ id: "happi-graph", ref: happiGraph }, { children: _jsxs("defs", { children: [_jsx("marker", Object.assign({ id: "arrow-start", markerWidth: "10", markerHeight: "10", refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M9,0 L9,6 L0,3 z", className: "arrow" }) })), _jsx("marker", Object.assign({ id: "arrow-start-selected", markerWidth: "10", markerHeight: "10", refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M9,0 L9,6 L0,3 z", className: "arrow-selected" }) })), _jsx("marker", Object.assign({ id: "arrow-end", markerWidth: "10", markerHeight: "10", refX: "7", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M0,0 L0,6 L9,3 z", className: "arrow" }) })), _jsx("marker", Object.assign({ id: "arrow-end-selected", markerWidth: "10", markerHeight: "10", refX: "7", refY: "3", orient: "auto", markerUnits: "strokeWidth" }, { children: _jsx("path", { d: "M0,0 L0,6 L9,3 z", className: "arrow-selected" }) }))] }) })), _jsxs("div", Object.assign({ className: "happi-graph-actions" }, { children: [_jsx(ActionIcon, Object.assign({ title: "Zoom In", variant: "hover", size: 35 }, { children: _jsx(MdZoomIn, { size: 25, onClick: () => customZoomIn(zoom, svg) }) })), _jsx(ActionIcon, Object.assign({ title: "Zoom Out", variant: "hover", size: 35 }, { children: _jsx(MdZoomOut, { size: 25, onClick: () => customZoomOut(zoom, svg) }) })), _jsx(ActionIcon, Object.assign({ title: "Fit to screen", variant: "hover", size: 35 }, { children: _jsx(MdOutlineCenterFocusWeak, { size: 25, onClick: () => centerGraph(allGroup, svg, zoom) }) })), _jsxs(ActionIcon, Object.assign({ title: "Fullscreen", variant: "hover", size: 35 }, { children: [!isFullscreen && _jsx(AiOutlineFullscreen, { size: 25, onClick: () => this.setFullscreen() }), isFullscreen && _jsx(AiOutlineFullscreenExit, { size: 25, onClick: () => this.setFullscreen() })] })), actions] })), _jsx("div", Object.assign({ className: "happi-graph-legend-wrapper" }, { children: _jsx(HappiGraphLegend, { nodes: nodes, links: links, debug: debug }) }))] })) }));
}
}
export default HappiGraph;
2 changes: 2 additions & 0 deletions dist/types/happi-graph-legend.component.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import React from 'react';
interface Props {
nodes: any;
links: any;
debug?: boolean;
}
interface State {
nodes: any;
links: any;
isMinimised: boolean;
legendData: any;
debug: boolean;
}
/**
*
Expand Down

0 comments on commit f307d3f

Please sign in to comment.