feat: Add navigation to graph page from point page (#205)

* feat: Add navigation to graph page from point vectors page * minor fix and fmt * chore: Update axios dependency to version 1.7.4 * feat: Update button label to "Open graph" in PointVectors component * remove console log --------- Co-authored-by: generall <[email protected]>
qdrant · Aug 15, 2024 · 9bd7426 · 9bd7426
1 parent 51bfb17
commit 9bd7426
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 22 deletions.
diff --git a/src/components/Points/PointVectors.jsx b/src/components/Points/PointVectors.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Box, Button, Chip, Grid, Typography } from '@mui/material';
 import { CopyButton } from '../Common/CopyButton';
 import { bigIntJSON } from '../../common/bigIntJSON';
+import { useNavigate, useParams } from 'react-router-dom';
 
 /**
  * Component for displaying vectors of a point
@@ -12,6 +13,8 @@ import { bigIntJSON } from '../../common/bigIntJSON';
  * @constructor
  */
 const Vectors = memo(function Vectors({ point, onConditionChange }) {
+  const { collectionName } = useParams();
+  const navigate = useNavigate();
   if (!Object.getOwnPropertyDescriptor(point, 'vector')) {
     return null;
   }
@@ -25,6 +28,10 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
     vectors = point.vector;
   }
 
+  const handleNavigate = (key) => {
+    navigate(`/collections/${collectionName}/graph`, { state: { newInitNode: point, vectorName: key } });
+  };
+
   return (
     <Box pt={2}>
       {Object.keys(vectors).map((key) => {
@@ -61,24 +68,23 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
                 size="small"
               />
             </Grid>
-            <Grid item xs={4} my={1} display={'flex'}>
-              <Box sx={{ flexGrow: 1 }} />
-
+            <Grid
+              item
+              xs={4}
+              my={1}
+              sx={{
+                display: 'flex',
+                justifyContent: 'end',
+                gap: 2,
+              }}
+            >
+              <Button variant="outlined" size="small" onClick={() => handleNavigate(key)}>
+                Open graph
+              </Button>
               <Button
-                size="small"
                 variant="outlined"
-                onClick={() => {
-                  onConditionChange(
-                    [
-                      {
-                        key: 'id',
-                        type: 'id',
-                        value: point.id,
-                      },
-                    ],
-                    key === '' ? null : key
-                  );
-                }}
+                size="small"
+                onClick={() => onConditionChange([{ key: 'id', type: 'id', value: point.id }], key === '' ? null : key)}
               >
                 Find Similar
               </Button>

diff --git a/src/pages/Graph.jsx b/src/pages/Graph.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { alpha, Paper, Box, Tooltip, Typography, Grid, IconButton } from '@mui/material';
 import { ArrowBack } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
@@ -12,12 +12,8 @@ import { useClient } from '../context/client-context';
 import { getFirstPoint } from '../lib/graph-visualization-helpers';
 import { useSnackbar } from 'notistack';
 
-const defaultQuery = `
-// Try me!
+const explanation = `
 
-{
-  "limit": 5
-}
 // Parameters for expansion request:
 //
 // Available parameters:
@@ -32,10 +28,22 @@ const defaultQuery = `
 
 `;
 
+const defaultJson = `
+// Try me!
+
+{
+  "limit": 5
+}
+`;
+
+const defaultQuery = defaultJson + explanation;
+
 function Graph() {
   const theme = useTheme();
   const navigate = useNavigate();
   const params = useParams();
+  const location = useLocation();
+  const { newInitNode, vectorName } = location.state || {};
   const [initNode, setInitNode] = useState(null);
   const [options, setOptions] = useState({
     limit: 5,
@@ -61,6 +69,26 @@ function Graph() {
     setActivePoint(point);
   }, []);
 
+  useEffect(() => {
+    if (newInitNode) {
+      delete newInitNode.vector;
+      setInitNode(newInitNode);
+
+      const option = vectorName
+        ? {
+            limit: 5,
+            using: vectorName,
+          }
+        : {
+            limit: 5,
+          };
+      setCode(JSON.stringify(option, null, 2) + explanation);
+
+      option.collectionName = params.collectionName;
+      setOptions(option);
+    }
+  }, [newInitNode, vectorName]);
+
   const handleRunCode = async (data, collectionName) => {
     // scroll
     try {