removed all eui components - audit completes successful now

bpmining · Aug 8, 2022 · 66e0f5d · 66e0f5d
1 parent e5c1070
commit 66e0f5d
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 1,094 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,6 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@elastic/eui": "46.1.1",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.3",
     "@reduxjs/toolkit": "^1.8.2",

diff --git a/public/components/_base.scss b/public/components/_base.scss
@@ -32,7 +32,13 @@ $font-size-headline: 20px;
 $font-size-regular: 18px;
 $font-size-small: 14px;
 
-.design-scope p {
+.main-design-scope {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 10px;
+}
+
+.main-design-scope p {
   font-family: $font-family;
   font-weight: $font-weight-bold;
   font-size: $font-size-headline;
@@ -43,4 +49,26 @@ $font-size-small: 14px;
   z-index: 1;
   display: flex;
   flex-direction: row;
+  padding: 15px;
+}
+
+.main-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #f8fafd;
+}
+
+.panel-container {
+  flex: 0 0 320px;
+  padding: 15px 0px 15px 15px;
+}
+
+.layer-container {
+  padding: 10px 0px 0px 0px;
+}
+
+.canvas {
+  width: 100%;
+  position: relative;
 }
diff --git a/public/components/lib/case_group_item.tsx b/public/components/lib/case_group_item.tsx
@@ -1,11 +1,13 @@
-import { EuiPanel } from '@elastic/eui';
 import React from 'react';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { RootReducer } from '../../reducer/root_reducer';
+import { ServerRequestData } from '../app';
+import { Paper } from '@mui/material';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { NODE_COLOR_LAYER_1, NODE_COLOR_LAYER_2 } from '../../../common/colors';
+
 import * as fetchCaseGraphActions from '../../reducer_actions/fetch_case_specific_graph';
