Replace axios with qdrant client in graph visualisation (#243)

* replace an axios request with usage of the js client for searching martix pairs

* fix defaultProps deprication warning

Author: trean

package-lock.json

@@ -12,7 +12,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
     "@mui/x-data-grid": "^6.0.4",
-    "@qdrant/js-client-rest": "^1.10.0",
+    "@qdrant/js-client-rest": "^1.12.0",
     "@saehrimnir/druidjs": "^0.6.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

package.json

@@ -6,7 +6,7 @@ import ClusterInfoHead from './ClusterInfoHead';
 import ClusterShardRow from './ClusterShardRow';
 import { bigIntJSON } from '../../../common/bigIntJSON';
 
-const ClusterInfo = ({ collectionCluster, ...other }) => {
+const ClusterInfo = ({ collectionCluster = { result: {} }, ...other }) => {
   const shards = [
     ...(collectionCluster.result?.local_shards || []),
     ...(collectionCluster.result?.remote_shards || []),
@@ -38,12 +38,6 @@ const ClusterInfo = ({ collectionCluster, ...other }) => {
   );
 };
 
-ClusterInfo.defaultProps = {
-  collectionCluster: {
-    result: {},
-  },
-};
-
 ClusterInfo.propTypes = {
   collectionCluster: PropTypes.shape({
     result: PropTypes.shape({

src/components/Collections/CollectionCluster/ClusterInfo.jsx

@@ -5,7 +5,12 @@ import { CopyAll } from '@mui/icons-material';
 import { useSnackbar } from 'notistack';
 import { getSnackbarOptions } from './utils/snackbarOptions';
 
-export const CopyButton = ({ text, tooltip, tooltipPlacement, successMessage }) => {
+export const CopyButton = ({
+  text,
+  tooltip = 'Copy to clipboard',
+  tooltipPlacement = 'left',
+  successMessage = 'Copied to clipboard',
+}) => {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const successSnackbarOptions = getSnackbarOptions('success', closeSnackbar, 1000);
   const errorSnackbarOptions = getSnackbarOptions('error', closeSnackbar);
@@ -31,12 +36,6 @@ export const CopyButton = ({ text, tooltip, tooltipPlacement, successMessage })
   );
 };
 
-CopyButton.defaultProps = {
-  tooltip: 'Copy to clipboard',
-  tooltipPlacement: 'left',
-  successMessage: 'Copied to clipboard',
-};
-
 CopyButton.propTypes = {
   text: PropTypes.string.isRequired,
   tooltip: PropTypes.string,

src/components/Common/CopyButton.jsx

@@ -102,11 +102,6 @@ export const DataGridList = function ({ data = {}, specialCases = {}, onConditio
   });
 };
 
-DataGridList.defaultProps = {
-  data: {},
-  specialCases: {},
-};
-
 DataGridList.propTypes = {
   data: PropTypes.object.isRequired,
   specialCases: PropTypes.shape({

src/components/Points/DataGridList.jsx

@@ -1,5 +1,3 @@
-import { axiosInstance } from '../common/axios';
-
 export const initGraph = async (
   qdrantClient,
   { collectionName, initNode, limit, filter, using, sampleLinks, tree = false }
@@ -79,21 +77,15 @@ const getPointsWithPayload = async (qdrantClient, { collectionName, pointIds })
   return points;
 };
 
-export const getSamplePoints = async ({ collectionName, filter, sample, using, limit }) => {
-  // ToDo: replace it with qdrantClient when it will be implemented
-
-  const response = await axiosInstance({
-    method: 'POST',
-    url: `collections/${collectionName}/points/search/matrix/pairs`,
-    data: {
-      filter,
-      sample,
-      using,
-      limit,
-    },
+export const getSamplePoints = async (qdrantClient, { collectionName, filter, sample, using, limit }) => {
+  const response = await qdrantClient.searchMatrixPairs(collectionName, {
+    filter,
+    sample,
+    using,
+    limit,
   });
 
-  return response.data.result.pairs;
+  return response.pairs;
 };
 
 export const deduplicatePoints = (existingPoints, foundPoints) => {

src/lib/graph-visualization-helpers.js

@@ -98,7 +98,7 @@ function Graph() {
     // scroll
     try {
       if (data.sample) {
-        const sampleLinks = await getSamplePoints({
+        const sampleLinks = await getSamplePoints(qdrantClient, {
           collectionName: collectionName,
           ...data,
         });