Add feature lineage and make lineage height responsive

ui/src/api/api.tsx

@@ -75,10 +75,10 @@ export const fetchProjectLineages = async (project: string) => {
     });
 };
 
-export const fetchFeatureLineages = async (project: string) => {
+export const fetchFeatureLineages = async (feature: string) => {
   const axios = await authAxios(msalInstance);
   return axios
-    .get<FeatureLineage>(`${getApiBaseUrl()}/features/lineage/${project}`, {})
+    .get<FeatureLineage>(`${getApiBaseUrl()}/features/${feature}/lineage`, {})
     .then((response) => {
       return response.data;
     });

ui/src/components/graph/graph.tsx

@@ -64,6 +64,19 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
     setElements(values);
   };
 
+  // calculate the height of the graph by finding the maximum y position of the nodes and adding some padding to take the size of the node into account
+  const calculateHeight = () => {
+    var padding = 200;
+    var max = 0;
+    for (let index = 0; index < elements.length; index++) {
+      const element = elements[index];
+      if (isNode(element) && element.position.y > max) {
+        max = element.position.y
+      }
+    }
+    return max + padding;
+  }
+
   // Highlight path of selected node, including all linked up and down stream nodes
   const highlightPath = (node: Node, check: boolean): void => {
     const checkElements = check ? layoutedElements : elements;
@@ -146,7 +159,7 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
     <div className="lineage-graph">
         <ReactFlowProvider>
           <ReactFlow
-            style={ { height: "700px", width: "100%" } }
+            style={ { height: calculateHeight(), width: "100%" } }
             elements={ elements }
             snapToGrid
             snapGrid={ [15, 15] }

ui/src/pages/feature/featureDetails.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Alert, Button, Card, Col, Row, Space, Spin, Typography } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { QueryStatus, useQuery } from "react-query";
 import { AxiosError } from 'axios';
 import { fetchFeature } from '../../api';
 import { Feature } from "../../models/model";
+import { FeatureLineage } from "../../models/model";
+import { fetchFeatureLineages } from "../../api";
+import { generateEdge, generateNode } from "../../components/graph/utils";
+import { Elements } from 'react-flow-renderer';
+import Graph from "../../components/graph/graph";
 
 const { Title } = Typography;
 
@@ -118,6 +123,85 @@ function InputDerivedFeatures(props: { project: string, feature: Feature }) {
   </>;
 }
 
+function FeatureLineageGraph() {
+  const [searchParams] = useSearchParams();
+  const { featureId } = useParams() as Params;
+
+  const [lineageData, setLineageData] = useState<FeatureLineage>({ guidEntityMap: null, relations: null });
+  const [elements, setElements] = useState<Elements>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchLineageData = async () => {
+      setLoading(true);
+      const data = await fetchFeatureLineages(featureId);
+      setLineageData(data);
+      setLoading(false);
+    };
+
+    fetchLineageData();
+  }, [featureId]);
+
+  useEffect(() => {
+    const generateGraphData = async () => {
+      if (lineageData.guidEntityMap === null && lineageData.relations === null) {
+        return;
+      }
+
+      const elements: Elements = [];
+      const elementObj: Record<string, string> = {};
+
+      for (let index = 0; index < Object.values(lineageData.guidEntityMap).length; index++) {
+        const currentNode: any = Object.values(lineageData.guidEntityMap)[index];
+
+        const nodeId = currentNode.guid;
+
+        const node = generateNode({
+          index,
+          nodeId,
+          currentNode
+        });
+
+        elementObj[nodeId] = index?.toString();
+        elements.push(node);
+      }
+
+
+      for (let index = 0; index < lineageData.relations.length; index++) {
+        var { fromEntityId: from, toEntityId: to, relationshipType } = lineageData.relations[index];
+        if (relationshipType === "Consumes") [from, to] = [to, from];
+        const edge = generateEdge({ obj: elementObj, from, to });
+        if (edge?.source && edge?.target) {
+          if (relationshipType === "Consumes" || relationshipType === "Produces") {
+            elements.push(edge);
+          }
+        }
+      }
+
+      setElements(elements);
+    };
+
+    generateGraphData();
+  }, [lineageData])
+
+  return <>
+  {
+    loading
+    ? (
+      <Spin indicator={ <LoadingOutlined style={ { fontSize: 24 } } spin /> } />
+    )
+    : (
+      <Col span={ 24 }>
+        <Card className="card">
+          <Title level={ 4 }>Lineage</Title>
+          <Graph data={ elements } nodeId={ featureId }/>
+        </Card>
+      </Col>
+    )
+  }
+  </>;
+}
+
 type Params = {
   project: string;
   featureId: string;
@@ -193,6 +277,7 @@ const FeatureDetails: React.FC = () => {
                     <FeatureTransformation feature={ data } />
                     <FeatureKey feature={ data } />
                     <FeatureType feature={ data } />
+                    <FeatureLineageGraph />
                   </Row>
                 </div>
               </Card>