feat(flow): address items configuration

- inject data.nodeLabel onDrop
- make subtitle prop override data.nodeLabel

apps/app/src/pages/Flow/Flow.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useMemo, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import {
   HvButton,
   HvGlobalActions,
@@ -17,14 +17,14 @@ import {
   HvFlowSidebar,
 } from "@hitachivantara/uikit-react-lab";
 
-import { baseNodeTypes, edges, nodeGroups, nodes } from "./config";
+import { edges, nodes, nodeTypes, useNodeGroups } from "./config";
 import {
   DASHBOARDS_STORAGE_KEY,
   DashboardSpecs,
   DashboardsStorage,
   LAYOUT_COLS,
 } from "./types";
-import { buildLayout, createDataset, useDatasets } from "./utils";
+import { buildLayout } from "./utils";
 
 /** Initial Layout */
 const layout = [
@@ -40,7 +40,7 @@ type Node = NonNullable<ReturnType<HvFlowInstance["getNode"]>>;
 type Edge = NonNullable<ReturnType<HvFlowInstance["getEdge"]>>;
 
 const Content = () => {
-  const { data } = useDatasets();
+  const nodeGroups = useNodeGroups();
 
   const [reactFlowInstance, setReactFlowInstance] = useState<HvFlowInstance>();
   const [open, setOpen] = useState(false);
@@ -100,32 +100,6 @@ const Content = () => {
     };
   }, []);
 
-  const nodeTypes = useMemo(() => {
-    const nt: HvFlowProps["nodeTypes"] = { ...baseNodeTypes };
-
-    if (data) {
-      for (let i = 0; i < data.length; i++) {
-        const key = `dataset${data[i].id}`;
-
-        const Dataset = createDataset({
-          label: data[i].label,
-          description: data[i].label,
-          data: {
-            endpoint: data[i].url,
-            columns: data[i].columns.map((column) => ({
-              id: column,
-              label: column,
-            })),
-          },
-        });
-
-        nt[key] = Dataset;
-      }
-    }
-
-    return nt;
-  }, [data]);
-
   const handleEdgesChange: HvFlowProps["onEdgesChange"] = (changes) => {
     if (changes[0].type === "remove") {
       const removedEdged = reactFlowInstance?.getEdge(changes[0].id);

apps/app/src/pages/Flow/Nodes/BarChart.tsx

@@ -46,7 +46,6 @@ export const BarChart: HvFlowNodeFC<NodeData> = (props) => {
     <HvFlowNode
       description="Bar Chart"
       groupId="visualization"
-      groupItem="barChart"
       params={params}
       expanded
       inputs={[

apps/app/src/pages/Flow/Nodes/Dashboard.tsx

@@ -25,7 +25,6 @@ import {
   DashboardsStorage,
   NodeData,
 } from "../types";
-
 import { toTitleCase } from "../utils";
 
 type PreviewProps = {
@@ -109,8 +108,7 @@ export const Dashboard: HvFlowNodeFC<NodeData> = (props) => {
   return (
     <HvFlowNode
       description="Dashboard"
-      group="dashboard"
-      groupItem="dashboard"
+      groupId="dashboard"
       inputs={nodeInputs}
       classes={{
         footerContainer: classes.footer,

apps/app/src/pages/Flow/Nodes/Dataset.tsx

@@ -0,0 +1,12 @@
+import { HvFlowNode, HvFlowNodeFC } from "@hitachivantara/uikit-react-lab";
+
+export const Dataset: HvFlowNodeFC = (props) => {
+  return (
+    <HvFlowNode
+      title="Dataset"
+      groupId="dataset"
+      outputs={[{ label: "Dataset", isMandatory: true, provides: "dataset" }]}
+      {...props}
+    />
+  );
+};

apps/app/src/pages/Flow/Nodes/DonutChart.tsx

@@ -37,8 +37,7 @@ export const DonutChart: HvFlowNodeFC = (props) => {
   return (
     <HvFlowNode
       description="Donut Chart"
-      group="visualization"
-      groupItem="donutChart"
+      groupId="visualization"
       params={params}
       expanded
       inputs={[

apps/app/src/pages/Flow/Nodes/Kpi.tsx

@@ -43,8 +43,7 @@ export const Kpi: HvFlowNodeFC = (props) => {
   return (
     <HvFlowNode
       description="KPI"
-      group="visualization"
-      groupItem="kpi"
+      groupId="visualization"
       params={params}
       expanded
       inputs={[

apps/app/src/pages/Flow/Nodes/LineChart.tsx

@@ -45,8 +45,7 @@ export const LineChart: HvFlowNodeFC = (props) => {
   return (
     <HvFlowNode
       description="Line Chart"
-      group="visualization"
-      groupItem="lineChart"
+      groupId="visualization"
       params={params}
       expanded
       inputs={[

apps/app/src/pages/Flow/Nodes/Table.tsx

@@ -26,8 +26,7 @@ export const Table: HvFlowNodeFC = (props) => {
   return (
     <HvFlowNode
       description="Table"
-      group="visualization"
-      groupItem="table"
+      groupId="visualization"
       params={params}
       expanded
       inputs={[