Merge pull request #175 from i-VRESSE/20-click-on-toml-text

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

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

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)

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": "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.4.5",
+    "react-syntax-highlighter": "15.4.5",
     "react-toastify": "^8.1.0",
     "recoil": "^0.5.2",
     "web-encoding": "^1.1.5"

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,32 @@ 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={() => ({
+        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": 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.4.5
+    react-syntax-highlighter: 15.4.5
     react-toastify: ^8.1.0
     recoil: ^0.5.2
     ts-dedent: ^2.2.0
@@ -4585,7 +4585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-syntax-highlighter@npm:^13.5.2":
+"@types/react-syntax-highlighter@npm:13.5.2":
   version: 13.5.2
   resolution: "@types/react-syntax-highlighter@npm:13.5.2"
   dependencies:
@@ -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,6 +15636,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"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"
@@ -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: