New points filers design (#344)

* audit fix

* wip

* add filters logic

* autocomplete

* fix

* styles

* autocomplete popper size and position

* remove the current value from autocomplete options

* fixes

* changed filters field design

* fixes

* moved a file, theme colors

* fix

* add expanding of the similarity field

* remove expanding field button, expand automatically

* improve loading state

* placeholders fix

* refactoring

* fix input with whitespace

* do not loose focus on query

* clear on empty

* autocomplete from the first letter

* autocomplete for values

* sort + max autocomplete length

* separate conditions and similarities

* clear canvas

* allow filter by id

* audit fix

* format

---------

Co-authored-by: generall <andrey@vasnetsov.com>

Author: trean

package-lock.json

@@ -12,7 +12,7 @@ import { bigIntJSON } from '../../common/bigIntJSON';
 import { Divider } from '@mui/material';
 
 const PointCard = (props) => {
-  const { onConditionChange /* , conditions */ } = props;
+  const { onFindSimilar } = props;
   const [point, setPoint] = React.useState(props.point);
   const [loading, setLoading] = React.useState(false);
   const [openDeleteDialog, setOpenDeleteDialog] = React.useState(false);
@@ -93,7 +93,7 @@ const PointCard = (props) => {
         )}
         <Divider />
         <CardContent sx={{ padding: '1rem' }}>
-          {point?.vector && <Vectors point={point} onConditionChange={onConditionChange} />}
+          {point?.vector && <Vectors point={point} onFindSimilar={onFindSimilar} />}
         </CardContent>
       </Card>
       <ConfirmationDialog
@@ -112,8 +112,7 @@ const PointCard = (props) => {
 
 PointCard.propTypes = {
   point: PropTypes.object.isRequired,
-  onConditionChange: PropTypes.func.isRequired,
-  conditions: PropTypes.array.isRequired,
+  onFindSimilar: PropTypes.func.isRequired,
   collectionName: PropTypes.string.isRequired, // use params instead?
   deletePoint: PropTypes.func.isRequired,
   payloadSchema: PropTypes.object.isRequired,

src/components/Points/PointCard.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, Divider, Skeleton, Box } from '@mui/material';
+
+const PointCardSkeleton = () => {
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+      }}
+    >
+      <CardHeader
+        title={<Skeleton variant="text" width="60%" height={24} />}
+        action={
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Skeleton variant="circular" width={32} height={32} sx={{ mr: 1 }} />
+            <Skeleton variant="circular" width={32} height={32} />
+          </Box>
+        }
+      />
+      <CardContent sx={{ padding: '0.5rem 1rem' }}>
+        <Skeleton variant="rounded" height={60} sx={{ mb: 1 }} />
+        <Skeleton variant="rounded" height={40} />
+      </CardContent>
+      <Divider />
+      <CardContent sx={{ padding: '1rem' }}>
+        <Skeleton variant="rounded" height={100} />
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PointCardSkeleton;

src/components/Points/PointCardSkeleton.jsx

@@ -25,7 +25,7 @@ const StyledButton = styled(Button)({
  * @returns {JSX.Element|null}
  * @constructor
  */
-const Vectors = memo(function Vectors({ point, onConditionChange }) {
+const Vectors = memo(function Vectors({ point, onFindSimilar }) {
   const { collectionName } = useParams();
   const navigate = useNavigate();
   if (!Object.getOwnPropertyDescriptor(point, 'vector')) {
@@ -116,13 +116,11 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
               >
                 Open graph
               </StyledButton>
-              {typeof onConditionChange !== 'function' ? null : (
+              {typeof onFindSimilar !== 'function' ? null : (
                 <StyledButton
                   variant="outlined"
                   size="small"
-                  onClick={() =>
-                    onConditionChange([{ key: 'id', type: 'id', value: point.id }], key === '' ? null : key)
-                  }
+                  onClick={() => onFindSimilar(point.id, key === '' ? null : key)}
                   sx={{
                     width: { xs: '100%', md: 'auto' },
                   }}
@@ -140,7 +138,7 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
 
 Vectors.propTypes = {
   point: PropTypes.object.isRequired,
-  onConditionChange: PropTypes.func,
+  onFindSimilar: PropTypes.func,
 };
 
 export default Vectors;