removed add filter button, fixed selected layer in layer panel

bpmining · Aug 12, 2022 · d922fa6 · d922fa6
1 parent dff654b
commit d922fa6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/public/components/pages/layer_panel/layer_panel.tsx b/public/components/pages/layer_panel/layer_panel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './layers.scss';
 import { RootReducer } from '../../../reducer/root_reducer';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
@@ -24,12 +24,28 @@ const mapStateToProps = (state: LayerPanelState) => {
 };
 
 export function LayerPanelComponent(props: LayerPanelProps) {
+  const [currentLayer, setCurrentLayer] = useState<number>(1);
+
   const changeLayer = (layer: number) => {
     const { setLayerAction, hideDrillDownGraph, hideNodeDetailPanel } = props;
+    setCurrentLayer(layer);
     hideDrillDownGraph();
     hideNodeDetailPanel();
     setLayerAction(layer);
   };
+
+  let layer1Component = <div className="layer-1-selected" onClick={() => changeLayer(1)}></div>;
+  let layer2Component = (
+    <div className="layer-2" onClick={() => changeLayer(2)}>
+      {' '}
+    </div>
+  );
+
+  if (currentLayer === 2) {
+    layer1Component = <div className="layer-1" onClick={() => changeLayer(1)}></div>;
+    layer2Component = <div className="layer-2-selected" onClick={() => changeLayer(2)}></div>;
+  }
+
   return (
     <Paper className="layer-panel" elevation={2}>
       <div className="headline-container">
@@ -38,8 +54,8 @@ export function LayerPanelComponent(props: LayerPanelProps) {
       </div>
       <br></br>
       <div className="layer-stack">
-        <div className="layer-1" onClick={() => changeLayer(1)}></div>
-        <div className="layer-2" onClick={() => changeLayer(2)}></div>
+        {layer1Component}
+        {layer2Component}
       </div>
     </Paper>
   );

diff --git a/public/components/pages/layer_panel/layers.scss b/public/components/pages/layer_panel/layers.scss
@@ -39,6 +39,18 @@
   opacity: 50%;
 }
 
+.layer-1-selected {
+  position: absolute;
+  z-index: 3;
+  top: 50px;
+  right: 46px;
+  width: 60px;
+  height: 60px;
+  transform: rotate(-45deg) skew(20deg, 20deg);
+  background: $color-violett-100;
+  opacity: 50%;
+}
+
 .layer-2 {
   position: absolute;
   z-index: 2;
@@ -55,3 +67,15 @@
   background: $color-orange-100;
   opacity: 50%;
 }
+
+.layer-2-selected {
+  position: absolute;
+  z-index: 2;
+  top: 75px;
+  right: 46px;
+  width: 60px;
+  height: 60px;
+  transform: rotate(-45deg) skew(20deg, 20deg);
+  background: $color-orange-100;
+  opacity: 50%;
+}
diff --git a/public/components/pages/layout.tsx b/public/components/pages/layout.tsx
@@ -9,7 +9,6 @@ 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';
@@ -128,17 +127,6 @@ const LayoutComponent = (props: LayoutProps) => {
               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">