From 45a331a9362144204f3177478fdf65131d96d00f Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Wed, 9 Oct 2024 14:35:18 +0200
Subject: [PATCH 1/4] Clicking in workflow config toml text will show form for
 that node

Fixes #20
---
 CHANGELOG.md                                  |  6 +++
 packages/core/package.json                    |  4 +-
 packages/core/src/HighlightedCode.stories.tsx | 17 +++++++
 packages/core/src/HighlightedCode.tsx         | 24 ++++++++-
 packages/core/src/TextPanel.tsx               | 16 +++++-
 packages/core/src/toml.test.ts                | 50 ++++++++++++++++++-
 packages/core/src/toml.ts                     | 24 +++++++++
 yarn.lock                                     | 10 ++--
 8 files changed, 139 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd1fe775..82b0e36b 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/core/package.json b/packages/core/package.json
index f4a8a38e..55714354 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/HighlightedCode.stories.tsx b/packages/core/src/HighlightedCode.stories.tsx
index abc402df..ee105ad3 100644
--- a/packages/core/src/HighlightedCode.stories.tsx
+++ b/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')
+}
diff --git a/packages/core/src/HighlightedCode.tsx b/packages/core/src/HighlightedCode.tsx
index 1f215894..65735096 100644
--- a/packages/core/src/HighlightedCode.tsx
+++ b/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>
diff --git a/packages/core/src/TextPanel.tsx b/packages/core/src/TextPanel.tsx
index 156e3c7c..5f0b93ef 100644
--- a/packages/core/src/TextPanel.tsx
+++ b/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={{
diff --git a/packages/core/src/toml.test.ts b/packages/core/src/toml.test.ts
index 11177736..3f54cada 100644
--- a/packages/core/src/toml.test.ts
+++ b/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)
+  })
+})
diff --git a/packages/core/src/toml.ts b/packages/core/src/toml.ts
index 291e466f..16e8800e 100644
--- a/packages/core/src/toml.ts
+++ b/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
+}
diff --git a/yarn.lock b/yarn.lock
index c3b99a66..de4af18f 100644
--- a/yarn.lock
+++ b/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
 

From 8fdaf8743b868df413976f0770a68d096032e8dc Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Wed, 9 Oct 2024 14:47:47 +0200
Subject: [PATCH 2/4] Update types for higlighter

---
 packages/core/package.json | 2 +-
 yarn.lock                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 55714354..a4d08630 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -80,7 +80,7 @@
     "react-bootstrap": "^1",
     "react-dnd-html5-backend": "^14.1.0",
     "react-icons": "^3.10.0",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^8.1.0",
     "recoil": "^0.5.2",
     "web-encoding": "^1.1.5"
diff --git a/yarn.lock b/yarn.lock
index de4af18f..a71d65b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2360,7 +2360,7 @@ __metadata:
     react-bootstrap: ^1
     react-dnd-html5-backend: ^14.1.0
     react-icons: ^3.10.0
-    react-syntax-highlighter: ^15.4.5
+    react-syntax-highlighter: ^15.5.0
     react-toastify: ^8.1.0
     recoil: ^0.5.2
     ts-dedent: ^2.2.0
@@ -15629,7 +15629,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-syntax-highlighter@npm:^15.4.5":
+"react-syntax-highlighter@npm:^15.4.5, react-syntax-highlighter@npm:^15.5.0":
   version: 15.5.0
   resolution: "react-syntax-highlighter@npm:15.5.0"
   dependencies:

From d1fd5cb376af280600fffeedd341a2b0ac7cd082 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Wed, 9 Oct 2024 15:07:27 +0200
Subject: [PATCH 3/4] Pin highlighter so ts is happy

---
 packages/core/package.json            |  4 +--
 packages/core/src/HighlightedCode.tsx |  8 +++---
 yarn.lock                             | 38 +++++++++++++++++++++------
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index a4d08630..9d114a44 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -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": "^15.5.0",
+    "@types/react-syntax-highlighter": "13.5.2",
     "@vitest/coverage-v8": "^1.5.3",
     "babel-loader": "^8.2.5",
     "c8": "^7.11.0",
@@ -80,7 +80,7 @@
     "react-bootstrap": "^1",
     "react-dnd-html5-backend": "^14.1.0",
     "react-icons": "^3.10.0",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-syntax-highlighter": "15.4.5",
     "react-toastify": "^8.1.0",
     "recoil": "^0.5.2",
     "web-encoding": "^1.1.5"
diff --git a/packages/core/src/HighlightedCode.tsx b/packages/core/src/HighlightedCode.tsx
index 65735096..0fb2c56c 100644
--- a/packages/core/src/HighlightedCode.tsx
+++ b/packages/core/src/HighlightedCode.tsx
@@ -32,11 +32,9 @@ export const HighlightedCode = ({ code, onClick }: IProps): JSX.Element => (
       })}
       // onClick only works with showLineNumbers, so enable and hide
       showLineNumbers
