feat[graph-tab]: integrate Euclidean distance into graph visualization tab

src/components/Common/PointPreview.jsx

@@ -43,7 +43,7 @@ const PointPreview = ({ point }) => {
           <>
             <CardContent>
               <Grid container display={'flex'}>
-                {point.payload && <PointImage data={point.payload} sx={{ width: 300, mx: 'auto' }} />}
+                {point.payload && <PointImage data={point.payload} sx={{ width: 300, mx: 'auto' }} gridxs={12} />}
                 <Grid item xs={12} my={1}>
                   <DataGridList
                     data={{ id: point.id, ...point.payload }}

src/components/Points/PointImage.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, CardMedia, Grid, Modal, Typography } from '@mui/material';
 
-function PointImage({ data, sx }) {
+function PointImage({ data, sx, gridxs }) {
   const [fullScreenImg, setFullScreenImg] = useState(null);
   const renderImages = () => {
     const images = [];
@@ -58,7 +58,7 @@ function PointImage({ data, sx }) {
   }
 
   return (
-    <Grid item xs={3} display="grid" justifyContent={'center'}>
+    <Grid item xs={gridxs ?? 3} display="grid" justifyContent={'center'}>
       {images}
       <Modal
         open={!!fullScreenImg}
@@ -114,6 +114,7 @@ function PointImage({ data, sx }) {
 PointImage.propTypes = {
   data: PropTypes.object.isRequired,
   sx: PropTypes.object,
+  gridxs: PropTypes.number,
 };
 
 export default PointImage;

src/lib/graph-visualization-helpers.js

@@ -152,3 +152,11 @@ export const getMinimalSpanningTree = (links, acs = true) => {
 
   return mstLinks;
 };
+
+export const getMetrics = async (qdrantClient, { collectionName, vectorName = null }) => {
+  const collectionInfo = await qdrantClient.getCollection(collectionName);
+  if (vectorName && collectionInfo.config.params.vectors[vectorName]) {
+    return collectionInfo.config.params.vectors[vectorName].distance;
+  }
+  return collectionInfo.config.params.vectors.distance;
+};