.gitignore

@@ -24,6 +24,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -13,6 +13,8 @@ First run `pnpm i` on the root of the workspace to install all dependencies. It
 
 If you need to install a new dependency or upgrade an existing one, do so in the respective package.json and rerun `pnpm i` in the root of the workspace. If you find any issues, feel free to delete the node_modules folder from the workspace root and from the app/lib which you are changing the dependency and rerun the `pnpm i` command from the root of the workspace. Most issues are solved by then.
 
+Secondly, make sure you create a local `.env` file. For local development, you can simply copy the contents of the `.env.development` template in the `/apps/web` directory to a new `.env` file and you should be good to go.
+
 ### Running Storybook.js
 
 To run the dev storybook (implementing visualizations) simply run `pnpm sb` and once it is running, ctrl-click the link what appears in the terminal. The url should be [http://localhost:6006].

apps/web/.env

-GRAPHPOLARIS_VERSION=dev
-BACKEND_URL=http://localhost
-BACKEND_WSS_URL=ws://localhost:3001/
-STAGING=dev
-SKIP_LOGIN=true
-BACKEND_USER=:3000
-GRAPHPOLARIS_VERSION=dev
-
-SENTRY_ENABLED=false
-SENTRY_URL=
-
-GP_AUTH_URL=
-
-WIP_TABLEVIS=false
-WIP_NODELINKVIS=false
-WIP_RAWJSONVIS=false
-WIP_PAOHVIS=true
-WIP_MATRIXVIS=true
-WIP_SEMANTICSUBSTRATESVIS=true
-WIP_MAPVIS=true
-
-WIP_INSIGHT_SHARING=true
-WIP_VIEWER_PERMISSIONS=true
-WIP_SHARABLE_EXPLORATION=true
\ No newline at end of file

apps/web/.env.development

-VITE_BACKEND_URL=http://localhost
-VITE_BACKEND_WSS_URL=ws://localhost:3001/
-VITE_STAGING=dev
-VITE_SKIP_LOGIN=true
-VITE_BACKEND_USER=:3000
-VITE_BACKEND_QUERY=:3003
-VITE_BACKEND_SCHEMA=:3002
+GRAPHPOLARIS_VERSION=dev
+BACKEND_URL=http://localhost
+BACKEND_WSS_URL=ws://localhost:3001/
+STAGING=dev
+SKIP_LOGIN=true
+BACKEND_USER=:3000
+GRAPHPOLARIS_VERSION=dev
 
 SENTRY_ENABLED=false
 SENTRY_URL=

libs/shared/lib/data-access/store/querybuilderSlice.ts

 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
-import Graph from 'graphology';
+import Graph, { MultiGraph } from 'graphology';
 import { QueryMultiGraph, QueryMultiGraphology as QueryGraphology } from '../../querybuilder/model/graphology/utils';
 import { AllLayoutAlgorithms } from '../../graph-layout';
 import { QueryGraphEdgeHandle } from '../../querybuilder';
@@ -106,7 +106,7 @@ export const setQuerybuilderGraphology = (payload: QueryGraphology) => {
 /** Select the querybuilder nodes in serialized fromat */
 export const toQuerybuilderGraphology = (graph: QueryMultiGraph): QueryGraphology => {
   let ret = new QueryGraphology();
-  ret.import(Graph.from(graph).export());
+  ret.import(MultiGraph.from(graph).export());
   return ret;
 };
 

libs/shared/lib/querybuilder/model/graphology/utils.ts

-import Graph from 'graphology';
+import Graph, { MultiGraph } from 'graphology';
 import { Attributes as GAttributes, Attributes, SerializedGraph } from 'graphology-types';
 import {
   EntityNodeAttributes,
@@ -32,7 +32,7 @@ export type AddEdge2GraphologyOptions = {
 
 export type QueryMultiGraph = SerializedGraph<QueryGraphNodes, QueryGraphEdges, GAttributes>;
 
-export class QueryMultiGraphology extends Graph<QueryGraphNodes, QueryGraphEdges, GAttributes> {
+export class QueryMultiGraphology extends MultiGraph<QueryGraphNodes, QueryGraphEdges, GAttributes> {
   public configureDefaults(attributes: QueryGraphNodes): QueryGraphNodes {
     const { type, name } = attributes;
     if (!type || !name) throw Error('type or name is not defined');
@@ -295,7 +295,7 @@ export function calcWidthHeightOfPill(attributes: Attributes): {
 }
 
 /** Interface for x and y position of node */
-export interface NodePosition extends XYPosition {}
+export interface NodePosition extends XYPosition { }
 
 /** Returns from-position of relation node */
 export function RelationPosToFromEntityPos(position: XYPosition): NodePosition {

libs/shared/lib/querybuilder/panel/QueryBuilder.tsx

@@ -357,14 +357,12 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
         isOnConnect.current = true;
         if (!connection.sourceHandle || !connection.targetHandle) throw new Error('Connection has no source or target');
 
-        if (!graphologyGraph.hasEdge(connection.source, connection.target)) {
-          graphologyGraph.addEdge(connection.source, connection.target, {
-            type: 'connection',
-            sourceHandleData: toHandleData(connection.sourceHandle),
-            targetHandleData: toHandleData(connection.targetHandle),
-          });
-          dispatch(setQuerybuilderGraphology(graphologyGraph));
-        }
+        graphologyGraph.addEdge(connection.source, connection.target, {
+          type: 'connection',
+          sourceHandleData: toHandleData(connection.sourceHandle),
+          targetHandleData: toHandleData(connection.targetHandle),
+        });
+        dispatch(setQuerybuilderGraphology(graphologyGraph));
       }
     },
     [graph],
@@ -508,7 +506,6 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
         <QueryBuilderNav
           toggleSettings={toggleSettings}
           onFitView={fitView}
-          onApplyLayout={() => applyLayout()}
           onRunQuery={() => {
             if (props.onRunQuery) props.onRunQuery();
           }}

libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx

@@ -13,7 +13,6 @@ export type QueryBuilderToggleSettings = 'settings' | 'ml' | 'logic' | 'relatedN
 export type QueryBuilderNavProps = {
   toggleSettings: QueryBuilderToggleSettings;
   onFitView: () => void;
-  onApplyLayout: () => void;
   onRunQuery: () => void;
   onScreenshot: () => void;
   onLogic: () => void;
@@ -40,7 +39,6 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
     wsManualQueryRequest(query);
   };
 
-
   return (
     <div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
       <div className="flex items-center">
@@ -94,20 +92,6 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
                 <p>Capture screen</p>
               </TooltipContent>
             </Tooltip>
-            <Tooltip>
-              <TooltipTrigger>
-                <Button
-                  variantType="secondary"
-                  variant="ghost"
-                  size="xs"
-                  iconComponent="icon-[ic--baseline-import-export]"
-                  onClick={props.onApplyLayout}
-                />
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Layouts</p>
-              </TooltipContent>
-            </Tooltip>
             <Popover>
               <PopoverTrigger>
                 <Tooltip>
@@ -281,12 +265,7 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
               <PopoverTrigger>
                 <Tooltip>
                   <TooltipTrigger>
-                    <Button
-                      variantType="secondary"
-                      variant="ghost"
-                      size="xs"
-                      iconComponent="icon-[ic--baseline-search]"
-                    />
+                    <Button variantType="secondary" variant="ghost" size="xs" iconComponent="icon-[ic--baseline-search]" />
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Manual Query</p>

libs/shared/lib/querybuilder/query-utils/query2backend.spec.ts

@@ -664,7 +664,7 @@ describe('QueryUtils Entity and Relations', () => {
     const graph = new QueryMultiGraphology();
 
     const e1 = graph.addPill2Graphology({ id: 'e1', type: QueryElementTypes.Entity, x: 100, y: 100, name: 'Airport 1', attributes: [] });
-    const e2 = graph.addPill2Graphology({ id: 'e2', type: QueryElementTypes.Entity, x: 100, y: 100, name: 'Airport 1', attributes: [] });
+    const e2 = graph.addPill2Graphology({ id: 'e2', type: QueryElementTypes.Entity, x: 100, y: 100, name: 'Airport 2', attributes: [] });
 
     graph.addEdge2Graphology(e1, e2, { type: 'connection' });
     graph.addEdge2Graphology(e2, e1, { type: 'connection' });
@@ -677,17 +677,18 @@ describe('QueryUtils Entity and Relations', () => {
           node: {
             ID: 'e1',
             label: 'Airport 1',
-            relation: { direction: 'BOTH', node: { ID: 'e2', label: 'Airport 1' } },
-          },
-        },
-        {
-          ID: 'path_1',
-          node: {
-            ID: 'e2',
-            label: 'Airport 1',
-            relation: { direction: 'BOTH', node: { ID: 'e1', label: 'Airport 1' } },
+            relation: {
+              direction: 'BOTH',
+              node: {
+                ID: 'e2', label: 'Airport 2',
+                relation: {
+                  direction: 'BOTH',
+                  node: { ID: 'e1', label: 'Airport 1' }
+                },
+              }
+            },
           },
-        },
+        }
       ],
     };
     let ret = Query2BackendQuery('database', graph.export(), defaultSettings);
@@ -706,7 +707,13 @@ describe('QueryUtils Entity and Relations', () => {
       query: [
         {
           ID: 'path_0',
-          node: { ID: 'e1', label: 'Airport 1', relation: { direction: 'BOTH', node: { ID: 'e1', label: 'Airport 1' } } },
+          node: {
+            ID: 'e1', label: 'Airport 1',
+            relation: {
+              direction: 'BOTH',
+              node: { ID: 'e1', label: 'Airport 1' }
+            }
+          },
         },
       ],
     };

libs/shared/lib/querybuilder/query-utils/query2backend.ts

@@ -175,7 +175,7 @@ export function Query2BackendQuery(
   graph: QueryMultiGraph,
   settings: QueryBuilderSettings,
   ml: ML = mlDefaultState,
-  unionTypes: { [node_id: string]: QueryUnionType },
+  unionTypes: { [node_id: string]: QueryUnionType } = {},
 ): BackendQueryFormat {
   let query: BackendQueryFormat = {
     saveStateID: saveStateID,
@@ -205,16 +205,23 @@ export function Query2BackendQuery(
     const cycles = entities.map((entity, i) => {
       return allSimplePaths(graphologyQuery, entity.key, entity.key);
     });
-    cycles.forEach((cycles_inner, i) => {
-      cycles_inner.forEach((cycle, j) => {
+    for (let i = 0; i < cycles.length; i++) {
+      for (let j = 0; j < cycles[i].length; j++) {
+        const cycle = cycles[i][j];
         const origin = cycle[0];
         const target = cycle[cycle.length - 2];
-        const newOrigin = graphologyQuery.addNode(origin + 'cycle', graphologyQuery.getNodeAttributes(origin));
-        const edgeAttributes = graphologyQuery.getEdgeAttributes(target, origin);
-        graphologyQuery.dropEdge(target, origin);
-        graphologyQuery.addEdge(target, newOrigin, edgeAttributes);
-      });
-    });
+        const edges = graphologyQuery.edges(target, origin);
+        if (edges.length > 0) {
+          const edge = edges[edges.length - 1];
+          const newOrigin = graphologyQuery.addNode(origin + 'cycle' + edge, graphologyQuery.getNodeAttributes(origin));
+          const edgeAttributes = graphologyQuery.getEdgeAttributes(edge);
+          graphologyQuery.dropEdge(edge);
+          graphologyQuery.addEdge(target, newOrigin, edgeAttributes);
+        }
+        break; // only do one cycle
+      }
+      break; // only do one cycle
+    }
 
     return Query2BackendQuery(saveStateID, graphologyQuery.export(), settings, ml, unionTypes);
   }

libs/shared/lib/vis/components/config/VisualizationSettings.tsx

@@ -80,17 +80,6 @@ export function VisualizationSettings({}: Props) {
             }}
           />
         </div>
-        <Input
-          type="dropdown"
-          size="xs"
-          options={VISUALIZATION_TYPES}
-          value={activeVisualization?.id}
-          onChange={(val) => {
-            updateSettings({ id: val });
-          }}
-          label="Type"
-          inline
-        />
         <Input
           type="text"
           size="sm"