Skip to content
Snippets Groups Projects
Commit 1a61cea3 authored by Loic Huder's avatar Loic Huder
Browse files

Merge branch 'node-props' into 'main'

Remove unneeded props in nodes

See merge request !391
parents 2143ff7a 10bed2dc
No related branches found
No related tags found
1 merge request!391Remove unneeded props in nodes
Pipeline #136881 passed
import { memo } from 'react';
import type { NodeProps } from 'reactflow';
import Node from './Node';
import { contentStyle as style } from './nodeStyles';
import { assertNodeDataDefined } from '../../utils/typeGuards';
import useNodeDataStore from '../../store/useNodeDataStore';
......@@ -14,16 +13,13 @@ function DataNode(props: NodeProps) {
return (
<Node
id={props.id}
type={nodeData.task_props.task_type}
label={nodeData.ewoks_props.label || props.id}
color="#ced3ee"
comment={nodeData.comment}
moreHandles={uiProps.moreHandles}
withImage={'withImage' in uiProps ? uiProps.withImage : true}
nodeWidth={'nodeWidth' in uiProps ? uiProps.nodeWidth : 100}
withLabel={'withLabel' in uiProps ? uiProps.withLabel : true}
colorBorder={'colorBorder' in uiProps ? uiProps.colorBorder : ''}
content={<div style={style.io} />}
withImage={uiProps.withImage}
withLabel={uiProps.withLabel}
borderColor={uiProps.colorBorder}
comment={nodeData.comment}
width={uiProps.nodeWidth}
/>
);
}
......
......@@ -49,13 +49,7 @@ function GraphInOutNode(args: NodeProps<EwoksRFNodeData>) {
};
return (
<div
className="node-content"
style={borderColor ? { borderColor } : undefined}
id="choice"
role="button"
tabIndex={0}
>
<div className="node-content" style={{ borderColor }}>
<Tooltip
title={
args.data.comment ? (
......
......@@ -51,16 +51,8 @@ function GraphNode(props: NodeProps<EwoksRFNodeData>) {
const { withImage = DEFAULT_NODE_VALUES.uiProps.withImage } = uiProps;
const { withLabel = DEFAULT_NODE_VALUES.uiProps.withLabel } = uiProps;
const borderColor = uiProps.colorBorder;
return (
<div
className="node-content"
style={borderColor ? { borderColor } : undefined}
id="choice"
role="button"
tabIndex={0}
>
<div className="node-content" style={{ borderColor: uiProps.colorBorder }}>
<Tooltip
title={
nodeData.comment ? (
......
......@@ -8,29 +8,36 @@ import useSnackbarStore from '../../store/useSnackbarStore';
import type { Connection } from 'reactflow';
import NodeIcon from './NodeIcon';
import SuspenseBoundary from '../../suspense/SuspenseBoundary';
import type { NodeProps } from '../../types';
import { useReactFlow } from 'reactflow';
import { getNodesData } from '../../utils';
import NodeLabel from './NodeLabel';
interface Props {
id: string;
label: string;
width?: number;
withImage?: boolean;
withLabel?: boolean;
borderColor?: string;
comment?: string;
moreHandles?: boolean;
}
// The basic Node component
function Node({
id,
moreHandles,
withImage,
withLabel,
withImage = true,
withLabel = true,
label,
color,
colorBorder: borderColor,
borderColor,
comment,
nodeWidth,
}: NodeProps) {
width = 100,
}: Props) {
const { getNodes, getEdges } = useReactFlow();
const showWarningMsg = useSnackbarStore((state) => state.showWarningMsg);
const nodWidth = { width: `${nodeWidth || 100}px` };
const isValidConnection = (connection: Connection) => {
const { isValid, reason } = isValidLink(
connection,
......@@ -45,19 +52,13 @@ function Node({
};
return (
<div
className="node-content"
style={borderColor ? { borderColor } : undefined}
id="choice"
role="button"
tabIndex={0}
>
<div className="node-content" style={{ borderColor }}>
<Tooltip
title={comment ? <span style={style.comment}>{comment}</span> : ''}
enterDelay={800}
arrow
>
<span style={{ ...style.displayNode, ...nodWidth }} className="icons">
<span style={{ ...style.displayNode, width }} className="icons">
<Handle
type="source"
position={Position.Right}
......@@ -102,7 +103,7 @@ function Node({
label={label}
showFull={withLabel}
showCropped={!withLabel && !withImage}
color={color}
color="#ced3ee"
/>
{withImage && (
<SuspenseBoundary>
......
......@@ -2,8 +2,8 @@ import { style } from './nodeStyles';
interface Props {
label: string;
showFull?: boolean;
showCropped?: boolean;
showFull: boolean;
showCropped: boolean;
color?: string;
}
......
......@@ -19,8 +19,6 @@ function NoteNode(args: NoteProps) {
padding: '10px',
borderColor: uiProps.colorBorder,
}}
role="button"
tabIndex={0}
>
<div
style={{ maxWidth: `${uiProps.nodeWidth || 100}px` }}
......
......@@ -2,7 +2,7 @@ import type { Edge, EdgeMarkerType, XYPosition } from 'reactflow';
import type { SubgraphsStackSlice } from './store/subgraphsStack';
import type { LoadedGraphsSlice } from './store/loadedGraphs';
import type { RootWorkflowSlice } from './store/rootWorkflow';
import type { ChangeEvent, CSSProperties, ReactNode } from 'react';
import type { ChangeEvent, CSSProperties } from 'react';
import type { Node } from 'reactflow';
import type { DisplayedWorkflowInfoSlice } from './store/displayedWorkflowInfo';
......@@ -96,20 +96,6 @@ export interface Action {
graph: GraphRF;
}
export interface NodeProps {
id: string;
nodeWidth?: number;
withImage?: boolean;
withLabel?: boolean;
moreHandles?: boolean;
type: TaskType;
label: string;
color?: string;
colorBorder?: string;
content: ReactNode;
comment?: string;
}
export type TaskType =
| 'graphInput'
| 'graph'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment