model-navigator-standalone
Version:
Standalone MDF graph model visualizer
92 lines (91 loc) • 2.81 kB
JavaScript
import React, { useRef, useEffect } from "react";
import { useDispatch } from 'react-redux';
import withStyles from '@mui/styles/withStyles';
import DictionarySearcher from "./Search/DictionarySearcher";
import DictionarySearchHistory from "./Search/DictionarySearchHistory";
import FacetFilters from './FacetFilter';
import HeaderComponent from "./Header";
import DictionaryView from "./DictionaryView";
import { tabGraphViewChanged } from '../../../features/graph/graphSlice';
import "./DataDictionary.css";
function DataDictionary(_ref) {
let {
classes
// pdfDownloadConfig,
} = _ref;
const dispatch = useDispatch();
const dictionarySearcherRef = useRef(null);
/// ????vv
useEffect(() => {
dispatch(tabGraphViewChanged(true));
});
const handleClickSearchHistoryItem = keyword => {
dictionarySearcherRef.current.launchSearchFromOutside(keyword);
};
const handleClearSearchResult = () => {
dictionarySearcherRef.current.clearSearchFromOutside();
};
return /*#__PURE__*/React.createElement("div", {
className: classes.dictionaryContainer
}, /*#__PURE__*/React.createElement(HeaderComponent, null), " ", /*#__PURE__*/React.createElement("div", {
className: classes.dataDictionary
}, /*#__PURE__*/React.createElement("div", {
className: classes.sidebar
}, /*#__PURE__*/React.createElement(DictionarySearcher, {
ref: dictionarySearcherRef
}), /*#__PURE__*/React.createElement(DictionarySearchHistory, {
onClickSearchHistoryItem: handleClickSearchHistoryItem,
onClearSearchHistory: handleClearSearchResult
}), /*#__PURE__*/React.createElement(FacetFilters, null)), /*#__PURE__*/React.createElement(DictionaryView
// pdfDownloadConfig={pdfDownloadConfig}
, {
handleClearSearchResult: handleClearSearchResult
})));
}
;
const styles = () => ({
dictionaryContainer: {
marginTop: "-40px",
overflowY: "hidden",
background: '#fff'
},
dataDictionary: {
display: "flex",
height: "calc(100vh)"
},
container: {
paddingTop: "60px",
fontFamily: "Raleway, sans-serif",
paddingLeft: "27px",
paddingRight: "27px"
},
detailContainer: {
margin: "auto",
paddingTop: "30px",
paddingLeft: "50px",
paddingRight: "50px",
letterSpacing: "0.014em",
color: "#000000",
size: "12px",
lineHeight: "23px"
},
sidebar: {
width: "320px",
minWidth: "320px",
height: "100%",
marginTop: "-3px",
overflowY: "auto",
boxShadow: "inset -10px -1px 10px -7px rgb(50 50 50 / 25%)",
borderTopRightRadius: "7px"
},
mainGraphView: {
width: "calc(100vw - 320px)",
minWidth: "900px"
},
mainTableView: {
width: "calc(100vw - 320px)",
minWidth: "900px",
overflowY: "scroll"
}
});
export default withStyles(styles)(DataDictionary);