Split React components?

[astrojuanlu]

In discussion yesterday with @jitu5 and @stephkaiser, the idea of breaking down the monolithic Kedro Viz React component came up. @jitu5 mentioned that it would be a bit of work.

How feasible it would be?

Some resources I found after a quick search:

• "Common React Mistakes: Monolithic Components and a Lack of Abstraction" https://www.pmg.com/blog/common-react-mistakes-monolithic-components-lack-abstraction
• Advantages of smaller components https://stackoverflow.com/q/49591923
• Disadvantages of big components https://stackoverflow.com/q/39391195
• React components composition
  • https://zhenyong.github.io/react/docs/multiple-components.html
  • https://www.developerway.com/posts/components-composition-how-to-get-it-right
• Sharing State Between Components https://react.dev/learn/sharing-state-between-components
  • ...using Redux https://stackoverflow.com/q/57323921
• How to Organize a Large React Application and Make It Scale https://www.sitepoint.com/organize-large-react-application/

[yetudada]

To guide this, we’re also meant to think of what it should achieve or potentially, what it should enable for our users so that it’s not an endless refactor. This discussion has come up before when we looked at making the flowchart a standalone component: #954 & #943.

[astrojuanlu]

Thanks @yetudada for the context. I appreciate that there's a log of the discussions, but very limited: @idanov asked in #943 (comment) whether we could do this split, then it was decided in a meeting that it wouldn't be done #943 (comment), but it's not really spelled out why.

[jitu5]

Extracting the flowchart component requires a considerable amount of refactoring to decouple it from the existing Kedro-Viz. This involves removing or replacing Redux with a lighter state management, which is a big task given the complexity and maturity of the current setup.

Above discussion came from feature request by @datajoely to have preview mode which is flowchart only mode. which can be achieve with react props. #1745 (comment) without going into major refactor.

But Standalone flowchart component going to be really helpful in use cases VSCode extension if we can run web/react app inside VSCode.

[astrojuanlu]

But Standalone flowchart component going to be really helpful in use cases VSCode extension if we can run web/react app inside VSCode.

Indeed. From my understanding, if we ever want to "debundle" the UI components of Kedro-Viz, currently our only option is to embed identical React components, and selectively disable the elements we don't want.

[astrojuanlu]

Alternatives to Redux:

• React Contexts https://react.dev/learn/passing-data-deeply-with-context

Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

• Zustand https://www.npmjs.com/package/zustand
• Jotai https://www.npmjs.com/package/jotai (what Meta started using instead of Recoil)

[RojanSr]

Zustand is my personal favorite. Easy to use and understand.

[astrojuanlu]

TIL: We do have those individual components (thanks @rashidakanchwala)

kedro-viz/src/components/flowchart-wrapper/flowchart-wrapper.js

Lines 322 to 354 in 4005b58

	<div className="kedro-pipeline">
	<Sidebar />
	<MetaData />
	<div className="pipeline-wrapper">
	<PipelineWarning />
	<FlowChart />
	<div
	className={classnames('pipeline-wrapper__go-back-btn', {
	'pipeline-wrapper__go-back-btn--show':
	goBackToExperimentTracking?.showGoBackBtn,
	'pipeline-wrapper__go-back-btn--show-sidebar-visible':
	sidebarVisible,
	'pipeline-wrapper__go-back-btn--show-metadata-visible':
	metadataVisible,
	})}
	>
	<Button onClick={onGoBackToExperimentTrackingHandler}>
	<CircleProgressBar>{counter}</CircleProgressBar>
	Return to Experiment Tracking
	</Button>
	</div>
	<div
	className={classnames('pipeline-wrapper__loading', {
	'pipeline-wrapper__loading--sidebar-visible': sidebarVisible,
	})}
	>
	<LoadingIcon visible={loading} />
	</div>
	{isRunningLocally() ? null : <ShareableUrlMetadata />}
	</div>
	<ExportModal />
	<MetadataModal />
	</div>

Is it technically possible for a user to do just

<FlowChart />

? (Even if it's not currently documented and props come from Redux)

[datajoely]

this would be super powerful