model-navigator-standalone
Version:
Standalone MDF graph model visualizer
174 lines (171 loc) • 6.59 kB
JavaScript
import React, { memo, useEffect } from "react";
import { useSelector, useDispatch } from 'react-redux';
import withStyles from '@mui/styles/withStyles';
import CloseIcon from "@mui/icons-material/Close";
import { Handle } from "reactflow";
import clsx from "clsx";
import Styles from "./NodeStyle";
import { highlightMatchingTitle, setMatchingNodeClasses } from "./util";
import { reactFlowNodeClicked, reactFlowNodeFocused, reactFlowNodeDisplayChanged, changedVisOverlayPropTable, selectFocusedNodeID, selectHighlightingNodeID, selectNodeIsExpanded, selectNodeIsForegrounded } from '../../../../../features/graph/graphSlice';
import { selectIsSearchMode, selectCurrentSearchKeyword, selectMatchedNodes } from '../../../../../features/search/searchSlice';
const NodeView = _ref => {
let {
classes,
id,
handleId,
data //must be named 'data' per ReactFlow
} = _ref;
const dispatch = useDispatch();
const isSearchMode = useSelector(selectIsSearchMode);
const expand = useSelector(state => selectNodeIsExpanded(state, id));
const foreground = useSelector(state => selectNodeIsForegrounded(state, id));
const currentSearchKeyword = useSelector(selectCurrentSearchKeyword);
const highlightingNodeID = useSelector(selectHighlightingNodeID);
const focusedNodeID = useSelector(selectFocusedNodeID);
const matchedNodesInfo = useSelector(selectMatchedNodes);
/**
* expand node in normal mode (when search mode is false)
* use view option to adjust the fontSize on property dialog
*/
const {
label,
icon,
iconColor,
category,
matchedNodeNameQuery,
nodeAssignment,
nodeClass,
reqPropsCount,
prefPropsCount,
optPropsCount
} = data;
const clickNode = e => {
e.stopPropagation();
dispatch(reactFlowNodeClicked({
id,
isSearchMode
}));
};
const showPropTable = e => {
e.stopPropagation();
dispatch(changedVisOverlayPropTable('show'));
};
/**
* light node based on result of search query
*/
useEffect(() => {
if ("".concat(label).toLowerCase() !== focusedNodeID) {
dispatch(reactFlowNodeDisplayChanged(false));
}
}, [focusedNodeID, label, dispatch]);
/**
* highlight nodes based on search query
*/
const nodeClasses = setMatchingNodeClasses(matchedNodesInfo, label, classes, category);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: clsx({
[classes.propDialog]: expand
})
}, /*#__PURE__*/React.createElement("div", {
className: expand ? classes.customNodeExpand : classes.customNodeCollapse
}, expand && /*#__PURE__*/React.createElement("div", {
className: classes.iconBar
}, /*#__PURE__*/React.createElement(CloseIcon, {
className: classes.closeIcon,
onClick: clickNode,
"aria-label": "Close"
})), /*#__PURE__*/React.createElement("div", {
className: classes.contentWrapper
}, /*#__PURE__*/React.createElement("div", {
className: clsx(classes.nodeTitle, {
[classes.btnPadding]: expand
})
}, /*#__PURE__*/React.createElement("div", {
className: isSearchMode ? nodeClasses : classes.nodeButtonOuterWrapper,
style: {
border: expand && "2px solid white"
},
onClick: clickNode
}, /*#__PURE__*/React.createElement("div", {
className: classes.nodeButtonInnerWrapper
}, /*#__PURE__*/React.createElement("div", {
tag: "1",
style: {
borderRadius: "11px",
backgroundColor: iconColor
}
}, /*#__PURE__*/React.createElement("div", {
className: classes.iconWrapper,
style: {
backgroundColor: iconColor
}
}, /*#__PURE__*/React.createElement("img", {
className: classes.icon,
src: icon,
alt: "category icon"
}))), /*#__PURE__*/React.createElement("div", {
tag: "2",
className: classes.labelWrapper
}, isSearchMode && matchedNodeNameQuery ? /*#__PURE__*/React.createElement(React.Fragment, null, highlightMatchingTitle(label, matchedNodeNameQuery, classes)) : /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(label).toLowerCase()))))), /*#__PURE__*/React.createElement("div", {
className: expand ? classes.viewSection : classes.hideSection
}, /*#__PURE__*/React.createElement("ul", {
className: classes.list
}, /*#__PURE__*/React.createElement("li", {
className: classes.listItem
}, /*#__PURE__*/React.createElement("span", {
className: classes.listItemLabel
}, "Assignment:"), /*#__PURE__*/React.createElement("span", {
className: classes.listItemValue
}, nodeAssignment)), /*#__PURE__*/React.createElement("hr", {
className: classes.divider
}), /*#__PURE__*/React.createElement("li", {
className: classes.listItem
}, /*#__PURE__*/React.createElement("span", {
className: classes.listItemLabel
}, "Class: "), /*#__PURE__*/React.createElement("span", {
className: classes.listItemValue
}, nodeClass)), /*#__PURE__*/React.createElement("hr", {
className: classes.divider
}), /*#__PURE__*/React.createElement("li", {
className: classes.listItem
}, /*#__PURE__*/React.createElement("span", {
className: classes.listItemLabel
}, "Required Properties: "), /*#__PURE__*/React.createElement("span", {
className: classes.listItemValue
}, reqPropsCount)), /*#__PURE__*/React.createElement("hr", {
className: classes.divider
}), /*#__PURE__*/React.createElement("li", {
className: classes.listItem
}, /*#__PURE__*/React.createElement("span", {
className: classes.listItemLabel
}, "Preferred Properties: "), /*#__PURE__*/React.createElement("span", {
className: classes.listItemValue
}, prefPropsCount)), /*#__PURE__*/React.createElement("hr", {
className: classes.divider
}), /*#__PURE__*/React.createElement("li", {
className: classes.listItem
}, /*#__PURE__*/React.createElement("span", {
className: classes.listItemLabel
}, "Optional Properties: "), /*#__PURE__*/React.createElement("span", {
className: classes.listItemValue
}, optPropsCount)))), /*#__PURE__*/React.createElement(Handle, {
type: "target",
position: "top",
style: {
top: "12px"
}
}), /*#__PURE__*/React.createElement(Handle, {
type: "source",
position: "bottom",
id: handleId,
style: {
background: "transparent",
border: "none",
top: "37px"
}
}))), expand && /*#__PURE__*/React.createElement("button", {
className: classes.viewPropBtn,
onClick: showPropTable
}, "View Properties")));
};
export default withStyles(Styles)(/*#__PURE__*/memo(NodeView));