Clicking in workflow config toml text will show form for that node

Fixes #20

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## @i-vresse/wb-core 3.2.2 - 2024-10-09
+
+### Added
+
+- Configure node by clicking in workflow config toml text ([#20](https://github.com/i-VRESSE/workflow-builder/issues/20))
+
 ## @i-vresse/wb-core 3.2.1 - 2024-08-26
 
 ### Fixed

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-vresse/wb-core",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "React components to construct a workflow builder application",
   "keywords": [
     "react",
@@ -50,7 +50,7 @@
     "@types/file-saver": "^2.0.4",
     "@types/js-yaml": "^4.0.5",
     "@types/papaparse": "^5.3.2",
-    "@types/react-syntax-highlighter": "^13.5.2",
+    "@types/react-syntax-highlighter": "^15.5.0",
     "@vitest/coverage-v8": "^1.5.3",
     "babel-loader": "^8.2.5",
     "c8": "^7.11.0",

packages/core/src/HighlightedCode.stories.tsx

@@ -1,5 +1,6 @@
 import { HighlightedCode } from './HighlightedCode'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 
 const story: ComponentMeta<typeof HighlightedCode> = {
   title: 'HighlightedCode',
@@ -25,3 +26,19 @@ prop3 = 'b'
 prop2 = 'x'
 `
 }
+
+export const SecondStory = Template.bind({})
+SecondStory.args = {
+  code: `
+prop1 = 'xx'
+prop3 = 'cc'
+prop2 = 'vv'
+
+[node1]
+
+prop1 = 'a'
+prop3 = 'b'
+prop2 = 'x'
+`,
+  onClick: action('onClick')
+}

packages/core/src/HighlightedCode.tsx

@@ -10,14 +10,34 @@ export interface IProps {
    * The piece of code in TOML format
    */
   code: string
+  onClick?: (lineNumber: number) => void
 }
 
 /**
  * Render piece of TOML formatted text in colors.
  */
-export const HighlightedCode = ({ code }: IProps): JSX.Element => (
+export const HighlightedCode = ({ code, onClick }: IProps): JSX.Element => (
   <div id='highlightedcode'>
-    <SyntaxHighlighter language='toml' style={style}>
+    <SyntaxHighlighter
+      language='toml'
+      style={style}
+      wrapLines
+      lineProps={lineNumber => ({
+        style: { display: 'block', cursor: 'pointer' },
+        onClick () {
+          if (onClick != null) {
+            onClick(lineNumber)
+          }
+        }
+      })}
+      // onClick only works with showLineNumbers, so enable and hide
+      showLineNumbers
+      lineNumberStyle={(props) => {
+        return {
+          display: 'none'
+        }
+      }}
+    >
       {code}
     </SyntaxHighlighter>
   </div>

packages/core/src/TextPanel.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { HighlightedCode } from './HighlightedCode'
 
-import { useText } from './store'
+import { useText, useWorkflow } from './store'
+import { lines2node } from './toml'
 
 // TODO highlighter is 1/3 of dist/vendor.js, look for lighter alternative
 // Already tried to use dynamic import:
@@ -10,18 +11,29 @@ import { useText } from './store'
 
 export const TextPanel = (): JSX.Element => {
   const code = useText()
+  const { selectNode, selectGlobalEdit } = useWorkflow()
 
   async function copy2clipboard (): Promise<void> {
     await navigator.permissions.query({ name: 'clipboard-write' } as any)
     await navigator.clipboard.writeText(code)
   }
 
+  function onClickLine (lineNumber: number): void {
+    const lookup = lines2node(code)
+    const nodeIndex = lookup[lineNumber]
+    if (nodeIndex === -1) {
+      selectGlobalEdit()
+    } else {
+      selectNode(nodeIndex)
+    }
+  }
+
   return (
     <div style={{
       position: 'relative'
     }}
     >
-      <HighlightedCode code={code} />
+      <HighlightedCode code={code} onClick={onClickLine} />
       <button
         className='btn btn-link'
         style={{

packages/core/src/toml.test.ts

@@ -1,6 +1,6 @@
 import dedent from 'ts-dedent'
 import { expect, describe, it, beforeEach } from 'vitest'
-import { dedupWorkflow, parseWorkflowByCatalogPieces, TomlSchemas, workflow2tomltext, tomlstring2table, parseWorkflow } from './toml'
+import { dedupWorkflow, parseWorkflowByCatalogPieces, TomlSchemas, workflow2tomltext, tomlstring2table, parseWorkflow, lines2node } from './toml'
 import { ICatalog, IParameters } from './types'
 
 describe('workflow2tomltext()', () => {
@@ -1065,3 +1065,51 @@ describe('parseWorkflow()', () => {
     })
   })
 })
+
+describe('lines2node()', () => {
+  it('given just global parameters should return all lines -1', () => {
+    const workflow = [
+      '',
+      'molecules = [',
+      ']',
+      ''
+    ].join('\n')
+
+    const lookup = lines2node(workflow)
+
+    const expected = [-1, -1, -1, -1, -1]
+    expect(lookup).toEqual(expected)
+  })
+
+  it('given one section', () => {
+    const workflow = [
+      '',
+      'molecules = [',
+      ']',
+      '',
+      '[section1]'
+    ].join('\n')
+
+    const lookup = lines2node(workflow)
+
+    const expected = [-1, -1, -1, -1, -1, 0]
+    expect(lookup).toEqual(expected)
+  })
+
+  it('given 2 sections', () => {
+    const workflow = [
+      '',
+      'molecules = [',
+      ']',
+      '',
+      '[section1]',
+      '',
+      '[section2]'
+    ].join('\n')
+
+    const lookup = lines2node(workflow)
+
+    const expected = [-1, -1, -1, -1, -1, 0, 0, 1]
+    expect(lookup).toEqual(expected)
+  })
+})

packages/core/src/toml.ts

@@ -304,3 +304,27 @@ export function dedupWorkflow (inp: string): string {
     )
     .join('\n')
 }
+
+/**
+ * For each line in the text, return the node index.
+ * -1 for global parameters.
+ *
+ * @param text The TOML text
+ * @returns
+ */
+export function lines2node (text: string): number[] {
+  const lines = text.split('\n')
+  // highlighter linenumber starts with 1 so add offset
+  const nodeLines: number[] = [-1]
+  let nodeIndex = -1
+  const isTable = /^\[/
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (isTable.test(line)) {
+      nodeIndex++
+    }
+    nodeLines.push(nodeIndex)
+  }
+
+  return nodeLines
+}

yarn.lock

@@ -2344,7 +2344,7 @@ __metadata:
     "@types/file-saver": ^2.0.4
     "@types/js-yaml": ^4.0.5
     "@types/papaparse": ^5.3.2
-    "@types/react-syntax-highlighter": ^13.5.2
+    "@types/react-syntax-highlighter": ^15.5.0
     "@vitest/coverage-v8": ^1.5.3
     "@zip.js/zip.js": ^2.3.23
     ajv: ^8.9.0
@@ -4585,12 +4585,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-syntax-highlighter@npm:^13.5.2":
-  version: 13.5.2
-  resolution: "@types/react-syntax-highlighter@npm:13.5.2"
+"@types/react-syntax-highlighter@npm:^15.5.0":
+  version: 15.5.13
+  resolution: "@types/react-syntax-highlighter@npm:15.5.13"
   dependencies:
     "@types/react": "*"
-  checksum: 237cb596368f7c2c8549d0150308cd5fe633d249b6e20bebb4e242bc1172b60e808db2a57d212f409ab3fee37f47b8465ac35c4754e814d7e0f53cc1b2dd14ea
+  checksum: 55f751c140eb6641b16a5644af3b6fc25223957141085758ae6898948e70eaca33d8276e86e75d5d60939aff63af1d20278aba0d3a25483266f9deee1eb468e3
   languageName: node
   linkType: hard