model-navigator-standalone
Version:
Standalone MDF graph model visualizer
90 lines (89 loc) • 3.18 kB
JavaScript
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useState, useRef, useLayoutEffect, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import withStyles from '@mui/styles/withStyles';
import Styles from "./DictionaryStyle";
import Tab from "./Tab";
import TabPanel from "./Tab/TabPanel";
import TabThemeProvider from "./Tab/TabThemeConfig";
import DataDictionaryTable from "../Table/DataDictionaryTable";
import CanvasController from "../ReactFlowGraph/Canvas/CanvasController";
import { graphViewConfig } from '../../Config/nav.config';
import { tabGraphViewChanged, canvasWidthChanged, selectIsGraphView } from '../../../../features/graph/graphSlice';
const tabItems = [{
index: 0,
label: "Graph View",
value: "graph_view"
}, {
index: 1,
label: "Table View",
value: "table_view"
}];
const DictionaryView = _ref => {
let {
classes
} = _ref;
const dispatch = useDispatch();
const graphView = useSelector(selectIsGraphView);
const [currentTab, setCurrentTab] = useState(0);
/**
* get witdh of the tab to position nodes in the graph view
*/
const ref = useRef(null);
const [tabViewWidth, setTabViewWidth] = useState(0);
const setCanvasWidth = () => {
dispatch(canvasWidthChanged(ref.current.offsetWidth));
};
useEffect(() => {
dispatch(canvasWidthChanged(ref.current.offsetWidth));
window.addEventListener("resize", setCanvasWidth);
return () => {
window.removeEventListener("resize", setCanvasWidth);
};
});
useLayoutEffect(() => {
setTabViewWidth(ref.current.offsetWidth);
}, []);
//set to graph view incase of search entry
useEffect(() => {
if (graphView) {
// 0 set for graph view
setCurrentTab(0);
}
}, [graphView]);
const handleTabChange = (event, value) => {
setCurrentTab(value);
dispatch(tabGraphViewChanged(value === 0));
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabThemeProvider, null, /*#__PURE__*/React.createElement("div", {
className: classes.container,
ref: ref
}, /*#__PURE__*/React.createElement("div", {
className: classes.tabItems
}, /*#__PURE__*/React.createElement(Tab, {
styleClasses: classes,
tabItems: tabItems,
currentTab: currentTab,
handleTabChange: handleTabChange
})), /*#__PURE__*/React.createElement("div", {
className: classes.viewTableOuterContainer
}, /*#__PURE__*/React.createElement("div", {
className: classes.viewTableContainer
}, /*#__PURE__*/React.createElement(TabPanel, {
value: currentTab,
index: 0
}, /*#__PURE__*/React.createElement("div", {
className: classes.graphView
}, /*#__PURE__*/React.createElement(CanvasController, {
tabViewWidth: tabViewWidth,
graphViewConfig: graphViewConfig
}))), /*#__PURE__*/React.createElement(TabPanel, {
value: currentTab,
index: 1
}, /*#__PURE__*/React.createElement("div", {
className: classes.tableView
}, /*#__PURE__*/React.createElement(DataDictionaryTable
// pdfDownloadConfig={pdfDownloadConfig}
, null))))))));
};
export default withStyles(Styles)(DictionaryView);