model-navigator-standalone
Version:
Standalone MDF graph model visualizer
149 lines (147 loc) • 6.27 kB
JavaScript
import "core-js/modules/es.symbol.description.js";
/* eslint-disable max-len */
/* eslint-disable react/forbid-prop-types */
import React, { useContext } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import IconButton from '@mui/material/IconButton';
import withStyles from '@mui/styles/withStyles';
import _ from 'lodash';
import { getNodeDescriptionFragment, getNodeTitleFragment } from '../../Utils/highlightHelper';
import { selectIsSearchMode, selectMatchedResult } from '../../../../../features/search/searchSlice';
import { changedVisOverlayPropTable, selectHighlightingMatchedNodeID } from '../../../../../features/graph/graphSlice';
import { defaultStyleAttributes } from '../../../Config/nav.config';
import { ConfigContext } from '../../../Config/ConfigContext';
import { ModelContext } from '../../../Model/ModelContext';
import DataDictionaryPropertyTable from "../../Table/DataDictionaryPropertyTable";
import styles from "./OverlayPropertyTable.style";
import NodeViewComponent from "../../Table/DataDictionaryNode/components/NodeViewComponent";
const OverlayPropertyTable = _ref => {
var _catConfig$table, _catConfig$node, _catConfig$table2, _catConfig$table3;
let {
classes,
nodeID,
hidden
} = _ref;
const dispatch = useDispatch();
const config = useContext(ConfigContext);
const model = useContext(ModelContext);
const isSearchMode = useSelector(selectIsSearchMode);
const node = nodeID ? model.nodes(nodeID) : null; // eslint-disable-line no-undef
const matchedNodeID = useSelector(selectHighlightingMatchedNodeID);
const matchedResult = useSelector(state => selectMatchedResult(state, matchedNodeID));
const getTitle = () => {
if (isSearchMode) {
if (matchedResult) {
return getNodeTitleFragment(matchedResult.matches, _.capitalize(node.handle), "overlay-property-table__span");
}
}
return _.capitalize(node.handle);
};
const getDescription = () => {
if (isSearchMode) {
if (matchedResult) {
return getNodeDescriptionFragment(matchedResult.matches, node.description, "overlay-property-table__span");
}
}
return node.description;
};
/**
* Toggle the property table to display all properties
*/
const handleOpenAllProperties = () => {
// this.props.onOpenMatchedProperties();
};
/**
* Toggle the property table to display matched properties only
*/
const handleDisplayOnlyMatchedProperties = () => {
// this.props.onCloseMatchedProperties();
};
const needHighlightSearchResult = isSearchMode;
if (!node || hidden) {
// !node || hidden) {
return /*#__PURE__*/React.createElement(React.Fragment, null);
}
const category = node.tags('Category') ? node.tags('Category') : null;
const catConfig = category ? config.tagAttribute('Category', category) : null;
const borderLeftColor = category ? catConfig === null || catConfig === void 0 || (_catConfig$table = catConfig.table) === null || _catConfig$table === void 0 ? void 0 : _catConfig$table.color : defaultStyleAttributes.node.color;
const backgroundColor = category ? catConfig === null || catConfig === void 0 || (_catConfig$node = catConfig.node) === null || _catConfig$node === void 0 ? void 0 : _catConfig$node.background : defaultStyleAttributes.node.background;
const tableIcon = category ? catConfig !== null && catConfig !== void 0 && (_catConfig$table2 = catConfig.table) !== null && _catConfig$table2 !== void 0 && _catConfig$table2.icon ? catConfig === null || catConfig === void 0 || (_catConfig$table3 = catConfig.table) === null || _catConfig$table3 === void 0 ? void 0 : _catConfig$table3.icon : defaultStyleAttributes.table.icon : defaultStyleAttributes.table.icon;
return /*#__PURE__*/React.createElement("div", {
className: classes.table
}, /*#__PURE__*/React.createElement("div", {
className: classes.background
}), /*#__PURE__*/React.createElement("div", {
className: classes.fixedContainer
}, /*#__PURE__*/React.createElement("div", {
className: classes.content
}, /*#__PURE__*/React.createElement("div", {
className: classes.header
}, /*#__PURE__*/React.createElement("div", {
className: classes.category,
style: {
borderLeftColor,
backgroundColor
}
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
gap: "8px",
paddingLeft: '4px'
}
}, /*#__PURE__*/React.createElement("img", {
src: tableIcon,
alt: "icon",
className: classes.categoryIcon
}), category ? /*#__PURE__*/React.createElement("h4", {
style: {
color: "#FFF"
},
className: classes.categoryText
}, _.capitalize(category)) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
className: classes.iconCloseRounded,
onClick: () => dispatch(changedVisOverlayPropTable("hide")),
size: "large"
}, /*#__PURE__*/React.createElement(CloseRoundedIcon, {
style: {
color: "#FFF",
fontSize: "20px"
}
}))))), /*#__PURE__*/React.createElement("div", {
className: classes.categoryDivider,
style: {
borderLeftColor
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.node,
style: {
borderLeftColor,
marginBottom: "0px",
borderRight: "1px solid #ADBEC4",
backgroundColor: "white"
}
}, /*#__PURE__*/React.createElement(NodeViewComponent, {
node: node,
description: node.desc,
matchedResult: matchedResult,
propertyCount: node.props().length,
isOverlay: true
})), /*#__PURE__*/React.createElement("div", {
className: classes.propertyTable,
style: {
borderLeftColor
}
}, /*#__PURE__*/React.createElement("div", {
className: classes.property
}, /*#__PURE__*/React.createElement(DataDictionaryPropertyTable, {
title: getTitle(),
node: node,
onlyShowMatchedProperties: false,
needHighlightSearchResult: needHighlightSearchResult,
hideIsRequired: false,
matchedResult: matchedResult
}))))));
};
export default withStyles(styles)(OverlayPropertyTable);