Node test counts (#1867)

* chore: prepare

* feat: changed node test counts style

* feat: user settings debug panel

ui/client/actions/nk/process.js

@@ -6,6 +6,7 @@ import * as SubprocessSchemaAligner from "../../components/graph/SubprocessSchem
 import HttpService from "../../http/HttpService"
 import * as UndoRedoActions from "../undoRedoActions"
 import {displayProcessActivity} from "./displayProcessActivity"
+import {displayProcessCounts} from "./displayProcessCounts"
 import {fetchProcessDefinition} from "./processDefinitionData"
 import {reportEvent} from "./reportEvent"
 import {businessViewChanged} from "./ui/layout"
@@ -151,10 +152,7 @@ function displayTestResults(testResults) {
       type: "DISPLAY_TEST_RESULTS_DETAILS",
       testResults: testResults.results,
     })
-    dispatch({
-      type: "DISPLAY_PROCESS_COUNTS",
-      processCounts: testResults.counts,
-    })
+    dispatch(displayProcessCounts(testResults.counts))
   }
 }
 

ui/client/actions/nk/userSettings.ts

@@ -1,13 +1,21 @@
 import {UserSettings} from "../../reducers/userSettings"
 
 type ToggleSettingsAction = {type: "TOGGLE_SETTINGS", settings: Array<keyof UserSettings>}
+type SetSettingsAction = {type: "SET_SETTINGS", settings: UserSettings}
 
 export function toggleSettings(settings: Array<keyof UserSettings>): ToggleSettingsAction {
   return {
     type: "TOGGLE_SETTINGS",
     settings,
   }
 }
+export function setSettings(settings: UserSettings): SetSettingsAction {
+  return {
+    type: "SET_SETTINGS",
+    settings,
+  }
+}
 
 export type UserSettingsActions =
   | ToggleSettingsAction
+  | SetSettingsAction

ui/client/common/userSettings.tsx

@@ -1,11 +1,12 @@
 import {useDispatch, useSelector} from "react-redux"
-import {toggleSettings} from "../actions/nk/userSettings"
-import {userSettings} from "../reducers/selectors/userSettings"
+import {setSettings, toggleSettings} from "../actions/nk/userSettings"
+import {getUserSettings} from "../reducers/selectors/userSettings"
 import {UserSettings} from "../reducers/userSettings"
 
-export const useUserSettings: () => [UserSettings, (keys: Array<keyof UserSettings>) => void] = () => {
+export const useUserSettings: () => [UserSettings, (keys: Array<keyof UserSettings>) => void, (value: UserSettings) => void] = () => {
   const dispatch = useDispatch()
-  const current = useSelector(userSettings)
+  const current = useSelector(getUserSettings)
   const toggle = (keys: Array<keyof UserSettings>) => { dispatch(toggleSettings(keys)) }
-  return [current, toggle]
+  const reset = (value: UserSettings) => { dispatch(setSettings(value)) }
+  return [current, toggle, reset]
 }

ui/client/components/graph/EspNode/element.ts

@@ -1,6 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import * as joint from "jointjs"
-import {dia} from "jointjs"
+import {attributes, dia, shapes} from "jointjs"
 import {cloneDeepWith, get, isEmpty, toString} from "lodash"
 import customAttrs from "../../../assets/json/nodeAttributes.json"
 import ProcessUtils from "../../../common/ProcessUtils"
@@ -65,11 +64,33 @@ function getBodyContent(bodyContent = ""): {text: string, multiline?: boolean} {
   }
 }
 
