jembi · MatthewErispe · Apr 24, 2024 · Dec 11, 2023 · Dec 12, 2023 · Dec 14, 2023
diff --git a/JeMPI_Apps/JeMPI_UI/package.json b/JeMPI_Apps/JeMPI_UI/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "lint:fix": "eslint ./src/ --ext ts,js,tsx,jsx --fix",
     "format": "prettier 'src/**/*.{js,jsx,ts,tsx,json,css}' --write",
+    "leader-line": "./node_modules/leader-line/leader-line.min.js",
     "type-check": "tsc",
     "mock:startJeMPIAPIServer": "npx ts-node  --compilerOptions '{\"module\":\"commonjs\"}' ./tests/test.utils/mocks/enviroments/MockJeMPI_API/MockJeMPI_API.ts",
     "mock:startKeycloakServer": "npx ts-node  --compilerOptions '{\"module\":\"commonjs\"}' ./tests/test.utils/mocks/enviroments/MockKeyCloak/MockKeyCloak.ts",
@@ -42,10 +43,14 @@
     "dayjs": "^1.11.8",
     "formik": "^2.2.9",
     "keycloak-js": "^20.0.2",
+    "leader-line": "^1.0.7",
+    "leader-line-types": "^1.0.5",
     "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
+    "react-leader-line": "^1.0.5",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
@@ -74,7 +79,10 @@
     "lint-staged": "^13.1.1",
     "prettier": "^2.8.4",
     "process": "^0.11.10",
-    "ts-jest": "^29.1.1"
+    "skeleton-loader": "^2.0.0",
+    "ts-jest": "^29.1.1",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

diff --git a/JeMPI_Apps/JeMPI_UI/public/index.html b/JeMPI_Apps/JeMPI_UI/public/index.html
@@ -29,6 +29,9 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js" 
+    integrity="sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg==" 
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/JeMPI_Apps/JeMPI_UI/src/App.tsx b/JeMPI_Apps/JeMPI_UI/src/App.tsx
@@ -10,7 +10,6 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import ScrollBackButtons from 'components/shared/ScrollBackButtons'
 import { AuthProvider } from 'hooks/useAuth'
 import { SnackbarProvider } from 'notistack'
