Update UI for extraction graph updates (#583)

* fix indexes loading policy name * update indexify + update extraction policy graph + improve search index page * add task count in extraction graph table * version bump
tensorlakeai · May 13, 2024 · ab25bd7 · ab25bd7
1 parent 791b300
commit ab25bd7
Show file tree

Hide file tree

Showing 17 changed files with 216 additions and 77 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "indexify"
-version = "0.0.39"
+version = "0.0.40"
 edition = "2021"
 authors = ["Diptanu Gon Choudhury <[email protected]>"]
 build = "build.rs"

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -20,7 +20,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.7",
     "crypto": "^1.0.1",
-    "getindexify": "^0.0.25",
+    "getindexify": "^0.0.42",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/ui/src/components/ExtractionGraphs.tsx b/ui/src/components/ExtractionGraphs.tsx
@@ -1,28 +1,37 @@
-import { IExtractionPolicy, IExtractor } from "getindexify";
-import { Alert, Typography } from "@mui/material";
+import {
+  IExtractionGraph,
+  IExtractionPolicy,
+  IExtractor,
+  ITask,
+} from "getindexify";
+import { Alert, IconButton, Typography } from "@mui/material";
 import { Box, Stack } from "@mui/system";
 import React, { ReactElement } from "react";
 import GavelIcon from "@mui/icons-material/Gavel";
+import InfoIcon from "@mui/icons-material/Info";
 import ExtractionPolicyItem from "./ExtractionPolicyItem";
 import { IExtractionGraphCol, IExtractionGraphColumns } from "../types";
 
 const ExtractionGraphs = ({
-  extractionPolicies,
+  extractionGraphs,
   namespace,
   extractors,
+  tasks,
 }: {
-  extractionPolicies: IExtractionPolicy[];
+  extractionGraphs: IExtractionGraph[];
   namespace: string;
-  extractors:IExtractor[]
+  extractors: IExtractor[];
+  tasks: ITask[];
 }) => {
   const itemheight = 60;
   const cols: IExtractionGraphColumns = {
     name: { displayName: "Name", width: 350 },
-    extractor: { displayName: "Extractor", width: 250 },
-    mimeTypes: { displayName: "Input MimeTypes", width: 250 },
-    inputParams: { displayName: "Input Parameters", width: 250 },
+    extractor: { displayName: "Extractor", width: 225 },
+    mimeTypes: { displayName: "Input MimeTypes", width: 225},
+    inputParams: { displayName: "Input Parameters", width: 225 },
+    taskCount: { displayName: "Tasks", width: 75 },
   };
-
+  
   const renderHeader = () => {
     return (
       <Stack
@@ -59,6 +68,7 @@ const ExtractionGraphs = ({
         items.push(
           <ExtractionPolicyItem
             key={policy.name}
+            tasks={tasks}
             extractionPolicy={policy}
             namespace={namespace}
             cols={cols}
@@ -76,11 +86,11 @@ const ExtractionGraphs = ({
   };
 
   const renderContent = () => {
-    if (extractionPolicies.length === 0) {
+    if (extractionGraphs.length === 0) {
       return (
         <Box mt={1} mb={2}>
           <Alert variant="outlined" severity="info">
-            No Policies Found
+            No Graphs Found
           </Alert>
         </Box>
       );
@@ -97,9 +107,14 @@ const ExtractionGraphs = ({
         }}
       >
         <div style={{ minWidth: "max-content" }}>{renderHeader()}</div>
-        <Box sx={{ p: 2 }}>
-          {renderGraphItems(extractionPolicies, "ingestion")}
-        </Box>
+        {extractionGraphs.map((graph) => {
+          return (
+            <Box key={graph.name} sx={{ p: 2 }}>
+              <Typography variant="h3">{graph.name}</Typography>
+              {renderGraphItems(graph.extraction_policies, "")}
+            </Box>
+          );
+        })}
       </Box>
     );
   };
@@ -113,7 +128,15 @@ const ExtractionGraphs = ({
         spacing={2}
       >
         <GavelIcon />
-        <Typography variant="h3">Extraction Graphs</Typography>
+        <Typography variant="h3">
+          Extraction Graphs
+          <IconButton
+            href="https://getindexify.ai/concepts/#extraction-graphs"
+            target="_blank"
+          >
+            <InfoIcon fontSize="small" />
+          </IconButton>
+        </Typography>
       </Stack>
       {renderContent()}
     </>

diff --git a/ui/src/components/ExtractionPolicyItem.tsx b/ui/src/components/ExtractionPolicyItem.tsx
@@ -1,5 +1,5 @@
 import { Box, Chip, Stack, Typography } from "@mui/material";
-import { IExtractionPolicy, IExtractor, IIndex } from "getindexify";
+import { IExtractionPolicy, IExtractor, IIndex, ITask } from "getindexify";
 import { IExtractionGraphColumns } from "../types";
 import { Link } from "react-router-dom";
 
@@ -11,6 +11,7 @@ const ExtractionPolicyItem = ({
   depth,
   itemHeight,
   extractors,
+  tasks,
   index,
 }: {
   extractionPolicy: IExtractionPolicy;
@@ -20,11 +21,12 @@ const ExtractionPolicyItem = ({
   depth: number;
   itemHeight: number;
   extractors: IExtractor[];
+  tasks: ITask[];
   index?: IIndex;
 }) => {
   const renderInputParams = () => {
     if (
-      extractionPolicy.input_params === undefined ||
+      !extractionPolicy.input_params ||
       Object.keys(extractionPolicy.input_params).length === 0
     ) {
       return <Chip label={`none`} />;
@@ -48,7 +50,7 @@ const ExtractionPolicyItem = ({
     if (!extractor) return null;
 
     return (
-      <Box sx={{ overflowX: "scroll" }}>
+      <Box sx={{ overflowX: "scroll", maxWidth:`calc(${cols.mimeTypes.width}px - 10px)` }}>
         <Stack gap={1} direction="row">
           {(extractor.input_mime_types ?? []).map((val: string) => {
             return (
@@ -107,7 +109,7 @@ const ExtractionPolicyItem = ({
         >
           {depth > 0 && <LShapedLine />}
           <Link
-            to={`/${namespace}/extraction-policies/${extractionPolicy.name}`}
+            to={`/${namespace}/extraction-policies/${extractionPolicy.graph_name}/${extractionPolicy.name}`}
           >
             {extractionPolicy.name}
           </Link>
@@ -119,6 +121,9 @@ const ExtractionPolicyItem = ({
         <Box sx={{ minWidth: cols.inputParams.width }}>
           {renderInputParams()}
         </Box>
+        <Box sx={{ minWidth: cols.taskCount.width }}>
+          {tasks.filter(task => task.extraction_policy_id === extractionPolicy.id).length}
+        </Box>
       </Stack>
     </Box>
   );

diff --git a/ui/src/components/SearchResultCard.tsx b/ui/src/components/SearchResultCard.tsx
@@ -31,16 +31,24 @@ const SearchResultCard = ({
   return (
     <Paper elevation={3} sx={{ padding: 2, marginBottom: 2 }}>
       <Typography variant="h4">
-        Content ID: <Link to={`/${namespace}/content/${data.content_id}`} target="_blank">{data.content_id}</Link>
-      </Typography>
-      <Divider sx={{ my: 1 }} />
-      <Typography py={1} variant="body1">
-        {data.text}
+        Content ID:{" "}
+        <Link to={`/${namespace}/content/${data.content_id}`} target="_blank">
+          {data.content_id}
+        </Link>
       </Typography>
+
+      {data.text ? (
+        <>
+          <Divider sx={{ my: 1 }} />
+          <Typography py={1} variant="body1">
+            {data.text}
+          </Typography>
+        </>
+      ) : null}
       <Divider sx={{ my: 1 }} />
       <DisplayData label="Confidence Score" value={data.confidence_score} />
       {Object.keys(data.labels).length !== 0 && (
-        <Box pt={1}>
+        <Box pt={1} display={"flex"} gap={1}>
           {Object.keys(data.labels).map((val: string) => {
             return <Chip key={val} label={`${val}:${data.labels[val]}`} />;
           })}

diff --git a/ui/src/components/TasksTable.tsx b/ui/src/components/TasksTable.tsx
@@ -6,6 +6,7 @@ import { Box, Stack } from "@mui/system";
 import TaskIcon from '@mui/icons-material/Task';
 import moment from "moment";
 import { Link } from "react-router-dom";
+import {TaskStatus} from "getindexify"
 
 const TasksTable = ({
   namespace,
@@ -40,7 +41,7 @@ const TasksTable = ({
       headerName: "Extraction Policy",
       renderCell: (params) => {
         const policy = policies.find(policy => policy.id === params.value)
-        return policy ? <Link to={`/${namespace}/extraction-policies/${policy?.name}`}>
+        return policy ? <Link to={`/${namespace}/extraction-policies/${policy?.graph_name}/${policy?.name}`}>
           {policy?.name}
         </Link> : null
       },
@@ -49,6 +50,15 @@ const TasksTable = ({
     {
       field: "outcome",
       headerName: "Outcome",
+      valueGetter: (params) => {
+        if (params.value === TaskStatus.Failure) {
+          return "Failure"
+        } else if (params.value === TaskStatus.Success) {
+          return "Success"
+        } else {
+          return "Unknown"
+        }
+      },
       width: 100,
     },
     {

diff --git a/ui/src/components/tables/ContentTable.tsx b/ui/src/components/tables/ContentTable.tsx
@@ -11,9 +11,11 @@ import {
   Tabs,
   TextField,
   Typography,
+  IconButton,
 } from "@mui/material";
 import { Box, Stack } from "@mui/system";
 import ArticleIcon from "@mui/icons-material/Article";
+import InfoIcon from "@mui/icons-material/Info";
 import React, { useEffect, useState } from "react";
 import moment from "moment";
 import { Link } from "react-router-dom";
@@ -61,7 +63,7 @@ const ContentTable = ({
   }>({ contentId: "", policyName: "Any" });
 
   const [filteredContent, setFilteredContent] = useState(
-    content.filter((c) => c.source === "ingestion")
+    content.filter((c) => c.source === "")
   );
   const [currentTab, setCurrentTab] = useState("ingested");
 
@@ -112,7 +114,7 @@ const ContentTable = ({
     } else if (currentTab === "ingested") {
       // go back to root node of graph tab
       setGraphTabIds([]);
-      setFilteredContent([...content.filter((c) => c.source === "ingestion")]);
+      setFilteredContent([...content.filter((c) => c.source === "")]);
     } else {
       // current tab is now a content id
       // remove tabs after id: selectedValue if possible
@@ -265,7 +267,15 @@ const ContentTable = ({
         spacing={2}
       >
         <ArticleIcon />
-        <Typography variant="h3">Content</Typography>
+        <Typography variant="h3">
+          Content
+          <IconButton
+            href="https://getindexify.ai/concepts/#content"
+            target="_blank"
+          >
+            <InfoIcon fontSize="small" />
+          </IconButton>
+        </Typography>
       </Stack>
       <Box justifyContent={"space-between"} display={"flex"}>
         <Tabs

diff --git a/ui/src/components/tables/ExtractorsTable.tsx b/ui/src/components/tables/ExtractorsTable.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { Alert, Chip, Typography } from "@mui/material";
+import { Alert, Chip, IconButton, Typography } from "@mui/material";
 import { Box, Stack } from "@mui/system";
 import MemoryIcon from "@mui/icons-material/MemoryOutlined";
+import InfoIcon from "@mui/icons-material/Info";
 import { Extractor } from "getindexify";
 
 const ExtractorsTable = ({ extractors }: { extractors: Extractor[] }) => {
@@ -125,7 +126,15 @@ const ExtractorsTable = ({ extractors }: { extractors: Extractor[] }) => {
         spacing={2}
       >
         <MemoryIcon />
-        <Typography variant="h3">Extractors</Typography>
+        <Typography variant="h3">
+          Extractors
+          <IconButton
+            href="https://getindexify.ai/concepts/#extractor"
+            target="_blank"
+          >
+            <InfoIcon fontSize="small" />
+          </IconButton>
+        </Typography>
       </Stack>
       {renderContent()}
     </>