-function getStringWidth(str = "", pxPerChar = 0, padding = 0) {
+export function getStringWidth(str = "", pxPerChar = 8, padding = 7) {
   return toString(str).length * pxPerChar + 2 * padding
 }
 
-export const makeElement = (counts: ProcessCounts, processDefinitionData: ProcessDefinitionData) => {
+export const updateNodeCounts = (processCounts :ProcessCounts) => (node: shapes.devs.Model): void => {
+  const count = processCounts[node.id]
+  const hasCounts = !isEmpty(count)
+  const hasErrors = hasCounts && count?.errors > 0
+  const testCounts = hasCounts ? count?.all.toString() || "0" : ""
+  const testResultsWidth = getStringWidth(testCounts)
+
+  const testResultsSummary: attributes.SVGTextAttributes = {
+    text: testCounts,
+    fill: "#cccccc",
+    x: testResultsWidth / 2,
+  }
+  const testResults: attributes.SVGRectAttributes = {
+    display: hasCounts ? "block" : "none",
+    fill: hasErrors ? "#662222": "#4d4d4d",
+    stroke: hasErrors ? "red": "#4d4d4d",
+    strokeWidth: hasErrors ? 3 : 0,
+    width: testResultsWidth,
+  }
+  node.attr({testResultsSummary, testResults})
+}
+
+export function makeElement(processDefinitionData: ProcessDefinitionData): (node: NodeType) => shapes.devs.Model {
   const nodesSettings = processDefinitionData.nodesConfig || {}
   return (node: NodeType) => {
     const description = get(node.additionalFields, "description", null)
@@ -78,13 +99,7 @@ export const makeElement = (counts: ProcessCounts, processDefinitionData: Proces
     const nodeSettings = nodesSettings?.[ProcessUtils.findNodeConfigName(node)]
     const iconHref = getIconHref(node, nodeSettings)
 
-    const processCounts = counts[node.id]
-    const hasCounts = !isEmpty(processCounts)
-    const hasErrors = hasCounts && processCounts?.errors > 0
-    const testCounts = hasCounts ? processCounts?.all || 0 : ""
-    const testResultsWidth = getStringWidth(testCounts, 8, 8)
-
-    const attributes: joint.shapes.devs.ModelAttributes = {
+    const attributes: shapes.devs.ModelAttributes = {
       id: node.id,
       inPorts: NodeUtils.hasInputs(node) ? ["In"] : [],
       outPorts: NodeUtils.hasOutputs(node) ? ["Out"] : [],
@@ -106,16 +121,6 @@ export const makeElement = (counts: ProcessCounts, processDefinitionData: Proces
           text: bodyContent,
           opacity: node.isDisabled ? 0.65 : 1,
         },
-        testResultsSummary: {
-          text: testCounts,
-          fill: hasErrors ? "red" : "#CCCCCC",
-          x: -testResultsWidth / 2,
-        },
-        testResults: {
-          display: hasCounts ? "block" : "none",
-          width: testResultsWidth,
-          x: -testResultsWidth,
-        },
       },
       rankDir: "R",
       nodeData: node,
@@ -129,7 +134,6 @@ export const makeElement = (counts: ProcessCounts, processDefinitionData: Proces
         ].includes(key) ?
           null :
           undefined),
-        processCounts,
       },
     }
 

ui/client/components/graph/EspNode/esp.ts

@@ -2,6 +2,7 @@
 import {dia, shapes, util} from "jointjs"
 import expandIcon from "../../../assets/img/expand.svg"
 import "../graphTheme.styl"
+import {getStringWidth} from "./element"
 import {getRoundedRectPath} from "./getRoundedRectPath"
 
 const CONTENT_COLOR = "#1E1E1E"
@@ -122,7 +123,7 @@ const testResults: dia.MarkupNodeJSON = {
       className: "testResultsPlaceholder",
       attributes: {
         height: testResultsHeight,
-        y: RECT_HEIGHT,
+        y: RECT_HEIGHT - testResultsHeight/2,
       },
     },
     {
@@ -131,16 +132,16 @@ const testResults: dia.MarkupNodeJSON = {
       className: "testResultsSummary",
       attributes: {
         height: testResultsHeight,
-        y: RECT_HEIGHT + testResultsHeight / 2 + 1,
+        y: RECT_HEIGHT + testResultsHeight / 2 + 1 - testResultsHeight/2,
       },
     },
   ],
   attributes: {
     noExport: "",
-
   },
 }
 
+const refX = RECT_HEIGHT - getStringWidth("1")/2
 const defaults = util.defaultsDeep(
   {
     size: {
@@ -155,12 +156,15 @@ const defaults = util.defaultsDeep(
         stroke: BORDER_COLOR,
       },
       testResults: {
-        refX: RECT_WIDTH,
+        refX,
+        rx: 5,
+        z: 2,
       },
       testResultsSummary: {
         textAnchor: "middle",
         textVerticalAnchor: "middle",
-        refX: RECT_WIDTH,
+        refX,
+        z: 2,
       },
     },
     inPorts: [],
@@ -172,12 +176,14 @@ const defaults = util.defaultsDeep(
           attrs: {
             magnet: "passive",
             type: "input",
+            z: 1,
           },
         },
         out: {
           position: {name: `bottom`, args: {dx: 90}},
           attrs: {
             type: "output",
+            z: 1,
           },
         },
       },

ui/client/components/graph/Graph.js

@@ -1,13 +1,14 @@
 /* eslint-disable i18next/no-literal-string */
 import * as joint from "jointjs"
 import "jointjs/dist/joint.css"
-import _, {cloneDeep, debounce, defer, isEqual, sortBy} from "lodash"
+import _, {cloneDeep, debounce, isEqual, sortBy} from "lodash"
 import PropTypes from "prop-types"
 import React from "react"
 import {getProcessCategory, getSelectionState} from "../../reducers/selectors/graph"
 import {getLoggedUser, getProcessDefinitionData} from "../../reducers/selectors/settings"
 import "../../stylesheets/graph.styl"
 import {filterDragHovered, setLinksHovered} from "./dragHelpers"
+import {updateNodeCounts} from "./EspNode/element"
 import {FocusableDiv} from "./focusable"
 import {createPaper, directedLayout, drawGraph, isBackgroundObject, isGroupElement, isModelElement} from "./GraphPartialsInTS"
 import styles from "./graphTheme.styl"
@@ -89,7 +90,6 @@ export class Graph extends React.Component {
     this.drawGraph(
       this.props.processToDisplay,
       this.props.layout,
-      this.props.processCounts,
       this.props.processDefinitionData,
     )
     this.processGraphPaper.unfreeze()
@@ -111,6 +111,7 @@ export class Graph extends React.Component {
 
     this.bindEventHandlers()
     this.highlightNodes(this.props.processToDisplay, this.props.nodeToDisplay)
+    this.updateNodesCounts()
 
     this.graph.on(Events.CHANGE_DRAG_OVER, () => {
       const links = this.graph.getLinks()
@@ -123,6 +124,7 @@ export class Graph extends React.Component {
         active.toBack()
       }
     })
+
     this.graph.on(Events.ADD, (cell) => {
       this.handleInjectBetweenNodes(cell)
       setLinksHovered(this.graph)
@@ -145,28 +147,39 @@ export class Graph extends React.Component {
   }
 
   componentWillUpdate(nextProps, nextState) {
-    const processChanged = !_.isEqual(this.props.processToDisplay, nextProps.processToDisplay) ||
-      !_.isEqual(this.props.layout, nextProps.layout) ||
-      !_.isEqual(this.props.processCounts, nextProps.processCounts) ||
-      !_.isEqual(this.props.expandedGroups, nextProps.expandedGroups) ||
-      !_.isEqual(this.props.processDefinitionData, nextProps.processDefinitionData)
+    const processChanged = !isEqual(this.props.processToDisplay, nextProps.processToDisplay) ||
+      !isEqual(this.props.layout, nextProps.layout) ||
+      !isEqual(this.props.expandedGroups, nextProps.expandedGroups) ||
+      !isEqual(this.props.processDefinitionData, nextProps.processDefinitionData)
     if (processChanged) {
       this.drawGraph(
         nextProps.processToDisplay,
         nextProps.layout,
-        nextProps.processCounts,
         nextProps.processDefinitionData,
       )
     }
 
     //when e.g. layout changed we have to remember to highlight nodes
-    const nodeToDisplayChanged = !_.isEqual(this.props.nodeToDisplay, nextProps.nodeToDisplay)
-    const selectedNodesChanged = !_.isEqual(this.props.selectionState, nextProps.selectionState)
+    const nodeToDisplayChanged = !isEqual(this.props.nodeToDisplay, nextProps.nodeToDisplay)
+    const selectedNodesChanged = !isEqual(this.props.selectionState, nextProps.selectionState)
     if (processChanged || nodeToDisplayChanged || selectedNodesChanged) {
       this.highlightNodes(nextProps.processToDisplay, nextProps.nodeToDisplay, nextProps.selectionState)
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const {processCounts} = this.props
+    if (!isEqual(processCounts, prevProps.processCounts)) {
+      this.updateNodesCounts()
+    }
+  }
+
+  updateNodesCounts() {
+    const {processCounts} = this.props
+    const nodes = this.graph.getElements().filter(isModelElement)
+    nodes.forEach(updateNodeCounts(processCounts))
+  }
+
   zoomIn() {
     this.panAndZoom.zoomIn()
   }

ui/client/components/graph/GraphPartialsInTS/drawGraph.ts

@@ -12,9 +12,8 @@ import {updateLayout} from "./updateLayout"
 export function drawGraph(
   process: Process,
   layout: Layout,
-  processCounts: ProcessCounts,
   processDefinitionData: ProcessDefinitionData,
-) {
+): void {
   const graph: dia.Graph = this.graph
   const directedLayout = this.directedLayout
   const _updateLayout = updateLayout(graph, directedLayout)
@@ -27,7 +26,7 @@ export function drawGraph(
   const edgesWithGroups = NodeUtils.edgesFromProcess(process)
   const groups = NodeUtils.getExpandedGroups(process)
 
-  const nodes = nodesWithGroups.map(makeElement(processCounts, processDefinitionData))
+  const nodes = nodesWithGroups.map(makeElement(processDefinitionData))
   const edges = edgesWithGroups.map(makeLink)
   const boundingRects = groups.map(boundingRect(nodes, layout, nodesWithGroups))
 

ui/client/components/graph/joint-events.ts

@@ -6,6 +6,7 @@ export enum Events {
   CELL_POINTERCLICK = "cell:pointerclick",
   CELL_POINTERDBLCLICK = "cell:pointerdblclick",
   CELL_MOUSEOVER = "cell:mouseover",
+  CELL_MOUSEOUT = "cell:mouseout",
   BLANK_POINTERDOWN = "blank:pointerdown",
   BLANK_POINTERUP = "blank:pointerup",
   BLANK_POINTERMOVE = "blank:pointermove",

ui/client/components/graph/node-modal/editors/expression/AceWrapper.tsx

@@ -16,7 +16,7 @@ export interface AceWrapperProps extends Pick<IAceEditorProps,
     readOnly?: boolean,
     rows?: number,
   },
-  customAceEditorCompleter,
+  customAceEditorCompleter?,
   showLineNumbers?: boolean,
 }
 
@@ -70,7 +70,7 @@ export default forwardRef(function AceWrapper({
       highlightActiveLine={false}
       editorProps={DEFAULF_EDITOR_PROPS}
       setOptions={{...DEFAULT_OPTIONS, showLineNumbers}}
-      enableBasicAutocompletion={[customAceEditorCompleter]}
+      enableBasicAutocompletion={customAceEditorCompleter && [customAceEditorCompleter]}
       commands={[...DEFAULT_COMMANDS, ...commands]}
     />
   )

ui/client/components/graph/node-modal/editors/expression/JsonEditor.tsx

@@ -2,9 +2,10 @@ import React from "react"
 import {UnknownFunction} from "../../../../../types/common"
 
 import AceEditor from "./ace"
+import {ExpressionObj} from "./types"
 
 type Props = {
-  expressionObj: $TodoType,
+  expressionObj: ExpressionObj,
   onValueChange: UnknownFunction,
   className: string,
 }

ui/client/components/graph/node-modal/editors/expression/ace.ts

@@ -1,8 +1,9 @@
-import AceEditor from "react-ace"
-import "ace-builds/src-noconflict/mode-jsx"
+import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/ext-searchbox"
 import "ace-builds/src-noconflict/mode-json"
+import "ace-builds/src-noconflict/mode-jsx"
+import AceEditor from "react-ace"
 
 import "../../../../../brace/mode/spel"
 import "../../../../../brace/mode/sql"

ui/client/components/graph/node-modal/editors/expression/types.ts

@@ -1,7 +1,8 @@
 export enum ExpressionLang {
   SQL = "sql",
   SpEL = "spel",
-  String = "string"
+  String = "string",
+  JSON = "json"
 }
 
 export type ExpressionObj = {

ui/client/components/toolbarSettings/TOOLBAR_COMPONENTS_MAP.ts

@@ -8,6 +8,7 @@ import {DefaultToolbarPanel, ToolbarPanelProps} from "../toolbarComponents/Defau
 import DetailsPanel from "../toolbars/details/DetailsPanel"
 import ProcessInfo from "../toolbars/status/ProcessInfo"
 import TestPanel from "../toolbars/test/TestPanel"
+import {UserSettingsPanel} from "../toolbars/UserSettingsPanel"
 import {VersionsPanel} from "../toolbars/VersionsPanel"
 
 export const TOOLBAR_COMPONENTS_MAP: Record<string, ComponentType<ToolbarPanelProps>> = {
@@ -26,5 +27,6 @@ export const TOOLBAR_COMPONENTS_MAP: Record<string, ComponentType<ToolbarPanelPr
   "VERSIONS-PANEL": VersionsPanel,
   "COMMENTS-PANEL": CommentsPanel,
   "ATTACHMENTS-PANEL": AttachmentsPanel,
+  "USER-SETTINGS-PANEL": UserSettingsPanel,
 }