model-navigator-standalone
Version:
Standalone MDF graph model visualizer
83 lines (79 loc) • 2.83 kB
JavaScript
import "core-js/modules/es.symbol.description.js";
import React, { useContext } from "react";
import { useSelector, useDispatch } from 'react-redux';
import withStyles from '@mui/styles/withStyles';
import DataDictionaryPropertyTable from "../DataDictionaryPropertyTable";
import "./DataDictionaryNode.css";
import styles from "./DataDictionaryNode.style";
import NodeViewComponent from "./components/NodeViewComponent";
import { ConfigContext } from "../../../Config/ConfigContext";
import { tableNodeExpandChanged, selectTableNodeIsExpanded } from '../../../../../features/graph/graphSlice';
const NODE_STATE = {
OPEN: "open",
CLOSED: "close"
};
const DataDictionaryNode = _ref => {
let {
classes,
node,
// this is an mdf-reader node, not a flowgraph node
category,
description
} = _ref;
const dispatch = useDispatch();
const config = useContext(ConfigContext);
// expanded={highlightingNodeID && highlightingNodeID.includes(node.handle)}
const isExpanded = useSelector(state => selectTableNodeIsExpanded(state, node.handle));
const handleClickNode = nodeID => {
if (!isExpanded) {
dispatch(tableNodeExpandChanged({
nodeState: NODE_STATE.OPEN,
nodeID
}));
} else {
dispatch(tableNodeExpandChanged({
nodeState: NODE_STATE.CLOSED,
nodeID
}));
}
};
// const handleCloseNode = (nodeID) => {
// dispatch(tableNodeExpandChanged({nodeState: NODE_STATE.CLOSED, nodeID}));
// };
// const handleDownloadTemplate = (e, format) => {
// const { node } = props;
// e.stopPropagation(); // no toggling
// downloadTemplate(format, node.handle);
// };
const color = category ? config.tagAttribute('Category') ? config.tagAttribute('Category').table.color : '#000000' : '#000000';
const propertyCount = node.props().length;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: classes.node,
style: {
borderLeftColor: color
},
onClick: () => handleClickNode(node.handle),
onKeyPress: () => handleClickNode(node.handle),
role: "button",
tabIndex: 0
}, /*#__PURE__*/React.createElement(NodeViewComponent, {
node: node,
isExpanded: isExpanded,
description: description
// pdfDownloadConfig={pdfDownloadConfig}
,
propertyCount: propertyCount
})), isExpanded && /*#__PURE__*/React.createElement("div", {
className: classes.property,
style: {
borderLeft: "5px solid ".concat(color),
borderBottom: "1px solid #adbec4"
}
}, /*#__PURE__*/React.createElement(DataDictionaryPropertyTable, {
title: node.handle,
s: true,
node: node
// horizontal // supports horizontal orientation
})));
};
export default withStyles(styles)(DataDictionaryNode);