-import { ServerRequestData } from '../app';
 
 interface CaseGroupProps {
   serverRequestData: ServerRequestData;
@@ -28,10 +30,21 @@ const CaseGroupComponent = (props: CaseGroupProps) => {
   const cycleTime = props.cycleTime;
   const { fetchCaseGraphAction, selectCaseAction } = props;
   const layer = props.rootReducer.layer.selectedLayer;
+  let color = NODE_COLOR_LAYER_1;
+  if (layer === 2) {
+    color = NODE_COLOR_LAYER_2;
+  }
 
   return (
     <div style={{ margin: '15px 0px' }}>
-      <EuiPanel
+      <Paper
+        elevation={2}
+        style={{ padding: '20px 15px' }}
+        sx={{
+          '&:hover': {
+            background: color,
+          },
+        }}
         onClick={() => {
           fetchCaseGraphAction(props.serverRequestData, caseId, layer);
           selectCaseAction({ label: caseId });
@@ -44,7 +57,7 @@ const CaseGroupComponent = (props: CaseGroupProps) => {
             {cycleTime}
           </div>
         </div>
-      </EuiPanel>
+      </Paper>
     </div>
   );
 };

diff --git a/public/components/pages/layer_panel/layer_panel.tsx b/public/components/pages/layer_panel/layer_panel.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import './layers.scss';
-import { EuiPanel } from '@elastic/eui';
 import { RootReducer } from '../../../reducer/root_reducer';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import LayersIcon from '@mui/icons-material/Layers';
+import { Paper } from '@mui/material';
+
 import * as layerActions from '../../../reducer_actions/set_layer';
 import * as nodeDetailPanelActions from '../../../reducer_actions/node_detail_panel';
 
@@ -30,7 +31,7 @@ export function LayerPanelComponent(props: LayerPanelProps) {
     setLayerAction(layer);
   };
   return (
-    <EuiPanel className="layer-panel" paddingSize="m">
+    <Paper className="layer-panel" elevation={2}>
       <div className="headline-container">
         <p> Layers </p>
         <LayersIcon />
@@ -40,7 +41,7 @@ export function LayerPanelComponent(props: LayerPanelProps) {
         <div className="layer-1" onClick={() => changeLayer(1)}></div>
         <div className="layer-2" onClick={() => changeLayer(2)}></div>
       </div>
-    </EuiPanel>
+    </Paper>
   );
 }
 

diff --git a/public/components/pages/layer_panel/layers.scss b/public/components/pages/layer_panel/layers.scss
@@ -20,6 +20,7 @@
   z-index: 1;
   width: 150px;
   height: 160px;
+  padding: 20px 15px;
 }
 
 .layer-1 {

diff --git a/public/components/pages/layout.tsx b/public/components/pages/layout.tsx
@@ -1,22 +1,21 @@
 import React, { useEffect } from 'react';
-import { EuiPage, EuiResizableContainer } from '@elastic/eui';
-import { PanelComponent } from './side_panel/panel';
-import { LayerPanel } from './layer_panel/layer_panel';
-import '../_base.scss';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
+import { RootReducer } from '../../reducer/root_reducer';
+import '../_base.scss';
+import { PanelComponent } from './side_panel/panel';
+import { LayerPanel } from './layer_panel/layer_panel';
 import { VisGraphComponent } from './process_graph/vis_graph';
 import { VisNode, VisEdge } from '../../../model/vis_types';
+import { ServerRequestData } from '../app';
+import { BadgeComponent } from '../lib/badge';
+import { Chip } from '@mui/material';
+
 import * as fetchCaseGraphActions from '../../reducer_actions/fetch_case_specific_graph';
 import * as fetchAggregatedGraphActions from '../../reducer_actions/fetch_aggregated_graph';
 import * as badgeActions from '../../reducer_actions/badges';
 import * as filterActions from '../../reducer_actions/get_cycle_times';
 
-import { ServerRequestData } from '../app';
-import { RootReducer } from '../../reducer/root_reducer';
-import { BadgeComponent } from '../lib/badge';
-import { Chip } from '@mui/material';
-
 interface LayoutState {
   rootReducer: RootReducer;
 }
@@ -113,56 +112,41 @@ const LayoutComponent = (props: LayoutProps) => {
   };
 
   return (
-    <EuiPage paddingSize="none">
-      <EuiResizableContainer style={{ height: '100%', width: '100%' }}>
-        {(EuiResizablePanel, EuiResizableButton) => (
-          <>
-            <EuiResizablePanel
-              mode="collapsible"
-              initialSize={20}
-              minSize="330px"
-              style={{ maxWidth: '250' }}
-            >
-              <PanelComponent
-                caseCount={props.rootReducer.graph.caseCount}
-                caseIds={props.rootReducer.graph.caseIds}
-                serverRequestData={props.serverRequestData}
+    <div className="main-container">
+      <div className="panel-container">
+        <PanelComponent
+          caseCount={props.rootReducer.graph.caseCount}
+          caseIds={props.rootReducer.graph.caseIds}
+          serverRequestData={props.serverRequestData}
+        />
+      </div>
+
+      <div className="canvas">
+        <div className="main-design-scope">
+          <div className="badge-container">
+            {badges.length > 0 &&
+              badges.map((badge) => {
+                return <BadgeComponent filterAction={badge.filterAction} layer={badge.layer} />;
+              })}
+            <div style={{ margin: '0px 5px' }}>
+              <Chip
+                variant="outlined"
+                sx={{
+                  border: `1px dashed #2C2C2C`,
+                  color: '#2C2C2C',
+                  '& .MuiChip-label': { fontSize: '10pt' },
+                }}
+                label="Add Filter"
               />
-            </EuiResizablePanel>
-
-            <EuiResizableButton />
-
-            <EuiResizablePanel className="canvas" mode="main" initialSize={80} minSize="500px">
-              <div className="design-scope">
-                <div className="badge-container">
-                  {badges.length > 0 &&
-                    badges.map((badge) => {
-                      return (
-                        <BadgeComponent filterAction={badge.filterAction} layer={badge.layer} />
-                      );
-                    })}
-                  <div style={{ margin: '0px 5px' }}>
-                    <Chip
-                      variant="outlined"
-                      sx={{
-                        border: `1px dashed #2C2C2C`,
-                        color: '#2C2C2C',
-                        '& .MuiChip-label': { fontSize: '10pt' },
-                      }}
-                      label="Add Filter"
-                    />
-                  </div>
-                </div>
-                {graphBool && <VisGraphComponent nodes={nodes} edges={edges} />}
-                <div className="layer-container">
-                  <LayerPanel />
-                </div>
-              </div>
-            </EuiResizablePanel>
-          </>
-        )}
-      </EuiResizableContainer>
-    </EuiPage>
+            </div>
+          </div>
+          {graphBool && <VisGraphComponent nodes={nodes} edges={edges} />}
+          <div className="layer-container">
+            <LayerPanel />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

diff --git a/public/components/pages/process_graph/node_panel.scss b/public/components/pages/process_graph/node_panel.scss
@@ -1,5 +1,9 @@
 @import '../../base';
 
+.node-panel {
+  padding: 20px 15px;
+}
+
 .node-panel-item {
   margin: 5pt 0pt;
 }

diff --git a/public/components/pages/process_graph/node_panel.tsx b/public/components/pages/process_graph/node_panel.tsx
@@ -1,14 +1,14 @@
-import { EuiPanel } from '@elastic/eui';
-import { Button } from '@mui/material';
-import { COLOR_LAYER_1 } from '../../../../common/colors';
-import { VisNode } from 'plugins/bpmining-kibana-plugin/model/vis_types';
-import { RootReducer } from 'plugins/bpmining-kibana-plugin/public/reducer/root_reducer';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
+import { RootReducer } from 'plugins/bpmining-kibana-plugin/public/reducer/root_reducer';
+import './node_panel.scss';
+import { Button, Paper } from '@mui/material';
+import { COLOR_LAYER_1 } from '../../../../common/colors';
+import { VisNode } from 'plugins/bpmining-kibana-plugin/model/vis_types';
+
 import * as nodeDetailPanelActions from '../../../reducer_actions/node_detail_panel';
 import * as layerActions from '../../../reducer_actions/set_layer';
-import './node_panel.scss';
 
 export interface NodePanelState {
   rootReducer: RootReducer;
@@ -58,7 +58,7 @@ const NodePanel = (props: NodePanelProps) => {
     }
 
     panel = (
-      <EuiPanel className="node-panel">
+      <Paper className="node-panel" elevation={2}>
         <p>{title}</p>
         <br />
         <div className="node-panel-item">
@@ -92,11 +92,11 @@ const NodePanel = (props: NodePanelProps) => {
             </Button>
           )}
         </div>
-      </EuiPanel>
+      </Paper>
     );
   } else {
     panel = (
-      <EuiPanel className="node-panel">
+      <Paper className="node-panel">
         <p>{title}</p>
         <br />
         <div className="node-panel-item">
@@ -135,7 +135,7 @@ const NodePanel = (props: NodePanelProps) => {
             </Button>
           )}
         </div>
-      </EuiPanel>
+      </Paper>
     );
   }
   return panel;

diff --git a/public/components/pages/side_panel/filter_tabs/cycle_time_filter.tsx b/public/components/pages/side_panel/filter_tabs/cycle_time_filter.tsx
@@ -113,7 +113,10 @@ const CycleTimeFilter = (props: CycleTimeFilterProps) => {
 
   return (
     <div className="cycle-time-table">
-      <Paper sx={{ width: '100%', overflowX: 'auto', marginTop: '22px' }}>
+      <Paper
+        elevation={2}
+        sx={{ width: '100%', overflowX: 'auto', marginTop: '22px', padding: '10px 10px 0px 10px' }}
+      >
         <TableContainer>
           <Table>
             <TableHead style={{ fontWeight: 500 }}>

diff --git a/public/components/pages/side_panel/filter_tabs/tabs.tsx b/public/components/pages/side_panel/filter_tabs/tabs.tsx
@@ -25,7 +25,7 @@ export const FilterTabs = (props: FilterTabsProps) => {
 
   return (
     <div>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
         <Tabs
           value={value}
           onChange={(e, v) => {

diff --git a/public/components/pages/side_panel/panel.scss b/public/components/pages/side_panel/panel.scss
@@ -49,6 +49,7 @@
 .counter-container {
   display: flex;
   flex-direction: row;
+  margin-top: 25px;
 }
 
 .counter-item {
@@ -73,12 +74,15 @@
   justify-content: flex-start;
   align-items: center;
   margin-right: 30px;
+  margin-top: 13px;
 }
 
 .time-container {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-top: 25px;
+  margin-bottom: 45px;
 }
 
 .cylce-time-group-container p {