From 91ecaa55dfcf7da6720ebc07d1656e62030312f9 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Fri, 19 Aug 2022 18:19:32 +0200 Subject: [PATCH 1/6] resolved issue with executed --- src/Components/ExecutionDetails.tsx | 38 ++++++++++++++++++++++++++--- src/Components/ExecutionTable.tsx | 2 +- src/store/allWorkflows.ts | 1 + src/utils.ts | 1 + 4 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/Components/ExecutionDetails.tsx b/src/Components/ExecutionDetails.tsx index 264616c..cc6202e 100644 --- a/src/Components/ExecutionDetails.tsx +++ b/src/Components/ExecutionDetails.tsx @@ -8,7 +8,7 @@ import IntegratedSpinner from './IntegratedSpinner'; import state from '../store/state'; import { Button, Chip, IconButton } from '@material-ui/core'; // import SidebarTooltip from './SidebarTooltip'; -import type { Event, GraphEwoks } from '../types'; +import type { Event, GraphEwoks, workflowDescription } from '../types'; import { getWorkflow } from '../utils/api'; import DeleteIcon from '@material-ui/icons/Delete'; // import useApi from '../hooks/useApi'; @@ -51,6 +51,7 @@ export default function ExecutionDetails() { const setWorkingGraph = state((state) => state.setWorkingGraph); const setOpenSnackbar = state((state) => state.setOpenSnackbar); const allWorkflows = state((state) => state.allWorkflows); + const setAllWorkflows = state((state) => state.setAllWorkflows); // const [expandedWorkflows, setExpandedWorkflows] = useState(false); // const openSettingsDrawer = state((state) => state.openSettingsDrawer); const setOpenSettingsDrawer = state((state) => state.setOpenSettingsDrawer); @@ -80,6 +81,7 @@ export default function ExecutionDetails() { // setJobs(allJobs); + // DOC: for those live executing search the executedEvents const allWorkflowsL = executedEvents .filter((ev) => ev.context === 'workflow' && ev.type === 'start') .map((work) => { @@ -95,10 +97,12 @@ export default function ExecutionDetails() { } return workL; }); + const wjobs = watchedWorkflows.map((job) => { - return { ...job[0], status: 'finished' }; + return { ...(job[0].workflow_id ? job[0] : job[1]), status: 'finished' }; }); + console.log(executedEvents, wjobs, [...allWorkflowsL, ...wjobs]); setWorkflows([...allWorkflowsL, ...wjobs]); }, [executedEvents, graphRF.graph.label, watchedWorkflows]); @@ -121,11 +125,24 @@ export default function ExecutionDetails() { }; const formatedDate = (job) => { - const { label } = (allWorkflows && - allWorkflows.find((work) => job.workflow_id === work.id)) || { + console.log( + job, + allWorkflows.find((work) => job.workflow_id === work.id), + allWorkflows, + workflows + ); + + const allWorkF: workflowDescription[] = [ + ...(allWorkflows as workflowDescription[]), + ]; + + const { label } = (allWorkF && + allWorkF.find((work) => job.workflow_id === work.id)) || { label: '', }; 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()}/${ @@ -220,6 +237,10 @@ export default function ExecutionDetails() { setOpenSettingsDrawer('Executions'); }; + const handleChangeCleanExecutions = () => { + setWorkflows([]); + }; + const deleteWatchedJob = () => { // setWorkflows( // workflows.filter((work) => work.job_id !== selectedWorkflow.job_id) @@ -333,12 +354,21 @@ export default function ExecutionDetails() { ))} + {currentWatchedEvents[currentExecutionEvent - 1] && ( - {row[0].workflow_id} + {row[0].workflow_id || row[1].workflow_id} {row[0].job_id} diff --git a/src/store/allWorkflows.ts b/src/store/allWorkflows.ts index e4545fd..a33daed 100644 --- a/src/store/allWorkflows.ts +++ b/src/store/allWorkflows.ts @@ -4,6 +4,7 @@ const allWorkflows = (set) => ({ allWorkflows: [] as workflowDescription[], setAllWorkflows: (workflows: workflowDescription[]) => { + console.log(workflows); set((state) => ({ ...state, allWorkflows: workflows, diff --git a/src/utils.ts b/src/utils.ts index 8103aa6..af2e116 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -56,6 +56,7 @@ export async function getWorkflows(): Promise { console.log(error.config); res = [{ title: 'network error' }]; } + console.log(res); return res; } -- GitLab From 125d459c902287643ddecc198cf96e1024bceace Mon Sep 17 00:00:00 2001 From: "giannis.koumoutsos" Date: Sun, 21 Aug 2022 21:03:11 +0200 Subject: [PATCH 2/6] warning for save channges and correct undo on elementDetails --- src/Components/EditLinkStyle.tsx | 30 ++++++++++++++++++------------ src/Components/EditNodeStyle.tsx | 14 ++++++++------ src/store/selectedElement.ts | 2 ++ 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/Components/EditLinkStyle.tsx b/src/Components/EditLinkStyle.tsx index e61187a..3175764 100644 --- a/src/Components/EditLinkStyle.tsx +++ b/src/Components/EditLinkStyle.tsx @@ -95,25 +95,31 @@ export default function EditLinkStyle(props) { const changeX = (event, number) => { const elem = selectedElement as EwoksRFLink; - setSelectedElement({ - ...elem, - data: { - ...elem.data, - getAroundProps: { ...elem.data.getAroundProps, x: number }, + setSelectedElement( + { + ...elem, + data: { + ...elem.data, + getAroundProps: { ...elem.data.getAroundProps, x: number }, + }, }, - }); + 'fromSaveElement' + ); setX(number); }; const changeY = (event, number) => { const elem = selectedElement as EwoksRFLink; - setSelectedElement({ - ...elem, - data: { - ...elem.data, - getAroundProps: { ...elem.data.getAroundProps, y: number }, + setSelectedElement( + { + ...elem, + data: { + ...elem.data, + getAroundProps: { ...elem.data.getAroundProps, y: number }, + }, }, - }); + 'fromSaveElement' + ); setY(number); }; diff --git a/src/Components/EditNodeStyle.tsx b/src/Components/EditNodeStyle.tsx index 373f4f9..a85512a 100644 --- a/src/Components/EditNodeStyle.tsx +++ b/src/Components/EditNodeStyle.tsx @@ -89,16 +89,18 @@ export default function EditNodeStyle(props) { moreHandles: event.target.checked, }, }, - 'fromSaveElement', - true + 'fromSaveElement' ); }; const changeNodeSize = (event, number) => { - setSelectedElement({ - ...selectedElement, - data: { ...selectedElement.data, nodeWidth: number }, - }); + setSelectedElement( + { + ...selectedElement, + data: { ...selectedElement.data, nodeWidth: number }, + }, + 'fromSaveElement' + ); setNodeSize(number); }; diff --git a/src/store/selectedElement.ts b/src/store/selectedElement.ts index 1082fca..3b28c95 100644 --- a/src/store/selectedElement.ts +++ b/src/store/selectedElement.ts @@ -10,6 +10,8 @@ const selectedElement = (set, get) => ({ const { graph, nodes, links } = prevState.graphRF; // console.log(element, nodes, links); + prevState.setCanvasGraphChanged(true); + console.log('selected element', prevState.undoIndex); if (wg === '0' || wg === graph.id) { let tempGraph = {} as GraphRF; if ('position' in element) { -- GitLab From 9347cc28c71e3756a89172001ac496ffcae69c99 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Mon, 22 Aug 2022 18:47:13 +0200 Subject: [PATCH 3/6] documentation and exucution bug with live --- .eslintignore | 2 ++ doc/conf.py | 2 +- doc/create_graph.rst | 2 +- doc/editor_details.rst | 2 +- doc/execution.rst | 2 +- doc/index.rst | 3 +-- doc/link_editing.rst | 2 +- doc/manage_graph.rst | 2 +- doc/manage_graphs_tasks_icons.rst | 2 +- doc/node_editing.rst | 2 +- src/Components/ExecutionDetails.tsx | 34 +++++++++++++++++----------- src/Components/IntegratedSpinner.tsx | 10 ++++---- src/store/allWorkflows.ts | 1 - src/store/currentExecutionEvent.ts | 1 - src/store/executingEvents.ts | 5 ++-- src/store/selectedElement.ts | 2 +- src/utils.ts | 2 +- 17 files changed, 42 insertions(+), 34 deletions(-) diff --git a/.eslintignore b/.eslintignore index 16e83b0..1f089da 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,5 @@ /src/utils/EwoksValidator.ts /ewoksserver/ /src/hooks/useGetWorkflow.tsx +/pybuild/ +/pysrc/ diff --git a/doc/conf.py b/doc/conf.py index c64e21b..bc6b1b8 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -6,7 +6,7 @@ release = "0.1" copyright = "2022, ESRF" author = "ESRF" -extensions = ["sphinx.ext.autodoc", "sphinx.ext.autosummary", "sphinxcontrib.mermaid"] +extensions = ["sphinx.ext.autodoc", "sphinx.ext.autosummary"] templates_path = [] exclude_patterns = [] diff --git a/doc/create_graph.rst b/doc/create_graph.rst index 75cb78f..817920d 100644 --- a/doc/create_graph.rst +++ b/doc/create_graph.rst @@ -1,5 +1,5 @@ Create a Graph -=========== +============== Graph is made up from nodes and links between the nodes. To add a node you need to drag-and-drop one *Task* from the *Add Node* section of the sidebar on the left. diff --git a/doc/editor_details.rst b/doc/editor_details.rst index c8f3490..5fd7556 100644 --- a/doc/editor_details.rst +++ b/doc/editor_details.rst @@ -1,2 +1,2 @@ Editor details -=========== +============== diff --git a/doc/execution.rst b/doc/execution.rst index 928e77d..dd5e3ce 100644 --- a/doc/execution.rst +++ b/doc/execution.rst @@ -1,2 +1,2 @@ Graph execution -=========== +=============== diff --git a/doc/index.rst b/doc/index.rst index 5a723d6..1742800 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -1,5 +1,5 @@ ewoksweb |release| -=================== +================== *ewoksweb* is a frontend to create, visualize and execute `ewoks `_ workflows in the web. @@ -8,7 +8,6 @@ ewoksweb has been developed by the `Software group state.setWorkingGraph); const setOpenSnackbar = state((state) => state.setOpenSnackbar); const allWorkflows = state((state) => state.allWorkflows); - const setAllWorkflows = state((state) => state.setAllWorkflows); + // const [expandedWorkflows, setExpandedWorkflows] = useState(false); // const openSettingsDrawer = state((state) => state.openSettingsDrawer); const setOpenSettingsDrawer = state((state) => state.setOpenSettingsDrawer); @@ -88,7 +88,10 @@ export default function ExecutionDetails() { let workL = {}; if ( executedEvents.some( - (wor) => wor.workflow_id === work.workflow_id && wor.type === 'end' + (wor) => + wor.workflow_id === work.workflow_id && + wor.context === 'workflow' && + wor.type === 'end' ) ) { workL = { ...work, status: 'finished' }; @@ -102,7 +105,7 @@ export default function ExecutionDetails() { return { ...(job[0].workflow_id ? job[0] : job[1]), status: 'finished' }; }); - console.log(executedEvents, wjobs, [...allWorkflowsL, ...wjobs]); + // console.log(executedEvents, wjobs, allWorkflowsL); setWorkflows([...allWorkflowsL, ...wjobs]); }, [executedEvents, graphRF.graph.label, watchedWorkflows]); @@ -125,12 +128,12 @@ export default function ExecutionDetails() { }; const formatedDate = (job) => { - console.log( - job, - allWorkflows.find((work) => job.workflow_id === work.id), - allWorkflows, - workflows - ); + // console.log( + // job, + // allWorkflows.find((work) => job.workflow_id === work.id), + // allWorkflows, + // workflows + // ); const allWorkF: workflowDescription[] = [ ...(allWorkflows as workflowDescription[]), @@ -142,7 +145,7 @@ export default function ExecutionDetails() { }; const dat = new Date(job.time); - console.log(label); + // console.log(label); return `${ label ? label.slice(0, 20) : (job.workflow_id as string) } ${dat.getHours()}:${dat.getMinutes()} ${dat.getDate()}/${ @@ -162,6 +165,8 @@ export default function ExecutionDetails() { 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); @@ -202,9 +207,12 @@ export default function ExecutionDetails() { setGettingFromServer(false); } } else { - const events = getEventsForJob(); - setInExecutionMode(true); - events.forEach((ev) => setExecutingEvents(ev, false)); + console.log(currentWatchedEvents); + setTimeout(() => { + const eventsL = getEventsForJob(); + setInExecutionMode(true); + eventsL.forEach((ev) => setExecutingEvents(ev, false)); + }, 400); } }; diff --git a/src/Components/IntegratedSpinner.tsx b/src/Components/IntegratedSpinner.tsx index d4ed055..2a265b8 100644 --- a/src/Components/IntegratedSpinner.tsx +++ b/src/Components/IntegratedSpinner.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { useState, useEffect, useRef } from 'react'; import Box from '@material-ui/core/Box'; import CircularProgress from '@material-ui/core/CircularProgress'; import Fab from '@material-ui/core/Fab'; @@ -31,16 +31,16 @@ export default function IntegratedSpinner({ onClick, // callSuccess = false, }) { - const [loading, setLoading] = React.useState(false); - const [success, setSuccess] = React.useState(false); + const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); const inExecutionMode = state((state) => state.inExecutionMode); - const timer = React.useRef(); + const timer = useRef(); const classes = useStyles(); // TODO: synd with the real time the call makes using getting - React.useEffect(() => { + useEffect(() => { if (getting) { // // console.log('gettingIn', getting); timer.current = window.setTimeout(() => { diff --git a/src/store/allWorkflows.ts b/src/store/allWorkflows.ts index a33daed..e4545fd 100644 --- a/src/store/allWorkflows.ts +++ b/src/store/allWorkflows.ts @@ -4,7 +4,6 @@ const allWorkflows = (set) => ({ allWorkflows: [] as workflowDescription[], setAllWorkflows: (workflows: workflowDescription[]) => { - console.log(workflows); set((state) => ({ ...state, allWorkflows: workflows, diff --git a/src/store/currentExecutionEvent.ts b/src/store/currentExecutionEvent.ts index b525e31..2e25e33 100644 --- a/src/store/currentExecutionEvent.ts +++ b/src/store/currentExecutionEvent.ts @@ -3,7 +3,6 @@ const currentExecutionEvent = (set) => ({ currentExecutionEvent: 0, setCurrentExecutionEvent: (indexOfEvent) => { - // console.log(indexOfEvent, get().executingEvents); set((state) => ({ ...state, currentExecutionEvent: indexOfEvent, diff --git a/src/store/executingEvents.ts b/src/store/executingEvents.ts index cc99229..e546e60 100644 --- a/src/store/executingEvents.ts +++ b/src/store/executingEvents.ts @@ -98,9 +98,10 @@ const executingEvents = (set, get) => ({ let execNodes = []; // calculate the executing ones and add the executing param. - // Not a set beacause maybe it needs a complex id + // Not a set because maybe it needs a complex id + /* eslint-disable unicorn/prefer-set-has */ const executingIds = newExecutingEvents.map((ev) => ev.node_id); - console.log(executingIds, tempLabel); + // console.log(executingIds, tempLabel); execNodes = [ ...prevState.graphRF.nodes diff --git a/src/store/selectedElement.ts b/src/store/selectedElement.ts index 3b28c95..42496b3 100644 --- a/src/store/selectedElement.ts +++ b/src/store/selectedElement.ts @@ -11,7 +11,7 @@ const selectedElement = (set, get) => ({ // console.log(element, nodes, links); prevState.setCanvasGraphChanged(true); - console.log('selected element', prevState.undoIndex); + // console.log('selected element', prevState.undoIndex); if (wg === '0' || wg === graph.id) { let tempGraph = {} as GraphRF; if ('position' in element) { diff --git a/src/utils.ts b/src/utils.ts index af2e116..af2796a 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -56,7 +56,7 @@ export async function getWorkflows(): Promise { console.log(error.config); res = [{ title: 'network error' }]; } - console.log(res); + // console.log(res); return res; } -- GitLab From 5a30c88c2f240c85f4c353aa2106031513fce9e5 Mon Sep 17 00:00:00 2001 From: "giannis.koumoutsos" Date: Mon, 22 Aug 2022 22:06:58 +0200 Subject: [PATCH 4/6] documentation for linting --- doc/create_graph.rst | 50 +++++++++++++++---- doc/{editor_details.rst => editor_basics.rst} | 0 doc/execution.rst | 18 ++++++- doc/index.rst | 24 +++++---- doc/link_editing.rst | 30 +++++++++++ doc/manage_graphs_tasks_icons.rst | 32 +++++++++++- doc/node_editing.rst | 34 +++++++++++-- 7 files changed, 158 insertions(+), 30 deletions(-) rename doc/{editor_details.rst => editor_basics.rst} (100%) diff --git a/doc/create_graph.rst b/doc/create_graph.rst index 817920d..95f8333 100644 --- a/doc/create_graph.rst +++ b/doc/create_graph.rst @@ -1,17 +1,42 @@ -Create a Graph -============== +Create and Edit a Workflow +========================== -Graph is made up from nodes and links between the nodes. -To add a node you need to drag-and-drop one *Task* from the *Add Node* section of the sidebar on the left. -A node can also be a *subgraph* reffering to an existing graph that can be added to the graph from the server -or from the local storage. +## New Workflow -The *Add Node* is populated with *Tasks* within their *Categories*. -Tasks are embedded in the system or created by the end-user. -Nodes can be seen as an instance of a Task which represents a piece of code. A deeper explanation of the Ewoks -concepts can be found here ` +By clicking the ***New*** button with the tooltip *start a new workflow* on the upper bar a dialog appears requesting the new workflow **name**. By inserting a unique name and pressing ***SAVE WORKFLOW*** the dialog disappears and the canvas is available with the name entered appearing in the upper bar left side. If the given name is already used a message warns the user for providing another name. -The embedded Tasks are in the category *General* and inlude: input, output and skeleton tasks. +## Open a Workflow + +The user can open a graph in the canvas from: + + - the **server** by searching using the dropdown in the upper bar and pressing the ***Open from server***. The workflows management tab can also be used to open-delete a workflow. It is located in the upper drawer that open when pressing the second button from the right in the upper bar. In the workflow management bar a workflow can be selected exploiting the categories dropdown for easier search. Its details are being fetched and presented to the user after selection. Using the 2 buttons under the search boxes the user can open a workflow on the canvas or ***delete*** it from the server. + - the local storage by pressing the button with the directory icon on the upper bar. + + +## Save a Workflow + +A workflow that is being edited in the canvas can be saved-updated either in the local storage or on the server. +To save a workflow locally tha button with the save icon in the upper bar should be pressed. +To save a workflow on the server the button with the cloud-up-arrow should be pressed. Saving a new workflow on the server involves searching for other workflows with the same name and informing the user. + +## Edit a Workflow + +On the left sidebar under the Edit Graph dropdown the following can be edited: + + - the ***Label*** of the graph, + - the ***Comment*** that can keep useful user notes about the graph and + - the ***Category*** the specific graph belongs. By inserting a category the user can later filter his graphs based on the categories assigned to them making it easier to locate and explore graphs. + +***Graph*** is made up from **nodes and links** between the nodes. A node can be the representation of a: + 1. **task** + 2. **graph** that can be imported in a graph as a **subgraph** + +To **add a node** you need to drag-and-drop one *Task* from the *Add Node* section of the sidebar on the left. The ***Add Node*** is populated with **Tasks** within their **Categories**. +Tasks are embedded in the system or added by the end-user. Nodes can be seen as an instance of a Task which represents a piece of code. Click for a deeper explanation of the [Ewoks concepts](https://ewokscore.readthedocs.io/en/latest/definitions.html). + +A **subgraph** can be added to the graph from the server or from the local storage. + +The embedded Tasks are in the category *General* and include: ***input***, ***output*** and ***skeleton*** tasks. Input and output are used for declaring the input and the output of a graph respectively. They can be connected to ONLY ONE node in a given graph. The task_skeleton is given as an empty cell when the user needs to get a node in the graph without having the @@ -42,3 +67,6 @@ Every button has a tooltip that appears on hover and describes its functionality *ewoksweb* is a frontend to create, visualize and execute `ewoks `_ workflows in the web. + + +> Written with [StackEdit](https://stackedit.io/). diff --git a/doc/editor_details.rst b/doc/editor_basics.rst similarity index 100% rename from doc/editor_details.rst rename to doc/editor_basics.rst diff --git a/doc/execution.rst b/doc/execution.rst index dd5e3ce..5858db2 100644 --- a/doc/execution.rst +++ b/doc/execution.rst @@ -1,2 +1,16 @@ -Graph execution -=============== +Executing workflows +=================== +The concept *execute a workflow* is used when a workflow is being send to the [ewoksServer](https://ewoksserver.readthedocs.io/en/latest/) for each tasks to be executed... + +In order for a workflow to be executed it needs: + + - to be open on the canvas and + - the button execution from the top-bar menu to be pressed. + +The UI enters the execution mode and starts receiving events from the ewoksServer that report on the progress of the execution. According to the events that carry the start and the end of a task execution the UI starts animating the nodes that are being executed updating the workflow graph with numbers that represent the events being received. + +The number-events are clickable by the user and on-click the details of each event are being shown in the left-sidebar. In the sidebar all our current executions are being populated and by clicking on each they expand showing some details about the execution. If the ***replay*** button is pressed the execution as happened with all its events is being drawn on the canvas. The executions can also be removed as irrelevant from the sidebar by using the ***delete*** button which is next to the replay button. + +By clicking on delete the executions remain on the server and can be retrieved at any time by pressing the ***All executions*** button. All Executions open a top-drawer in the execution tab where the user can manage the executions that are on the server. A wide list of filters is available to get the executions needed. In the table the user can select one or more executions and by pressing the eye-view that replaces the filters can move the selected executions to the left-sidebar. There the user can inspect and replay the executions he previously selected in the All-executions table. + +> Written with [StackEdit](https://stackedit.io/). diff --git a/doc/index.rst b/doc/index.rst index 1742800..c59d298 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -5,16 +5,6 @@ ewoksweb |release| ewoksweb has been developed by the `Software group `_ of the `European Synchrotron `_. -.. toctree:: - :maxdepth: 2 - - create_graph - manage_graph - node_editing - link_editing - execution - manage_graphs_tasks_icons - editor_details Getting started --------------- @@ -36,3 +26,17 @@ or for an installation with the system python .. code:: bash python3 -m ewoksserver.server + +Documentation +------------- + +.. toctree:: + :maxdepth: 2 + + editor_basics + create_graph + manage_graph + node_editing + link_editing + execution + manage_graphs_tasks_icons diff --git a/doc/link_editing.rst b/doc/link_editing.rst index c41b720..14fa2c1 100644 --- a/doc/link_editing.rst +++ b/doc/link_editing.rst @@ -1,2 +1,32 @@ Link editing ============ + +Link editing is hosted on the left-sidebar under the ***Edit Node*** dropdown when a link on the canvas is selected. If no link is selected the dropdown is: + + - empty if no graph is under editing or + - depicts the attrubutes of the graph if a graph is under editing and no node or link is selected or + - depicts the attributes of a node if a node is selected. + +Each link has several attributes that follow the Ewokscore specification and are explained [here](https://ewokscore.readthedocs.io/en/latest/definitions.html#link-attributes). On a new link the following items are being depicted: + + - ***Label*** which is the user-friendly name of a link that appears on the canvas. Above Label there are two buttons that can be used to populate the Label with either the *Conditions* or the *Data Mappings* of the link for the user not to need to type them each time. + - ***Map all Data*** where the user can define that no manual data mapping is needed for the links source and target nodes. If unchecked manual Data mapping is revealed. + - ***Data Mapping*** where manual data mapping can take place for the link. + - on_error which is a a special condition where a task raises an exception. Cannot be used in combination with Conditions which disappear if on_error is checked. + - ***Conditions*** where the user can define the conditions for the link to be activated and move to the next node. + - ***Advanced*** that reveals more attributes when checked. + + The properties that are revealed when Advanced is checked are: + + - ***Comment*** that allows the user to keep some notes of interest about the specific link. + - The links Source and Target nodes with their Labes. + - +## Link styling +Links can be styled in the dropdown under Edit Link when a link is selected on the canvas. The link style attributed include: + + - ***Link type*** which if checked depicts the image associated with the task on the canvas and if not checked removes it. + - ***Arrow Head Type*** which if checked depicts the label of the node on the canvas and if not checked removes it. + - ***Animated*** which applies a moving animation effect on the selected link. + - ***Color*** which adds a surrounding frame and colors it with the selected color. + +> Written with [StackEdit](https://stackedit.io/). diff --git a/doc/manage_graphs_tasks_icons.rst b/doc/manage_graphs_tasks_icons.rst index 2dfbf81..24f3174 100644 --- a/doc/manage_graphs_tasks_icons.rst +++ b/doc/manage_graphs_tasks_icons.rst @@ -1,2 +1,30 @@ -Manage graphs, tasks, icons -=========================== +Managing EwoksWeb Entities +========================== +By pressing the second button from the right in the upper bar the managing upper drawer reveals itself. In different tabs the user can manage: workflows, tasks, icons and executions. + +## Managing Workflows + +The workflows management tab can be used to open, inspect and delete a workflow. In the workflow management bar a workflow can be selected exploiting the categories dropdown for easier search. Its details are being fetched and presented to the user after selection. Using the 2 buttons under the search boxes the user can open a workflow on the canvas or ***delete*** it from the server. + +## Managing Tasks + +Tasks can be managed in the second tab of the upper drawer. By clicking on the dropdown the tasks in their categories are revealed with their assigned icons. When clicking on a task underneath it buttons appear for deleting, editing and cloning the task. By deleting the task it is removed from the server permanently and can affect the workflows that contain it if any. Editing and cloning opens a dialog with all task properties below also described [here](https://ewokscore.readthedocs.io/en/latest/definitions.html#task-implementation): + + - New Name - Identifie: the Task will be saved to file with this name-identifier. + - Task Type + - Category + - Optional Inputs + - Required Inputs + - Outputs + - Icon which is the icon that will appear in the task and in the nodes that will be created from this task. + +Tasks can be discovered in the server if the slider ***Task Discovery*** is used. When is set it open an input where the module name will be inserted and a button to start the discovery process on the server. The process assumes that the absolute path to the python module is given for the discovery mechanism to find the python tasks described in there. + +## Managing Icons + +Icons can be added and removed from the system. An icon can be any small image .... + +## Managing Executions + +For execution management refer to Executing Workflows section. + diff --git a/doc/node_editing.rst b/doc/node_editing.rst index e1ffce3..a997e8e 100644 --- a/doc/node_editing.rst +++ b/doc/node_editing.rst @@ -1,10 +1,34 @@ Node editing ============ +Node editing is hosted on the left-sidebar under the ***Edit Node*** dropdown when a node on the canvas is selected. If no node is selected the dropdown is: -Nodes follow the task specification which can be found here (task-node spec) -Node editing is hosted on the left-sidebar under the *Edit Node* tab. + - empty if no graph is under editing or + - depicts the attrubutes of the graph if a graph is under editing and no node or link is selected or + - depicts the attributes of a link if a link is selected. -On a new node three items are being depicted: -Label which is the user-friendly name of a node that the user can always change. Label will initially -take the name of the task the specific node is reffered to. +Each node has several attributes that follow the Ewokscore specification and are explained [here](https://ewokscore.readthedocs.io/en/latest/definitions.html#node-attributes). On a new node three items are being depicted: + - ***Label*** which is the user-friendly name of a node that the user can always change. Label will initially take the name of the task the specific node is referred to. + - ***Default Inputs*** where the user can define inputs for any given node representing a task or a subgraph. + - ***Advanced*** that reveals more attributes when checked. + + The properties that are revealed when Advanced is checked are: + + - ***Comment*** that allows the user to keep some notes of interest. + - ***Inputs-complete*** when the default input covers all required input. + - ***Default Error Node*** that makes the node to be the default-error-node. Each graph can have zero to one such nodes. + - ***Node Info*** which holds read-only information about the selected node. + + When ***Default Error Node*** is checked the ***Map all Data*** appears already ticked which means that no extra Data Mapping is needed for the Default Error Node. If unchecked the Map all Data reveals the ***Data Mapping*** where manual mapping can take place. + +## Node styling +Nodes can be styled in the dropdown under Edit Node when a node is selected on the canvas. The node style attributed include: + + - ***With Image*** which if checked depicts the image associated with the task on the canvas and if not checked removes it. + - ***With Label*** which if checked depicts the label of the node on the canvas and if not checked removes it. + - ***Color*** which adds a surrounding frame and colors it with the selected color. + - ***More handles*** which provides additional handles to the node on the top and on the bottom. + - ***Node Size*** slider which modifies the size of the node. + - + +> Written with [StackEdit](https://stackedit.io/). -- GitLab From f5d88b2310fdb4e9202dcd4ef074156ba908c1a6 Mon Sep 17 00:00:00 2001 From: "giannis.koumoutsos" Date: Mon, 22 Aug 2022 22:07:48 +0200 Subject: [PATCH 5/6] documentation more --- doc/editor_basics.rst | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/doc/editor_basics.rst b/doc/editor_basics.rst index 5fd7556..03439c1 100644 --- a/doc/editor_basics.rst +++ b/doc/editor_basics.rst @@ -1,2 +1,22 @@ -Editor details -============== +Editor basic structure +====================== + +EwoksWeb is web application where users can visually view/create/edit their workflows using the [Ewoks](http://nodeca.github.io/pica/demo/ "title text!") abstraction. It mainly employs a canvas where workflows with their Nodes and Links are being visualized and graphically edited. + +On startup ewoksWeb presents a lower drawer open with: + + - a button on the left to open the tutorial-Graph which a self descriptive set of graphs demonstrating the tools capabilities. + - a form in the center to either login or sign-in when applicable. This is used on a public installation where multiple users can access the tool. In local installations it can be ignored. + - a set of dropdowns containing the user manual for the tool. + +The drawer can be closed on clicking outside of it and can be re-opened any time by clicking on the rightmost button on the upper bar. + +The general structure of the EwoksWeb User Interface (UI) includes: + + - The Canvas for visualizing and editing graphs. + - The left Sidebar for viewing and editing properties of a graph and its things it is made of: nodes and links. + - The upper bar that hosts buttons for saving, opening and executing graphs. + - Some Dialogs and Drawers for managing graphs-tasks-executions and icons. + + +> Written with [StackEdit](https://stackedit.io/). -- GitLab From 04c4f8baf491ff677854403ae89de94abdc11865 Mon Sep 17 00:00:00 2001 From: Giannis Koumoutsos Date: Tue, 23 Aug 2022 09:55:25 +0200 Subject: [PATCH 6/6] lint the docs --- doc/link_editing.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/link_editing.rst b/doc/link_editing.rst index 14fa2c1..6dcfdc5 100644 --- a/doc/link_editing.rst +++ b/doc/link_editing.rst @@ -20,7 +20,7 @@ Each link has several attributes that follow the Ewokscore specification and are - ***Comment*** that allows the user to keep some notes of interest about the specific link. - The links Source and Target nodes with their Labes. - - + ## Link styling Links can be styled in the dropdown under Edit Link when a link is selected on the canvas. The link style attributed include: -- GitLab