-      lineNumberStyle={(props) => {
-        return {
-          display: 'none'
-        }
-      }}
+      lineNumberStyle={() => ({
+        display: 'none'
+      })}
     >
       {code}
     </SyntaxHighlighter>
diff --git a/yarn.lock b/yarn.lock
index a71d65b8..4689c848 100644
--- a/yarn.lock
+++ b/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": ^15.5.0
+    "@types/react-syntax-highlighter": 13.5.2
     "@vitest/coverage-v8": ^1.5.3
     "@zip.js/zip.js": ^2.3.23
     ajv: ^8.9.0
@@ -2360,7 +2360,7 @@ __metadata:
     react-bootstrap: ^1
     react-dnd-html5-backend: ^14.1.0
     react-icons: ^3.10.0
-    react-syntax-highlighter: ^15.5.0
+    react-syntax-highlighter: 15.4.5
     react-toastify: ^8.1.0
     recoil: ^0.5.2
     ts-dedent: ^2.2.0
@@ -4585,12 +4585,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-syntax-highlighter@npm:^15.5.0":
-  version: 15.5.13
-  resolution: "@types/react-syntax-highlighter@npm:15.5.13"
+"@types/react-syntax-highlighter@npm:13.5.2":
+  version: 13.5.2
+  resolution: "@types/react-syntax-highlighter@npm:13.5.2"
   dependencies:
     "@types/react": "*"
-  checksum: 55f751c140eb6641b16a5644af3b6fc25223957141085758ae6898948e70eaca33d8276e86e75d5d60939aff63af1d20278aba0d3a25483266f9deee1eb468e3
+  checksum: 237cb596368f7c2c8549d0150308cd5fe633d249b6e20bebb4e242bc1172b60e808db2a57d212f409ab3fee37f47b8465ac35c4754e814d7e0f53cc1b2dd14ea
   languageName: node
   linkType: hard
 
@@ -15077,6 +15077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.25.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: 007a8869d4456ff8049dc59404e32d5666a07d99c3b0e30a18bd3b7676dfa07d1daae9d0f407f20983865fd8da56de91d09cb08e6aa61f5bc420a27c0beeaf93
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.27.0":
   version: 1.28.0
   resolution: "prismjs@npm:1.28.0"
@@ -15629,7 +15636,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-syntax-highlighter@npm:^15.4.5, react-syntax-highlighter@npm:^15.5.0":
+"react-syntax-highlighter@npm:15.4.5":
+  version: 15.4.5
+  resolution: "react-syntax-highlighter@npm:15.4.5"
+  dependencies:
+    "@babel/runtime": ^7.3.1
+    highlight.js: ^10.4.1
+    lowlight: ^1.17.0
+    prismjs: ^1.25.0
+    refractor: ^3.2.0
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: 120bac5cfbd65eb47e513b8057e3cb71843ce15241bbf933c1818c294965b87d8e074c7929a8fc2ced66c3e3f38c4cc6bf04365a8345e3a382cd524d0093949f
+  languageName: node
+  linkType: hard
+
+"react-syntax-highlighter@npm:^15.4.5":
   version: 15.5.0
   resolution: "react-syntax-highlighter@npm:15.5.0"
   dependencies:
@@ -15821,7 +15843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"refractor@npm:^3.6.0":
+"refractor@npm:^3.2.0, refractor@npm:^3.6.0":
   version: 3.6.0
   resolution: "refractor@npm:3.6.0"
   dependencies:

From c96e49b48df9afa796649d4a95c715473faf5c65 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Wed, 9 Oct 2024 15:15:47 +0200
Subject: [PATCH 4/4] Fix test: assert sees hidden line numbers

---
 .../integration-tests/dupheader.spec.ts       | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/haddock3-download/integration-tests/dupheader.spec.ts b/apps/haddock3-download/integration-tests/dupheader.spec.ts
index 1c98eaa7..88bd06f3 100644
--- a/apps/haddock3-download/integration-tests/dupheader.spec.ts
+++ b/apps/haddock3-download/integration-tests/dupheader.spec.ts
@@ -42,16 +42,17 @@ test.describe('given an uploaded archive with a workflow.cfg file with a duplica
     const lines = await highlightedCode.allTextContents()
     const content = lines.join('\n')
     const expected = dedent`
-
-      molecules = [
-        'some.pdb',
-      ]
-
-      run_dir = 'run1'
-
-      [caprieval]
-
-      ['caprieval.2']
+      1
+      2molecules = [
+      3  'some.pdb',
+      4]
+      5
+      6run_dir = 'run1'
+      7
+      8[caprieval]
+      9
+      10['caprieval.2']
+      11
 
     `
     expect(content).toEqual(expected)