+ { feature?.attributes.transformation &&
+
+ { feature.attributes.transformation.transform_expr &&
+ transform_expr: { feature.attributes.transformation.transform_expr }
}
+ { feature.attributes.transformation.filter &&
+ filter: { feature.attributes.transformation.filter }
}
+ { feature.attributes.transformation.agg_func &&
+ agg_func: { feature.attributes.transformation.agg_func }
}
+ { feature.attributes.transformation.limit &&
+ limit: { feature.attributes.transformation.limit }
}
+ { feature.attributes.transformation.group_by &&
+ group_by: { feature.attributes.transformation.group_by }
}
+ { feature.attributes.transformation.window &&
+ window: { feature.attributes.transformation.window }
}
+ { feature.attributes.transformation.def_expr &&
+ def_expr: { feature.attributes.transformation.def_expr }
}
+
+ }
+ { feature?.attributes.key && feature.attributes.key.length > 0 &&
+
+ full_name: { feature.attributes.key[0].full_name }
+ key_column: { feature.attributes.key[0].key_column }
+ description: { feature.attributes.key[0].description }
+ key_column_alias: { feature.attributes.key[0].key_column_alias }
+ key_column_type: { feature.attributes.key[0].key_column_type }
+
+ }
+ { feature?.attributes.type &&
+
+ dimension_type: { feature.attributes.type.dimension_type }
+ tensor_category: { feature.attributes.type.tensor_category }
+ type: { feature.attributes.type.type }
+ val_type: { feature.attributes.type.val_type }
+
+ }
+
)
+ }
+ >
+ )
+}
+
+
+export default GraphNodeDetails;
diff --git a/ui/src/pages/feature/lineageGraph.tsx b/ui/src/pages/feature/lineageGraph.tsx
index 3cfcf5452..5035a7fa9 100644
--- a/ui/src/pages/feature/lineageGraph.tsx
+++ b/ui/src/pages/feature/lineageGraph.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { Card, Radio, Spin } from 'antd';
+import { Card, Col, Radio, Row, Spin } from 'antd';
import { useParams, useSearchParams } from "react-router-dom";
import { Elements } from 'react-flow-renderer';
import Graph from "../../components/graph/graph";
@@ -7,6 +7,7 @@ import { generateEdge, generateNode } from "../../components/graph/utils";
import { fetchProjectLineages } from "../../api";
import { FeatureLineage } from "../../models/model";
import { LoadingOutlined } from "@ant-design/icons";
+import GraphNodeDetails from "../../components/graph/graphNodeDetails";
type Params = {
project: string;
@@ -24,6 +25,7 @@ const LineageGraph: React.FC = () => {
// Fetch lineage data from server side, invoked immediately after component is mounted
useEffect(() => {
const fetchLineageData = async () => {
+ setLoading(true);
const data = await fetchProjectLineages(project);
setLineageData(data);
setLoading(false);
@@ -105,9 +107,20 @@ const LineageGraph: React.FC = () => {