From 2f1165669dcf52077865b362706b859dbbb81702 Mon Sep 17 00:00:00 2001 From: "Dusan Mijatovic (PC2022)" Date: Fri, 8 Mar 2024 11:18:12 +0100 Subject: [PATCH 1/7] refactor: remove css-in-js styles defined using @emotion. @emotion dependecy seem to be required by storybook, so it is moved to devDependencies --- packages/core/package.json | 2 +- packages/core/src/CatalogNode.tsx | 35 ++--- packages/core/src/Example.tsx | 2 +- packages/core/src/VisualNode.tsx | 30 +--- packages/core/src/VisualPanel.tsx | 11 +- packages/core/src/WorkflowPanel.tsx | 2 +- packages/core/src/constants.ts | 1 - yarn.lock | 228 +++++++++++++++++----------- 8 files changed, 159 insertions(+), 152 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index c3543b62..c6678dbf 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -36,6 +36,7 @@ }, "devDependencies": { "@babel/core": "^7.18.6", + "@emotion/react": "^11.9.3", "@mdx-js/react": "^1.6.22", "@storybook/addon-actions": "^6.5.9", "@storybook/addon-docs": "^6.5.9", @@ -64,7 +65,6 @@ "@dnd-kit/core": "^6.0.5", "@dnd-kit/modifiers": "^6.0.0", "@dnd-kit/sortable": "^7.0.1", - "@emotion/react": "^11.9.3", "@i-vresse/pdbtbx-ts": "0.1.7", "@i-vresse/wb-form": "workspace:^", "@ltd/j-toml": "^1.24.0", diff --git a/packages/core/src/CatalogNode.tsx b/packages/core/src/CatalogNode.tsx index 190f5741..a6ea8422 100644 --- a/packages/core/src/CatalogNode.tsx +++ b/packages/core/src/CatalogNode.tsx @@ -1,32 +1,13 @@ -/** @jsxRuntime classic */ // storybook builder can not use default jsxRuntime so overwritting it here. -/** @jsx jsx */ -import { jsx, css } from '@emotion/react' +import React from 'react' import { useDraggable } from '@dnd-kit/core' +import {CSS} from '@dnd-kit/utilities' -import { nodeWidth } from './constants' import { useWorkflow } from './store' import { ICatalogNode } from './types' import { GripVertical } from './GripVertical' -const buttonStyle = css({ - width: `${nodeWidth}rem`, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 4, - - '& .grip': { - visibility: 'hidden', - cursor: 'grab' - }, - - '&:hover .grip': { - visibility: 'visible' - } -}) - export const CatalogNode = ({ id, label }: ICatalogNode): JSX.Element => { - const { attributes, listeners, setNodeRef, transform, setActivatorNodeRef } = + const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform } = useDraggable({ id, data: { catalog: true } }) const dragStyle = transform != null @@ -35,17 +16,21 @@ export const CatalogNode = ({ id, label }: ICatalogNode): JSX.Element => { } : {} + const style = { + transform: CSS.Translate.toString(transform), + }; + const { addNodeToWorkflow } = useWorkflow() return (
  • - ) : null} {draggingWorkflowNode !== undefined - ? ( - - ) : null} diff --git a/packages/core/src/WorkflowPanel.tsx b/packages/core/src/WorkflowPanel.tsx index b1fb35c3..a830a6e8 100644 --- a/packages/core/src/WorkflowPanel.tsx +++ b/packages/core/src/WorkflowPanel.tsx @@ -19,23 +19,26 @@ export const WorkflowPanel = ({ children }: PropsWithChildren<{}>): JSX.Element const textTabStyle = tab === 'text' ? 'nav-link active' : 'nav-link' return ( -
    +
    Workflow -
    -
    - - {children} -
    -
      -
    • - -
      • -
    • - -
      • -
    - {selectedPanel} +
    + + {children}
    +
      +
    • + +
      • +
    • + +
      • +
    + {selectedPanel}
    ) } From 543aea311c471a4040ec54fd767ebec2d3e0f3d5 Mon Sep 17 00:00:00 2001 From: sverhoeven Date: Tue, 12 Mar 2024 09:59:19 +0100 Subject: [PATCH 4/7] Fix lint error --- packages/core/src/VisualPanel.tsx | 40 +++++++++++++++++-------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/core/src/VisualPanel.tsx b/packages/core/src/VisualPanel.tsx index 81594635..90595b1a 100644 --- a/packages/core/src/VisualPanel.tsx +++ b/packages/core/src/VisualPanel.tsx @@ -71,36 +71,40 @@ export const VisualPanel = (): JSX.Element => { {draggingCatalogNode !== null - ? + ) : null} {draggingWorkflowNode !== undefined - ? + ) : null} From c0abb7ab0285589e97b3fb783f642c0605af8500 Mon Sep 17 00:00:00 2001 From: "Dusan Mijatovic (PC2022)" Date: Tue, 12 Mar 2024 12:54:36 +0100 Subject: [PATCH 5/7] refactor: add form styles to example apps --- apps/haddock3-download/src/App.css | 6 ++ apps/haddock3-download/src/App.tsx | 7 +- apps/haddock3-galaxy/src/App.css | 105 ++++++++++++++++++++++++++--- apps/haddock3-galaxy/src/App.tsx | 2 +- apps/haddock3-submit/src/App.css | 105 ++++++++++++++++++++++++++--- apps/haddock3-submit/src/App.tsx | 2 +- apps/kitchensink/src/App.css | 104 ++++++++++++++++++++++++++-- apps/kitchensink/src/App.tsx | 2 +- 8 files changed, 301 insertions(+), 32 deletions(-) diff --git a/apps/haddock3-download/src/App.css b/apps/haddock3-download/src/App.css index c3b9e4c5..e7a1371c 100644 --- a/apps/haddock3-download/src/App.css +++ b/apps/haddock3-download/src/App.css @@ -15,6 +15,12 @@ column-gap: 1rem; } +/* Style workflow area section */ +.workflow-area { + display: flex; + flex-direction: column; +} + /* Style various form buttons */ .btn { display: flex; diff --git a/apps/haddock3-download/src/App.tsx b/apps/haddock3-download/src/App.tsx index fa086653..7b34644e 100644 --- a/apps/haddock3-download/src/App.tsx +++ b/apps/haddock3-download/src/App.tsx @@ -27,12 +27,7 @@ function App (): JSX.Element { - + diff --git a/apps/haddock3-galaxy/src/App.css b/apps/haddock3-galaxy/src/App.css index 099ea75b..f77096bc 100644 --- a/apps/haddock3-galaxy/src/App.css +++ b/apps/haddock3-galaxy/src/App.css @@ -1,21 +1,110 @@ +/* + Customise workflow builder components + NOTE! copy of apps/haddock3-download/src/App.css +*/ + .page { padding: 1em; display: grid; width: 100%; height: 100vh; grid-template-areas: "head head head" - "catalog workflow node" - "catalog workflow-actions node-actions"; - grid-template-columns: 1fr 1fr 2fr; + "catalog workflow node" + "catalog workflow-actions node-actions"; + grid-template-columns: min-content minmax(12rem, 1fr) minmax(20rem, 2fr); grid-template-rows: auto 1fr auto; - column-gap: 0.5rem; + column-gap: 1rem; } -.page > div { - overflow: auto; +/* Style workflow area section */ +.workflow-area { + display: flex; + flex-direction: column; +} + +/* Style various form buttons */ +.btn { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.btn-visual-panel, +.btn-catalog-node { + width: 100%; +} + +.btn-group { + display: flex; + gap: 0.5rem; } -.page > .action-row { +.no-wrap { + text-wrap: nowrap; +} + +ul { + padding: 0.25rem 0.25rem 0.25rem 1.25rem; +} + +li { + list-style-type: none; +} + +li>ul { + padding: 0rem; +} + +div[role="button"], +.btn-catalog-node { + margin: 0.5rem 0rem; + cursor: pointer; +} + +/* Format actions section at the bottom */ +.action-row, +.action-row>.nav { + display: flex; + gap: 1rem; padding: 0.25rem; - overflow: unset; } + +.action-row>.nav { + flex: 1; + justify-content: flex-end; +} + + +.btn-toolbar { + display: flex; + gap: 1rem; + padding: 1rem 0rem; +} + +/* Show panel section is clickable */ +h5[id^="expander4"] { + cursor: pointer; +} + +/* Allow scrollbars in the card when content is too large */ +.card-body { + overflow: auto; +} + +/* Alow scrollbars on tables which exceed card width */ +.form-group>fieldset { + overflow: auto; +} + +/* hide commands by default */ +.btn-catalog-node .grip, +.btn-visual-node .btn-group { + visibility: hidden; +} + +/* show commands on hover */ +.btn-catalog-node:hover .grip, +.btn-visual-node:hover .btn-group { + visibility: visible; +} \ No newline at end of file diff --git a/apps/haddock3-galaxy/src/App.tsx b/apps/haddock3-galaxy/src/App.tsx index e576974b..824be30c 100644 --- a/apps/haddock3-galaxy/src/App.tsx +++ b/apps/haddock3-galaxy/src/App.tsx @@ -62,7 +62,7 @@ function App (): JSX.Element { - + diff --git a/apps/haddock3-submit/src/App.css b/apps/haddock3-submit/src/App.css index 099ea75b..9bed8dd6 100644 --- a/apps/haddock3-submit/src/App.css +++ b/apps/haddock3-submit/src/App.css @@ -1,21 +1,110 @@ +/* + Customise workflow builder components + NOTE ! copy of apps/haddock3-download/src/App.css +*/ + .page { padding: 1em; display: grid; width: 100%; height: 100vh; grid-template-areas: "head head head" - "catalog workflow node" - "catalog workflow-actions node-actions"; - grid-template-columns: 1fr 1fr 2fr; + "catalog workflow node" + "catalog workflow-actions node-actions"; + grid-template-columns: min-content minmax(12rem, 1fr) minmax(20rem, 2fr); grid-template-rows: auto 1fr auto; - column-gap: 0.5rem; + column-gap: 1rem; } -.page > div { - overflow: auto; +/* Style workflow area section */ +.workflow-area{ + display: flex; + flex-direction: column; +} + +/* Style various form buttons */ +.btn { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.btn-visual-panel, +.btn-catalog-node { + width: 100%; +} + +.btn-group { + display: flex; + gap: 0.5rem; } -.page > .action-row { +.no-wrap { + text-wrap: nowrap; +} + +ul { + padding: 0.25rem 0.25rem 0.25rem 1.25rem; +} + +li { + list-style-type: none; +} + +li>ul { + padding: 0rem; +} + +div[role="button"], +.btn-catalog-node { + margin: 0.5rem 0rem; + cursor: pointer; +} + +/* Format actions section at the bottom */ +.action-row, +.action-row>.nav { + display: flex; + gap: 1rem; padding: 0.25rem; - overflow: unset; } + +.action-row>.nav { + flex: 1; + justify-content: flex-end; +} + + +.btn-toolbar { + display: flex; + gap: 1rem; + padding: 1rem 0rem; +} + +/* Show panel section is clickable */ +h5[id^="expander4"] { + cursor: pointer; +} + +/* Allow scrollbars in the card when content is too large */ +.card-body { + overflow: auto; +} + +/* Alow scrollbars on tables which exceed card width */ +.form-group>fieldset { + overflow: auto; +} + +/* hide commands by default */ +.btn-catalog-node .grip, +.btn-visual-node .btn-group { + visibility: hidden; +} + +/* show commands on hover */ +.btn-catalog-node:hover .grip, +.btn-visual-node:hover .btn-group { + visibility: visible; +} \ No newline at end of file diff --git a/apps/haddock3-submit/src/App.tsx b/apps/haddock3-submit/src/App.tsx index 04556aab..ea47e87c 100644 --- a/apps/haddock3-submit/src/App.tsx +++ b/apps/haddock3-submit/src/App.tsx @@ -26,7 +26,7 @@ function App (): JSX.Element { - + diff --git a/apps/kitchensink/src/App.css b/apps/kitchensink/src/App.css index ebf40ea4..6f807898 100644 --- a/apps/kitchensink/src/App.css +++ b/apps/kitchensink/src/App.css @@ -1,20 +1,110 @@ +/* + Customise workflow builder components + NOTE ! copy of apps/haddock3-download/src/App.css +*/ + .page { padding: 1em; display: grid; width: 100%; height: 100vh; grid-template-areas: "head head head" - "catalog workflow node" - "catalog workflow-actions node-actions"; - grid-template-columns: 1fr 1fr 2fr; + "catalog workflow node" + "catalog workflow-actions node-actions"; + grid-template-columns: min-content minmax(12rem, 1fr) minmax(20rem, 2fr); grid-template-rows: auto 1fr auto; - column-gap: 0.5rem; + column-gap: 1rem; +} + +/* Style workflow area section */ +.workflow-area { + display: flex; + flex-direction: column; +} + +/* Style various form buttons */ +.btn { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; } -.page > div { +.btn-visual-panel, +.btn-catalog-node { + width: 100%; +} + +.btn-group { + display: flex; + gap: 0.5rem; +} + +.no-wrap { + text-wrap: nowrap; +} + +ul { + padding: 0.25rem 0.25rem 0.25rem 1.25rem; +} + +li { + list-style-type: none; +} + +li>ul { + padding: 0rem; +} + +div[role="button"], +.btn-catalog-node { + margin: 0.5rem 0rem; + cursor: pointer; +} + +/* Format actions section at the bottom */ +.action-row, +.action-row>.nav { + display: flex; + gap: 1rem; + padding: 0.25rem; +} + +.action-row>.nav { + flex: 1; + justify-content: flex-end; +} + + +.btn-toolbar { + display: flex; + gap: 1rem; + padding: 1rem 0rem; +} + +/* Show panel section is clickable */ +h5[id^="expander4"] { + cursor: pointer; +} + +/* Allow scrollbars in the card when content is too large */ +.card-body { overflow: auto; } -.action-row { - padding: 0.25rem +/* Alow scrollbars on tables which exceed card width */ +.form-group>fieldset { + overflow: auto; +} + +/* hide commands by default */ +.btn-catalog-node .grip, +.btn-visual-node .btn-group { + visibility: hidden; } + +/* show commands on hover */ +.btn-catalog-node:hover .grip, +.btn-visual-node:hover .btn-group { + visibility: visible; +} \ No newline at end of file diff --git a/apps/kitchensink/src/App.tsx b/apps/kitchensink/src/App.tsx index 419590ac..aa7e2ce5 100644 --- a/apps/kitchensink/src/App.tsx +++ b/apps/kitchensink/src/App.tsx @@ -32,7 +32,7 @@ function App (): JSX.Element { - + From b5161561b598bd02fc0cdba4c1dc3eaf7684de9d Mon Sep 17 00:00:00 2001 From: "Dusan Mijatovic (PC2022)" Date: Tue, 12 Mar 2024 12:55:05 +0100 Subject: [PATCH 6/7] fix: use unique node ids for dnd --- apps/kitchensink/src/kitchensink.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/kitchensink/src/kitchensink.json b/apps/kitchensink/src/kitchensink.json index 3336e078..a20c3ed4 100644 --- a/apps/kitchensink/src/kitchensink.json +++ b/apps/kitchensink/src/kitchensink.json @@ -553,7 +553,7 @@ "category": "resdictests" }, { - "id": "node1", + "id": "node11", "label": "Node with prop1 has same size as global molecules parameter", "description": "Description 1", "category": "moleculetest", @@ -582,7 +582,7 @@ "tomlSchema": {} }, { - "id": "node2", + "id": "node12", "label": "Node same as node1, but with ui:group", "description": "Description 1", "category": "moleculetest", @@ -612,7 +612,7 @@ "tomlSchema": {} }, { - "id": "node3", + "id": "node13", "label": "Node with segments (with chain and residue formats) for each molecule", "description": "Description 1", "category": "moleculetest", @@ -672,7 +672,7 @@ } }, { - "id": "node1", + "id": "node111", "label": "Node with prop1 has same size as global molecules parameter", "description": "Description 1", "category": "moleculetest", @@ -701,7 +701,7 @@ "tomlSchema": {} }, { - "id": "node2", + "id": "node112", "label": "Node same as node1, but with ui:group", "description": "Description 1", "category": "moleculetest", @@ -731,7 +731,7 @@ "tomlSchema": {} }, { - "id": "node3", + "id": "node113", "label": "Node with segments (with chain and residue formats) for each molecule", "description": "Description 1", "category": "moleculetest", @@ -791,7 +791,7 @@ } }, { - "id": "node4", + "id": "node114", "label": "Node with array of object with property which array of scalar. Scalar is a residue and rendered as multi select.", "description": "Description 1", "category": "moleculetest", @@ -893,7 +893,7 @@ } }, { - "id": "node12", + "id": "node1112", "label": "Node in initially collapsed cat", "description": "Description 12", "category": "collapsedcat", From 41b32a2043c139d30ce61e1dd23746d1662c9793 Mon Sep 17 00:00:00 2001 From: "Dusan Mijatovic (PC2022)" Date: Thu, 14 Mar 2024 12:09:23 +0100 Subject: [PATCH 7/7] fix: example styles based on PR feedback --- apps/haddock3-download/src/App.css | 12 ++++++++++++ apps/haddock3-galaxy/src/App.css | 12 ++++++++++++ apps/haddock3-submit/src/App.css | 12 ++++++++++++ apps/kitchensink/src/App.css | 12 ++++++++++++ 4 files changed, 48 insertions(+) diff --git a/apps/haddock3-download/src/App.css b/apps/haddock3-download/src/App.css index e7a1371c..272122c2 100644 --- a/apps/haddock3-download/src/App.css +++ b/apps/haddock3-download/src/App.css @@ -39,6 +39,18 @@ gap: 0.5rem; } +/* remove gap from dropdown group */ +.dropdown.btn-group { + gap: 0rem; +} + +/* center + icon in the button */ +.array-item-add{ + display: flex; + justify-content: center; + align-items: center; +} + .no-wrap{ text-wrap: nowrap; } diff --git a/apps/haddock3-galaxy/src/App.css b/apps/haddock3-galaxy/src/App.css index f77096bc..49b811f4 100644 --- a/apps/haddock3-galaxy/src/App.css +++ b/apps/haddock3-galaxy/src/App.css @@ -40,6 +40,18 @@ gap: 0.5rem; } +/* remove gap from dropdown group */ +.dropdown.btn-group { + gap: 0rem; +} + +/* center + icon in the button */ +.array-item-add { + display: flex; + justify-content: center; + align-items: center; +} + .no-wrap { text-wrap: nowrap; } diff --git a/apps/haddock3-submit/src/App.css b/apps/haddock3-submit/src/App.css index 9bed8dd6..319b86fe 100644 --- a/apps/haddock3-submit/src/App.css +++ b/apps/haddock3-submit/src/App.css @@ -40,6 +40,18 @@ gap: 0.5rem; } +/* remove gap from dropdown group */ +.dropdown.btn-group { + gap: 0rem; +} + +/* center + icon in the button */ +.array-item-add { + display: flex; + justify-content: center; + align-items: center; +} + .no-wrap { text-wrap: nowrap; } diff --git a/apps/kitchensink/src/App.css b/apps/kitchensink/src/App.css index 6f807898..9660a5bf 100644 --- a/apps/kitchensink/src/App.css +++ b/apps/kitchensink/src/App.css @@ -40,6 +40,18 @@ gap: 0.5rem; } +/* remove gap from dropdown group */ +.dropdown.btn-group { + gap: 0rem; +} + +/* center + icon in the button */ +.array-item-add { + display: flex; + justify-content: center; + align-items: center; +} + .no-wrap { text-wrap: nowrap; }