Add semantic models to lineage graph

Signed-off-by: popcorny <[email protected]>

static_report/src/components/Icons/index.tsx

@@ -6,6 +6,7 @@ import { FaChartBar } from 'react-icons/fa';
 import { FiCloud, FiGrid, FiPlus } from 'react-icons/fi';
 import { TbCircleHalf } from 'react-icons/tb';
 import { TiSortNumerically } from 'react-icons/ti';
+import { RxCube } from 'react-icons/rx';
 import {
   VscDiffAdded,
   VscDiffModified,
@@ -152,12 +153,14 @@ export function getIconForResourceType(resourceType?: string): {
     return { color: '#c0eafd', icon: FiGrid };
   } else if (resourceType === 'source' || resourceType === 'seed') {
     return { color: '#a6dda6', icon: FiGrid };
+  } else if (resourceType === 'semantic_model') {
+    return { color: '#fb8caf', icon: RxCube };
   } else if (
     resourceType === 'metric' ||
     resourceType === 'exposure' ||
     resourceType === 'analysis'
   ) {
-    return { color: 'rgb(255 230 238)', icon: FaChartBar };
+    return { color: '#ffe6ee', icon: FaChartBar };
   } else {
     return { color: 'inherit', icon: undefined };
   }

static_report/src/components/LineageGraph/GraphNode.tsx

@@ -89,7 +89,7 @@ export function GraphNode({ selected, data }: GraphNodeProps) {
     >
       <Flex
         width="300px"
-        _hover={{ backgroundColor: 'gray.100' }}
+        _hover={{ backgroundColor: showContent ? 'gray.100' : color }}
         borderColor={borderColor}
         borderWidth={borderWidth}
         borderStyle={borderStyle}

static_report/src/components/LineageGraph/util.ts

@@ -117,7 +117,7 @@ export function selectUpstream(
   return getUpstreamSet(
     keys,
     (id) => {
-      return Object.keys(lineageGraph[id].dependsOn);
+      return Object.keys(lineageGraph[id]?.dependsOn ?? {});
     },
     degree,
   );
@@ -131,7 +131,7 @@ export function selectDownstream(
   return getDownstreamSet(
     keys,
     (id) => {
-      return Object.keys(lineageGraph[id].children);
+      return Object.keys(lineageGraph[id]?.children ?? {});
     },
     degree,
   );

static_report/src/pages/CRPage.tsx

@@ -21,11 +21,13 @@ import {
   MODEL_DETAILS_ROUTE_PATH,
   MODEL_COLUMN_DETAILS_ROUTE_PATH,
   METRIC_DETAILS_ROUTE_PATH,
+  SEMANTIC_MODEL_DETAILS_ROUTE_PATH,
 } from '../utils/routes';
 import { CRAssertionListPage } from './CRAssertionListPage';
 import { CRBMPage } from './CRBMPage';
 import CRColumnDetailPage from './CRColumnDetailPage';
 import { CROverviewPage } from './CROverviewPage';
+import { CRSemanticModelPage } from './CRSemanticModelPage';
 import CRTableDetailPage from './CRTableDetailPage';
 import { CRTablesListPage } from './CRTableListPage';
 
@@ -93,6 +95,10 @@ export function CRPage({ data, cloud, sideNavTop = '0px' }: Props) {
               <CRBMPage />
             </Route>
 
+            <Route path={SEMANTIC_MODEL_DETAILS_ROUTE_PATH}>
+              <CRSemanticModelPage />
+            </Route>
+
             <Route path={SSR_ROUTE_PATH}>
               <Loading />
             </Route>

static_report/src/pages/CRSemanticModelPage.tsx

@@ -0,0 +1,52 @@
+import { useRoute } from 'wouter';
+import { getIconForResourceType } from '../components/Icons';
+import {
+  EVENTS,
+  NoData,
+  SR_TYPE_LABEL,
+  TableColumnHeader,
+  useReportStore,
+  useTrackOnMount,
+} from '../lib';
+import { SEMANTIC_MODEL_DETAILS_ROUTE_PATH } from '../utils/routes';
+
+export function CRSemanticModelPage() {
+  const [match, params] = useRoute(SEMANTIC_MODEL_DETAILS_ROUTE_PATH);
+
+  useTrackOnMount({
+    eventName: EVENTS.PAGE_VIEW,
+    eventProperties: {
+      type: SR_TYPE_LABEL,
+      page: 'resource-page',
+    },
+  });
+
+  if (!match) {
+    return <>Something wrong.</>;
+  }
+
+  const { tableColumnsOnly = [] } = useReportStore.getState();
+  const entry = tableColumnsOnly.find(([key]) => key === params?.uniqueId);
+  if (!entry) {
+    return <NoData text={`No data found for '${params?.uniqueId}'`} />;
+  }
+
+  const [, { base, target }] = entry;
+  const fallback = target ?? base;
+
+  const name = fallback?.name;
+  const description = fallback?.description;
+  const resourceType = fallback?.resource_type;
+  const { icon } = getIconForResourceType(resourceType);
+
+  return (
+    <>
+      <TableColumnHeader
+        subtitle="Semantic Model"
+        title={name}
+        icon={icon}
+        infoTip={description}
+      />
+    </>
+  );
+}

static_report/src/pages/SRPage.tsx

@@ -21,11 +21,13 @@ import {
   TABLE_DETAILS_ROUTE_PATH,
   TABLE_LIST_ROUTE_PATH,
   METRIC_DETAILS_ROUTE_PATH,
+  SEMANTIC_MODEL_DETAILS_ROUTE_PATH,
 } from '../utils/routes';
 import { SRAssertionListPage } from './SRAssertionListPage';
 import { SRBMPage } from './SRBMPage';
 import SRColumnDetailPage from './SRColumnDetailPage';
 import { SROverviewPage } from './SROverviewPage';
+import { SRSemanticModelPage } from './SRSemanticModelPage';
 import SRTableDetailPage from './SRTableDetailPage';
 import { SRTablesListPage } from './SRTablesListPage';
 
@@ -96,6 +98,10 @@ export function SRPage({ data, cloud, sideNavTop = '0px' }: Props) {
               <SRBMPage />
             </Route>
 
+            <Route path={SEMANTIC_MODEL_DETAILS_ROUTE_PATH}>
+              <SRSemanticModelPage />
+            </Route>
+
             <Route path={SSR_ROUTE_PATH}>
               <Loading />
             </Route>

static_report/src/pages/SRSemanticModelPage.tsx

@@ -0,0 +1,51 @@
+import { useRoute } from 'wouter';
+import { getIconForResourceType } from '../components/Icons';
+import {
+  EVENTS,
+  NoData,
+  SR_TYPE_LABEL,
+  TableColumnHeader,
+  useReportStore,
+  useTrackOnMount,
+} from '../lib';
+import { SEMANTIC_MODEL_DETAILS_ROUTE_PATH } from '../utils/routes';
+
+export function SRSemanticModelPage() {
+  const [match, params] = useRoute(SEMANTIC_MODEL_DETAILS_ROUTE_PATH);
+
+  useTrackOnMount({
+    eventName: EVENTS.PAGE_VIEW,
+    eventProperties: {
+      type: SR_TYPE_LABEL,
+      page: 'resource-page',
+    },
+  });
+
+  if (!match) {
+    return <>Something wrong.</>;
+  }
+
+  const { tableColumnsOnly = [] } = useReportStore.getState();
+  const entry = tableColumnsOnly.find(([key]) => key === params?.uniqueId);
+  if (!entry) {
+    return <NoData text={`No data found for '${params?.uniqueId}'`} />;
+  }
+
+  const [, { base: data }] = entry;
+
+  const name = data?.name;
+  const description = data?.description;
+  const resourceType = data?.resource_type;
+  const { icon } = getIconForResourceType(resourceType);
+
+  return (
+    <>
+      <TableColumnHeader
+        subtitle="Semantic Model"
+        title={name}
+        icon={icon}
+        infoTip={description}
+      />
+    </>
+  );
+}