From 10333967f7896a937c0a7cf90bfb383db6b6a294 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Mon, 11 Dec 2023 17:23:17 +0100 Subject: [PATCH 01/11] feat: wip implement config prototyping --- .../widgets/ConfusionMatrixWidget.tsx | 2 +- .../src/components/shell/NavigationMenu.tsx | 42 +++++---- .../JeMPI_UI/src/pages/settings/Settings.tsx | 91 +++++++++++++++++++ JeMPI_Apps/JeMPI_UI/src/router/BaseRouter.tsx | 5 + 4 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/ConfusionMatrixWidget.tsx b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/ConfusionMatrixWidget.tsx index 0d25e4131..a869ac9d0 100644 --- a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/ConfusionMatrixWidget.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/widgets/ConfusionMatrixWidget.tsx @@ -83,7 +83,7 @@ const ConfusionMatrix = () => { - Precesion + Precision { return null } - return config.useSso ? ( + return ( { 'aria-labelledby': 'basic-button' }} > - - - - {`${currentUser?.givenName} ${currentUser?.familyName}`} - - - {currentUser?.email} - - - - - - - LOGOUT + navigate('/settings')}> + + Settings + + {config.useSso && ( + <> + + + + {`${currentUser?.givenName} ${currentUser?.familyName}`} + + + {currentUser?.email} + + + + + + + LOGOUT + + + + )} - ) : ( - <> ) } diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx new file mode 100644 index 000000000..ec6900213 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -0,0 +1,91 @@ +import { Grid, Tab, Tabs, Typography } from '@mui/material' +import { Box } from '@mui/system' +import React, { SyntheticEvent, useState } from 'react' + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + +function CustomTabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props + + return ( + + ) +} + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}` + } +} +const Settings = () => { + const [value, setValue] = useState(0) + + const handleChange = (event: SyntheticEvent, newValue: number) => { + setValue(newValue) + } + + return ( + + + + + + + + + + + + + + + + + Common + + + Unique to Golden record + + + Unique to Interaction + + + Golden Records Lists + + + Deterministic + + + Blocking + + + Probabilistic + + + + + ) +} + +export default Settings diff --git a/JeMPI_Apps/JeMPI_UI/src/router/BaseRouter.tsx b/JeMPI_Apps/JeMPI_UI/src/router/BaseRouter.tsx index 45b9b2da2..c43c39ab2 100644 --- a/JeMPI_Apps/JeMPI_UI/src/router/BaseRouter.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/router/BaseRouter.tsx @@ -11,6 +11,7 @@ import SimpleSearch from 'components/search/SimpleSearch' import SearchResult from 'components/searchResult/SearchResult' import Login from 'components/user/Login' import Dashboard from 'components/dashboard/Dashboard' +import Settings from 'pages/settings/Settings' const baseRouter = createBrowserRouter([ { path: 'login', element: }, @@ -26,6 +27,10 @@ const baseRouter = createBrowserRouter([ path: 'browse-records', element: }, + { + path: 'settings', + element: + }, { path: 'record-details/:uid', loader: async ({ params }) => params.uid, From 3bdb59ca6589e80ccb65a17c23de45a50d894d3b Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Tue, 12 Dec 2023 19:38:26 +0100 Subject: [PATCH 02/11] chore: wip implement config common tab --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 38 ++- .../src/pages/settings/common/Common.tsx | 269 ++++++++++++++++++ .../pages/settings/uniqueToGR/UniqueToGR.tsx | 226 +++++++++++++++ 3 files changed, 518 insertions(+), 15 deletions(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index ec6900213..d92a309b1 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -1,6 +1,8 @@ -import { Grid, Tab, Tabs, Typography } from '@mui/material' +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' interface TabPanelProps { children?: React.ReactNode @@ -15,14 +17,12 @@ function CustomTabPanel(props: TabPanelProps) { ) @@ -30,27 +30,27 @@ function CustomTabPanel(props: TabPanelProps) { function a11yProps(index: number) { return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}` + 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 ( - - - + + + @@ -62,10 +62,18 @@ const Settings = () => { - Common + <> + + Setup common properties + + + - Unique to Golden record + + Unique to Golden record + + Unique to Interaction diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx new file mode 100644 index 000000000..20ff55d0f --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -0,0 +1,269 @@ +import React from 'react' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import AddIcon from '@mui/icons-material/Add' +import EditIcon from '@mui/icons-material/Edit' +import DeleteIcon from '@mui/icons-material/DeleteOutlined' +import SaveIcon from '@mui/icons-material/Save' +import CancelIcon from '@mui/icons-material/Close' +import { + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, + GridRowEditStopReasons, + GridValueSetterParams +} from '@mui/x-data-grid' +import { useSnackbar } from 'notistack' + +const randomTraderName = () => { + return Math.random().toString(36).substring(2, 7) +} + +const randomId = () => { + return Math.random().toString(36).substring(2, 9) +} + +const initialRows: GridRowsProp = [ + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + } +] + +interface EditToolbarProps { + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel + ) => void +} + +function EditToolbar(props: EditToolbarProps) { + const { setRows, setRowModesModel } = props + + const handleClick = () => { + const id = randomId() + setRows(oldRows => [...oldRows, { id, name: '', age: '', isNew: true }]) + setRowModesModel(oldModel => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' } + })) + } + + return +} + +const CommonSettings = () => { + const [rows, setRows] = React.useState(initialRows) + const { enqueueSnackbar } = useSnackbar() + const [rowModesModel, setRowModesModel] = React.useState( + {} + ) + + const handleRowEditStop: GridEventListener<'rowEditStop'> = ( + params, + event + ) => { + if (params.reason === GridRowEditStopReasons.rowFocusOut) { + event.defaultMuiPrevented = true + } + } + + const handleEditClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) + } + + const handleSaveClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + } + + const handleDeleteClick = (id: GridRowId) => () => { + setRows(rows.filter(row => row.id !== id)) + } + + const handleCancelClick = (id: GridRowId) => () => { + setRowModesModel({ + ...rowModesModel, + [id]: { mode: GridRowModes.View, ignoreModifications: true } + }) + + const editedRow = rows.find(row => row.id === id) + if (editedRow!.isNew) { + setRows(rows.filter(row => row.id !== id)) + } + } + + const processRowUpdate = (newRow: GridRowModel) => { + const updatedRow = { ...newRow, isNew: false } + setRows(rows.map(row => (row.id === newRow.id ? updatedRow : row))) + return updatedRow + } + + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { + setRowModesModel(newRowModesModel) + } + + const columns: GridColDef[] = [ + { + field: 'name', + headerName: 'Name', + width: 180, + editable: true, + align: 'center', + headerAlign: 'center' + }, + { + field: 'type', + headerName: 'Type', + type: 'string', + width: 180, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'index', + headerName: 'Index', + type: 'string', + width: 180, + align: 'center', + headerAlign: 'center', + + editable: true + }, + { + field: 'm', + headerName: 'Default M', + + width: 180, + editable: true, + type: 'number', + align: 'center', + headerAlign: 'center', + valueSetter: (params: GridValueSetterParams) => { + if (params.value == null || params.value < 0 || params.value > 1) { + enqueueSnackbar('Value must be between 0 and 1', { variant: 'error' }) + return false + } + return true + } + }, + { + field: 'u', + headerName: 'Default U', + width: 180, + editable: true, + type: 'number', + align: 'center', + headerAlign: 'center', + valueSetter: (params: GridValueSetterParams) => { + if (params.value == null || params.value < 0 || params.value > 1) { + enqueueSnackbar('Value must be between 0 and 1', { variant: 'error' }) + return false + } + return true + } + }, + { + field: 'actions', + type: 'actions', + headerName: 'Actions', + align: 'center', + headerAlign: 'center', + + width: 180, + cellClassName: 'actions', + getActions: ({ id }) => { + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + if (isInEditMode) { + return [ + } + label="Save" + sx={{ + color: 'white' + }} + onClick={handleSaveClick(id)} + />, + } + label="Cancel" + className="textPrimary" + onClick={handleCancelClick(id)} + color="inherit" + /> + ] + } + + return [ + } + label="Edit" + className="textPrimary" + onClick={handleEditClick(id)} + color="inherit" + /> + ] + } + } + ] + + return ( + + + + ) +} + +export default CommonSettings diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx new file mode 100644 index 000000000..ea4fbcab1 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx @@ -0,0 +1,226 @@ +import React from 'react' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import AddIcon from '@mui/icons-material/Add' +import EditIcon from '@mui/icons-material/Edit' +import DeleteIcon from '@mui/icons-material/DeleteOutlined' +import SaveIcon from '@mui/icons-material/Save' +import CancelIcon from '@mui/icons-material/Close' +import { + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, + GridRowEditStopReasons, + GridValueSetterParams +} from '@mui/x-data-grid' +import { useSnackbar } from 'notistack' + +const randomTraderName = () => { + return Math.random().toString(36).substring(2, 7) +} + +const randomId = () => { + return Math.random().toString(36).substring(2, 9) +} + +const initialRows: GridRowsProp = [ + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + } +] + +interface EditToolbarProps { + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel + ) => void +} + +function EditToolbar(props: EditToolbarProps) { + const { setRows, setRowModesModel } = props + + const handleClick = () => { + const id = randomId() + setRows(oldRows => [...oldRows, { id, name: '', age: '', isNew: true }]) + setRowModesModel(oldModel => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' } + })) + } + + return +} + +const UniqueToGR = () => { + const [rows, setRows] = React.useState(initialRows) + const { enqueueSnackbar } = useSnackbar() + const [rowModesModel, setRowModesModel] = React.useState( + {} + ) + + const handleRowEditStop: GridEventListener<'rowEditStop'> = ( + params, + event + ) => { + if (params.reason === GridRowEditStopReasons.rowFocusOut) { + event.defaultMuiPrevented = true + } + } + + const handleEditClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) + } + + const handleSaveClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + } + + const handleDeleteClick = (id: GridRowId) => () => { + setRows(rows.filter(row => row.id !== id)) + } + + const handleCancelClick = (id: GridRowId) => () => { + setRowModesModel({ + ...rowModesModel, + [id]: { mode: GridRowModes.View, ignoreModifications: true } + }) + + const editedRow = rows.find(row => row.id === id) + if (editedRow!.isNew) { + setRows(rows.filter(row => row.id !== id)) + } + } + + const processRowUpdate = (newRow: GridRowModel) => { + const updatedRow = { ...newRow, isNew: false } + setRows(rows.map(row => (row.id === newRow.id ? updatedRow : row))) + return updatedRow + } + + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { + setRowModesModel(newRowModesModel) + } + + const columns: GridColDef[] = [ + { + field: 'name', + headerName: 'Name', + width: 250, + editable: true, + align: 'center', + headerAlign: 'center' + }, + { + field: 'type', + headerName: 'Type', + type: 'string', + width: 250, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'actions', + type: 'actions', + headerName: 'Actions', + align: 'center', + headerAlign: 'center', + + width: 250, + cellClassName: 'actions', + getActions: ({ id }) => { + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + if (isInEditMode) { + return [ + } + label="Save" + sx={{ + color: 'white' + }} + onClick={handleSaveClick(id)} + />, + } + label="Cancel" + className="textPrimary" + onClick={handleCancelClick(id)} + color="inherit" + /> + ] + } + + return [ + } + label="Edit" + className="textPrimary" + onClick={handleEditClick(id)} + color="inherit" + /> + ] + } + } + ] + + return ( + + + + ) +} + +export default UniqueToGR From aa973e1dedab119e85d7bc6ddf5d87a79cb1a557 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Thu, 14 Dec 2023 20:02:46 +0100 Subject: [PATCH 03/11] chore: implement config unique interaction/gr tab --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 6 +- .../pages/settings/uniqueToGR/UniqueToGR.tsx | 7 +- .../UniqueToInteraction.tsx | 231 ++++++++++++++++++ 3 files changed, 239 insertions(+), 5 deletions(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index d92a309b1..765153605 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -3,6 +3,7 @@ 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' interface TabPanelProps { children?: React.ReactNode @@ -76,7 +77,10 @@ const Settings = () => { - Unique to Interaction + + Unique to Interaction + + Golden Records Lists diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx index ea4fbcab1..ad0ab4e83 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx @@ -133,7 +133,7 @@ const UniqueToGR = () => { { field: 'name', headerName: 'Name', - width: 250, + width: 300, editable: true, align: 'center', headerAlign: 'center' @@ -142,7 +142,7 @@ const UniqueToGR = () => { field: 'type', headerName: 'Type', type: 'string', - width: 250, + width: 300, align: 'center', headerAlign: 'center', editable: false @@ -153,8 +153,7 @@ const UniqueToGR = () => { headerName: 'Actions', align: 'center', headerAlign: 'center', - - width: 250, + width: 300, cellClassName: 'actions', getActions: ({ id }) => { const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx new file mode 100644 index 000000000..ffa419049 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx @@ -0,0 +1,231 @@ +import React, { useState } from 'react' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import AddIcon from '@mui/icons-material/Add' +import EditIcon from '@mui/icons-material/Edit' +import DeleteIcon from '@mui/icons-material/DeleteOutlined' +import SaveIcon from '@mui/icons-material/Save' +import CancelIcon from '@mui/icons-material/Close' +import { + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, + GridRowEditStopReasons, + GridValueSetterParams +} from '@mui/x-data-grid' +import { useSnackbar } from 'notistack' + +const randomTraderName = () => { + return Math.random().toString(36).substring(2, 7) +} + +const randomId = () => { + return Math.random().toString(36).substring(2, 9) +} + +const initialRows: GridRowsProp = [ + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact, trigram', + m: 0.8, + u: 0.3 + }, + { + id: randomId(), + name: randomTraderName(), + type: 'string', + index: 'exact', + m: 0.8, + u: 0.3 + } +] + +interface EditToolbarProps { + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel + ) => void +} + +function EditToolbar(props: EditToolbarProps) { + const { setRows, setRowModesModel } = props + + const handleClick = () => { + const id = randomId() + setRows(oldRows => [...oldRows, { id, name: '', age: '', isNew: true }]) + setRowModesModel(oldModel => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' } + })) + } + + return +} +const UniqueToInteraction = () => { + const [rows, setRows] = useState(initialRows) + const { enqueueSnackbar } = useSnackbar() + const [rowModesModel, setRowModesModel] = useState({}) + + const handleRowEditStop: GridEventListener<'rowEditStop'> = ( + params, + event + ) => { + if (params.reason === GridRowEditStopReasons.rowFocusOut) { + event.defaultMuiPrevented = true + } + } + + const handleEditClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) + } + + const handleSaveClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + } + + const handleDeleteClick = (id: GridRowId) => () => { + setRows(rows.filter(row => row.id !== id)) + } + + const handleCancelClick = (id: GridRowId) => () => { + setRowModesModel({ + ...rowModesModel, + [id]: { mode: GridRowModes.View, ignoreModifications: true } + }) + + const editedRow = rows.find(row => row.id === id) + if (editedRow!.isNew) { + setRows(rows.filter(row => row.id !== id)) + } + } + + const processRowUpdate = (newRow: GridRowModel) => { + const updatedRow = { ...newRow, isNew: false } + setRows(rows.map(row => (row.id === newRow.id ? updatedRow : row))) + return updatedRow + } + + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { + setRowModesModel(newRowModesModel) + } + + const columns: GridColDef[] = [ + { + field: 'name', + headerName: 'Name', + width: 300, + editable: true, + align: 'center', + headerAlign: 'center' + }, + { + field: 'type', + headerName: 'Type', + type: 'string', + width: 300, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'index', + headerName: 'Index', + type: 'string', + width: 300, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'actions', + type: 'actions', + headerName: 'Actions', + align: 'center', + headerAlign: 'center', + width: 300, + cellClassName: 'actions', + getActions: ({ id }) => { + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + if (isInEditMode) { + return [ + } + label="Save" + sx={{ + color: 'white' + }} + onClick={handleSaveClick(id)} + />, + } + label="Cancel" + className="textPrimary" + onClick={handleCancelClick(id)} + color="inherit" + /> + ] + } + + return [ + } + label="Edit" + className="textPrimary" + onClick={handleEditClick(id)} + color="inherit" + /> + ] + } + } + ] + + return ( + + + + ) +} + +export default UniqueToInteraction From 4b54b4e30c14300f21b98e72cfd7f478563bb395 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Thu, 21 Dec 2023 14:48:38 +0100 Subject: [PATCH 04/11] chore: add deterministic tab --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 2 + .../settings/deterministic/deterministic.tsx | 102 ++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 765153605..859f74bef 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -4,6 +4,7 @@ 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' interface TabPanelProps { children?: React.ReactNode @@ -87,6 +88,7 @@ const Settings = () => { Deterministic + Blocking diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx new file mode 100644 index 000000000..fbebcf2c3 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx @@ -0,0 +1,102 @@ +import { AddCircle, AddCircleOutline, AddOutlined } from '@mui/icons-material' +import { + Box, + Button, + Card, + CardActions, + CardContent, + Divider, + FormControl, + IconButton, + InputLabel, + MenuItem, + Select, + Typography +} from '@mui/material' +import React from 'react' + +const Deterministic = () => { + const [viewType, setViewType] = React.useState(0) + return ( + <> + + + + + + + {viewType === 0 ? ( + + + + Select Comparator Function + + + + + + Select Field + + + + + + Select Operator + + + + + ) : null} + + + + + + + + + ) +} + +export default Deterministic From 22522b5f93685f63b34bd43f566431f5fb0f2242 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Fri, 22 Dec 2023 13:52:03 +0100 Subject: [PATCH 05/11] chore: add blocking tab --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 2 + .../src/pages/settings/blocking/Blocking.tsx | 119 ++++++++++++++++++ .../settings/deterministic/deterministic.tsx | 5 +- .../pages/settings/uniqueToGR/UniqueToGR.tsx | 5 - .../UniqueToInteraction.tsx | 8 +- 5 files changed, 123 insertions(+), 16 deletions(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/Blocking.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 859f74bef..589c606a7 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -5,6 +5,7 @@ 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' interface TabPanelProps { children?: React.ReactNode @@ -92,6 +93,7 @@ const Settings = () => { Blocking + Probabilistic diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/Blocking.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/Blocking.tsx new file mode 100644 index 000000000..336917032 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/Blocking.tsx @@ -0,0 +1,119 @@ +import { AddOutlined } from '@mui/icons-material' +import { + Card, + CardContent, + Button, + FormControl, + InputLabel, + Select, + CardActions, + IconButton, + Typography +} from '@mui/material' +import { Box } from '@mui/system' +import React from 'react' + +const Blocking = () => { + const [viewType, setViewType] = React.useState(0) + return ( + <> + + + + + + + {viewType === 0 ? ( + + + + Select Comparator Function + + + + + + Select Field + + + + + + Select Operator + + + + + ) : ( + + Match (phone number, 3) + Or + Match (National ID, 3) Or + + Int (Match (given name , 3)) + Int(Match (family name, 3)) + + Int(Match (city, 3)) ≥ 3 + + + )} + + + + + + + + + ) +} + +export default Blocking diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx index fbebcf2c3..9eb0bdc99 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx @@ -1,17 +1,14 @@ -import { AddCircle, AddCircleOutline, AddOutlined } from '@mui/icons-material' +import { AddOutlined } from '@mui/icons-material' import { Box, Button, Card, CardActions, CardContent, - Divider, FormControl, IconButton, InputLabel, - MenuItem, Select, - Typography } from '@mui/material' import React from 'react' diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx index ad0ab4e83..956fd493a 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToGR/UniqueToGR.tsx @@ -1,9 +1,6 @@ import React from 'react' import Box from '@mui/material/Box' -import Button from '@mui/material/Button' -import AddIcon from '@mui/icons-material/Add' import EditIcon from '@mui/icons-material/Edit' -import DeleteIcon from '@mui/icons-material/DeleteOutlined' import SaveIcon from '@mui/icons-material/Save' import CancelIcon from '@mui/icons-material/Close' import { @@ -18,7 +15,6 @@ import { GridRowId, GridRowModel, GridRowEditStopReasons, - GridValueSetterParams } from '@mui/x-data-grid' import { useSnackbar } from 'notistack' @@ -81,7 +77,6 @@ function EditToolbar(props: EditToolbarProps) { const UniqueToGR = () => { const [rows, setRows] = React.useState(initialRows) - const { enqueueSnackbar } = useSnackbar() const [rowModesModel, setRowModesModel] = React.useState( {} ) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx index ffa419049..988d8356f 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/uniqueToInteraction/UniqueToInteraction.tsx @@ -1,9 +1,6 @@ -import React, { useState } from 'react' +import { useState } from 'react' import Box from '@mui/material/Box' -import Button from '@mui/material/Button' -import AddIcon from '@mui/icons-material/Add' import EditIcon from '@mui/icons-material/Edit' -import DeleteIcon from '@mui/icons-material/DeleteOutlined' import SaveIcon from '@mui/icons-material/Save' import CancelIcon from '@mui/icons-material/Close' import { @@ -18,9 +15,7 @@ import { GridRowId, GridRowModel, GridRowEditStopReasons, - GridValueSetterParams } from '@mui/x-data-grid' -import { useSnackbar } from 'notistack' const randomTraderName = () => { return Math.random().toString(36).substring(2, 7) @@ -80,7 +75,6 @@ function EditToolbar(props: EditToolbarProps) { } const UniqueToInteraction = () => { const [rows, setRows] = useState(initialRows) - const { enqueueSnackbar } = useSnackbar() const [rowModesModel, setRowModesModel] = useState({}) const handleRowEditStop: GridEventListener<'rowEditStop'> = ( From 16cc8d6eade4335a11bc82ec104834b71a4246f5 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Fri, 22 Dec 2023 13:55:37 +0100 Subject: [PATCH 06/11] chore: update deterministic tab --- .../settings/deterministic/deterministic.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx index 9eb0bdc99..95d18db42 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/deterministic/deterministic.tsx @@ -9,6 +9,7 @@ import { IconButton, InputLabel, Select, + Typography } from '@mui/material' import React from 'react' @@ -84,7 +85,24 @@ const Deterministic = () => { > - ) : null} + ) : ( + + eq (National ID) + Or + + eq (given name) and eq(family name, 3) and eq (phone number) + + + )} From 7e7f6fbdfd013daa4aad04f03d88d906b12d3105 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Sun, 24 Dec 2023 00:05:20 +0100 Subject: [PATCH 07/11] feat: add golden record list --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 6 +- .../goldenRecordLists/GoldenRecordLists.tsx | 216 ++++++++++++++++++ 2 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 589c606a7..72a69433a 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -6,6 +6,7 @@ import UniqueToGR from './uniqueToGR/UniqueToGR' import UniqueToInteraction from './uniqueToInteraction/UniqueToInteraction' import Deterministic from './deterministic/deterministic' import Blocking from './blocking/Blocking' +import GoldenRecordLists from './goldenRecordLists/GoldenRecordLists' interface TabPanelProps { children?: React.ReactNode @@ -85,7 +86,10 @@ const Settings = () => { - Golden Records Lists + + Setup properties for Golden Records Lists{' '} + + Deterministic diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx new file mode 100644 index 000000000..b8192c018 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx @@ -0,0 +1,216 @@ +import React from 'react' +import Box from '@mui/material/Box' +import EditIcon from '@mui/icons-material/Edit' +import SaveIcon from '@mui/icons-material/Save' +import CancelIcon from '@mui/icons-material/Close' +import { + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, + GridRowEditStopReasons +} from '@mui/x-data-grid' +import { useSnackbar } from 'notistack' + +const randomTraderName = () => { + return Math.random().toString(36).substring(2, 7) +} + +const randomId = () => { + return Math.random().toString(36).substring(2, 9) +} + +const initialRows: GridRowsProp = [ + { + id: randomId(), + listName: 'Source ID' , + propertyName: 'Facility ID', + type: 'string' + }, + { + id: randomId(), + listName: '', + propertyName: 'Patient ID', + type: 'string' + }, + { + id: randomId(), + listName: 'Biometric ID', + propertyName: 'Subject ID', + type: 'string' + } +] + +interface EditToolbarProps { + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel + ) => void +} + +function EditToolbar(props: EditToolbarProps) { + const { setRows, setRowModesModel } = props + + const handleClick = () => { + const id = randomId() + setRows(oldRows => [...oldRows, { id, name: '', age: '', isNew: true }]) + setRowModesModel(oldModel => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' } + })) + } + + return +} + +const GoldenRecordLists = () => { + const [rows, setRows] = React.useState(initialRows) + const [rowModesModel, setRowModesModel] = React.useState( + {} + ) + const handleRowEditStop: GridEventListener<'rowEditStop'> = ( + params, + event + ) => { + if (params.reason === GridRowEditStopReasons.rowFocusOut) { + event.defaultMuiPrevented = true + } + } + const handleEditClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) + } + const handleSaveClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + } + const handleDeleteClick = (id: GridRowId) => () => { + setRows(rows.filter(row => row.id !== id)) + } + const handleCancelClick = (id: GridRowId) => () => { + setRowModesModel({ + ...rowModesModel, + [id]: { mode: GridRowModes.View, ignoreModifications: true } + }) + + const editedRow = rows.find(row => row.id === id) + if (editedRow!.isNew) { + setRows(rows.filter(row => row.id !== id)) + } + } + const processRowUpdate = (newRow: GridRowModel) => { + const updatedRow = { ...newRow, isNew: false } + setRows(rows.map(row => (row.id === newRow.id ? updatedRow : row))) + return updatedRow + } + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { + setRowModesModel(newRowModesModel) + } + const columns: GridColDef[] = [ + { + field: 'listName', + headerName: 'List Name', + width: 300, + editable: true, + align: 'center', + headerAlign: 'center' + }, + { + field: 'propertyName', + headerName: 'Property Name', + type: 'string', + width: 300, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'type', + headerName: 'Type', + type: 'string', + width: 300, + align: 'center', + headerAlign: 'center', + editable: false + }, + { + field: 'actions', + type: 'actions', + headerName: 'Actions', + align: 'center', + headerAlign: 'center', + width: 300, + cellClassName: 'actions', + getActions: ({ id }) => { + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + if (isInEditMode) { + return [ + } + label="Save" + sx={{ + color: 'white' + }} + onClick={handleSaveClick(id)} + />, + } + label="Cancel" + className="textPrimary" + onClick={handleCancelClick(id)} + color="inherit" + /> + ] + } + + return [ + } + label="Edit" + className="textPrimary" + onClick={handleEditClick(id)} + color="inherit" + /> + ] + } + } + ] + + + return ( + + + + ) +} + +export default GoldenRecordLists From 804cff431bb842b3b0af66092137ab140e2af732 Mon Sep 17 00:00:00 2001 From: Issam Baccouch Date: Fri, 29 Dec 2023 21:21:41 +0100 Subject: [PATCH 08/11] fix: navigation menu not showing up --- JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx b/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx index 6d4e08f03..d7958bf5a 100644 --- a/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx @@ -24,11 +24,6 @@ const NavigationMenu: React.FC = () => { close() logout(navigate) } - - if (!currentUser) { - return null - } - return ( Date: Fri, 29 Dec 2023 22:15:52 +0100 Subject: [PATCH 09/11] feat: add settings diagram --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 43 ++++++++++++++++++- .../JeMPI_UI/src/pages/settings/Shapes.css | 43 +++++++++++++++++++ 2 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 72a69433a..478e0b305 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -7,6 +7,7 @@ import UniqueToInteraction from './uniqueToInteraction/UniqueToInteraction' import Deterministic from './deterministic/deterministic' import Blocking from './blocking/Blocking' import GoldenRecordLists from './goldenRecordLists/GoldenRecordLists' +import './Shapes.css' interface TabPanelProps { children?: React.ReactNode @@ -46,7 +47,47 @@ const Settings = () => { return ( - + +
+
+
+ Golden Record +
+
+
+ + Interaction +
+ (encounter) + +
+
+
+
+
+ +
+
+
+
+ diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css new file mode 100644 index 000000000..814227d45 --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Shapes.css @@ -0,0 +1,43 @@ +.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; + laft: 0; +} +.label { + position: absolute; + font-size: 12px; + color: #000; +} From 76f02d2639eb94d6b330baaab381fb107939f203 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Thu, 18 Apr 2024 13:57:57 +0200 Subject: [PATCH 10/11] added drag and drop functionality to widget nodes --- JeMPI_Apps/JeMPI_UI/package.json | 1 + .../JeMPI_UI/src/pages/settings/Settings.tsx | 14 ++--- .../JeMPI_UI/src/pages/settings/Shapes.css | 59 ++++++++++++++++++- .../GoldenRecordInteractiveNode.tsx | 47 +++++++++++++++ .../InteractionEncounterInteractiveNode .tsx | 37 ++++++++++++ 5 files changed, 146 insertions(+), 12 deletions(-) create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/GoldenRecordInteractiveNode.tsx create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractionEncounterInteractiveNode .tsx diff --git a/JeMPI_Apps/JeMPI_UI/package.json b/JeMPI_Apps/JeMPI_UI/package.json index 79c06b421..c9c55723c 100644 --- a/JeMPI_Apps/JeMPI_UI/package.json +++ b/JeMPI_Apps/JeMPI_UI/package.json @@ -45,6 +45,7 @@ "notistack": "^2.0.8", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-dropzone": "^14.2.3", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 478e0b305..879d073c3 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -6,6 +6,8 @@ import UniqueToGR from './uniqueToGR/UniqueToGR' import UniqueToInteraction from './uniqueToInteraction/UniqueToInteraction' import Deterministic from './deterministic/deterministic' import Blocking from './blocking/Blocking' +import GoldenRecordInteractiveNode from './interactiveNode/GoldenRecordInteractiveNode' +import InteractionEncounterInteractiveNode from '../settings/interactiveNode/InteractionEncounterInteractiveNode ' import GoldenRecordLists from './goldenRecordLists/GoldenRecordLists' import './Shapes.css' @@ -61,17 +63,9 @@ const Settings = () => { }} >
-
- Golden Record -
+
-
- - Interaction -
- (encounter) - -
+
{ + + const [currentRotate, setCurrentRotate] = useState(0); + + const isDraggingRef = useRef(false); + + const onDrag = () => { + isDraggingRef.current = true; + }; + + const onStop = () => { + if (!isDraggingRef.current) { + setCurrentRotate(currentRotate + 90); + } + isDraggingRef.current = false; + }; + + return ( + +
+
+ Golden Record +
+

Common Properties

+
    +
  • Family Name: Smith
    • +
  • Name: John
    • +
  • City: New York
    • +
  • Age: 30
    • +
  • Phone Number: 123-456-7890
    • +
  • National ID: 123456789
    • +
+
+
+
+ + ); + }; + +export default GoldenRecordInteractiveNode; diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractionEncounterInteractiveNode .tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractionEncounterInteractiveNode .tsx new file mode 100644 index 000000000..fbbddac9c --- /dev/null +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractionEncounterInteractiveNode .tsx @@ -0,0 +1,37 @@ +import Draggable from "react-draggable"; +import React, { useState, useRef } from "react"; +import '../Shapes.css'; + +const InteractionEncounterInteractiveNode = () => { + + const [currentRotate, setCurrentRotate] = useState(0); + + const isDraggingRef = useRef(false); + + const onDrag = () => { + isDraggingRef.current = true; + }; + + const onStop = () => { + if (!isDraggingRef.current) { + setCurrentRotate(currentRotate + 90); + } + isDraggingRef.current = false; + }; + + return ( + +
+
+ Interaction +
+
+ + ); + }; + +export default InteractionEncounterInteractiveNode ; + From 514e7e481fabd5db7dc168a384b5ffa377c09bf5 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Tue, 23 Apr 2024 14:54:55 +0200 Subject: [PATCH 11/11] added leader line dependency, refactored interactive nodes --- JeMPI_Apps/JeMPI_UI/package.json | 9 +- JeMPI_Apps/JeMPI_UI/public/index.html | 3 + JeMPI_Apps/JeMPI_UI/src/App.tsx | 1 - .../JeMPI_UI/src/pages/settings/Settings.tsx | 22 +-- .../JeMPI_UI/src/pages/settings/Shapes.css | 27 +--- .../GoldenRecordInteractiveNode.tsx | 47 ------ .../InteractionEncounterInteractiveNode .tsx | 37 ----- .../interactiveNode/InteractiveNode.tsx | 135 ++++++++++++++++++ JeMPI_Apps/JeMPI_UI/tsconfig.json | 1 + 9 files changed, 156 insertions(+), 126 deletions(-) delete mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/GoldenRecordInteractiveNode.tsx delete mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractionEncounterInteractiveNode .tsx create mode 100644 JeMPI_Apps/JeMPI_UI/src/pages/settings/interactiveNode/InteractiveNode.tsx diff --git a/JeMPI_Apps/JeMPI_UI/package.json b/JeMPI_Apps/JeMPI_UI/package.json index c9c55723c..77986db99 100644 --- 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,11 +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", @@ -75,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 index 7d3564925..9fe42e59f 100644 --- a/JeMPI_Apps/JeMPI_UI/public/index.html +++ b/JeMPI_Apps/JeMPI_UI/public/index.html @@ -29,6 +29,9 @@
+