feat: Add Separate Panel for Points View to Mirror Graph Layout (#222)

* feat:  Add Separate Panel for Points View to Mirror Graph Layout

* fmt

* audit fix

* Review for visualization preview (#233)

* fix

* wip

* WIP: hover colloring of the scatterplot

* WIP: hover colloring of the scatterplot

* WIP: hover colloring of the scatterplot

* color addaptation of the pallete

* wip: refactor requests

* simplify color-by requests

* minor fixes

---------

Co-authored-by: trean <[email protected]>

* audit fix

---------

Co-authored-by: Andrey Vasnetsov <[email protected]>
Co-authored-by: trean <[email protected]>

Author: 3 people

package-lock.json

@@ -11,7 +11,6 @@ const PointPreview = ({ point }) => {
   const [loading] = React.useState(false);
   const conditions = [];
   const payloadSchema = {};
-  const onConditionChange = () => {};
 
   if (!point) {
     return null;
@@ -48,7 +47,6 @@ const PointPreview = ({ point }) => {
                 <Grid item xs={12} my={1}>
                   <DataGridList
                     data={{ id: point.id, ...point.payload }}
-                    onConditionChange={onConditionChange}
                     conditions={conditions}
                     payloadSchema={payloadSchema}
                   />
@@ -67,7 +65,7 @@ const PointPreview = ({ point }) => {
               }}
             />
             <CardContent>
-              <Vectors point={point} onConditionChange={onConditionChange} />
+              <Vectors point={point} />
             </CardContent>
           </>
         )}

src/components/GraphVisualisation/PointPreview.jsx renamed to src/components/Common/PointPreview.jsx

@@ -6,7 +6,7 @@ import { useClient } from '../../context/client-context';
 import { useTheme } from '@mui/material/styles';
 import { autocomplete } from './config/Autocomplete';
 import { useSnackbar } from 'notistack';
-import { codeParse } from './config/RequestFromCode';
+import { bigIntJSON } from '../../common/bigIntJSON';
 import './editor.css';
 import EditorCommon from '../EditorCommon';
 
@@ -30,6 +30,20 @@ const CodeEditorWindow = ({ onChange, code, onChangeResult, customRequestSchema,
     []
   );
 
+  function codeParse(codeText) {
+    // Parse JSON
+    if (codeText) {
+      try {
+        return bigIntJSON.parse(codeText);
+      } catch (e) {
+        return {
+          reqBody: codeText,
+          error: 'Fix the position brackets to run & check the json',
+        };
+      }
+    }
+  }
+
   function onRun(codeText) {
     const data = codeParse(codeText);
     if (data.error) {

src/components/FilterEditorWindow/config/RequestFromCode.js

@@ -85,7 +85,9 @@ export const DataGridList = function ({ data = {}, specialCases = {}, onConditio
                       if (conditions.find((c) => c.key === filter.key && c.value === filter.value)) {
                         return;
                       }
-                      onConditionChange([...conditions, filter]);
+                      if (typeof onConditionChange === 'function') {
+                        onConditionChange([...conditions, filter]);
+                      }
                     }}
                   >
                     <FilterAltIcon />

src/components/FilterEditorWindow/index.jsx

@@ -34,6 +34,7 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
 
   return (
     <Box pt={2}>
+      Vectors:
       {Object.keys(vectors).map((key) => {
         return (
           <Grid key={key} container spacing={2}>
@@ -81,13 +82,17 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
               <Button variant="outlined" size="small" onClick={() => handleNavigate(key)}>
                 Open graph
               </Button>
-              <Button
-                variant="outlined"
-                size="small"
-                onClick={() => onConditionChange([{ key: 'id', type: 'id', value: point.id }], key === '' ? null : key)}
-              >
-                Find Similar
-              </Button>
+              {typeof onConditionChange !== 'function' ? null : (
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={() =>
+                    onConditionChange([{ key: 'id', type: 'id', value: point.id }], key === '' ? null : key)
+                  }
+                >
+                  Find Similar
+                </Button>
+              )}
             </Grid>
           </Grid>
         );
@@ -98,7 +103,7 @@ const Vectors = memo(function Vectors({ point, onConditionChange }) {
 
 Vectors.propTypes = {
   point: PropTypes.object.isRequired,
-  onConditionChange: PropTypes.func.isRequired,
+  onConditionChange: PropTypes.func,
 };
 
 export default Vectors;