design improvements

public/components/lib/badge.tsx

@@ -2,6 +2,8 @@ import { EuiBadge } from '@elastic/eui';
 import { NODE_COLOR_LAYER_1, NODE_COLOR_LAYER_2 } from '../../../common/colors';
 import React from 'react';
 import * as badgeActions from '../../reducer_actions/badges';
+import * as fetchCaseGraphActions from '../../reducer_actions/fetch_case_specific_graph';
+import * as filterActions from '../../reducer_actions/get_cycle_times';
 import { AnyAction, bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { RootReducer } from '../../reducer/root_reducer';
@@ -15,9 +17,10 @@ export interface BadgeItem {
 interface BadgeProps {
   filterAction: string;
   layer: number;
-  badgeFunction: Function;
   removeBadge: Function;
   rootReducer: RootReducer;
+  unselectCaseAction: Function;
+  unselectCycleTimeAction: Function;
 }
 interface BadgeState {
   rootReducer: RootReducer;
@@ -31,32 +34,35 @@ const BadgeComponent = (props: BadgeProps) => {
   const color = props.layer === 1 ? NODE_COLOR_LAYER_1 : NODE_COLOR_LAYER_2;
   const { removeBadge } = props;
   const currentBadges = props.rootReducer.filter.badges;
+  const action = props.filterAction;
+
   const badgeToRemove = {
-    filterAction: props.filterAction,
+    filterAction: action,
     layer: props.layer,
-    badgeFunction: props.badgeFunction,
   };
 
-  /* let badgeFunction = props.badgeFunction;
-  badgeFunction = badgeFunction.substring(badgeFunction.indexOf("{") + 1);
-  badgeFunction = badgeFunction.substring(0, badgeFunction.indexOf("}"));   
-  console.log(badgeFunction)
-  const deserializedBadgeFunction = Function(badgeFunction);
-  console.log(deserializedBadgeFunction) */
+  let badgeFunction: Function = () => {};
+  if (action.includes('Filter Case')) {
+    const { unselectCaseAction } = props;
+    badgeFunction = unselectCaseAction;
+  } else if (action.includes('Filter Cycle Time Group')) {
+    const { unselectCycleTimeAction } = props;
+    badgeFunction = unselectCycleTimeAction;
+  }
+  console.log(currentBadges);
   return (
     <div style={{ margin: '0px 5px' }}>
       <EuiBadge
         color={color}
         iconType="cross"
         iconSide="right"
         iconOnClick={() => {
-          props.badgeFunction();
+          badgeFunction();
           removeBadge(currentBadges, badgeToRemove);
         }}
         iconOnClickAriaLabel="Remove Filter"
-        data-test-sub="testExample4"
       >
-        {props.filterAction}
+        <div style={{ margin: '7pt' }}>{props.filterAction}</div>
       </EuiBadge>
     </div>
   );
@@ -66,6 +72,8 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
   return bindActionCreators(
     {
       removeBadge: badgeActions.removeBadgeAction,
+      unselectCycleTimeAction: filterActions.unselectCaseAction,
+      unselectCaseAction: fetchCaseGraphActions.unselectCaseAction,
     },
     dispatch
   );

public/components/lib/case_group_item.tsx

@@ -13,6 +13,7 @@ interface CaseGroupProps {
   cycleTime: string;
   rootReducer: RootReducer;
   fetchCaseGraphAction: Function;
+  selectCaseAction: Function;
 }
 interface CaseGroupState {
   rootReducer: RootReducer;
@@ -25,14 +26,15 @@ const mapStateToProps = (state: CaseGroupState) => {
 const CaseGroupComponent = (props: CaseGroupProps) => {
   const caseId = props.caseId;
   const cycleTime = props.cycleTime;
-  const { fetchCaseGraphAction } = props;
+  const { fetchCaseGraphAction, selectCaseAction } = props;
   const layer = props.rootReducer.layer.selectedLayer;
-  console.log(layer);
+
   return (
     <div style={{ margin: '10px 0px' }}>
       <EuiPanel
         onClick={() => {
           fetchCaseGraphAction(props.serverRequestData, caseId, layer);
+          selectCaseAction({ label: caseId });
         }}
       >
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -51,6 +53,7 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
   return bindActionCreators(
     {
       fetchCaseGraphAction: fetchCaseGraphActions.fetchCaseGraph,
+      selectCaseAction: fetchCaseGraphActions.selectCaseAction,
     },
     dispatch
   );

public/components/pages/layout.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { EuiPage, EuiResizableContainer } from '@elastic/eui';
+import { EuiBadge, EuiPage, EuiResizableContainer } from '@elastic/eui';
 import { PanelComponent } from './side_panel/panel';
 import { LayerPanel } from './layer_panel/layer_panel';
 import '../_base.scss';
@@ -71,27 +71,40 @@ const LayoutComponent = (props: LayoutProps) => {
 
     const selectedCase = props.rootReducer.case.selectedCase;
     const selectedCycleTimeCases = props.rootReducer.filter.selectedCycleTimeCases;
-    if (selectedCycleTimeCases.length > 0) {
+
+    if (selectedCycleTimeCases.id) {
+      const { addBadge } = props;
+
       graphBool = true;
-      nodes = selectedCycleTimeCases.graph.nodes;
-      edges = selectedCycleTimeCases.graph.edges;
-      return;
+      nodes = selectedCycleTimeCases.graph?.nodes;
+      edges = selectedCycleTimeCases.graph?.edges;
+
+      const action = 'Filter Cycle Time Group';
+      const id = selectedCycleTimeCases.id;
+      const newBadge = {
+        filterAction: `${action} ${id}`,
+        layer: layer,
+      };
+
+      if (badges.filter((badge) => badge.filterAction.includes(action)).length === 0) {
+        addBadge(badges, newBadge);
+      }
     }
+
     if (selectedCase !== null) {
-      const { fetchCaseGraphAction, unselectCaseAction, unselectCycleTimeAction, addBadge } = props;
+      const { fetchCaseGraphAction, addBadge } = props;
       fetchCaseGraphAction(props.serverRequestData, selectedCase, layer);
-      const badgeFunction =
-        selectedCycleTimeCases.length === 1 ? unselectCycleTimeAction : unselectCaseAction;
+
+      const action = 'Filter Case';
       const newBadge = {
-        filterAction: `Filter Case ${selectedCase}`,
+        filterAction: `${action} ${selectedCase}`,
         layer: layer,
-        badgeFunction: badgeFunction,
       };
-      if (badges.filter((badge) => badge.filterAction === newBadge.filterAction).length === 0) {
+
+      if (badges.filter((badge) => badge.filterAction.includes(action)).length === 0) {
         addBadge(badges, newBadge);
       }
     } else {
-      // no filters applied
       const { fetchAggregatedGraphAction } = props;
       fetchAggregatedGraphAction(props.serverRequestData, layer);
     }
@@ -123,13 +136,12 @@ const LayoutComponent = (props: LayoutProps) => {
                   {badges.length > 0 &&
                     badges.map((badge) => {
                       return (
-                        <BadgeComponent
-                          filterAction={badge.filterAction}
-                          layer={badge.layer}
-                          badgeFunction={badge.badgeFunction}
-                        />
+                        <BadgeComponent filterAction={badge.filterAction} layer={badge.layer} />
                       );
                     })}
+                  <EuiBadge color={'hollow'}>
+                    <div style={{ margin: '7pt' }}>Add Filter</div>
+                  </EuiBadge>
                 </div>
                 {graphBool && <VisGraphComponent nodes={nodes} edges={edges} />}
                 <div className="layer-container">

public/components/pages/side_panel/filter_tabs/cycle_time_filter.tsx

@@ -92,11 +92,13 @@ const CycleTimeFilter = (props: CycleTimeFilterProps) => {
     const id = row.id;
     const cycleTimeGroups = props.rootReducer.filter.cycleTimeGroups;
     const selectedCases = cycleTimeGroups[id - 1];
-    // Hier differenzieren ob 1 Case oder mehrere
+
     if (selectedCases.cases.length === 1) {
+      console.log('One Case in Casegroup');
       const { selectCaseAction } = props;
       selectCaseAction({ label: selectedCases.cases[0].caseId });
     } else {
+      console.log('Multiple Cases in Casegroup');
       const { selectCycleTimeCases } = props;
       selectCycleTimeCases(selectedCases);
     }

public/components/pages/side_panel/panel.scss

@@ -26,14 +26,17 @@
 .counter-container {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+}
+
+.counter-item {
+  margin: 0px 80px 0px 0px;
 }
 
 .frequency-map-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
   margin-top: 20px;
 }
 

public/components/pages/side_panel/panel.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { EuiPanel, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { FormControlLabel, Switch, SwitchProps } from '@mui/material';
+import { createTheme, styled, ThemeProvider } from '@mui/material/styles';
 import logo from '../../../../common/logo/bpmining.svg';
 import novatec_logo from '../../../../common/logo/NOVATEC-schwarz-violett-rot.png';
 import startDateIcon from '../../../../common/icons/start_date.png';
@@ -57,6 +59,7 @@ const PanelComponent = (props: PanelComponentProps) => {
 
   const selectedCycleTimeCases = props.rootReducer.filter.selectedCycleTimeCases;
   const selectedCase = props.rootReducer.case.selectedCase;
+  const color = calculateColorValue(props.rootReducer.layer.selectedLayer);
   const graph = props.rootReducer.graph.drillDownGraph
     ? props.rootReducer.graph.drillDownGraph
     : props.rootReducer.graph.graph;
@@ -83,7 +86,7 @@ const PanelComponent = (props: PanelComponentProps) => {
         if (context !== undefined) {
           Object.keys(context).map((key) => {
             const item = { [key]: context[key] };
-            if (!contextInfo.find((i) => _.isEqual(i, item))) {
+            if (!contextInfo.find((i: any) => _.isEqual(i, item))) {
               contextInfo.push(item);
             }
           });
@@ -128,7 +131,7 @@ const PanelComponent = (props: PanelComponentProps) => {
               {contextInfo.length > 0 && <p>Context Informations</p>}
               <br />
               {contextInfo.length > 0 &&
-                contextInfo.map((item) => {
+                contextInfo.map((item: any) => {
                   const entries = Object.entries(item);
                   return (
                     <div className="node-panel-item">
@@ -144,51 +147,93 @@ const PanelComponent = (props: PanelComponentProps) => {
   }
 
   if (selectedCycleTimeCases.id) {
-    isFilterSelected = true;
-    console.log('Here: ');
-    console.log(selectedCycleTimeCases);
-    const cycleTimeCases = selectedCycleTimeCases.cases;
-    caseOverview = (
-      <div>
-        <p>Cycle Time Group {selectedCycleTimeCases.id}</p>
-        Cycle Time: {selectedCycleTimeCases.interval}
-        {cycleTimeCases.map((cycleTimeCase: CycleTimeItem) => {
-          return (
-            <CaseGroupComponent
-              caseId={cycleTimeCase.caseId}
-              cycleTime={formatTime(cycleTimeCase.cycleTimeInSeconds)}
-              serverRequestData={props.serverRequestData}
-            />
-          );
-        })}
-      </div>
-    );
+    if (!selectedCase) {
+      isFilterSelected = true;
+      const cycleTimeCases = selectedCycleTimeCases.cases;
+
+      caseOverview = (
+        <div>
+          <p>Cycle Time Group {selectedCycleTimeCases.id}</p>
+          Cycle Time: {selectedCycleTimeCases.interval}
+          {cycleTimeCases.map((cycleTimeCase: CycleTimeItem) => {
+            return (
+              <CaseGroupComponent
+                caseId={cycleTimeCase.caseId}
+                cycleTime={formatTime(cycleTimeCase.cycleTimeInSeconds)}
+                serverRequestData={props.serverRequestData}
+              />
+            );
+          })}
+        </div>
+      );
+    }
   }
 
+  const IOSSwitch = styled((props: SwitchProps) => (
+    <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+  ))(({ theme }) => ({
+    width: 42,
+    height: 26,
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(16px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          backgroundColor: theme.palette.mode === 'dark' ? color : color,
+          opacity: 1,
+          border: 0,
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5,
+        },
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff',
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 22,
+      height: 22,
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500,
+      }),
+    },
+  }));
+
   return (
     <EuiPanel paddingSize="m" style={{ minHeight: '740px' }}>
       <div className="design-scope">
         <img src={logo} alt="Logo" className="logo" />
         <EuiSpacer />
         <div className="counter-container">
-          <CaseCounterComponent
-            cases={props.caseCount}
-            color={calculateColorValue(props.rootReducer.layer.selectedLayer)}
-          />
-          <VariantCounterComponent
-            variants={1}
-            color={calculateColorValue(props.rootReducer.layer.selectedLayer)}
-          />
+          <div className="counter-item">
+            <CaseCounterComponent cases={props.caseCount} color={color} />
+          </div>
+          <div className="counter-item">
+            <VariantCounterComponent variants={1} color={color} />
+          </div>
         </div>
 
         <div className="frequency-map-container">
           <p>Frequency Map</p>
-          <EuiSwitch
-            showLabel={false}
-            label="Frequency Map"
-            checked={checked}
-            onChange={(e) => onChange(e)}
-          />
+          <FormControlLabel control={<IOSSwitch sx={{ m: 1 }} />} label="" />
         </div>
         <EuiSpacer />
         {isFilterSelected ? (

public/reducer/filter_reducer.ts

@@ -1,10 +1,10 @@
 import * as filterActions from '../reducer_actions/get_cycle_times';
 import * as badgeActions from '../reducer_actions/badges';
-import { CycleTimeGroup } from '../reducer_actions/get_cycle_times';
 import { BadgeItem } from '../components/lib/badge';
+import { CycleTimeGroupItem } from 'plugins/bpmining-kibana-plugin/server/filter_calculation/calculate_cycle_time_buckets';
 
 export interface FilterReducer {
-  cycleTimeGroups: CycleTimeGroup[];
+  cycleTimeGroups: CycleTimeGroupItem[];
   selectedCycleTimeCases: any;
   badges: BadgeItem[];
   error: Error | null;