Merge pull request #176 from i-VRESSE/151-node-label

Allow to configure node label in catalog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Configure node by clicking in workflow config toml text ([#20](https://github.com/i-VRESSE/workflow-builder/issues/20))
+- Allow to configure node legend in catalog ([#151](https://github.com/i-VRESSE/workflow-builder/issues/151))
 
 ## @i-vresse/wb-core 3.2.1 - 2024-08-26
 

README.md

@@ -171,6 +171,7 @@ The catalog is a YAML formatted file which tells the app what nodes are availabl
 4. examples: Title and link to example workflows
     * map with title as key and link as value
 5. title: Title of the catalog
+6. nodeLegend: Legend of the node in the app. Default is 'Node'
 
 ### schema
 

packages/core/README.md

@@ -64,6 +64,7 @@ function App() {
   useEffect(() => {
     const catalog = {
       title: "Some title",
+      nodeLegend: "Workflow node",
       global: {
         schema: {
           type: "object",

packages/core/src/CatalogPanel.stories.tsx

@@ -108,3 +108,19 @@ export const WithExample: ComponentStory<typeof CatalogPanel> = () => {
   })
   return <CatalogPanel />
 }
+
+export const WithNodeLegend: ComponentStory<typeof CatalogPanel> = () => {
+  const setCatalog = useSetCatalog()
+  setCatalog({
+    title: 'Some title',
+    nodeLegend: 'My custom node label',
+    categories: [],
+    global: {
+      schema: {},
+      uiSchema: {}
+    },
+    nodes: [],
+    examples: {}
+  })
+  return <CatalogPanel />
+}

packages/core/src/CatalogPanel.tsx

@@ -18,7 +18,7 @@ export const CatalogPanel = ({ children }: PropsWithChildren<{}>): JSX.Element =
       <legend>Catalog</legend>
       <React.Suspense fallback={<span>Loading catalog...</span>}>
         {children}
-        <h4>Nodes</h4>
+        <h4>{catalog.nodeLegend ?? 'Node'}s</h4>
         <ul style={{ lineHeight: '2.5em' }}>
           {catalog.categories.map((category) => (
             <CatalogCategory key={category.name} {...category} />

packages/core/src/NodePanel.stories.tsx

@@ -87,3 +87,32 @@ export const NodeSelected: ComponentStory<typeof NodePanel> = () => {
   }, [])
   return <NodePanel />
 }
+
+export const CustomNodeLegend: ComponentStory<typeof NodePanel> = () => {
+  const setCatalog = useSetCatalog()
+  // const { setEditingGlobal } = useWorkflow()
+  useEffect(() => {
+    const catalog = prepareCatalog({
+      title: 'Some title',
+      nodeLegend: 'My custom node label',
+      categories: [],
+      global: {
+        schema: {
+          type: 'object',
+          properties: {
+            parameter1: {
+              type: 'string'
+            }
+          },
+          additionalProperties: false
+        },
+        uiSchema: {}
+      },
+      nodes: [],
+      examples: {}
+    })
+    setCatalog(catalog)
+    // toggleGlobalEdit()
+  }, [])
+  return <NodePanel />
+}

packages/core/src/NodePanel.tsx

@@ -3,16 +3,17 @@ import React from 'react'
 import { FormProps } from './FormProps'
 import { GlobalForm } from './GlobalForm'
 import { NodeForm } from './NodeForm'
-import { useSelectNodeIndex } from './store'
+import { useCatalog, useSelectNodeIndex } from './store'
 
 /**
  * Panel which renders the form for the selected node or the global parameters.
  *
  */
 export const NodePanel = ({ fields, widgets }: FormProps): JSX.Element => {
   const selectedNodeIndex = useSelectNodeIndex()
+  const { nodeLegend } = useCatalog()
 
-  const legend = 'Node'
+  const legend = nodeLegend ?? 'Node'
 
   return (
     <fieldset>

packages/core/src/types.ts

@@ -53,6 +53,7 @@ export interface IGlobal {
 
 export interface ICatalog {
   title: string
+  nodeLegend?: string
   global: IGlobal
   categories: ICategory[]
   nodes: ICatalogNode[]

packages/haddock3_catalog/generate_haddock3_catalog.py

@@ -534,6 +534,7 @@ def process_level(level_fn: Path, level: str):
 
     catalog = {
         "title": f"Haddock 3 on {level} level",
+        "nodeLegend": "Module",
         "categories": categories,
         'global': process_global(level),
         "nodes": nodes,

packages/haddock3_catalog/public/catalog/haddock3.easy.yaml

@@ -1,4 +1,5 @@
 title: Haddock 3 on easy level
+nodeLegend: Module
 categories:
 - name: topology
   description: HADDOCK3 modules to create topologies.

packages/haddock3_catalog/public/catalog/haddock3.expert.yaml

@@ -1,4 +1,5 @@
 title: Haddock 3 on expert level
+nodeLegend: Module
 categories:
 - name: topology
   description: HADDOCK3 modules to create topologies.

packages/haddock3_catalog/public/catalog/haddock3.guru.yaml

@@ -1,4 +1,5 @@
 title: Haddock 3 on guru level
+nodeLegend: Module
 categories:
 - name: topology
   description: HADDOCK3 modules to create topologies.