From df270bb1473c8c3f7048ced9cd95a6bd9fd87ed9 Mon Sep 17 00:00:00 2001 From: "giannis.koumoutsos" Date: Wed, 24 Aug 2022 00:08:48 +0200 Subject: [PATCH 01/12] execution problem with live and history --- src/Components/ExecutionDetails.tsx | 21 +++++++++++++++++++-- src/store/currentExecutionEvent.ts | 1 + src/store/executedEvents.ts | 2 ++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/Components/ExecutionDetails.tsx b/src/Components/ExecutionDetails.tsx index deae7d2..db0e1dc 100644 --- a/src/Components/ExecutionDetails.tsx +++ b/src/Components/ExecutionDetails.tsx @@ -35,12 +35,20 @@ export default function ExecutionDetails() { const currentExecutionEvent = state((state) => state.currentExecutionEvent); + // DOC: events from the ongoing live executions const executedEvents = state((state) => state.executedEvents); + + // DOC: the workflows that are visible in the sidebar const watchedWorkflows = state((state) => state.watchedWorkflows); const setWatchedWorkflows = state((state) => state.setWatchedWorkflows); + + // DOC: calculate the executing spinners for live execution const setExecutingEvents = state((state) => state.setExecutingEvents); + const executingEvents = state((state) => state.executingEvents); + const setInExecutionMode = state((state) => state.setInExecutionMode); + // DOC: the events that are each moment on the canvas NOT for live executing workflows const [currentWatchedEvents, setCurrentWatchedEvents] = useState( [] as Event[] ); @@ -60,6 +68,10 @@ export default function ExecutionDetails() { const undoIndex = state((state) => state.undoIndex); const canvasGraphChanged = state((state) => state.canvasGraphChanged); + useEffect(() => { + console.log(executingEvents, currentWatchedEvents); + }, [executingEvents, currentWatchedEvents]); + useEffect(() => { // TODO: it gets an undifined value on getFromServer // const allJobs = executedEvents @@ -123,7 +135,7 @@ export default function ExecutionDetails() { const workflowDetails = (work) => { /* eslint-disable no-console */ - console.log(graphRF.graph.label, workflows, work); + console.log(graphRF.graph.label, workflows, work, currentWatchedEvents); setSelectedWorkflow(work); }; @@ -178,7 +190,7 @@ export default function ExecutionDetails() { const response = await getWorkflow(workflowId); if (response.data) { setWorkingGraph(response.data as GraphEwoks, 'fromServer'); - + // TODO: clear timeout because there is a memory leak setTimeout(() => { const events = getEventsForJob(); setInExecutionMode(true); @@ -186,6 +198,7 @@ export default function ExecutionDetails() { // the nodes before they are there from the server // probably because setWorkingGraph changes the graphRF used in executingEvents events.forEach((ev) => setExecutingEvents(ev, false)); + console.log(currentWatchedEvents, events); }, 400); } else { setOpenSnackbar({ @@ -210,8 +223,11 @@ export default function ExecutionDetails() { console.log(currentWatchedEvents); setTimeout(() => { const eventsL = getEventsForJob(); + console.log(eventsL); setInExecutionMode(true); eventsL.forEach((ev) => setExecutingEvents(ev, false)); + + console.log(currentWatchedEvents, eventsL); }, 400); } }; @@ -230,6 +246,7 @@ export default function ExecutionDetails() { }); console.log(events); } else { + console.log('it is live executed'); events = executedEvents.filter( (ev) => ev.workflow_id === selectedWorkflow.workflow_id && diff --git a/src/store/currentExecutionEvent.ts b/src/store/currentExecutionEvent.ts index 2e25e33..b22476e 100644 --- a/src/store/currentExecutionEvent.ts +++ b/src/store/currentExecutionEvent.ts @@ -3,6 +3,7 @@ const currentExecutionEvent = (set) => ({ currentExecutionEvent: 0, setCurrentExecutionEvent: (indexOfEvent) => { + console.log(indexOfEvent); set((state) => ({ ...state, currentExecutionEvent: indexOfEvent, diff --git a/src/store/executedEvents.ts b/src/store/executedEvents.ts index 1f51b56..6450cd8 100644 --- a/src/store/executedEvents.ts +++ b/src/store/executedEvents.ts @@ -1,5 +1,7 @@ import type { Event } from '../types'; +// DOC: All the events that came in during live executions. These events keep +// pilling-up while the app is up front-back. When should that stop; const executedEvents = (set, get) => ({ executedEvents: [] as Event[], -- GitLab From 8c8e08fb463483eea27efdfc53eedc7a778ed43e Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Wed, 24 Aug 2022 17:08:56 +0200 Subject: [PATCH 02/12] hide buttons and DOC execution --- src/Components/ExecuteWorkflow.tsx | 4 ++ src/Components/ExecutionDetails.tsx | 93 +++++++++++++---------------- src/layout/Dashboard.tsx | 58 ++++++++++++++++-- src/store/selectedElement.ts | 3 +- 4 files changed, 101 insertions(+), 57 deletions(-) diff --git a/src/Components/ExecuteWorkflow.tsx b/src/Components/ExecuteWorkflow.tsx index 882775a..b9249b5 100644 --- a/src/Components/ExecuteWorkflow.tsx +++ b/src/Components/ExecuteWorkflow.tsx @@ -22,6 +22,7 @@ export default function ExecuteWorkflow() { const setCanvasGraphChanged = state((state) => state.setCanvasGraphChanged); const [openAgreeDialog, setOpenAgreeDialog] = useState(false); const undoIndex = state((state) => state.undoIndex); + const setSelectedElement = state((state) => state.setSelectedElement); useEffect(() => { socket.on('Executing', (data) => { @@ -63,6 +64,9 @@ export default function ExecuteWorkflow() { } } else if (inExecutionMode) { setInExecutionMode(false); + // DOC: when exiting the execution to show the graph as selected + // and not a numbered execution node that the user might have clicked + setSelectedElement(graphRF.graph); // socket.disconnect(); } else { setOpenSnackbar({ diff --git a/src/Components/ExecutionDetails.tsx b/src/Components/ExecutionDetails.tsx index db0e1dc..af148c5 100644 --- a/src/Components/ExecutionDetails.tsx +++ b/src/Components/ExecutionDetails.tsx @@ -38,24 +38,31 @@ export default function ExecutionDetails() { // DOC: events from the ongoing live executions const executedEvents = state((state) => state.executedEvents); - // DOC: the workflows that are visible in the sidebar + // DOC: the workflows from HISTORY that are visible on the execution tab const watchedWorkflows = state((state) => state.watchedWorkflows); const setWatchedWorkflows = state((state) => state.setWatchedWorkflows); + // DOC: all workflows live and from history on the execution tab + const [workflows, setWorkflows] = useState([]); + // DOC: calculate the executing spinners for live execution const setExecutingEvents = state((state) => state.setExecutingEvents); const executingEvents = state((state) => state.executingEvents); const setInExecutionMode = state((state) => state.setInExecutionMode); - // DOC: the events that are each moment on the canvas NOT for live executing workflows + // DOC: the events that are each moment on the canvas NOT? for live executing workflows const [currentWatchedEvents, setCurrentWatchedEvents] = useState( [] as Event[] ); // const [jobs, setJobs] = useState([]); - const [workflows, setWorkflows] = useState([]); + const [selectedWorkflow, setSelectedWorkflow] = useState({} as Event); - const [gettingFromServer, setGettingFromServer] = useState(false); + + // const [gettingFromServer, setGettingFromServer] = useState(false); TODO: Use the global... + const setGettingFromServer = state((state) => state.setGettingFromServer); + const gettingFromServer = state((state) => state.gettingFromServer); + const setWorkingGraph = state((state) => state.setWorkingGraph); const setOpenSnackbar = state((state) => state.setOpenSnackbar); const allWorkflows = state((state) => state.allWorkflows); @@ -68,10 +75,6 @@ export default function ExecutionDetails() { const undoIndex = state((state) => state.undoIndex); const canvasGraphChanged = state((state) => state.canvasGraphChanged); - useEffect(() => { - console.log(executingEvents, currentWatchedEvents); - }, [executingEvents, currentWatchedEvents]); - useEffect(() => { // TODO: it gets an undifined value on getFromServer // const allJobs = executedEvents @@ -117,9 +120,9 @@ export default function ExecutionDetails() { return { ...(job[0].workflow_id ? job[0] : job[1]), status: 'finished' }; }); - // console.log(executedEvents, wjobs, allWorkflowsL); + console.log(executedEvents, wjobs, allWorkflowsL); setWorkflows([...allWorkflowsL, ...wjobs]); - }, [executedEvents, graphRF.graph.label, watchedWorkflows]); + }, [executedEvents, watchedWorkflows]); // TODO: Testing hooks with promises // const { execute, status, value, error } = useApi(myFunction, false, { @@ -133,20 +136,12 @@ export default function ExecutionDetails() { // setExpandedWorkflows(newExpanded); // }; - const workflowDetails = (work) => { + function workflowDetails(work) { /* eslint-disable no-console */ - console.log(graphRF.graph.label, workflows, work, currentWatchedEvents); setSelectedWorkflow(work); - }; - - const formatedDate = (job) => { - // console.log( - // job, - // allWorkflows.find((work) => job.workflow_id === work.id), - // allWorkflows, - // workflows - // ); + } + function formatedDate(job: Event) { const allWorkF: workflowDescription[] = [ ...(allWorkflows as workflowDescription[]), ]; @@ -157,15 +152,14 @@ export default function ExecutionDetails() { }; const dat = new Date(job.time); - // console.log(label); return `${ label ? label.slice(0, 20) : (job.workflow_id as string) } ${dat.getHours()}:${dat.getMinutes()} ${dat.getDate()}/${ dat.getMonth() + 1 }/${dat.getFullYear()}`; - }; + } - const checkAndExecute = () => { + function checkAndExecute() { if (canvasGraphChanged && undoIndex !== 0) { setOpenAgreeDialog(true); } else { @@ -173,32 +167,31 @@ export default function ExecutionDetails() { setOpenAgreeDialog(false); setCanvasGraphChanged(false); } - }; + } + + async function executeWorkflow() { + // DOC: need to differentiate between the live-executing, live-executed, jobs-from-server - const executeWorkflow = async () => { const workflowId = selectedWorkflow.workflow_id; - console.log(selectedWorkflow, graphRF); - console.log(currentWatchedEvents); - // Replay execution on canvas needs to put the workflow on canvas with the events - // 1. Ask for saving the workflow that is on canvas - // console.log(graphRF.graph.id, workflowId, selectedWorkflow); + + // DOC: Replay execution on canvas needs to put the workflow on canvas with the events if not there if (graphRF.graph.id !== workflowId) { - // 2. Get the workflow from server if not on canvas + // DOC: Get the workflow from server if not on canvas // TODO: dublicated code with getFromServer, abstract in store? hook? setGettingFromServer(true); try { const response = await getWorkflow(workflowId); if (response.data) { setWorkingGraph(response.data as GraphEwoks, 'fromServer'); - // TODO: clear timeout because there is a memory leak + // TODO: get read of timeout? setTimeout(() => { + // DOC: const events = getEventsForJob(); setInExecutionMode(true); // TODO: timeout is needed because executingEvents try to find // the nodes before they are there from the server // probably because setWorkingGraph changes the graphRF used in executingEvents events.forEach((ev) => setExecutingEvents(ev, false)); - console.log(currentWatchedEvents, events); }, 400); } else { setOpenSnackbar({ @@ -220,31 +213,27 @@ export default function ExecutionDetails() { setGettingFromServer(false); } } else { - console.log(currentWatchedEvents); - setTimeout(() => { - const eventsL = getEventsForJob(); - console.log(eventsL); - setInExecutionMode(true); - eventsL.forEach((ev) => setExecutingEvents(ev, false)); - - console.log(currentWatchedEvents, eventsL); - }, 400); + // setTimeout(() => { + const eventsL = getEventsForJob(); + console.log(eventsL); + setInExecutionMode(true); + eventsL.forEach((ev) => setExecutingEvents(ev, false)); + // }, 400); } - }; + } - const getEventsForJob = () => { + function getEventsForJob() { let events = [] as Event[]; const isInWatchedIndex = watchedWorkflows .map((job) => job[0].job_id === selectedWorkflow.job_id) .indexOf(true); - // console.log(isInWatchedIndex, selectedWorkflow.job_id, watchedWorkflows); + // Check if it is watched workflow from server or a live execution if (isInWatchedIndex !== -1) { console.log('it is part of the history'); events = watchedWorkflows[isInWatchedIndex].map((ev, index) => { return { ...ev, id: index + 1 }; }); - console.log(events); } else { console.log('it is live executed'); events = executedEvents.filter( @@ -256,7 +245,7 @@ export default function ExecutionDetails() { console.log(events); setCurrentWatchedEvents(events); return events; - }; + } const handleChangeOpenExecutions = async () => { setOpenSettingsDrawer('Executions'); @@ -267,10 +256,10 @@ export default function ExecutionDetails() { }; const deleteWatchedJob = () => { - // setWorkflows( - // workflows.filter((work) => work.job_id !== selectedWorkflow.job_id) - // ); - console.log(watchedWorkflows, selectedWorkflow); + setWorkflows( + workflows.filter((work) => work.job_id !== selectedWorkflow.job_id) + ); + setWatchedWorkflows( watchedWorkflows.filter( (work) => work[0].job_id !== selectedWorkflow.job_id diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 3073108..8d7eefb 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -16,7 +16,7 @@ import { ReactFlowProvider } from 'react-flow-renderer'; import Canvas from './Canvas'; import UndoRedo from '../Components/UndoRedo'; import GetFromServer from '../Components/GetFromServer'; -import { Fab, IconButton } from '@material-ui/core'; +import { Button, Fab, IconButton, Menu, MenuItem } from '@material-ui/core'; import SettingsIcon from '@material-ui/icons/Settings'; import SimpleSnackbar from '../Components/Snackbar'; import SettingsInfoDrawer from '../Components/SettingsInfoDrawer'; @@ -34,6 +34,7 @@ import FormDialog from '../Components/FormDialog'; import ConfirmDialog from '../Components/ConfirmDialog'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from '../Components/General/ErrorFallback'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; const useStyles = DashboardStyle; @@ -60,6 +61,7 @@ export default function Dashboard() { const setCanvasGraphChanged = state((state) => state.setCanvasGraphChanged); const [openAgreeDialog, setOpenAgreeDialog] = useState(false); const undoIndex = state((state) => state.undoIndex); + const [anchorEl, setAnchorEl] = React.useState(null); useEffect(() => { // console.log(openDrawers); @@ -154,6 +156,14 @@ export default function Dashboard() { setOpenAgreeDialog(false); }; + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + return (
-
- -
@@ -257,6 +264,49 @@ export default function Dashboard() { +
+ + + + + + + + {/* */} + + + + + + + + + + +
+ ({ setSelectedElement: (element, from) => { const prevState = get((prev) => prev); + console.log(element, from); const wg = prevState.workingGraph.graph.id; const { graph, nodes, links } = prevState.graphRF; @@ -48,7 +49,7 @@ const selectedElement = (set, get) => ({ graph: element, nodes: initializeNodes(nodes), links: links.map((link) => { - return { ...link, selected: false }; + return { ...link, selected: false }; // TODO: examine this after update }), }; -- GitLab From 99478db326a6c89c6986dbfcd7dae2a8a1f70ad8 Mon Sep 17 00:00:00 2001 From: "giannis.koumoutsos" Date: Thu, 25 Aug 2022 09:25:22 +0200 Subject: [PATCH 03/12] label of link draft --- src/Components/LabelComment.tsx | 91 ++++++++++++++++++++++++++++----- 1 file changed, 78 insertions(+), 13 deletions(-) diff --git a/src/Components/LabelComment.tsx b/src/Components/LabelComment.tsx index d5018b4..18c4f3c 100644 --- a/src/Components/LabelComment.tsx +++ b/src/Components/LabelComment.tsx @@ -5,6 +5,7 @@ import { Box, Button, TextField } from '@material-ui/core'; import DashboardStyle from '../layout/DashboardStyle'; import state from '../store/state'; import SidebarTooltip from './SidebarTooltip'; +import { Autocomplete } from '@material-ui/lab'; const useStyles = DashboardStyle; @@ -16,6 +17,10 @@ export default function LabelComment(props) { const [comment, setComment] = React.useState(''); const [label, setLabel] = React.useState(''); + const [labelChoices, setLabelChoices] = React.useState([ + 'use mappings', + 'use conditions', + ]); const setSelectedElement = state((state) => state.setSelectedElement); useEffect(() => { @@ -23,8 +28,27 @@ export default function LabelComment(props) { setLabel(element.data.label); setComment(element.data.comment); } else if ('source' in element) { - setLabel(element.label); - setComment(element.data && element.data.comment); + const el = element as EwoksRFLink; + setLabel(el.label); + setComment(el.data && el.data.comment); + + const mappings = + el.data.data_mapping.length > 0 + ? el.data.data_mapping + .map((con) => `${con.source_output}->${con.target_input}`) + .join(', ') + : ''; + const conditions = + el.data.conditions.length > 0 + ? el.data.conditions + // .map((con) => con.source_output + ': ' + JSON.stringify(con.value)) + .map( + (con) => `${con.source_output}: ${JSON.stringify(con.value)}` + ) + .join(', ') + : ''; + + setLabelChoices(['free text', mappings, conditions]); } }, [element]); @@ -102,14 +126,54 @@ export default function LabelComment(props) { ); }; + const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + ]; + return ( <>
- {Object.keys(element).includes('source') && ( + {Object.keys(element).includes('source') ? ( - + */} + ) : ( + )} -
-- GitLab From 7695fdd5f6e6811a57b38f458007af320bc18527 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Thu, 25 Aug 2022 10:01:37 +0200 Subject: [PATCH 04/12] label link ok --- src/Components/LabelComment.tsx | 136 +++++++++----------------------- 1 file changed, 36 insertions(+), 100 deletions(-) diff --git a/src/Components/LabelComment.tsx b/src/Components/LabelComment.tsx index 18c4f3c..3a8d88b 100644 --- a/src/Components/LabelComment.tsx +++ b/src/Components/LabelComment.tsx @@ -41,57 +41,19 @@ export default function LabelComment(props) { const conditions = el.data.conditions.length > 0 ? el.data.conditions - // .map((con) => con.source_output + ': ' + JSON.stringify(con.value)) .map( (con) => `${con.source_output}: ${JSON.stringify(con.value)}` ) .join(', ') : ''; - setLabelChoices(['free text', mappings, conditions]); + setLabelChoices([mappings, conditions, '...']); } }, [element]); - const useConditions = () => { - const el = element as EwoksRFLink; - const newLabel = - el.data.conditions.length > 0 - ? el.data.conditions - // .map((con) => con.source_output + ': ' + JSON.stringify(con.value)) - .map((con) => `${con.source_output}: ${JSON.stringify(con.value)}`) - .join(', ') - : ''; - setLabel(newLabel); - setSelectedElement( - { - ...element, - label: newLabel, - }, - 'fromSaveElement' - ); - }; - - const useMapping = () => { - const el = element as EwoksRFLink; - const newLabel = - el.data.data_mapping.length > 0 - ? el.data.data_mapping - .map((con) => `${con.source_output}->${con.target_input}`) - .join(', ') - : ''; - setLabel(newLabel); - setSelectedElement( - { - ...element, - label: newLabel, - }, - 'fromSaveElement' - ); - }; - const labelChanged = (event) => { - // console.log('label changed:', event.target.value); setLabel(event.target.value); + if ('position' in element) { const el = element; setSelectedElement( @@ -126,72 +88,46 @@ export default function LabelComment(props) { ); }; - const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - ]; - return ( <>
{Object.keys(element).includes('source') ? ( - - { - console.log(newValue); - setSelectedElement( - { - ...element, - label: newValue, - }, - 'fromSaveElement' - ); - }} - onInputChange={(event, newInputValue) => { - console.log(newInputValue); - setSelectedElement( - { - ...element, - label: newInputValue, - }, - 'fromSaveElement' - ); - }} - renderInput={(params) => ( - - )} - /> - {/* - */} - + { + console.log(newValue); + setSelectedElement( + { + ...element, + label: newValue, + }, + 'fromSaveElement' + ); + }} + onInputChange={(event, newInputValue) => { + console.log(newInputValue); + setSelectedElement( + { + ...element, + label: newInputValue, + }, + 'fromSaveElement' + ); + }} + renderInput={(params) => ( + + )} + /> ) : ( Date: Thu, 25 Aug 2022 13:46:32 +0200 Subject: [PATCH 05/12] reflex working draft --- package-lock.json | 32 +++ package.json | 1 + src/App.tsx | 1 + src/Components/EditElement.tsx | 4 +- src/Components/GraphLabelComment.tsx | 55 +++- src/Components/LabelComment.tsx | 52 +++- src/layout/Dashboard.tsx | 398 +++++++++++++++------------ src/layout/DashboardStyle.js | 4 +- src/styles/sidebar.css | 1 + 9 files changed, 348 insertions(+), 200 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e9c39f..1385b2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8487,6 +8487,11 @@ "has-symbols": "^1.0.1" } }, + "get-node-dimensions": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz", + "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==" + }, "get-own-enumerable-property-symbols": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz", @@ -11876,6 +11881,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -15127,6 +15137,28 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-measure": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.5.2.tgz", + "integrity": "sha512-M+rpbTLWJ3FD6FXvYV6YEGvQ5tMayQ3fGrZhRPHrE9bVlBYfDCLuDcgNttYfk8IqfOI03jz6cbpqMRTUclQnaA==", + "requires": { + "@babel/runtime": "^7.2.0", + "get-node-dimensions": "^1.2.1", + "prop-types": "^15.6.2", + "resize-observer-polyfill": "^1.5.0" + } + }, + "react-reflex": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/react-reflex/-/react-reflex-4.0.9.tgz", + "integrity": "sha512-XFTNRekFK4ul8mzVd1lniKT/SI0FvNYhXyLNl5gagS1i3iW9QKlpFYcRfVhZlxxaYHb8UyLOs3+H4Ay5cjtbxQ==", + "requires": { + "@babel/runtime": "^7.0.0", + "lodash.throttle": "^4.1.1", + "prop-types": "^15.5.8", + "react-measure": "^2.0.2" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", diff --git a/package.json b/package.json index 33d2c8a..294a3b1 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-error-boundary": "^3.1.4", "react-flow-renderer": "^10.1.0", "react-json-view": "latest", + "react-reflex": "^4.0.9", "react-rnd": "^10.3.4", "react-use": "^17.3.1", "socket.io-client": "^4.4.1", diff --git a/src/App.tsx b/src/App.tsx index 515f504..7e95168 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Dashboard from './layout/Dashboard'; +import 'react-reflex/styles.css'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/src/Components/EditElement.tsx b/src/Components/EditElement.tsx index 2b12c95..8efa890 100644 --- a/src/Components/EditElement.tsx +++ b/src/Components/EditElement.tsx @@ -37,8 +37,8 @@ function EditElement(props) { : 'Graph'} - -
+ + {'source' in element ? ( ) : 'position' in element ? ( diff --git a/src/Components/GraphLabelComment.tsx b/src/Components/GraphLabelComment.tsx index e1479e0..fda6b20 100644 --- a/src/Components/GraphLabelComment.tsx +++ b/src/Components/GraphLabelComment.tsx @@ -1,6 +1,12 @@ import React, { useEffect } from 'react'; -import { TextField } from '@material-ui/core'; +import { + FormControl, + InputAdornment, + InputLabel, + OutlinedInput, + TextField, +} from '@material-ui/core'; import DashboardStyle from '../layout/DashboardStyle'; import state from '../store/state'; import type { GraphDetails } from '../types'; @@ -65,7 +71,46 @@ export default function GraphLabelComment() { {/*
Label: {graphRF.graph.label}
*/} -
+ + Label + + + + Comment + + + + Category + + + {/*
-
-
+
*/} + {/*
-
+
*/} {/* DOC: if the inputs and outputs of the graph are needed
Inputs diff --git a/src/Components/LabelComment.tsx b/src/Components/LabelComment.tsx index 3a8d88b..d09388a 100644 --- a/src/Components/LabelComment.tsx +++ b/src/Components/LabelComment.tsx @@ -1,7 +1,14 @@ import React, { useEffect } from 'react'; import type { EwoksRFLink } from '../types'; -import { Box, Button, TextField } from '@material-ui/core'; +import { + Box, + Button, + FormControl, + InputLabel, + OutlinedInput, + TextField, +} from '@material-ui/core'; import DashboardStyle from '../layout/DashboardStyle'; import state from '../store/state'; import SidebarTooltip from './SidebarTooltip'; @@ -91,9 +98,13 @@ export default function LabelComment(props) { return ( <>
- - {Object.keys(element).includes('source') ? ( - + {Object.keys(element).includes('source') ? ( + + )} /> - - ) : ( + + + ) : ( + - )} - + + )}
- - + Comment + + + {/* - + */}
); diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 8d7eefb..de39e38 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -35,6 +35,7 @@ import ConfirmDialog from '../Components/ConfirmDialog'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from '../Components/General/ErrorFallback'; import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'; const useStyles = DashboardStyle; @@ -165,211 +166,248 @@ export default function Dashboard() { }; return ( -
- - - - - +
- - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - - + + + + + + + + - - -
+ - + - + - {/* */} - - + + + + + +
+ + + + +
+ - - - - - - - -
-
+ + + + + + - - - + - - - - - - - - + + + + + + + + + + + + + + +
+ + + + + + + + + + + +
+ -
- - - -
- - - - + + {/* +
+ + + +
+ + */} + + {/* */} + -
-
+ {/* */} + + {/* */} +
+ - - {gettingFromServer && } + +
+
- - ( - - )} - // resetKeys={[]} - // onError={() => console.log()} - > - - - - -
+ + {gettingFromServer && } + + + ( + + )} + // resetKeys={[]} + // onError={() => console.log()} + > + + + + +
+ - -
+ {/* */} + {/*
*/} + + ); } diff --git a/src/layout/DashboardStyle.js b/src/layout/DashboardStyle.js index e571841..3c31833 100644 --- a/src/layout/DashboardStyle.js +++ b/src/layout/DashboardStyle.js @@ -57,7 +57,7 @@ const DashboardStyle = makeStyles((theme) => ({ }, appBarShift: { marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, + // width: `calc(100% - ${drawerWidth}px)`, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, @@ -117,7 +117,7 @@ const DashboardStyle = makeStyles((theme) => ({ }, detailsLabels: { - margin: '8px 0px', + padding: '8px 0px', wordBreak: 'break-word', }, diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css index 4aae0a0..d9df4ab 100644 --- a/src/styles/sidebar.css +++ b/src/styles/sidebar.css @@ -6,6 +6,7 @@ /* display: flex; */ height: 100%; flex-wrap: wrap; + margin-top: 70px; /* background-color: DodgerBlue; */ } -- GitLab From 05b723f132fa6a9316878134b7d38b9557ff3cc7 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Thu, 25 Aug 2022 17:57:44 +0200 Subject: [PATCH 06/12] editabletable adapted 90% --- src/Components/CellEditInJson.tsx | 12 ++-- src/Components/Conditions.tsx | 11 +++- src/Components/CustomTableCell.tsx | 16 ++++- src/Components/DataMapping.tsx | 12 +++- src/Components/DraggableDialog.tsx | 2 +- src/Components/EditableTable.tsx | 79 +++++++++++++++++-------- src/Components/LinkDetails.tsx | 22 ++----- src/Components/TableCellInEditMode.tsx | 81 ++++++++++++++------------ 8 files changed, 146 insertions(+), 89 deletions(-) diff --git a/src/Components/CellEditInJson.tsx b/src/Components/CellEditInJson.tsx index 7028480..fe8d921 100644 --- a/src/Components/CellEditInJson.tsx +++ b/src/Components/CellEditInJson.tsx @@ -4,6 +4,10 @@ export default function CellEditInJson(propsIn) { const { props } = propsIn; const { row, name, type } = props; + const onChange = (edit, row) => { + console.log(edit, row, name); + }; + return ( onChange(edit, row, index)} - // onAdd={(add) => onChange(add, row, index)} + onEdit={(edit) => onChange(edit, row)} + onAdd={(add) => onChange(add, row)} defaultValue="object" - // onDelete={(del) => onChange(del, row, index)} - // onSelect={(sel) => onChange(sel, row, index)} + onDelete={(del) => onChange(del, row)} + onSelect={(sel) => onChange(sel, row)} quotesOnKeys={false} style={{ backgroundColor: 'rgb(59, 77, 172)' }} displayDataTypes diff --git a/src/Components/Conditions.tsx b/src/Components/Conditions.tsx index da8b451..52012bd 100644 --- a/src/Components/Conditions.tsx +++ b/src/Components/Conditions.tsx @@ -5,6 +5,7 @@ import { IconButton } from '@material-ui/core'; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; import EditableTable from './EditableTable'; import state from '../store/state'; +import SidebarTooltip from './SidebarTooltip'; export default function Conditions(props) { const { element } = props; @@ -66,7 +67,13 @@ export default function Conditions(props) { return (
- Conditions + + Conditions + + {conditions && conditions.length > 0 && ( ({ tableCell: { - width: 120, + width: 70, height: 20, padding: '1px', }, @@ -17,9 +17,21 @@ const useStyles = makeStyles(() => ({ })); function CustomTableCell({ index, row, name, onChange, type, typeOfValues }) { + const useStyles = makeStyles(() => ({ + tableCell: { + width: name === 'value' ? '55%' : '25%', + height: 20, + padding: '1px', + }, + input: { + width: 90, + height: 20, + padding: '1px', + }, + })); const classes = useStyles(); const { isEditMode } = row; - // console.log(index, row, name, onChange, type, typeOfValues); + console.log(index, row, name, onChange, type, typeOfValues); return ( diff --git a/src/Components/DataMapping.tsx b/src/Components/DataMapping.tsx index 2704c7d..3c820af 100644 --- a/src/Components/DataMapping.tsx +++ b/src/Components/DataMapping.tsx @@ -5,10 +5,11 @@ import { IconButton } from '@material-ui/core'; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; import EditableTable from './EditableTable'; import state from '../store/state'; +import SidebarTooltip from './SidebarTooltip'; export default function DataMappingComponent(props) { const { element } = props; - // console.log(props); + console.log(props); const setOpenSnackbar = state((state) => state.setOpenSnackbar); const setSelectedElement = state((state) => state.setSelectedElement); const [dataMapping, setDataMapping] = React.useState([]); @@ -19,6 +20,7 @@ export default function DataMappingComponent(props) { useEffect(() => { setElementL(element); + console.log(element); if (element.data && element.data.data_mapping) { setDataMapping(element.data.data_mapping); } @@ -72,7 +74,13 @@ export default function DataMappingComponent(props) { return (
- Data Mapping + + Data Mapping + + ({ root: { @@ -24,7 +25,7 @@ const useStyles = makeStyles(() => ({ table: { padding: '1px', minWidth: 160, - maxWidth: 270, + // maxWidth: 270, wordBreak: 'break-all', }, selectTableCell: { @@ -94,7 +95,7 @@ function EditableTable(props) { }) : [] ); - setDisableSelectType(false); + // setDisableSelectType(false); }, [defaultValues]); const classes = useStyles(); @@ -110,12 +111,9 @@ function EditableTable(props) { }); }; - const onToggleEditMode = (id, index, command) => { + function onToggleEditMode(id, index, command) { // console.log(props, id, rows, props.defaultValues, command, typeOfInputs); - if (command === 'edit') { - setDisableSelectType(true); - // console.log('disable'); - } + if (command === 'edit' && ['list', 'dict'].includes(typeOfInputs[index])) { let initialValue: string | [] | {} = ''; @@ -159,8 +157,10 @@ function EditableTable(props) { if (command === 'done') { setDisableSelectType(true); props.valuesChanged(rows); + } else { + setDisableSelectType(true); } - }; + } const onChange = (e, row, index) => { if ( @@ -203,7 +203,17 @@ function EditableTable(props) { } }; - const onRevert = (id) => { + // const onRevert = (id) => { + // const newRows = rows.filter((row) => { + // return row.id !== id; + // }); + + // setRows(newRows); + // props.valuesChanged(newRows); + // setDisableSelectType(false); + // }; + + const onDelete = (id) => { const newRows = rows.filter((row) => { return row.id !== id; }); @@ -214,7 +224,7 @@ function EditableTable(props) { }; const changedTypeOfInputs = (e, row, index) => { - // console.log(e.target.value, row, props, index); + console.log(e.target.value, row, props, index); if (e.target.value === 'null') { const newRows = rows.map((rowe) => { if (rowe.id === row.id) { @@ -228,6 +238,15 @@ function EditableTable(props) { const tOfI = [...typeOfInputs]; tOfI[index] = e.target.value; setTypeOfInputs(tOfI); + if (['dict', 'list'].includes(e.target.value)) { + console.log('should open dialog'); + showEditableDialog({ + name: row.id, + title: e.target.value === 'list' ? 'Edit list' : 'Edit dict', + graph: e.target.value === 'list' ? [] : {}, + callbackProps: { rows, id: row.id }, + }); + } }; const setRowValue = (name, val, callbackProps) => { @@ -254,6 +273,11 @@ function EditableTable(props) { + {headers[0] !== 'Source' && ( + + Type + + )} {headers[0]} @@ -265,12 +289,13 @@ function EditableTable(props) { {rows.map((row, index) => ( - {headers[0] !== 'Source' && headers[1] !== 'Node_Id' && ( - - - Type - - + + {headers[0] !== 'Source' && ( + onChange(e, row, index)} - > - {typeOfValues.values.map((tex) => ( - - {tex} - - ))} - + // + + ) : typeOfValues.type === 'select' ? ( + <> + + {}} + // onInputChange={(event, newInputValue) => {}} + renderInput={(params) => ( + + )} + /> + + + ) : type === 'bool' || type === 'boolean' ? ( Date: Fri, 26 Aug 2022 17:30:37 +0200 Subject: [PATCH 07/12] meeting comments all draft --- src/Components/Conditions.tsx | 23 +++---- src/Components/CustomTableCell.tsx | 4 +- src/Components/DataMapping.tsx | 2 +- src/Components/DefaultInputs.tsx | 91 ++++++++++++++++++++++++++ src/Components/EditLinkStyle.tsx | 1 + src/Components/EditableTable.tsx | 7 +- src/Components/LabelComment.tsx | 1 + src/Components/LinkDetails.tsx | 2 +- src/Components/MenuPopover.tsx | 64 ++++++++++++++++++ src/Components/NodeDetails.tsx | 15 +++-- src/Components/TableCellInEditMode.tsx | 17 +++-- src/CustomEdges/BendingTextEdge.tsx | 26 +++++++- src/CustomEdges/MultilineTextEdge.tsx | 80 ++++++++++++++++++++++ src/layout/Canvas.tsx | 2 + src/layout/Dashboard.tsx | 34 ++++------ src/layout/sidebar.tsx | 2 +- src/utils/calcTasksForLink.ts | 3 +- src/utils/toRFEwoksNodesUtils.ts | 2 +- 18 files changed, 324 insertions(+), 52 deletions(-) create mode 100644 src/Components/DefaultInputs.tsx create mode 100644 src/Components/MenuPopover.tsx create mode 100644 src/CustomEdges/MultilineTextEdge.tsx diff --git a/src/Components/Conditions.tsx b/src/Components/Conditions.tsx index 52012bd..dd16588 100644 --- a/src/Components/Conditions.tsx +++ b/src/Components/Conditions.tsx @@ -89,17 +89,18 @@ export default function Conditions(props) { typeOfValues={[ { // TODO: examine if the following type is used anymore - type: elementL.source - ? ['class'].includes( - graphRF && - graphRF.nodes[0] && - graphRF.nodes.find((nod) => { - return nod.id === elementL.source; - }).task_type - ) - ? 'select' - : 'input' - : 'input', + type: 'select', + // elementL.source + // ? ['class'].includes( + // graphRF && + // graphRF.nodes[0] && + // graphRF.nodes.find((nod) => { + // return nod.id === elementL.source; + // }).task_type + // ) + // ? 'select' + // : 'input' + // : 'input', values: props.element.data.links_input_names || [], }, { diff --git a/src/Components/CustomTableCell.tsx b/src/Components/CustomTableCell.tsx index 8d0bb56..6c66ddd 100644 --- a/src/Components/CustomTableCell.tsx +++ b/src/Components/CustomTableCell.tsx @@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({ function CustomTableCell({ index, row, name, onChange, type, typeOfValues }) { const useStyles = makeStyles(() => ({ tableCell: { - width: name === 'value' ? '55%' : '25%', + width: name === 'value' ? '50%' : '30%', height: 20, padding: '1px', }, @@ -31,7 +31,7 @@ function CustomTableCell({ index, row, name, onChange, type, typeOfValues }) { })); const classes = useStyles(); const { isEditMode } = row; - console.log(index, row, name, onChange, type, typeOfValues); + console.log(index, row, name, type, typeOfValues); return ( diff --git a/src/Components/DataMapping.tsx b/src/Components/DataMapping.tsx index 3c820af..567f40e 100644 --- a/src/Components/DataMapping.tsx +++ b/src/Components/DataMapping.tsx @@ -17,7 +17,7 @@ export default function DataMappingComponent(props) { {} as EwoksRFLink ); const graphRF = state((state) => state.graphRF); - + console.log(props); useEffect(() => { setElementL(element); console.log(element); diff --git a/src/Components/DefaultInputs.tsx b/src/Components/DefaultInputs.tsx new file mode 100644 index 0000000..ff202eb --- /dev/null +++ b/src/Components/DefaultInputs.tsx @@ -0,0 +1,91 @@ +import React, { useEffect } from 'react'; + +import type { DataMapping, EwoksRFNode, Inputs } from '../types'; +import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; +import EditableTable from './EditableTable'; +import { IconButton } from '@material-ui/core'; + +import state from '../store/state'; +import SidebarTooltip from './SidebarTooltip'; +import LabelComment from './LabelComment'; + +export default function DefaultInputs(props) { + const { element } = props; + console.log(props); + const [defaultInputs, setDefaultInputs] = React.useState([]); + const setSelectedElement = state((state) => state.setSelectedElement); + + useEffect(() => { + setDefaultInputs(element.default_inputs ? element.default_inputs : []); + }, [element.id, element]); + + const addDefaultInputs = () => { + const el = element as EwoksRFNode; + const elIn = el.default_inputs; + if (elIn && elIn[elIn.length - 1] && elIn[elIn.length - 1].id === '') { + // console.log('should not ADD default'); + } else { + setSelectedElement( + { + ...element, + default_inputs: [...elIn, { id: '', name: '', value: '' }], + }, + 'fromSaveElement' + ); + } + }; + + const defaultInputsChanged = (table) => { + setSelectedElement( + { + ...element, + default_inputs: table.map((dval) => { + return { + id: dval.name, + name: dval.name, + value: dval.value, + }; + }), + }, + 'fromSaveElement' + ); + }; + + return ( +
+ +
+ Default Inputs + addDefaultInputs()} + > + + +
+ + + {defaultInputs.length > 0 && ( + + )} +
+ ); +} diff --git a/src/Components/EditLinkStyle.tsx b/src/Components/EditLinkStyle.tsx index 3175764..9f0dba1 100644 --- a/src/Components/EditLinkStyle.tsx +++ b/src/Components/EditLinkStyle.tsx @@ -144,6 +144,7 @@ export default function EditLinkStyle(props) { 'step', 'default', 'bendingText', + 'multilineText', 'getAround', ].map((text) => ( diff --git a/src/Components/EditableTable.tsx b/src/Components/EditableTable.tsx index 269a7ef..685f863 100644 --- a/src/Components/EditableTable.tsx +++ b/src/Components/EditableTable.tsx @@ -65,7 +65,7 @@ function EditableTable(props) { const { defaultValues } = props; const { headers } = props; - + console.log(props); const typesOfInputs = ['bool', 'number', 'string', 'list', 'dict', 'null']; // // console.log(defaultValues, val, rows, props, typeOfInputs); @@ -95,7 +95,7 @@ function EditableTable(props) { }) : [] ); - // setDisableSelectType(false); + setDisableSelectType(true); }, [defaultValues]); const classes = useStyles(); @@ -158,11 +158,12 @@ function EditableTable(props) { setDisableSelectType(true); props.valuesChanged(rows); } else { - setDisableSelectType(true); + setDisableSelectType(false); } } const onChange = (e, row, index) => { + console.log(e, e.target.value, e.target.name, row, index); if ( ['string', 'bool', 'number', 'boolean', 'null'].includes(typeOfInputs[0]) ) { diff --git a/src/Components/LabelComment.tsx b/src/Components/LabelComment.tsx index d09388a..a898a9c 100644 --- a/src/Components/LabelComment.tsx +++ b/src/Components/LabelComment.tsx @@ -136,6 +136,7 @@ export default function LabelComment(props) { label="Label" margin="normal" variant="outlined" + multiline /> )} /> diff --git a/src/Components/LinkDetails.tsx b/src/Components/LinkDetails.tsx index cfc73be..9ee8d60 100644 --- a/src/Components/LinkDetails.tsx +++ b/src/Components/LinkDetails.tsx @@ -26,7 +26,7 @@ export default function LinkDetails(props) { ); const [onError, setOnError] = React.useState(false); const [advanced, setAdvanced] = React.useState(false); - + console.log(props); useEffect(() => { setElementL(element); setMapAllData(!!element.data.map_all_data || false); diff --git a/src/Components/MenuPopover.tsx b/src/Components/MenuPopover.tsx new file mode 100644 index 0000000..bda14dc --- /dev/null +++ b/src/Components/MenuPopover.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Popover from '@material-ui/core/Popover'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import SaveGetFromDisk from '../Components/SaveGetFromDisk'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + typography: { + padding: theme.spacing(2), + }, + }) +); + +export default function MenuPopover({ anchorEl, handleClose }) { + const classes = useStyles(); + // const [anchorEl, setAnchorEl] = React.useState( + // null + // ); + + // const handleClick = (event: React.MouseEvent) => { + // setAnchorEl(event.currentTarget); + // }; + + // const handleClose = () => { + // setAnchorEl(null); + // }; + + const open = Boolean(anchorEl); + const id = open ? 'simple-popover' : undefined; + + return ( +
+ {/* */} + + + {/* + The content of the Popover. + */} + +
+ ); +} diff --git a/src/Components/NodeDetails.tsx b/src/Components/NodeDetails.tsx index e2a63f2..2f43a59 100644 --- a/src/Components/NodeDetails.tsx +++ b/src/Components/NodeDetails.tsx @@ -20,6 +20,7 @@ import state from '../store/state'; import SidebarTooltip from './SidebarTooltip'; import { OpenInBrowser } from '@material-ui/icons'; import LabelComment from './LabelComment'; +import DefaultInputs from './DefaultInputs'; const useStyles = DashboardStyle; @@ -228,8 +229,11 @@ export default function NodeDetails(props) { marginBottom: '10px', }} > -
- + + + + {/*
+ )} -
+
*/}
Advanced diff --git a/src/Components/TableCellInEditMode.tsx b/src/Components/TableCellInEditMode.tsx index 959d506..23e9269 100644 --- a/src/Components/TableCellInEditMode.tsx +++ b/src/Components/TableCellInEditMode.tsx @@ -52,9 +52,9 @@ function TableCellInEditMode(propsIn) { }; return type === 'dict' || type === 'list' || type === 'object' ? ( - // - - ) : typeOfValues.type === 'select' ? ( + + ) : // + typeOfValues.type === 'select' ? ( <> {}} + onChange={(e, val) => + onChange({ target: { value: val, name: name } }, row, index) + } + onInputChange={(e, val) => + onChange({ target: { value: val, name: name } }, row, index) + } // onInputChange={(event, newInputValue) => {}} renderInput={(params) => ( - + */} ) : type === 'bool' || type === 'boolean' ? ( + + +
+ {label} +
+ + + ); +} + +export default multilineText; diff --git a/src/layout/Canvas.tsx b/src/layout/Canvas.tsx index 040c588..10fb3be 100644 --- a/src/layout/Canvas.tsx +++ b/src/layout/Canvas.tsx @@ -14,6 +14,7 @@ import ReactFlow, { } from 'react-flow-renderer'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import bendingText from '../CustomEdges/BendingTextEdge'; +import multilineText from '../CustomEdges/MultilineTextEdge'; import getAround from '../CustomEdges/GetAroundEdge'; import FunctionNode from '../CustomNodes/FunctionNode'; @@ -45,6 +46,7 @@ const useStyles = makeStyles((theme: Theme) => const edgeTypes = { bendingText, + multilineText, getAround, }; diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index de39e38..64bb19a 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -34,6 +34,7 @@ import FormDialog from '../Components/FormDialog'; import ConfirmDialog from '../Components/ConfirmDialog'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from '../Components/General/ErrorFallback'; +import MenuPopover from '../Components/MenuPopover'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'; @@ -165,6 +166,16 @@ export default function Dashboard() { setAnchorEl(null); }; + const handlePopoverOpen = ( + event: React.MouseEvent + ) => { + setAnchorEl(event.currentTarget); + }; + + const handlePopoverClose = () => { + setAnchorEl(null); + }; + return ( <>
+
@@ -267,11 +279,7 @@ export default function Dashboard() {
- + - - - - - - - - - +
( false ); - + console.log(selectedElement); const graphRF = state((state) => state.graphRF); const setGraphRF = state((state) => state.setGraphRF); const workingGraph = state((state) => state.workingGraph); diff --git a/src/utils/calcTasksForLink.ts b/src/utils/calcTasksForLink.ts index 159cc62..ae70bb0 100644 --- a/src/utils/calcTasksForLink.ts +++ b/src/utils/calcTasksForLink.ts @@ -19,7 +19,7 @@ export function calcTasksForLink( } if (targetTmp) { - sourceTask = calcTask('target', targetTmp, tasks, newNodeSubgraphs); + targetTask = calcTask('target', targetTmp, tasks, newNodeSubgraphs); } // if not found app does not break, put an empty skeleton @@ -30,6 +30,7 @@ export function calcTasksForLink( optional_input_names: [], required_input_names: [], }; + console.log(source, sourceTask, target, targetTask); return [sourceTask, targetTask]; } diff --git a/src/utils/toRFEwoksNodesUtils.ts b/src/utils/toRFEwoksNodesUtils.ts index 1112daf..7c61722 100644 --- a/src/utils/toRFEwoksNodesUtils.ts +++ b/src/utils/toRFEwoksNodesUtils.ts @@ -40,7 +40,7 @@ export function calcNodeType(inputsAl, outputsAll, task_type, id) { // locate the task and add required+optional-inputs + outputs export function calcTask(tasks, task_identifier, task_type) { let tempTask = tasks.find((tas) => tas.task_identifier === task_identifier); - + console.log(tasks, task_identifier, task_type); tempTask = tempTask ? tempTask // if you found the Task return it : task_type === 'graph' // if not found check if it is a graph -- GitLab From 90597c35116e91e03c7503c0b2dbb6967221b6e2 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Mon, 29 Aug 2022 17:46:27 +0200 Subject: [PATCH 08/12] executions subtable and popover menu ok --- package-lock.json | 25 +++ package.json | 1 + src/App.tsx | 11 + src/Components/DefaultInputs.tsx | 4 +- src/Components/DraggableDialog.tsx | 15 +- src/Components/EwoksUiInfo.tsx | 4 +- src/Components/ExecutionTable.tsx | 270 +++++++++++++++++++----- src/Components/GetFromServer.tsx | 11 +- src/Components/GetFromServerButtons.tsx | 52 ++--- src/Components/ManageWorkflows.tsx | 5 +- src/Components/MenuPopover.tsx | 11 +- src/Components/TableCellInEditMode.tsx | 6 +- src/index.tsx | 12 +- src/layout/Dashboard.tsx | 28 ++- src/layout/SignUp.tsx | 37 +++- 15 files changed, 392 insertions(+), 100 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1385b2f..ea40153 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8775,6 +8775,14 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -15191,6 +15199,23 @@ } } }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", diff --git a/package.json b/package.json index 294a3b1..4386b61 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-json-view": "latest", "react-reflex": "^4.0.9", "react-rnd": "^10.3.4", + "react-router-dom": "^6.3.0", "react-use": "^17.3.1", "socket.io-client": "^4.4.1", "zustand": "^3.5.10" diff --git a/src/App.tsx b/src/App.tsx index 7e95168..b8ac572 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,10 @@ import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Dashboard from './layout/Dashboard'; import 'react-reflex/styles.css'; +// import ReactDOM from 'react-dom/client'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import SettingsInfoDrawer from './Components/SettingsInfoDrawer'; +import { Link } from 'react-router-dom'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -27,6 +31,13 @@ function App() { return (
+ {/* Editing Workflows + + + } /> + } /> + + */}
); } diff --git a/src/Components/DefaultInputs.tsx b/src/Components/DefaultInputs.tsx index ff202eb..3ce9c07 100644 --- a/src/Components/DefaultInputs.tsx +++ b/src/Components/DefaultInputs.tsx @@ -78,8 +78,8 @@ export default function DefaultInputs(props) { { type: 'select', values: [ - ...element.optional_input_names, - ...element.required_input_names, + ...(element.optional_input_names || []), + ...(element.required_input_names || []), ], }, { type: 'input' }, diff --git a/src/Components/DraggableDialog.tsx b/src/Components/DraggableDialog.tsx index a6c2068..e370d15 100644 --- a/src/Components/DraggableDialog.tsx +++ b/src/Components/DraggableDialog.tsx @@ -33,6 +33,7 @@ export default function DraggableDialog(props) { const [name, setName] = React.useState(''); const [callbackProps, setCallbackProps] = React.useState({}); const graphRF = state((state) => state.graphRF); + const setOpenSnackbar = state((state) => state.setOpenSnackbar); const [selection, setSelection] = React.useState('ewoks'); @@ -56,9 +57,17 @@ export default function DraggableDialog(props) { }; const handleSave = () => { - setIsOpen(false); - // console.log(name, graph, callbackProps); - props.setValue(name, graph, callbackProps); + if (name) { + setIsOpen(false); + // console.log(name, graph, callbackProps); + props.setValue(name, graph, callbackProps); + } else { + setOpenSnackbar({ + open: true, + text: 'Please put a Name for the parameter!', + severity: 'warning', + }); + } }; const handleChange = ( diff --git a/src/Components/EwoksUiInfo.tsx b/src/Components/EwoksUiInfo.tsx index ab40030..eea47d4 100644 --- a/src/Components/EwoksUiInfo.tsx +++ b/src/Components/EwoksUiInfo.tsx @@ -19,7 +19,9 @@ export default function EwoksUiInfo(props) { const setOpenSnackbar = state((state) => state.setOpenSnackbar); const closeDialog = async () => { - props.closeDialog(); + if (props.closeDialog) { + props.closeDialog(); + } try { const response = await getWorkflow('tutorial_Graph'); if (response.data) { diff --git a/src/Components/ExecutionTable.tsx b/src/Components/ExecutionTable.tsx index c675e3a..a55510f 100644 --- a/src/Components/ExecutionTable.tsx +++ b/src/Components/ExecutionTable.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +/* eslint-disable sonarjs/cognitive-complexity */ +import React, { useState } from 'react'; import Box from '@material-ui/core/Box'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; @@ -21,7 +22,14 @@ import FilterListIcon from '@material-ui/icons/FilterList'; import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye'; import ExecutionFilters from './ExecutionFilters'; import state from '../store/state'; -import type { Event } from '../types'; +import type { Event, ExecutedJobsResponse } from '../types'; +import { Link } from 'react-router-dom'; +import { Fab, makeStyles } from '@material-ui/core'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; +import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; +import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; +import Collapse from '@material-ui/core/Collapse'; +import { getExecutionEvents } from '../utils/api'; interface Data { host_name: number; @@ -101,6 +109,12 @@ interface HeadCell { } const headCells: readonly HeadCell[] = [ + { + id: 'details', + numeric: false, + disablePadding: true, + label: 'details', + }, { id: 'workflow_id', numeric: false, @@ -291,13 +305,26 @@ const formatedTime = (time) => { }; export default function EnhancedTable() { - const [order, setOrder] = React.useState('asc'); - const [orderBy, setOrderBy] = React.useState('workflow_id'); - const [selected, setSelected] = React.useState([]); - const [page, setPage] = React.useState(0); - const [dense, setDense] = React.useState(false); - const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('workflow_id'); + const [selected, setSelected] = useState([]); + const [expandRow, setExpandRow] = useState(''); + const [page, setPage] = useState(0); + const [dense, setDense] = useState(true); + const [rowsPerPage, setRowsPerPage] = useState(25); const executedWorkflows = state((state) => state.executedWorkflows); + const executedEvents = state((state) => state.executedEvents); + const [open, setOpen] = useState(false); + const [eventsForWorflow, setEventsForWorflow] = useState([]); + + const useRowStyles = makeStyles({ + root: { + '& > *': { + borderBottom: 'unset', + }, + }, + }); + const classes = useRowStyles(); const handleRequestSort = ( event: React.MouseEvent, @@ -318,9 +345,12 @@ export default function EnhancedTable() { }; const handleClick = (event: React.MouseEvent, name: string) => { + console.log(event, name); const selectedIndex = selected.indexOf(name); let newSelected: readonly string[] = []; + // if (event.target) + if (selectedIndex === -1) { newSelected = [...selected, name]; } else if (selectedIndex === 0) { @@ -360,6 +390,27 @@ export default function EnhancedTable() { ? Math.max(0, (1 + page) * rowsPerPage - executedWorkflows.length) : 0; + async function setOpenRow(job_id) { + if (expandRow === job_id || expandRow === '') { + setOpen(!open); + } + setExpandRow(job_id); + try { + const response = await getExecutionEvents({ job_id }); + if (response.data) { + const execJobs = response.data as ExecutedJobsResponse; + setEventsForWorflow(execJobs.jobs[0]); + } else { + /* eslint-disable no-console */ + console.log('no response data'); + } + } catch (error) { + console.log(error); + } + + console.log(executedEvents, eventsForWorflow); + } + return ( @@ -371,7 +422,11 @@ export default function EnhancedTable() { borderRadius: '10px', }} > -
+
handleClick(event, row[0].job_id)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row[0].job_id} - selected={isItemSelected} - style={{ whiteSpace: 'nowrap' }} - > - - - - + - {row[0].workflow_id || row[1].workflow_id} - - {row[0].job_id} - - {formatedTime(row[0] && row[0].time)} - - - {formatedTime(row[1] && row[1].time)} - - {/* + + + handleClick(event, row[0].job_id) + } + /> + + + setOpenRow(row[0].job_id)} + > + {open && expandRow === row[0].job_id ? ( + + ) : ( + + )} + + + + {/* || row[1].workflow_id */} + {row[1].workflow_id} + + {row[0].job_id} + + {formatedTime(row[0] && row[0].time)} + + + {formatedTime(row[1] && row[1].time)} + + {/* {formatedTime( new Date( row[1].time.getTime() - row[0].time.getTime() ) )} */} - {row[0].process_id} - {row[0].user_name} - {row[0].host_name} - {/* {row[0].input_uris} + {row[0].process_id} + {row[0].user_name} + {row[0].host_name} + {/* {row[0].input_uris} {row[0].output_uris} */} - + + + + + + + Execution Events + +
+ + + Time + progress + outputs + inputs + type + error + error_traceback + error_message + + + + {eventsForWorflow.map((ev) => ( + + + {ev.time} + + {ev.progress} + + {ev.output_uris} + + + {ev.input_uris} + + + {ev.type} + + + {ev.error && ev.error.toString()} + + + {ev.error_traceback} + + + {ev.error_message} + + + ))} + +
+ + + + + ); })} {emptyRows > 0 && ( @@ -467,6 +619,26 @@ export default function EnhancedTable() { control={} label="Dense padding" /> + + + Edit Workflows + + + + + + ); } diff --git a/src/Components/GetFromServer.tsx b/src/Components/GetFromServer.tsx index 5c9744f..b29f6ad 100644 --- a/src/Components/GetFromServer.tsx +++ b/src/Components/GetFromServer.tsx @@ -7,14 +7,16 @@ import GetFromServerButtons from './GetFromServerButtons'; const useStyles = DashboardStyle; -export default function GetFromServer() { +export default function GetFromServer(props) { const classes = useStyles(); - + const { workflowIdInAutocomplete } = props; + console.log(props); const [workflowId, setWorkflowId] = React.useState(''); const setInputValue = (workflowDetails) => { if (workflowDetails && workflowDetails.id) { setWorkflowId(workflowDetails.id || ''); + workflowIdInAutocomplete(workflowDetails.id || ''); } }; @@ -37,7 +39,10 @@ export default function GetFromServer() { /> - + ); } diff --git a/src/Components/GetFromServerButtons.tsx b/src/Components/GetFromServerButtons.tsx index abe815c..e794555 100644 --- a/src/Components/GetFromServerButtons.tsx +++ b/src/Components/GetFromServerButtons.tsx @@ -9,7 +9,7 @@ import { getWorkflow } from '../utils/api'; import ConfirmDialog from './ConfirmDialog'; export default function GetFromServerButtons(props) { - const { workflowId } = props; + const { workflowId, showButtons } = props; const setSubGraph = state((state) => state.setSubGraph); const setWorkingGraph = state((state) => state.setWorkingGraph); @@ -100,29 +100,33 @@ export default function GetFromServerButtons(props) { agreeCallback={getFromServer} disagreeCallback={disAgreeSaveWithout} /> - { - /* eslint-disable no-console */ - console.log('Getting from server'); - }} - > - - - { - /* eslint-disable no-console */ - console.log('Getting subgraph from server'); - }} - > - - + {showButtons[0] && ( + { + /* eslint-disable no-console */ + console.log('Getting from server'); + }} + > + + + )} + {showButtons[1] && ( + { + /* eslint-disable no-console */ + console.log('Getting subgraph from server'); + }} + > + + + )} ); } diff --git a/src/Components/ManageWorkflows.tsx b/src/Components/ManageWorkflows.tsx index 8c2c89d..f3a90c6 100644 --- a/src/Components/ManageWorkflows.tsx +++ b/src/Components/ManageWorkflows.tsx @@ -62,7 +62,10 @@ export default function ManageWorkflows() { - + diff --git a/src/Components/MenuPopover.tsx b/src/Components/MenuPopover.tsx index bda14dc..8932bc3 100644 --- a/src/Components/MenuPopover.tsx +++ b/src/Components/MenuPopover.tsx @@ -4,6 +4,7 @@ import Popover from '@material-ui/core/Popover'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import SaveGetFromDisk from '../Components/SaveGetFromDisk'; +import GetFromServerButtons from './GetFromServerButtons'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -13,7 +14,11 @@ const useStyles = makeStyles((theme: Theme) => }) ); -export default function MenuPopover({ anchorEl, handleClose }) { +export default function MenuPopover({ + anchorEl, + handleClose, + workflowIdInTextbox, +}) { const classes = useStyles(); // const [anchorEl, setAnchorEl] = React.useState( // null @@ -55,6 +60,10 @@ export default function MenuPopover({ anchorEl, handleClose }) { }} > + {/* The content of the Popover. */} diff --git a/src/Components/TableCellInEditMode.tsx b/src/Components/TableCellInEditMode.tsx index 23e9269..1c0f036 100644 --- a/src/Components/TableCellInEditMode.tsx +++ b/src/Components/TableCellInEditMode.tsx @@ -36,7 +36,11 @@ function TableCellInEditMode(propsIn) { useEffect(() => { // console.log(row); - setBoolVal(row.value !== null ? row.value.toString() : 'null'); + setBoolVal( + row.value !== null && row.value !== undefined + ? row.value.toString() + : 'null' + ); }, [row.value, row]); const onChangeBool = (e, row, index) => { diff --git a/src/index.tsx b/src/index.tsx index 0c99e42..d11ad38 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,24 @@ import { StrictMode } from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; import 'normalize.css'; import './styles/index.css'; import App from './App'; +// import SignUp from './layout/SignUp'; +import EwoksUiInfo from './Components/EwoksUiInfo'; +import ExecutionTable from './Components/ExecutionTable'; ReactDOM.render( - + + + } /> + } /> + } /> + + , document.querySelector('#root') ); diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 64bb19a..611df23 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -47,15 +47,16 @@ export default function Dashboard() { const redoF = React.useRef(null); const saveToServerF = React.useRef(null); - const [open, setOpen] = React.useState(true); - const [openDrawers, setOpenDrawers] = React.useState(true); - const [openSettings, setOpenSettings] = React.useState(false); - const [openInfo, setOpenInfo] = React.useState(false); + const [open, setOpen] = useState(true); + const [openDrawers, setOpenDrawers] = useState(true); + const [openSettings, setOpenSettings] = useState(false); + const [openInfo, setOpenInfo] = useState(false); + const [workflowIdInTextbox, setWorkflowIdInTextbox] = useState(''); const setWorkingGraph = state((state) => state.setWorkingGraph); const gettingFromServer = state((state) => state.gettingFromServer); const inExecutionMode = state((state) => state.inExecutionMode); const graphRF = state((state) => state.graphRF); - const [openSaveDialog, setOpenSaveDialog] = React.useState(false); + const [openSaveDialog, setOpenSaveDialog] = useState(false); const initializedGraph = state((state) => state.initializedGraph); const openSettingsDrawer = state((state) => state.openSettingsDrawer); const setOpenSettingsDrawer = state((state) => state.setOpenSettingsDrawer); @@ -63,7 +64,7 @@ export default function Dashboard() { const setCanvasGraphChanged = state((state) => state.setCanvasGraphChanged); const [openAgreeDialog, setOpenAgreeDialog] = useState(false); const undoIndex = state((state) => state.undoIndex); - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = useState(null); useEffect(() => { // console.log(openDrawers); @@ -176,6 +177,11 @@ export default function Dashboard() { setAnchorEl(null); }; + function workflowIdInAutocomplete(id) { + console.log(id, anchorEl); + setWorkflowIdInTextbox(id); + } + return ( <>
- +
- +
- + + + + Edit Workflows + + + + + + + - tutorial_Graph + Monitor Workflows - - Already have an account? Sign in - + {/* */} + Already have an account? Sign in + {/* */} -- GitLab From 1b6f6949c77935b3600283d8d3e0d17f159d83ab Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Tue, 30 Aug 2022 17:31:17 +0200 Subject: [PATCH 09/12] fixed bugs from new additions --- src/App.tsx | 11 ----- src/Components/CellEditInJson.tsx | 1 + src/Components/Conditions.tsx | 2 - src/Components/CustomTableCell.tsx | 15 +----- src/Components/DataMapping.tsx | 6 +-- src/Components/DefaultInputs.tsx | 6 +-- src/Components/EditableTable.tsx | 56 ++++++++++++++-------- src/Components/ExecuteWorkflow.tsx | 2 + src/Components/ExecutionDetails.tsx | 25 ++++++---- src/Components/ExecutionTable.tsx | 25 ++++++++-- src/Components/GetFromServer.tsx | 2 +- src/Components/GraphLabelComment.tsx | 8 +--- src/Components/LabelComment.tsx | 4 -- src/Components/LinkDetails.tsx | 2 +- src/Components/MenuPopover.tsx | 36 -------------- src/Components/NodeDetails.tsx | 66 +------------------------- src/Components/TableCellInEditMode.tsx | 8 ++-- src/CustomEdges/BendingTextEdge.tsx | 38 ++++++--------- src/CustomEdges/MultilineTextEdge.tsx | 27 +++++------ src/CustomNodes/ExecutionStepsNode.tsx | 1 + src/layout/Canvas.tsx | 10 +++- src/layout/Dashboard.tsx | 63 ++---------------------- src/layout/DashboardStyle.js | 1 + src/layout/sidebar.tsx | 2 +- src/store/currentExecutionEvent.ts | 2 +- src/store/executingEvents.ts | 6 +-- src/store/graphRF.ts | 2 +- src/store/selectedElement.ts | 1 - src/utils/calcTasksForLink.ts | 2 +- src/utils/curateGraph.ts | 2 + src/utils/toEwoksNodes.ts | 39 ++++++++------- src/utils/toRFEwoksNodesUtils.ts | 2 +- 32 files changed, 165 insertions(+), 308 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b8ac572..7e95168 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,6 @@ import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Dashboard from './layout/Dashboard'; import 'react-reflex/styles.css'; -// import ReactDOM from 'react-dom/client'; -import { BrowserRouter, Routes, Route } from 'react-router-dom'; -import SettingsInfoDrawer from './Components/SettingsInfoDrawer'; -import { Link } from 'react-router-dom'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -31,13 +27,6 @@ function App() { return (
- {/* Editing Workflows - - - } /> - } /> - - */}
); } diff --git a/src/Components/CellEditInJson.tsx b/src/Components/CellEditInJson.tsx index fe8d921..c3f5ebf 100644 --- a/src/Components/CellEditInJson.tsx +++ b/src/Components/CellEditInJson.tsx @@ -5,6 +5,7 @@ export default function CellEditInJson(propsIn) { const { row, name, type } = props; const onChange = (edit, row) => { + /* eslint-disable no-console */ console.log(edit, row, name); }; diff --git a/src/Components/Conditions.tsx b/src/Components/Conditions.tsx index dd16588..82050a7 100644 --- a/src/Components/Conditions.tsx +++ b/src/Components/Conditions.tsx @@ -12,9 +12,7 @@ export default function Conditions(props) { const [conditions, setConditions] = React.useState([]); const setOpenSnackbar = state((state) => state.setOpenSnackbar); - const graphRF = state((state) => state.graphRF); const setSelectedElement = state((state) => state.setSelectedElement); - const [elementL] = React.useState({} as EwoksRFLink); useEffect(() => { if (element && element.data && element.data.conditions) { diff --git a/src/Components/CustomTableCell.tsx b/src/Components/CustomTableCell.tsx index 6c66ddd..d3c9366 100644 --- a/src/Components/CustomTableCell.tsx +++ b/src/Components/CustomTableCell.tsx @@ -3,19 +3,6 @@ import TableCell from '@material-ui/core/TableCell'; import TableCellInEditMode from './TableCellInEditMode'; -const useStyles = makeStyles(() => ({ - tableCell: { - width: 70, - height: 20, - padding: '1px', - }, - input: { - width: 90, - height: 20, - padding: '1px', - }, -})); - function CustomTableCell({ index, row, name, onChange, type, typeOfValues }) { const useStyles = makeStyles(() => ({ tableCell: { @@ -31,7 +18,7 @@ function CustomTableCell({ index, row, name, onChange, type, typeOfValues }) { })); const classes = useStyles(); const { isEditMode } = row; - console.log(index, row, name, type, typeOfValues); + // console.log(index, row, name, type, typeOfValues); return ( diff --git a/src/Components/DataMapping.tsx b/src/Components/DataMapping.tsx index 567f40e..6ae0aa1 100644 --- a/src/Components/DataMapping.tsx +++ b/src/Components/DataMapping.tsx @@ -9,7 +9,7 @@ import SidebarTooltip from './SidebarTooltip'; export default function DataMappingComponent(props) { const { element } = props; - console.log(props); + const setOpenSnackbar = state((state) => state.setOpenSnackbar); const setSelectedElement = state((state) => state.setSelectedElement); const [dataMapping, setDataMapping] = React.useState([]); @@ -17,10 +17,10 @@ export default function DataMappingComponent(props) { {} as EwoksRFLink ); const graphRF = state((state) => state.graphRF); - console.log(props); + useEffect(() => { setElementL(element); - console.log(element); + if (element.data && element.data.data_mapping) { setDataMapping(element.data.data_mapping); } diff --git a/src/Components/DefaultInputs.tsx b/src/Components/DefaultInputs.tsx index 3ce9c07..6014831 100644 --- a/src/Components/DefaultInputs.tsx +++ b/src/Components/DefaultInputs.tsx @@ -1,17 +1,16 @@ import React, { useEffect } from 'react'; -import type { DataMapping, EwoksRFNode, Inputs } from '../types'; +import type { EwoksRFNode, Inputs } from '../types'; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; import EditableTable from './EditableTable'; import { IconButton } from '@material-ui/core'; import state from '../store/state'; import SidebarTooltip from './SidebarTooltip'; -import LabelComment from './LabelComment'; export default function DefaultInputs(props) { const { element } = props; - console.log(props); + const [defaultInputs, setDefaultInputs] = React.useState([]); const setSelectedElement = state((state) => state.setSelectedElement); @@ -22,6 +21,7 @@ export default function DefaultInputs(props) { const addDefaultInputs = () => { const el = element as EwoksRFNode; const elIn = el.default_inputs; + if (elIn && elIn[elIn.length - 1] && elIn[elIn.length - 1].id === '') { // console.log('should not ADD default'); } else { diff --git a/src/Components/EditableTable.tsx b/src/Components/EditableTable.tsx index 685f863..0d7ea38 100644 --- a/src/Components/EditableTable.tsx +++ b/src/Components/EditableTable.tsx @@ -1,3 +1,4 @@ +/* eslint-disable sonarjs/cognitive-complexity */ import React, { useEffect } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; @@ -9,11 +10,11 @@ import Paper from '@material-ui/core/Paper'; import IconButton from '@material-ui/core/IconButton'; import EditIcon from '@material-ui/icons/EditOutlined'; import DoneIcon from '@material-ui/icons/DoneAllTwoTone'; -import RevertIcon from '@material-ui/icons/NotInterestedOutlined'; import { FormControl, MenuItem, Select } from '@material-ui/core'; import CustomTableCell from './CustomTableCell'; import DraggableDialog from './DraggableDialog'; import DeleteIcon from '@material-ui/icons/Delete'; +import state from '../store/state'; const useStyles = makeStyles(() => ({ root: { @@ -62,10 +63,11 @@ function EditableTable(props) { const [openDialog, setOpenDialog] = React.useState(false); const [dialogContent, setDialogContent] = React.useState({}); const [disableSelectType, setDisableSelectType] = React.useState(false); + const setOpenSnackbar = state((state) => state.setOpenSnackbar); const { defaultValues } = props; const { headers } = props; - console.log(props); + const typesOfInputs = ['bool', 'number', 'string', 'list', 'dict', 'null']; // // console.log(defaultValues, val, rows, props, typeOfInputs); @@ -112,8 +114,6 @@ function EditableTable(props) { }; function onToggleEditMode(id, index, command) { - // console.log(props, id, rows, props.defaultValues, command, typeOfInputs); - if (command === 'edit' && ['list', 'dict'].includes(typeOfInputs[index])) { let initialValue: string | [] | {} = ''; @@ -141,29 +141,46 @@ function EditableTable(props) { callbackProps: { rows, id }, }); } - setRows(() => { - return rows.map((row) => { - if (row.id === id) { - return { - ...row, - id: row.name.replace(' ', '_'), - // value: row.value, - isEditMode: !row.isEditMode, - }; - } - return row; + + const oldRows = [...rows].filter((row, inde) => index !== inde); + + if ( + rows[index].name !== '' && + oldRows.map((oldro) => oldro.name).includes(rows[index].name) + ) { + setOpenSnackbar({ + open: true, + text: 'Not allowed to assign the same property TWICE!', + severity: 'error', }); - }); + // setRows(oldRows); + } else { + setRows(() => { + return rows.map((row) => { + if (row.id === id) { + return { + ...row, + id: row.name.replace(' ', '_'), + // value: row.value, + isEditMode: !row.isEditMode, + }; + } + return row; + }); + }); + if (command === 'done') { + props.valuesChanged(rows); + } + } if (command === 'done') { setDisableSelectType(true); - props.valuesChanged(rows); } else { setDisableSelectType(false); } } const onChange = (e, row, index) => { - console.log(e, e.target.value, e.target.name, row, index); + // console.log(e, e.target.value, e.target.name, row, index); if ( ['string', 'bool', 'number', 'boolean', 'null'].includes(typeOfInputs[0]) ) { @@ -225,7 +242,7 @@ function EditableTable(props) { }; const changedTypeOfInputs = (e, row, index) => { - console.log(e.target.value, row, props, index); + // console.log(e.target.value, row, props, index); if (e.target.value === 'null') { const newRows = rows.map((rowe) => { if (rowe.id === row.id) { @@ -240,7 +257,6 @@ function EditableTable(props) { tOfI[index] = e.target.value; setTypeOfInputs(tOfI); if (['dict', 'list'].includes(e.target.value)) { - console.log('should open dialog'); showEditableDialog({ name: row.id, title: e.target.value === 'list' ? 'Edit list' : 'Edit dict', diff --git a/src/Components/ExecuteWorkflow.tsx b/src/Components/ExecuteWorkflow.tsx index b9249b5..76fcefe 100644 --- a/src/Components/ExecuteWorkflow.tsx +++ b/src/Components/ExecuteWorkflow.tsx @@ -26,6 +26,7 @@ export default function ExecuteWorkflow() { useEffect(() => { socket.on('Executing', (data) => { + // console.log(data); setExecutedEvents(data as Event); }); @@ -35,6 +36,7 @@ export default function ExecuteWorkflow() { }, [setExecutedEvents]); const checkAndExecute = () => { + // console.log(canvasGraphChanged, undoIndex); if (canvasGraphChanged && undoIndex !== 0) { setOpenAgreeDialog(true); } else { diff --git a/src/Components/ExecutionDetails.tsx b/src/Components/ExecutionDetails.tsx index af148c5..d61e0e4 100644 --- a/src/Components/ExecutionDetails.tsx +++ b/src/Components/ExecutionDetails.tsx @@ -47,7 +47,7 @@ export default function ExecutionDetails() { // DOC: calculate the executing spinners for live execution const setExecutingEvents = state((state) => state.setExecutingEvents); - const executingEvents = state((state) => state.executingEvents); + // const executingEvents = state((state) => state.executingEvents); const setInExecutionMode = state((state) => state.setInExecutionMode); @@ -120,7 +120,6 @@ export default function ExecutionDetails() { return { ...(job[0].workflow_id ? job[0] : job[1]), status: 'finished' }; }); - console.log(executedEvents, wjobs, allWorkflowsL); setWorkflows([...allWorkflowsL, ...wjobs]); }, [executedEvents, watchedWorkflows]); @@ -137,8 +136,11 @@ export default function ExecutionDetails() { // }; function workflowDetails(work) { - /* eslint-disable no-console */ - setSelectedWorkflow(work); + if (selectedWorkflow !== work) { + setSelectedWorkflow(work); + } else { + setSelectedWorkflow({} as Event); + } } function formatedDate(job: Event) { @@ -153,7 +155,7 @@ export default function ExecutionDetails() { const dat = new Date(job.time); return `${ - label ? label.slice(0, 20) : (job.workflow_id as string) + label ? label.slice(0, 20) : job.workflow_id } ${dat.getHours()}:${dat.getMinutes()} ${dat.getDate()}/${ dat.getMonth() + 1 }/${dat.getFullYear()}`; @@ -215,7 +217,7 @@ export default function ExecutionDetails() { } else { // setTimeout(() => { const eventsL = getEventsForJob(); - console.log(eventsL); + setInExecutionMode(true); eventsL.forEach((ev) => setExecutingEvents(ev, false)); // }, 400); @@ -230,19 +232,19 @@ export default function ExecutionDetails() { // Check if it is watched workflow from server or a live execution if (isInWatchedIndex !== -1) { - console.log('it is part of the history'); + // console.log('it is part of the history'); events = watchedWorkflows[isInWatchedIndex].map((ev, index) => { return { ...ev, id: index + 1 }; }); } else { - console.log('it is live executed'); + // console.log('it is live executed'); events = executedEvents.filter( (ev) => ev.workflow_id === selectedWorkflow.workflow_id && ev.job_id === selectedWorkflow.job_id ); } - console.log(events); + // console.log(events); setCurrentWatchedEvents(events); return events; } @@ -296,6 +298,7 @@ export default function ExecutionDetails() { work.status === 'finished' ? '#b6beec' : 'rgb(124, 163, 198)', borderRadius: '5px', margin: '2px', + width: '98%', }} >
diff --git a/src/Components/ExecutionTable.tsx b/src/Components/ExecutionTable.tsx index a55510f..c9e4f2b 100644 --- a/src/Components/ExecutionTable.tsx +++ b/src/Components/ExecutionTable.tsx @@ -313,7 +313,6 @@ export default function EnhancedTable() { const [dense, setDense] = useState(true); const [rowsPerPage, setRowsPerPage] = useState(25); const executedWorkflows = state((state) => state.executedWorkflows); - const executedEvents = state((state) => state.executedEvents); const [open, setOpen] = useState(false); const [eventsForWorflow, setEventsForWorflow] = useState([]); @@ -391,10 +390,14 @@ export default function EnhancedTable() { : 0; async function setOpenRow(job_id) { - if (expandRow === job_id || expandRow === '') { + if (expandRow === job_id) { setOpen(!open); + } else if (expandRow === '' || expandRow !== job_id) { + setOpen(true); } + setExpandRow(job_id); + try { const response = await getExecutionEvents({ job_id }); if (response.data) { @@ -407,8 +410,6 @@ export default function EnhancedTable() { } catch (error) { console.log(error); } - - console.log(executedEvents, eventsForWorflow); } return ( @@ -546,6 +547,10 @@ export default function EnhancedTable() { error error_traceback error_message + node_id + task_id + task_uri + {/* id */} @@ -582,6 +587,18 @@ export default function EnhancedTable() { {ev.error_message} + + {ev.node_id} + + + {ev.task_id} + + + {ev.task_uri} + + {/* + {ev.id} + */} ))} diff --git a/src/Components/GetFromServer.tsx b/src/Components/GetFromServer.tsx index b29f6ad..cb211af 100644 --- a/src/Components/GetFromServer.tsx +++ b/src/Components/GetFromServer.tsx @@ -10,7 +10,7 @@ const useStyles = DashboardStyle; export default function GetFromServer(props) { const classes = useStyles(); const { workflowIdInAutocomplete } = props; - console.log(props); + const [workflowId, setWorkflowId] = React.useState(''); const setInputValue = (workflowDetails) => { diff --git a/src/Components/GraphLabelComment.tsx b/src/Components/GraphLabelComment.tsx index fda6b20..fb49360 100644 --- a/src/Components/GraphLabelComment.tsx +++ b/src/Components/GraphLabelComment.tsx @@ -1,12 +1,6 @@ import React, { useEffect } from 'react'; -import { - FormControl, - InputAdornment, - InputLabel, - OutlinedInput, - TextField, -} from '@material-ui/core'; +import { FormControl, InputLabel, OutlinedInput } from '@material-ui/core'; import DashboardStyle from '../layout/DashboardStyle'; import state from '../store/state'; import type { GraphDetails } from '../types'; diff --git a/src/Components/LabelComment.tsx b/src/Components/LabelComment.tsx index a898a9c..8f41dd7 100644 --- a/src/Components/LabelComment.tsx +++ b/src/Components/LabelComment.tsx @@ -2,8 +2,6 @@ import React, { useEffect } from 'react'; import type { EwoksRFLink } from '../types'; import { - Box, - Button, FormControl, InputLabel, OutlinedInput, @@ -111,7 +109,6 @@ export default function LabelComment(props) { options={labelChoices} value={label} onChange={(event, newValue: string | null) => { - console.log(newValue); setSelectedElement( { ...element, @@ -121,7 +118,6 @@ export default function LabelComment(props) { ); }} onInputChange={(event, newInputValue) => { - console.log(newInputValue); setSelectedElement( { ...element, diff --git a/src/Components/LinkDetails.tsx b/src/Components/LinkDetails.tsx index 9ee8d60..cfc73be 100644 --- a/src/Components/LinkDetails.tsx +++ b/src/Components/LinkDetails.tsx @@ -26,7 +26,7 @@ export default function LinkDetails(props) { ); const [onError, setOnError] = React.useState(false); const [advanced, setAdvanced] = React.useState(false); - console.log(props); + useEffect(() => { setElementL(element); setMapAllData(!!element.data.map_all_data || false); diff --git a/src/Components/MenuPopover.tsx b/src/Components/MenuPopover.tsx index 8932bc3..4cd0fa9 100644 --- a/src/Components/MenuPopover.tsx +++ b/src/Components/MenuPopover.tsx @@ -1,50 +1,17 @@ -import React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Popover from '@material-ui/core/Popover'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; import SaveGetFromDisk from '../Components/SaveGetFromDisk'; import GetFromServerButtons from './GetFromServerButtons'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - typography: { - padding: theme.spacing(2), - }, - }) -); - export default function MenuPopover({ anchorEl, handleClose, workflowIdInTextbox, }) { - const classes = useStyles(); - // const [anchorEl, setAnchorEl] = React.useState( - // null - // ); - - // const handleClick = (event: React.MouseEvent) => { - // setAnchorEl(event.currentTarget); - // }; - - // const handleClose = () => { - // setAnchorEl(null); - // }; - const open = Boolean(anchorEl); const id = open ? 'simple-popover' : undefined; return (
- {/* */} - {/* - The content of the Popover. - */}
); diff --git a/src/Components/NodeDetails.tsx b/src/Components/NodeDetails.tsx index 2f43a59..3c02168 100644 --- a/src/Components/NodeDetails.tsx +++ b/src/Components/NodeDetails.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; -import type { DataMapping, EwoksRFNode, Inputs } from '../types'; +import type { DataMapping, EwoksRFNode } from '../types'; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline'; import EditableTable from './EditableTable'; // import EditIcon from '@material-ui/icons/EditOutlined'; DONT DELETE @@ -38,7 +38,6 @@ export default function NodeDetails(props) { const setSelectedElement = state((state) => state.setSelectedElement); // const selectedElement = state((state) => state.selectedElement); // const [editProps, setEditProps] = React.useState(false); - const [defaultInputs, setDefaultInputs] = React.useState([]); const [inputsComplete, setInputsComplete] = React.useState(false); const [advanced, setAdvanced] = React.useState(false); const [defaultErrorNode, setDefaultErrorNode] = React.useState( @@ -93,7 +92,6 @@ export default function NodeDetails(props) { // setDefaultErrorAttributes(element.default_error_attributes); setDataMapping(element.default_error_attributes?.data_mapping); setMapAllData(element.default_error_attributes?.map_all_data || false); - setDefaultInputs(element.default_inputs ? element.default_inputs : []); }, [element.id, element]); const propChanged = (propKeyValue) => { @@ -104,38 +102,6 @@ export default function NodeDetails(props) { }); }; - const addDefaultInputs = () => { - const el = element as EwoksRFNode; - const elIn = el.default_inputs; - if (elIn && elIn[elIn.length - 1] && elIn[elIn.length - 1].id === '') { - // console.log('should not ADD default'); - } else { - setSelectedElement( - { - ...element, - default_inputs: [...elIn, { id: '', name: '', value: '' }], - }, - 'fromSaveElement' - ); - } - }; - - const defaultInputsChanged = (table) => { - setSelectedElement( - { - ...element, - default_inputs: table.map((dval) => { - return { - id: dval.name, - name: dval.name, - value: dval.value, - }; - }), - }, - 'fromSaveElement' - ); - }; - const inputsCompleteChanged = (event) => { setInputsComplete(event.target.checked); setSelectedElement( @@ -232,36 +198,6 @@ export default function NodeDetails(props) { - {/*
- - -
- Default Inputs - addDefaultInputs()} - > - - -
- - - {defaultInputs.length > 0 && ( - - )} -
*/}
Advanced diff --git a/src/Components/TableCellInEditMode.tsx b/src/Components/TableCellInEditMode.tsx index 1c0f036..a27af9d 100644 --- a/src/Components/TableCellInEditMode.tsx +++ b/src/Components/TableCellInEditMode.tsx @@ -4,10 +4,8 @@ import Input from '@material-ui/core/Input'; import { FormControl, FormControlLabel, - MenuItem, Radio, RadioGroup, - Select, TextField, } from '@material-ui/core'; import CellEditInJson from './CellEditInJson'; @@ -30,7 +28,7 @@ function TableCellInEditMode(propsIn) { const { props } = propsIn; const { index, row, name, onChange, type, typeOfValues } = props; const classes = useStyles(); - console.log(index, row, name, onChange, type, typeOfValues); + // console.log(index, row, name, onChange, type, typeOfValues); const [boolVal, setBoolVal] = React.useState(true); @@ -71,10 +69,10 @@ function TableCellInEditMode(propsIn) { options={typeOfValues.values} value={row[name]} onChange={(e, val) => - onChange({ target: { value: val, name: name } }, row, index) + onChange({ target: { value: val, name } }, row, index) } onInputChange={(e, val) => - onChange({ target: { value: val, name: name } }, row, index) + onChange({ target: { value: val, name } }, row, index) } // onInputChange={(event, newInputValue) => {}} renderInput={(params) => ( diff --git a/src/CustomEdges/BendingTextEdge.tsx b/src/CustomEdges/BendingTextEdge.tsx index 2431b1e..88b57de 100644 --- a/src/CustomEdges/BendingTextEdge.tsx +++ b/src/CustomEdges/BendingTextEdge.tsx @@ -1,4 +1,4 @@ -import { getBezierPath, getEdgeCenter } from 'react-flow-renderer'; +import { getBezierPath } from 'react-flow-renderer'; function bendingText({ id, @@ -11,21 +11,20 @@ function bendingText({ label = '', markerEnd, style = {}, - labelBgStyle, }) { - console.log( - style, - id, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - label, - markerEnd, - labelBgStyle - ); + // console.log( + // style, + // id, + // sourceX, + // sourceY, + // targetX, + // targetY, + // sourcePosition, + // targetPosition, + // label, + // markerEnd, + // labelBgStyle + // ); const edgePath = getBezierPath({ sourceX, sourceY, @@ -35,15 +34,6 @@ function bendingText({ targetPosition, }); - const [edgeCenterX, edgeCenterY] = getEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, - }); - - const foreignObjectSize = 100; - return ( <> { const graphElement: EwoksRFNode = nodes.find((el) => el.id === element.id); - setSelectedElement(graphElement); + + if ( + !( + graphElement.task_type === 'executionSteps' && + graphElement.type === 'executionSteps' + ) + ) { + setSelectedElement(graphElement); + } }; const onEdgeClick = (event, element?: Edge) => { diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 611df23..53ffb3b 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -1,13 +1,9 @@ import React, { useState, useEffect } from 'react'; import clsx from 'clsx'; import CssBaseline from '@material-ui/core/CssBaseline'; -import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; -import Divider from '@material-ui/core/Divider'; import Paper from '@material-ui/core/Paper'; -import MenuIcon from '@material-ui/icons/Menu'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import FiberNew from '@material-ui/icons/FiberNew'; import ImportContactsIcon from '@material-ui/icons/ImportContacts'; import Sidebar from './sidebar'; @@ -16,7 +12,7 @@ import { ReactFlowProvider } from 'react-flow-renderer'; import Canvas from './Canvas'; import UndoRedo from '../Components/UndoRedo'; import GetFromServer from '../Components/GetFromServer'; -import { Button, Fab, IconButton, Menu, MenuItem } from '@material-ui/core'; +import { Fab, IconButton } from '@material-ui/core'; import SettingsIcon from '@material-ui/icons/Settings'; import SimpleSnackbar from '../Components/Snackbar'; import SettingsInfoDrawer from '../Components/SettingsInfoDrawer'; @@ -25,7 +21,6 @@ import LinearSpinner from '../Components/LinearSpinner'; import ExecuteWorkflow from '../Components/ExecuteWorkflow'; import Tooltip from '@material-ui/core/Tooltip'; import DashboardStyle from './DashboardStyle'; -import SaveGetFromDisk from '../Components/SaveGetFromDisk'; import SaveToServer from '../Components/SaveToServer'; import tooltipText from '../Components/TooltipText'; import state from '../store/state'; @@ -47,7 +42,6 @@ export default function Dashboard() { const redoF = React.useRef(null); const saveToServerF = React.useRef(null); - const [open, setOpen] = useState(true); const [openDrawers, setOpenDrawers] = useState(true); const [openSettings, setOpenSettings] = useState(false); const [openInfo, setOpenInfo] = useState(false); @@ -123,13 +117,6 @@ export default function Dashboard() { setOpenDrawers(true); }; - const handleDrawerOpen = () => { - setOpen(true); - // setEditing(!editing); - }; - const handleDrawerClose = () => { - setOpen(false); - }; const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight); const handleKeyDown = (event) => { @@ -167,18 +154,7 @@ export default function Dashboard() { setAnchorEl(null); }; - const handlePopoverOpen = ( - event: React.MouseEvent - ) => { - setAnchorEl(event.currentTarget); - }; - - const handlePopoverClose = () => { - setAnchorEl(null); - }; - function workflowIdInAutocomplete(id) { - console.log(id, anchorEl); setWorkflowIdInTextbox(id); } @@ -207,21 +183,9 @@ export default function Dashboard() { - - - - {/* -
- - - -
- - */} {/* */} @@ -374,8 +321,8 @@ export default function Dashboard() { style={{ display: 'flex', alignItems: 'center', - width: '0.225rem', - height: '950px', + width: '0.325rem', + height: '970px', backgroundColor: 'rgb(233, 235, 247)', borderRight: 'none !important', borderLeftColor: '#eee !important', diff --git a/src/layout/DashboardStyle.js b/src/layout/DashboardStyle.js index 3c31833..2c95214 100644 --- a/src/layout/DashboardStyle.js +++ b/src/layout/DashboardStyle.js @@ -128,6 +128,7 @@ const DashboardStyle = makeStyles((theme) => ({ executionSide: { margin: '8px 5px', wordBreak: 'break-word', + width: '98%', }, })); diff --git a/src/layout/sidebar.tsx b/src/layout/sidebar.tsx index 9de18b0..c4aebb9 100644 --- a/src/layout/sidebar.tsx +++ b/src/layout/sidebar.tsx @@ -61,7 +61,6 @@ export default function Sidebar() { const [openExecutionDetails, setOpenExecutionDetails] = useState( false ); - console.log(selectedElement); const graphRF = state((state) => state.graphRF); const setGraphRF = state((state) => state.setGraphRF); const workingGraph = state((state) => state.workingGraph); @@ -326,6 +325,7 @@ export default function Sidebar() { {inExecutionMode ? (
+
) : ( <> diff --git a/src/store/currentExecutionEvent.ts b/src/store/currentExecutionEvent.ts index b22476e..424d808 100644 --- a/src/store/currentExecutionEvent.ts +++ b/src/store/currentExecutionEvent.ts @@ -3,7 +3,7 @@ const currentExecutionEvent = (set) => ({ currentExecutionEvent: 0, setCurrentExecutionEvent: (indexOfEvent) => { - console.log(indexOfEvent); + // console.log(indexOfEvent); set((state) => ({ ...state, currentExecutionEvent: indexOfEvent, diff --git a/src/store/executingEvents.ts b/src/store/executingEvents.ts index e546e60..c632060 100644 --- a/src/store/executingEvents.ts +++ b/src/store/executingEvents.ts @@ -119,6 +119,8 @@ const executingEvents = (set, get) => ({ // ExecutionStepNode with the old number before putting the new node // If not in execution dont affect the canvas + // TODO: if not the specific job_id dont afect the canvas in case of viewing + // the same workflow_id but another job while some others are being executed if (prevState.inExecutionMode) { set((state) => ({ ...state, @@ -136,9 +138,7 @@ const executingEvents = (set, get) => ({ { data: { label: `${tempLabel},${(execEvent.id as unknown) as string}`, - node_id: execEvent.node_id, - type: execEvent.type, - values: { a: 1, b: 2 }, + event: execEvent, }, id: execEvent.time, task_type: 'executionSteps', diff --git a/src/store/graphRF.ts b/src/store/graphRF.ts index 352b6a9..72d3938 100644 --- a/src/store/graphRF.ts +++ b/src/store/graphRF.ts @@ -16,7 +16,7 @@ const graphRF = (set, get) => ({ graphRF: tutorialGraph, setGraphRF: (graphRF, isChangeToCanvasGraph) => { - if (isChangeToCanvasGraph) { + if (isChangeToCanvasGraph && !get().inExecutionMode) { get().setCanvasGraphChanged(true); } else if (isChangeToCanvasGraph === false) { get().setCanvasGraphChanged(false); diff --git a/src/store/selectedElement.ts b/src/store/selectedElement.ts index 4c64564..1a3dc88 100644 --- a/src/store/selectedElement.ts +++ b/src/store/selectedElement.ts @@ -5,7 +5,6 @@ const selectedElement = (set, get) => ({ setSelectedElement: (element, from) => { const prevState = get((prev) => prev); - console.log(element, from); const wg = prevState.workingGraph.graph.id; const { graph, nodes, links } = prevState.graphRF; diff --git a/src/utils/calcTasksForLink.ts b/src/utils/calcTasksForLink.ts index ae70bb0..23eec4b 100644 --- a/src/utils/calcTasksForLink.ts +++ b/src/utils/calcTasksForLink.ts @@ -30,7 +30,7 @@ export function calcTasksForLink( optional_input_names: [], required_input_names: [], }; - console.log(source, sourceTask, target, targetTask); + return [sourceTask, targetTask]; } diff --git a/src/utils/curateGraph.ts b/src/utils/curateGraph.ts index 647c304..e539e9c 100644 --- a/src/utils/curateGraph.ts +++ b/src/utils/curateGraph.ts @@ -7,6 +7,7 @@ function curateGraph(graphRF): GraphRF { for (const nod of graphRFCurrated.nodes) { // INFO: Remove empty lines in table for nodes and links + // TODO: removes only the last not all empty... if ( nod.default_inputs && nod.default_inputs.length > 0 && @@ -41,6 +42,7 @@ function curateGraph(graphRF): GraphRF { lin.data.data_mapping.pop(); } } + return graphRFCurrated; } diff --git a/src/utils/toEwoksNodes.ts b/src/utils/toEwoksNodes.ts index e012f5f..062b8f3 100644 --- a/src/utils/toEwoksNodes.ts +++ b/src/utils/toEwoksNodes.ts @@ -1,10 +1,31 @@ import type { EwoksNode, EwoksRFNode } from '../types'; +function cleanDefaultInputs(default_inputs) { + return ( + (default_inputs && + default_inputs.map((dIn) => { + return { + name: dIn.name, + value: + dIn.value === 'false' + ? false + : dIn.value === 'true' + ? true + : dIn.value === 'null' + ? null + : dIn.value, + }; + })) || + [] + ); +} + // EwoksRFNode --> EwoksNode for saving export function toEwoksNodes(nodes: EwoksRFNode[]): EwoksNode[] { const tempNodes: EwoksRFNode[] = [...nodes].filter( (nod) => !['graphInput', 'graphOutput', 'note'].includes(nod.task_type) ); + return tempNodes.map( ({ id, @@ -41,21 +62,7 @@ export function toEwoksNodes(nodes: EwoksRFNode[]): EwoksNode[] { default_error_attributes: default_error_node ? default_error_attributes : null, - default_inputs: - default_inputs && - default_inputs.map((dIn) => { - return { - name: dIn.name, - value: - dIn.value === 'false' - ? false - : dIn.value === 'true' - ? true - : dIn.value === 'null' - ? null - : dIn.value, - }; - }), + default_inputs: cleanDefaultInputs(default_inputs), uiProps: { nodeWidth, type, @@ -78,7 +85,7 @@ export function toEwoksNodes(nodes: EwoksRFNode[]): EwoksNode[] { // type: task_type, inputs_complete, task_generator: task_generator || null, - default_inputs, + default_inputs: cleanDefaultInputs(default_inputs), default_error_node, ddefault_error_attributes: default_error_node ? default_error_attributes diff --git a/src/utils/toRFEwoksNodesUtils.ts b/src/utils/toRFEwoksNodesUtils.ts index 7c61722..1112daf 100644 --- a/src/utils/toRFEwoksNodesUtils.ts +++ b/src/utils/toRFEwoksNodesUtils.ts @@ -40,7 +40,7 @@ export function calcNodeType(inputsAl, outputsAll, task_type, id) { // locate the task and add required+optional-inputs + outputs export function calcTask(tasks, task_identifier, task_type) { let tempTask = tasks.find((tas) => tas.task_identifier === task_identifier); - console.log(tasks, task_identifier, task_type); + tempTask = tempTask ? tempTask // if you found the Task return it : task_type === 'graph' // if not found check if it is a graph -- GitLab From fd00a1e92f0e62392c5b36f8d8aa657ccbcc75dc Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Wed, 31 Aug 2022 18:05:42 +0200 Subject: [PATCH 10/12] bug quest --- src/Components/AddNodes.tsx | 11 +++-- src/Components/CellEditInJson.tsx | 13 +++--- src/Components/EditElement.tsx | 7 ++- src/Components/EditElementStyle.tsx | 55 ++++++++++++----------- src/Components/EditableTable.tsx | 6 ++- src/Components/ExecutionFilters.tsx | 3 ++ src/Components/NodeDetails.tsx | 5 ++- src/Components/TableCellInEditMode.tsx | 7 +-- src/CustomNodes/ExecutionStepsNode.tsx | 4 +- src/layout/Dashboard.tsx | 62 +++++++++++++++----------- src/layout/SignUp.tsx | 29 ++++++++++-- src/layout/sidebar.tsx | 3 +- src/styles/base.css | 10 +++++ 13 files changed, 139 insertions(+), 76 deletions(-) diff --git a/src/Components/AddNodes.tsx b/src/Components/AddNodes.tsx index 55f3ad8..e8b1ae2 100644 --- a/src/Components/AddNodes.tsx +++ b/src/Components/AddNodes.tsx @@ -177,11 +177,15 @@ function AddNodes(props) { }; return ( - + } aria-controls="panel1a-content" - id="panel1a-header" > {taskCategories.map((categoryName) => ( - + } aria-controls="panel1a-content" - id="panel1a-header" > {categoryName} diff --git a/src/Components/CellEditInJson.tsx b/src/Components/CellEditInJson.tsx index c3f5ebf..d2353c3 100644 --- a/src/Components/CellEditInJson.tsx +++ b/src/Components/CellEditInJson.tsx @@ -2,11 +2,12 @@ import ReactJson from 'react-json-view'; export default function CellEditInJson(propsIn) { const { props } = propsIn; - const { row, name, type } = props; + const { row, name, type, onChange } = props; - const onChange = (edit, row) => { + const onChangeL = (edit, row) => { /* eslint-disable no-console */ console.log(edit, row, name); + // onChange(edit, row, 1); }; return ( @@ -23,11 +24,11 @@ export default function CellEditInJson(propsIn) { collapsed collapseStringsAfterLength={30} groupArraysAfterLength={15} - onEdit={(edit) => onChange(edit, row)} - onAdd={(add) => onChange(add, row)} + onEdit={(edit) => onChangeL(edit, row)} + onAdd={(add) => onChangeL(add, row)} defaultValue="object" - onDelete={(del) => onChange(del, row)} - onSelect={(sel) => onChange(sel, row)} + onDelete={(del) => onChangeL(del, row)} + onSelect={(sel) => onChangeL(sel, row)} quotesOnKeys={false} style={{ backgroundColor: 'rgb(59, 77, 172)' }} displayDataTypes diff --git a/src/Components/EditElement.tsx b/src/Components/EditElement.tsx index 8efa890..589242d 100644 --- a/src/Components/EditElement.tsx +++ b/src/Components/EditElement.tsx @@ -22,11 +22,14 @@ function EditElement(props) { }; return ( - + } aria-controls="panel1a-content" - id="panel1a-header" > Edit{' '} diff --git a/src/Components/EditElementStyle.tsx b/src/Components/EditElementStyle.tsx index f535b54..56a33f0 100644 --- a/src/Components/EditElementStyle.tsx +++ b/src/Components/EditElementStyle.tsx @@ -15,31 +15,34 @@ export default function EditElementStyle() { ); return ( - - } - aria-controls="panel1a-content" - id="panel1a-header" - > - - Styling{' '} - {'position' in selectedElement - ? 'Node' - : 'source' in selectedElement - ? 'Link' - : 'Graph'} - - - - - {'position' in selectedElement && ( - - )} - {'source' in selectedElement && ( - - )} - - - + <> + {('position' in selectedElement || 'source' in selectedElement) && ( + + } + aria-controls="panel1a-content" + > + + Styling{' '} + {'position' in selectedElement + ? 'Node' + : 'source' in selectedElement + ? 'Link' + : 'Graph'} + + + +
+ {'position' in selectedElement && ( + + )} + {'source' in selectedElement && ( + + )} + +
+ + )} + ); } diff --git a/src/Components/EditableTable.tsx b/src/Components/EditableTable.tsx index 0d7ea38..a5ed85b 100644 --- a/src/Components/EditableTable.tsx +++ b/src/Components/EditableTable.tsx @@ -160,7 +160,7 @@ function EditableTable(props) { if (row.id === id) { return { ...row, - id: row.name.replace(' ', '_'), + id: row.name.replace(' ', '_') || '', // value: row.value, isEditMode: !row.isEditMode, }; @@ -169,7 +169,9 @@ function EditableTable(props) { }); }); if (command === 'done') { + console.log(rows); props.valuesChanged(rows); + setRows(rows); } } if (command === 'done') { @@ -251,7 +253,7 @@ function EditableTable(props) { return rowe; }); setRows(newRows); - props.valuesChanged(newRows); + // props.valuesChanged(newRows); } const tOfI = [...typeOfInputs]; tOfI[index] = e.target.value; diff --git a/src/Components/ExecutionFilters.tsx b/src/Components/ExecutionFilters.tsx index ace56d0..2450108 100644 --- a/src/Components/ExecutionFilters.tsx +++ b/src/Components/ExecutionFilters.tsx @@ -96,6 +96,9 @@ export default function ExecutionFilters() { if (status === 'Failed') { filterParams.error = true; } + // else { + // filterParams.error = false; + // } if (fromDateFilter) { filterParams.starttime = fromDateFilter.toString(); } diff --git a/src/Components/NodeDetails.tsx b/src/Components/NodeDetails.tsx index 3c02168..5c525c5 100644 --- a/src/Components/NodeDetails.tsx +++ b/src/Components/NodeDetails.tsx @@ -282,7 +282,10 @@ export default function NodeDetails(props) { specific node is based on. If you need to have them create a new Task with the appropriete properties and use it.`} > - + } aria-controls="panel1a-content" diff --git a/src/Components/TableCellInEditMode.tsx b/src/Components/TableCellInEditMode.tsx index a27af9d..b880f9e 100644 --- a/src/Components/TableCellInEditMode.tsx +++ b/src/Components/TableCellInEditMode.tsx @@ -28,7 +28,7 @@ function TableCellInEditMode(propsIn) { const { props } = propsIn; const { index, row, name, onChange, type, typeOfValues } = props; const classes = useStyles(); - // console.log(index, row, name, onChange, type, typeOfValues); + console.log(index, row, name, onChange, type, typeOfValues); const [boolVal, setBoolVal] = React.useState(true); @@ -54,7 +54,8 @@ function TableCellInEditMode(propsIn) { }; return type === 'dict' || type === 'list' || type === 'object' ? ( - + // + {JSON.stringify(row[name])} ) : // typeOfValues.type === 'select' ? ( <> @@ -78,7 +79,7 @@ function TableCellInEditMode(propsIn) { renderInput={(params) => ( diff --git a/src/CustomNodes/ExecutionStepsNode.tsx b/src/CustomNodes/ExecutionStepsNode.tsx index faa68e8..d836c88 100644 --- a/src/CustomNodes/ExecutionStepsNode.tsx +++ b/src/CustomNodes/ExecutionStepsNode.tsx @@ -3,7 +3,7 @@ import { style } from './NodeStyle'; import state from '../store/state'; function ExecutionStepsNode(args) { - // console.log(args); + console.log(args); const customTitle = { ...style.title, wordWrap: 'break-word', @@ -11,7 +11,7 @@ function ExecutionStepsNode(args) { backgroundColor: '#ced3ee', textAlign: 'center', padding: '1px', - color: '#4493dd', // TODO: red for failed events-workflows + color: args.data.event.error ? 'red' : '#4493dd', // TODO: red for failed events-workflows fontSize: '1.2em', }; diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 53ffb3b..7b00c6c 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -8,11 +8,12 @@ import FiberNew from '@material-ui/icons/FiberNew'; import ImportContactsIcon from '@material-ui/icons/ImportContacts'; import Sidebar from './sidebar'; import { ReactFlowProvider } from 'react-flow-renderer'; +import { Link } from 'react-router-dom'; import Canvas from './Canvas'; import UndoRedo from '../Components/UndoRedo'; import GetFromServer from '../Components/GetFromServer'; -import { Fab, IconButton } from '@material-ui/core'; +import { Fab, IconButton, Typography } from '@material-ui/core'; import SettingsIcon from '@material-ui/icons/Settings'; import SimpleSnackbar from '../Components/Snackbar'; import SettingsInfoDrawer from '../Components/SettingsInfoDrawer'; @@ -112,9 +113,9 @@ export default function Dashboard() { }; const handleOpenInfo = () => { - setOpenInfo(true); + // setOpenInfo(true); setOpenSettings(false); - setOpenDrawers(true); + // setOpenDrawers(true); }; const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight); @@ -231,25 +232,6 @@ export default function Dashboard() { workflowIdInAutocomplete={workflowIdInAutocomplete} /> -
- - - - - - - -
@@ -270,13 +252,13 @@ export default function Dashboard() { workflowIdInTextbox={workflowIdInTextbox} />
- +
- + - + + + + {/* onClick={handleOpenInfo} */} + + + + + + + + + + Welcome to the{' '} Ewoks-UI for - managing your Workflows. Get started with a graph where Ewoks-UI - describes itself + managing your Workflows. Select to Edit or Monitor or get + started with a graph where Ewoks-UI describes itself: Monitor Workflows + + + + + + + Tutorial Workflow + + } aria-controls="panel1a-content" - id="panel1a-header" + id="Accordions-sidebar" > Date: Thu, 1 Sep 2022 10:37:00 +0200 Subject: [PATCH 11/12] linting --- src/Components/EditElementStyle.tsx | 56 +++++++++++++------------- src/Components/EditableTable.tsx | 6 ++- src/Components/TableCellInEditMode.tsx | 9 ++++- src/CustomNodes/ExecutionStepsNode.tsx | 6 ++- 4 files changed, 44 insertions(+), 33 deletions(-) diff --git a/src/Components/EditElementStyle.tsx b/src/Components/EditElementStyle.tsx index 56a33f0..ae23e52 100644 --- a/src/Components/EditElementStyle.tsx +++ b/src/Components/EditElementStyle.tsx @@ -15,34 +15,32 @@ export default function EditElementStyle() { ); return ( - <> - {('position' in selectedElement || 'source' in selectedElement) && ( - - } - aria-controls="panel1a-content" - > - - Styling{' '} - {'position' in selectedElement - ? 'Node' - : 'source' in selectedElement - ? 'Link' - : 'Graph'} - - - -
- {'position' in selectedElement && ( - - )} - {'source' in selectedElement && ( - - )} - -
- - )} - + ('position' in selectedElement || 'source' in selectedElement) && ( + + } + aria-controls="panel1a-content" + > + + Styling{' '} + {'position' in selectedElement + ? 'Node' + : 'source' in selectedElement + ? 'Link' + : 'Graph'} + + + +
+ {'position' in selectedElement && ( + + )} + {'source' in selectedElement && ( + + )} + +
+ + ) ); } diff --git a/src/Components/EditableTable.tsx b/src/Components/EditableTable.tsx index a5ed85b..5787fbf 100644 --- a/src/Components/EditableTable.tsx +++ b/src/Components/EditableTable.tsx @@ -1,4 +1,8 @@ /* eslint-disable sonarjs/cognitive-complexity */ +/* + The table that is used to pass parameters for default-values, conditions and data-mapping. + Its cells can change depending on the kind of input and the parent-component params. +*/ import React, { useEffect } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; @@ -169,7 +173,7 @@ function EditableTable(props) { }); }); if (command === 'done') { - console.log(rows); + // console.log(rows); props.valuesChanged(rows); setRows(rows); } diff --git a/src/Components/TableCellInEditMode.tsx b/src/Components/TableCellInEditMode.tsx index b880f9e..64b8450 100644 --- a/src/Components/TableCellInEditMode.tsx +++ b/src/Components/TableCellInEditMode.tsx @@ -1,3 +1,7 @@ +/* + The cell within a table when the row is in edit mode. + Provides different input for any selected type (number, string, list etc) +*/ import React, { useEffect } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Input from '@material-ui/core/Input'; @@ -8,7 +12,8 @@ import { RadioGroup, TextField, } from '@material-ui/core'; -import CellEditInJson from './CellEditInJson'; +// Keep the following if edit on the table is needed +// import CellEditInJson from './CellEditInJson'; import { Autocomplete } from '@material-ui/lab'; const useStyles = makeStyles(() => ({ @@ -28,7 +33,7 @@ function TableCellInEditMode(propsIn) { const { props } = propsIn; const { index, row, name, onChange, type, typeOfValues } = props; const classes = useStyles(); - console.log(index, row, name, onChange, type, typeOfValues); + // console.log(index, row, name, onChange, type, typeOfValues); const [boolVal, setBoolVal] = React.useState(true); diff --git a/src/CustomNodes/ExecutionStepsNode.tsx b/src/CustomNodes/ExecutionStepsNode.tsx index d836c88..b106af4 100644 --- a/src/CustomNodes/ExecutionStepsNode.tsx +++ b/src/CustomNodes/ExecutionStepsNode.tsx @@ -1,9 +1,13 @@ +/* +A kind of node to appear on the canvas carrying the number of the +step that has been executed. +*/ import { style } from './NodeStyle'; import state from '../store/state'; function ExecutionStepsNode(args) { - console.log(args); + // console.log(args); const customTitle = { ...style.title, wordWrap: 'break-word', -- GitLab From 4da4a41a09561afd57bde190600db058b31a8d2e Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Thu, 1 Sep 2022 10:51:52 +0200 Subject: [PATCH 12/12] lint2 --- src/Components/CellEditInJson.tsx | 2 +- src/Components/ExecutionTable.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Components/CellEditInJson.tsx b/src/Components/CellEditInJson.tsx index d2353c3..99c3e47 100644 --- a/src/Components/CellEditInJson.tsx +++ b/src/Components/CellEditInJson.tsx @@ -2,7 +2,7 @@ import ReactJson from 'react-json-view'; export default function CellEditInJson(propsIn) { const { props } = propsIn; - const { row, name, type, onChange } = props; + const { row, name, type } = props; const onChangeL = (edit, row) => { /* eslint-disable no-console */ diff --git a/src/Components/ExecutionTable.tsx b/src/Components/ExecutionTable.tsx index c9e4f2b..23284f2 100644 --- a/src/Components/ExecutionTable.tsx +++ b/src/Components/ExecutionTable.tsx @@ -344,7 +344,7 @@ export default function EnhancedTable() { }; const handleClick = (event: React.MouseEvent, name: string) => { - console.log(event, name); + // console.log(event, name); const selectedIndex = selected.indexOf(name); let newSelected: readonly string[] = []; @@ -408,6 +408,7 @@ export default function EnhancedTable() { console.log('no response data'); } } catch (error) { + /* eslint-disable no-console */ console.log(error); } } -- GitLab