feat(lineage): add materialization badge for model nodes

js/packages/storybook/stories/lineage/NodeTag.stories.tsx

@@ -0,0 +1,89 @@
+import { NodeTag } from "@datarecce/ui/primitives";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta: Meta<typeof NodeTag> = {
+  title: "Lineage/NodeTag",
+  component: NodeTag,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Displays the dbt resource type or materialization strategy as a pill-shaped tag with an icon. For model nodes with a materialization, shows the materialization (table, view, incremental, etc.). For all other resource types, shows the resource type.",
+      },
+    },
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NodeTag>;
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+  name: "All Types",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: 8, fontWeight: 600 }}>Resource Types</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          {[
+            "model",
+            "source",
+            "seed",
+            "snapshot",
+            "metric",
+            "exposure",
+            "semantic_model",
+          ].map((type) => (
+            <div key={type}>
+              <NodeTag resourceType={type} />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontWeight: 600 }}>
+          Materializations (model)
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          {[
+            "table",
+            "view",
+            "incremental",
+            "ephemeral",
+            "materialized_view",
+            "dynamic_table",
+            "streaming_table",
+          ].map((type) => (
+            <div key={type}>
+              <NodeTag resourceType="model" materialized={type} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// Edge Cases
+// ============================================
+
+export const UnknownResourceType: Story = {
+  name: "Unknown Resource Type",
+  args: { resourceType: "unknown_type" },
+};
+
+export const UnknownMaterialization: Story = {
+  name: "Unknown Materialization",
+  args: { resourceType: "model", materialized: "custom_materialization" },
+};
+
+export const Undefined: Story = {
+  name: "Undefined",
+  args: {},
+};

js/packages/storybook/stories/lineage/NodeView.stories.tsx

@@ -4,6 +4,7 @@ import type {
   SchemaViewProps,
 } from "@datarecce/ui/advanced";
 import { NodeView } from "@datarecce/ui/advanced";
+import { NodeTag } from "@datarecce/ui/primitives";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -48,6 +49,19 @@ function StubNodeSqlView({ node }: { node: NodeViewNodeData }) {
   );
 }
 
+function ResourceTypeTag({ node }: { node: NodeViewNodeData }) {
+  const materialized =
+    node.data.data.current?.config?.materialized ??
+    node.data.data.base?.config?.materialized;
+
+  return (
+    <NodeTag
+      resourceType={node.data.resourceType}
+      materialized={materialized}
+    />
+  );
+}
+
 // =============================================================================
 // FIXTURE FACTORIES
 // =============================================================================
@@ -61,8 +75,16 @@ function createNode(
     name?: string;
     resourceType?: string;
     changeStatus?: string;
+    materialized?: string;
+    baseMaterialized?: string;
   } = {},
 ): NodeViewNodeData {
+  const baseMat = overrides.baseMaterialized ?? overrides.materialized;
+  const baseConfig = baseMat ? { materialized: baseMat } : undefined;
+  const currentConfig = overrides.materialized
+    ? { materialized: overrides.materialized }
+    : undefined;
+
   return {
     id: "model.jaffle_shop.stg_orders",
     data: {
@@ -80,6 +102,7 @@ function createNode(
             customer_id: { name: "customer_id", type: "integer" },
             order_date: { name: "order_date", type: "date" },
           },
+          config: baseConfig,
         },
         current: {
           id: "stg_orders",
@@ -91,6 +114,7 @@ function createNode(
             customer_id: { name: "customer_id", type: "integer" },
             order_date: { name: "order_date", type: "date" },
           },
+          config: currentConfig,
         },
       },
     },
@@ -125,6 +149,7 @@ const meta: Meta<typeof NodeView> = {
     isSingleEnv: false,
     SchemaView: StubSchemaView,
     NodeSqlView: StubNodeSqlView,
+    ResourceTypeTag,
   },
 };
 
@@ -138,7 +163,7 @@ type Story = StoryObj<typeof NodeView>;
 /** No differences in schema or code — no dots shown on either tab. */
 export const NoDifferences: Story = {
   args: {
-    node: createNode(),
+    node: createNode({ materialized: "view" }),
   },
 };
 
@@ -207,6 +232,7 @@ export const SingleEnvMode: Story = {
   args: {
     isSingleEnv: true,
     node: createNode({
+      materialized: "table",
       baseCode: "SELECT 1",
       currentCode: "SELECT 2",
       baseColumns: {
@@ -219,3 +245,18 @@ export const SingleEnvMode: Story = {
     }),
   },
 };
+
+// =============================================================================
+// MATERIALIZATION CHANGE STORY
+// =============================================================================
+
+/** Materialization changed from view to table between base and current. */
+export const MaterializationChanged: Story = {
+  args: {
+    node: createNode({
+      baseMaterialized: "view",
+      materialized: "table",
+      changeStatus: "modified",
+    }),
+  },
+};