-import React from 'react'
 
 const queryClient = new QueryClient({
   defaultOptions: {

diff --git a/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx b/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx
@@ -24,12 +24,7 @@ const NavigationMenu: React.FC = () => {
     close()
     logout(navigate)
   }
-
-  if (!currentUser) {
-    return null
-  }
-
-  return config.useSso ? (
+  return (
     <Box sx={{ paddingX: '1rem' }}>
       <IconButton
         aria-controls={isOpen ? 'basic-menu' : undefined}
@@ -50,26 +45,34 @@ const NavigationMenu: React.FC = () => {
           'aria-labelledby': 'basic-button'
         }}
       >
-        <MenuItem>
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight={400} fontSize={'16px'}>
-              {`${currentUser?.givenName} ${currentUser?.familyName}`}
-            </Typography>
-            <Typography fontWeight={400} fontSize={'14px'}>
-              {currentUser?.email}
-            </Typography>
-          </Box>
-        </MenuItem>
-        <Divider sx={{ my: 0.5 }} />
-        <MenuItem onClick={handleLogout}>
-          <Typography fontWeight={500} fontSize={'13px'}>
-            LOGOUT
+        <MenuItem onClick={() => navigate('/settings')}>
+          <Typography fontWeight={400} fontSize={'1rem'}>
+            Settings
           </Typography>
         </MenuItem>
+
+        {config.useSso && (
+          <>
+            <MenuItem>
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <Typography fontWeight={400} fontSize={'16px'}>
+                  {`${currentUser?.givenName} ${currentUser?.familyName}`}
+                </Typography>
+                <Typography fontWeight={400} fontSize={'14px'}>
+                  {currentUser?.email}
+                </Typography>
+              </Box>
+            </MenuItem>
+            <Divider sx={{ my: 0.5 }} />
+            <MenuItem onClick={handleLogout}>
+              <Typography fontWeight={500} fontSize={'13px'}>
+                LOGOUT
+              </Typography>
+            </MenuItem>
+          </>
+        )}
       </Menu>
     </Box>
-  ) : (
-    <></>
   )
 }
 

diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx
@@ -0,0 +1,130 @@
+import { Grid, Tab, Tabs, Typography, useMediaQuery } from '@mui/material'
+import { Box } from '@mui/system'
+import React, { SyntheticEvent, useState } from 'react'
+import CommonSettings from './common/Common'
+import UniqueToGR from './uniqueToGR/UniqueToGR'
+import UniqueToInteraction from './uniqueToInteraction/UniqueToInteraction'
+import Deterministic from './deterministic/deterministic'
+import Blocking from './blocking/Blocking'
+import InteractiveNode from './interactiveNode/InteractiveNode'
+import GoldenRecordLists from './goldenRecordLists/GoldenRecordLists'
+import './Shapes.css'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`settings-tabpanel-${index}`}
+      aria-labelledby={`settings-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3, backgroundColor: '#f5f5f5' }}>{children}</Box>
+      )}
+    </div>
+  )
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `settings-tab-${index}`,
+    'aria-controls': `settings-tabpanel-${index}`
+  }
+}
+const Settings = () => {
+  const [value, setValue] = useState(0)
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item md={4}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            justifyItems: 'center',
+            alignContent: 'center',
+            gap: 0,
+            width: '100%'
+          }}
+        >
+          <div className="shapes-container">
+            <InteractiveNode />
+          </div> 
+        </div>
+      </Grid>
+      <Grid item md={8}>
+        <Box sx={{ width: '100%' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs
+              value={value}
+              onChange={handleChange}
+              aria-label=" tabs "
+              variant="scrollable"
+            >
+              <Tab label="Common" {...a11yProps(0)} />
+              <Tab label="Unique to Golden record" {...a11yProps(1)} />
+              <Tab label=" Unique to Interaction" {...a11yProps(2)} />
+              <Tab label="Golden Records Lists" {...a11yProps(3)} />
+              <Tab label="Deterministic" {...a11yProps(4)} />
+              <Tab label=" Blocking" {...a11yProps(5)} />
+              <Tab label="Probabilistic" {...a11yProps(6)} />
+            </Tabs>
+          </Box>
+          <CustomTabPanel value={value} index={0}>
+            <>
+              <Typography variant="h5" sx={{ py: 3 }}>
+                Setup common properties
+              </Typography>
+              <CommonSettings />
+            </>
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={1}>
+            <Typography variant="h5" sx={{ py: 3 }}>
+              Unique to Golden record
+            </Typography>
+            <UniqueToGR />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={2}>
+            <Typography variant="h5" sx={{ py: 3 }}>
+              Unique to Interaction
+            </Typography>
+            <UniqueToInteraction />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={3}>
+            <Typography variant="h5" sx={{ py: 3 }}>
+              Setup properties for Golden Records Lists{' '}
+            </Typography>
+            <GoldenRecordLists />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={4}>
+            Deterministic
+            <Deterministic />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={5}>
+            Blocking
+            <Blocking />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={6}>
+            Probabilistic
+          </CustomTabPanel>
+        </Box>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Settings
diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css
@@ -0,0 +1,83 @@
+.shapes-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0px;
+}
+
+.square {
+  width: 150px;
+  height: 50px;
+  border: 1px dashed #000 ;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 0 5px;
+}
+.circle {
+  width: 100px;
+  height: 100px;
+  border: 2px dashed #000;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.connection-dashed {
+  height: 200px;
+  border: 1px dashed #000;
+}
+.connection-solid {
+  height: 150px;
+  border: 1px solid #000;
+  left: 0;
+}
+.label {
+  position: absolute;
+  font-size: 12px;
+  color: #000;
+}
+.circle:hover {
+  background-color: #e3f2fb; 
+}
+.interaction-circle:hover {
+  background-color: #add8e6; 
+}
+
+
+.additional-info {
+  display: none;
+  position: absolute;
+  left: 0%; 
+  background-color: #fff;
+  padding: 10px;
+  border: 1px solid #000;
+  border-radius: 5px;
+  width: 180px;
+  margin-left: 120px;
+  margin-top: 40px;
+}
+
+.circle-container:hover .additional-info {
+  display: block;
+}
+
+
+.additional-info h2 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+.additional-info ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.additional-info li {
+  font-size: 12px;
+}