Merge pull request #121 from jembi/JMPI-702-implementing-jempi-dashboard

Jmpi 702 implementing jempi dashboard
jembi · Nov 8, 2023 · 0aa2e92 · 0aa2e92
2 parents 131f2de + 15a1b84
commit 0aa2e92
Show file tree

Hide file tree

Showing 20 changed files with 594 additions and 19 deletions.
diff --git a/JeMPI_Apps/JeMPI_UI/.env.local b/JeMPI_Apps/JeMPI_UI/.env.local
@@ -1,7 +1,7 @@
 REACT_APP_JEMPI_BASE_API_HOST=http://localhost
 REACT_APP_JEMPI_BASE_API_PORT=50000
 REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES="128"
-
+REACT_APP_SHOW_BRAND_LOGO=false
 REACT_APP_MOCK_BACKEND=false
 REACT_APP_ENABLE_SSO=false
 

diff --git a/JeMPI_Apps/JeMPI_UI/docker-entrypoint.sh b/JeMPI_Apps/JeMPI_UI/docker-entrypoint.sh
@@ -9,6 +9,7 @@ export REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES=${REACT_APP_MAX_UPLOAD_CSV_SIZ
 export KC_FRONTEND_URL=${KC_FRONTEND_URL:-""}
 export KC_REALM_NAME=${KC_REALM_NAME:-""}
 export KC_JEMPI_CLIENT_ID=${KC_JEMPI_CLIENT_ID:-""}
+export REACT_APP_SHOW_BRAND_LOGO=${REACT_APP_SHOW_BRAND_LOGO:-"false"}
 
 cat /app/config-template.json | envsubst | tee /app/config.json 
 

diff --git a/JeMPI_Apps/JeMPI_UI/public/config-template.json b/JeMPI_Apps/JeMPI_UI/public/config-template.json
@@ -7,5 +7,6 @@
   "maxUploadCsvSize": ${REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES},
   "KeyCloakUrl": "${KC_FRONTEND_URL}",
   "KeyCloakRealm": "${KC_REALM_NAME}",
-  "KeyCloakClientId": "${KC_JEMPI_CLIENT_ID}"
+  "KeyCloakClientId": "${KC_JEMPI_CLIENT_ID}",
+  "showBrandLogo": ${REACT_APP_SHOW_BRAND_LOGO}
 }
diff --git a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx
@@ -0,0 +1,165 @@
+import {
+  Box,
+  Container,
+  Grid,
+  Stack,
+  Tab,
+  Tabs,
+  Typography
+} from '@mui/material'
+import CountWidget from './widgets/CountWidgetWidget'
+import {
+  Layers,
+  NotificationAdd,
+  NotificationsOff,
+  Person
+} from '@mui/icons-material'
+import { pink } from '@mui/material/colors'
+import MandU from './widgets/MandUWidget'
+import BetaFscore from './widgets/BetaFscoreWidget'
+import ConfusionMatrix from './widgets/ConfusionMatrixWidget'
+import { useState } from 'react'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+const CustomTabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props
+  return (
+    <Box
+      component={'div'}
+      role="tabpanel"
+      hidden={value !== index}
+      id={`dashboard-tabpanel-${index}`}
+      aria-labelledby={`dashboard-tab-${index}`}
+      {...other}
+    >
+      {value === index && children}
+    </Box>
+  )
+}
+
+const tabProps = (index: number) => {
+  return {
+    id: `dashboard-tab-${index}`,
+    'aria-controls': `dashboard-tabpanel-${index}`
+  }
+}
+
+const Dashboard = () => {
+  const [currentTabIndex, setCurrentTabIndex] = useState(0)
+  const handleChangeTab = (event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTabIndex(newValue)
+  }
+  return (
+    <Container maxWidth={false}>
+      <Stack
+        padding={{
+          lg: '0rem 1rem 1rem 1rem',
+          xs: '1rem 0rem 0rem 0rem',
+          backgroundColor: '#fff',
+          borderRadius: '1rem'
+        }}
+      >
+        <Tabs
+          value={currentTabIndex}
+          onChange={handleChangeTab}
+          sx={{
+            paddingY: { lg: '2rem', xs: ' 0.5rem' }
+          }}
+          aria-label="dashboard tabs"
+          variant="scrollable"
+          scrollButtons
+          allowScrollButtonsMobile
+        >
+          <Tab
+            label={<Typography variant="h5">Confusion Matrix</Typography>}
+            {...tabProps(0)}
+          />
+          <Tab
+            label={<Typography variant="h5">M & U Values</Typography>}
+            {...tabProps(1)}
+          />
+        </Tabs>
+        <CustomTabPanel value={currentTabIndex} index={0}>
+          <Grid container spacing={{ xs: 2, md: 5 }}>
+            <Grid item xs={12} lg={6}>
+              <Grid container spacing={2}>
+                <Grid item xs={12}>
+                  <Box component="fieldset">
+                    <legend>Records</legend>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} lg={6}>
+                        <CountWidget
+                          label="Golden Record"
+                          value={10000}
+                          icon={<Person sx={{ fontSize: '3.5rem' }} />}
+                          iconBackgroundColor={'#FFD700'}
+                        />
+                      </Grid>
+                      <Grid item xs={12} lg={6}>
+                        <CountWidget
+                          label="Interactions "
+                          value={20000}
+                          icon={<Layers sx={{ fontSize: '3.5rem' }} />}
+                          iconBackgroundColor={'primary.main'}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Box>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <Box component="fieldset">
+                    <legend> Notifications </legend>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} lg={6}>
+                        <CountWidget
+                          label="New/Open"
+                          value={10000}
+                          icon={<NotificationAdd sx={{ fontSize: '3.5rem' }} />}
+                          iconBackgroundColor={'#76ff03'}
+                        />
+                      </Grid>
+                      <Grid item xs={12} lg={6}>
+                        <CountWidget
+                          label="Closed"
+                          value={20000}
+                          icon={
+                            <NotificationsOff sx={{ fontSize: '3.5rem' }} />
+                          }
+                          iconBackgroundColor={pink[600]}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Box>
+                </Grid>
+                <Grid item xs={12}>
+                  <BetaFscore />
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={12} lg={6}>
+              <Box component="fieldset" minHeight={'550px'}>
+                <legend>Confusion Matrix</legend>
+                <ConfusionMatrix />
+              </Box>
+            </Grid>
+          </Grid>
+        </CustomTabPanel>
+        <CustomTabPanel value={currentTabIndex} index={1}>
+          <Grid container sx={{ minHeight: { lg: '450px' } }}>
+            <Grid item xs={6}>
+              <MandU />
+            </Grid>
+          </Grid>
+        </CustomTabPanel>
+      </Stack>
+    </Container>
+  )
+}
+
+export default Dashboard
diff --git a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/BetaFscoreWidget.tsx b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/BetaFscoreWidget.tsx
@@ -0,0 +1,31 @@
+import { Box, Grid } from '@mui/material'
+import CountWidget from './CountWidgetWidget'
+
+function BetaFscoreWidget() {
+  return (
+    <Box component={'fieldset'}>
+      <legend>Beta F-scores</legend>
+      <Grid container spacing={2} columns={16}>
+        <Grid item lg={6} xs={16}>
+          <CountWidget
+            label="Weighs precision higher than recall"
+            value={75}
+            secondValue={75}
+          />
+        </Grid>
+        <Grid item lg={4} xs={16}>
+          <CountWidget label="Neutral" value={75} secondValue={75} />
+        </Grid>
+        <Grid item lg={6} xs={16}>
+          <CountWidget
+            label="Weighs recall higher than precision"
+            value={75}
+            secondValue={75}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+
+export default BetaFscoreWidget