libs/shared/lib/data-access/authorization/dashboardAlerts.tsx

-import React, { ReactNode, useEffect, useState, useImperativeHandle, useRef } from 'react';
+import React, { ReactNode, useEffect, useImperativeHandle, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import { useAppDispatch, useConfig } from '../store';
 import { removeLastError, removeLastInfo, removeLastSuccess, removeLastWarning } from '../store/configSlice';
-import { includes } from 'lodash-es';
-import { ReceiveMessageI } from '../broker/types';
 import { Icon } from '../../components';
 
 type Message = {

libs/shared/lib/data-access/authorization/index.ts

 export * from './useAuth';
+export * from './useResourcesPolicy';

libs/shared/lib/data-access/authorization/useAuth.tsx

 import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAuthorizationCache } from '../store';
-
 import { authorized, changeRoom } from '../store/authSlice';
 
 export type AuthenticationHeader = {
@@ -41,10 +40,10 @@ export const useAuth = () => {
                 sessionID: res.sessionID,
                 jwt: res.jwt,
                 authorized: true,
-              })
+              }),
             );
           })
-          .catch(handleError)
+          .catch(handleError),
       )
       .catch(handleError);
   };
@@ -58,7 +57,7 @@ export const useAuth = () => {
             // TODO: send to backend current state and make redux accordingly
             dispatch(changeRoom(res.Roomid));
           })
-          .catch(handleError)
+          .catch(handleError),
       )
       .catch(handleError);
   };

libs/shared/lib/data-access/authorization/useResourcesPolicy.tsx

+import { useResourcesPolicy } from '@graphpolaris/shared/lib/data-access';
+import { useMemo } from 'react';
+//import casbinjs from 'casbin.js';
+import { Authorizer } from 'casbin.js';
+export const useCheckPermissionPolicy = () => {
+  const policyPermissions = useResourcesPolicy();
+
+  const authorizer = useMemo(() => {
+    // docs tell to go this way, but it doesn't work
+    //const auth = new casbinjs.Authorizer('manual');
+    const auth = new Authorizer('manual');
+
+    const permission = {
+      read: policyPermissions.read,
+      write: policyPermissions.write,
+    };
+
+    auth.setPermission(permission);
+
+    return auth;
+  }, [policyPermissions]);
+
+  const canRead = async (resource: string) => {
+    return await authorizer.can('read', resource);
+  };
+
+  const canWrite = async (resource: string) => {
+    return await authorizer.can('write', resource);
+  };
+
+  return {
+    canRead,
+    canWrite,
+  };
+};

libs/shared/lib/data-access/broker/broker.tsx

@@ -129,11 +129,11 @@ export class Broker {
 
     const params = new URLSearchParams(window.location.search);
     // Most of these parameters are only really used in DEV
-    if (this.authHeader?.userID) params.set('userID', this.authHeader?.userID ?? '');
+    // if (this.authHeader?.userID) params.set('userID', this.authHeader?.userID ?? '');
     if (this.authHeader?.roomID) params.set('roomID', this.authHeader?.roomID ?? '');
     if (this.saveStateID) params.set('saveStateID', this.saveStateID ?? '');
     if (this.authHeader?.sessionID) params.set('sessionID', this.authHeader?.sessionID ?? '');
-    if (this.authHeader?.jwt) params.set('jwt', this.authHeader?.jwt ?? '');
+    // if (this.authHeader?.jwt) params.set('jwt', this.authHeader?.jwt ?? '');
     this.webSocket = new WebSocket(this.url + '?' + params.toString());
     this.webSocket.onopen = () => {
       this.connected = true;

libs/shared/lib/data-access/broker/wsQuery.ts

 // All database related API calls
 
-import { log } from 'console';
-import { useAuth } from '../authorization';
-import { useSessionCache } from '../store';
 import { BackendQueryFormat } from '../../querybuilder';
 import { Broker } from './broker';
 import { QueryBuilderText } from '../store/querybuilderSlice';

libs/shared/lib/data-access/broker/wsState.tsx

@@ -147,7 +147,6 @@ export function wsTestSaveStateConnectionSubscription(callback: TestSaveStateCon
 }
 
 export function wsUpdateState(request: SaveStateI, callback?: GetStateResponse) {
-  //console.log('wsUpdateState', request);
   Broker.instance().sendMessage(
     {
       key: 'state',

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

@@ -29,7 +29,7 @@ export const authSlice = createSlice({
   initialState,
   reducers: {
     authorized(state, action: PayloadAction<SingleIsAuthorizedState>) {
-      console.info('%cAuthorized', 'background-color: blue');
+      console.info('%cAuthorized ', 'background-color: blue', action.payload);
       state.authorized = action.payload.authorized;
       state.jwt = action.payload.jwt;
       state.userID = action.payload.userID;

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

+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+
+export interface PolicyResourcesState {
+  read: string[];
+  write: string[];
+}
+
+//TODO !FIXME: add middleware to fetch resources from backend
+const initialState: PolicyResourcesState = {
+  read: ['database', 'query', 'visualization', 'policy'],
+  write: ['database', 'query', 'visualization', 'policy'],
+};
+
+export const policyResourcesSlice = createSlice({
+  name: 'policyResources',
+  initialState,
+  reducers: {
+    getResourcesPolicy: (state, action: PayloadAction<PolicyResourcesState>) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { getResourcesPolicy } = policyResourcesSlice.actions;
+export default policyResourcesSlice.reducer;
+export const selectResourcesPolicyState = (state: RootState) => state.policyResources;

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

+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+
+export interface UserPolicy {
+  name: string;
+  email: string;
+  type: string;
+}
+
+export interface PolicyUsersState {
+  users: UserPolicy[];
+}
+
+//TODO !FIXME: add middleware to fetch users from backend
+const initialState: PolicyUsersState = {
+  users: [
+    { name: 'Scheper. W', email: 'user1@companyA.com', type: 'creator' },
+    { name: 'Smit. S', email: 'user2@companyB.com', type: 'viewer' },
+    { name: 'De Jong. B', email: 'user3@companyC.com', type: 'creator' },
+  ],
+};
+
+export const policyUsersSlice = createSlice({
+  name: 'policyUsers',
+  initialState,
+  reducers: {
+    setUsersPolicy: (state, action: PayloadAction<PolicyUsersState>) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { setUsersPolicy } = policyUsersSlice.actions;
+export default policyUsersSlice.reducer;
+export const selectPolicyState = (state: RootState) => state.policyUsers;

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

@@ -38,6 +38,8 @@ import { SchemaGraph, SchemaGraphInference, SchemaGraphStats } from '../../schem
 import { GraphMetadata } from '../statistics';
 import { SelectionStateI, FocusStateI, focusState, selectionState } from './interactionSlice';
 import { VisualizationSettingsType } from '../../vis/common';
+import { PolicyUsersState, selectPolicyState } from './authorizationUsersSlice';
+import { PolicyResourcesState, selectResourcesPolicyState } from './authorizationResourcesSlice';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;
@@ -85,3 +87,9 @@ export const useActiveVisualization: () => VisualizationSettingsType | undefined
 // Interaction Slices
 export const useSelection: () => SelectionStateI | undefined = () => useAppSelector(selectionState);
 export const useFocus: () => FocusStateI | undefined = () => useAppSelector(focusState);
+
+// Authorization Users Slice
+export const useUsersPolicy: () => PolicyUsersState = () => useAppSelector(selectPolicyState);
+
+// Authorization Resources Slice
+export const useResourcesPolicy: () => PolicyResourcesState = () => useAppSelector(selectResourcesPolicyState);

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

-import { QueryBuilder } from '../../querybuilder/panel/QueryBuilder';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
-import Graph, { MultiGraph } from 'graphology';
-import { Attributes, SerializedGraph } from 'graphology-types';
+import Graph from 'graphology';
 import { QueryMultiGraph, QueryMultiGraphology as QueryGraphology } from '../../querybuilder/model/graphology/utils';
 import { AllLayoutAlgorithms } from '../../graph-layout';
 import { QueryGraphEdgeHandle } from '../../querybuilder';
 import { isEqual } from 'lodash-es';
-import { settings } from 'pixi.js';
 
 const defaultGraph = () => ({ nodes: [], edges: [], attributes: {}, options: {} });
 

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

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 import { AllLayoutAlgorithms, Layouts } from '@graphpolaris/shared/lib/graph-layout';
 import { SchemaUtils } from '../../schema/schema-utils';
-import { DimensionType, SchemaGraphStats, SchemaFromBackend, SchemaGraph, SchemaGraphology, SchemaGraphInference } from '../../schema';
+import { SchemaGraphStats, SchemaFromBackend, SchemaGraph, SchemaGraphology, SchemaGraphInference } from '../../schema';
 
 /**************************************************************** */
 
@@ -12,6 +12,7 @@ export type SchemaSettings = {
   connectionType: SchemaConnectionTypes;
   layoutName: AllLayoutAlgorithms;
   animatedEdges: boolean;
+  showMinimap: boolean;
 };
 
 type schemaSliceI = {
@@ -37,6 +38,7 @@ export const initialState: schemaSliceI = {
     connectionType: 'connection',
     layoutName: Layouts.DAGRE,
     animatedEdges: false,
+    showMinimap: true,
   },
 };
 export const schemaSlice = createSlice({

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

-import { CaseReducer, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 import { DatabaseStatus, SaveStateI } from '../broker/wsState';
 import { getParam, URLParams } from '../api/url';

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

@@ -9,6 +9,8 @@ import mlSlice from './mlSlice';
 import searchResultSlice from './searchResultSlice';
 import visualizationSlice from './visualizationSlice';
 import interactionSlice from './interactionSlice';
+import policyUsersSlice from './authorizationUsersSlice';
+import policyPermissionSlice from './authorizationResourcesSlice';
 
 export const store = configureStore({
   reducer: {
@@ -22,6 +24,8 @@ export const store = configureStore({
     searchResults: searchResultSlice,
     interaction: interactionSlice,
     visualize: visualizationSlice,
+    policyUsers: policyUsersSlice,
+    policyResources: policyPermissionSlice,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

libs/shared/lib/graph-layout/cytoscape-layouts.ts

@@ -80,11 +80,8 @@ export abstract class CytoscapeLayout extends Layout<CytoscapeProvider> {
   protected defaultLayoutSettings = {
     animate: false,
     animationDuration: 5000,
-    ready: function () {
-      // console.info('Layout.ready');
-    }, // on layoutready
+    ready: function () {}, // on layoutready
     stop: () => {
-      // console.log('Layout.stop');
       this.updateNodePositions();
     }, // on layoutstop
   };
@@ -412,7 +409,6 @@ class CytoscapeCoseBilkent extends CytoscapeLayout {
     //   const node = event.target;
     //   // The node's position has changed
     //   // You can access the new position with node.position()
-    //   console.log(node, event.target.position());
     //   this.updateNodePositions();
     // });
   }
@@ -585,7 +581,7 @@ class CytoscapeBreathFirst extends CytoscapeLayout {
 
       name: 'breadthfirst',
     } as any);
-    // console.log('CytoscapeBreathFirst.layout', layout);
+
     layout.run();
 
     this.updateNodePositions();

libs/shared/lib/graph-layout/graphology-layouts.ts

@@ -3,7 +3,6 @@ import { circular, random } from 'graphology-layout';
 import forceAtlas2, { ForceAtlas2Settings } from 'graphology-layout-forceatlas2';
 import FA2Layout from 'graphology-layout-forceatlas2/worker';
 import noverlap from 'graphology-layout-noverlap';
-import { RandomLayoutOptions } from 'graphology-layout/random';
 import { Attributes } from 'graphology-types';
 import { Layout } from './layout';
 import { ILayoutFactory } from './layout-creator-usecase';
@@ -55,7 +54,6 @@ export abstract class GraphologyLayout extends Layout<GraphologyProvider> {
       throw new Error('The graph is not set.');
     }
 
-    // console.log('Getting position for node:', nodeId, this.graph.getNodeAttributes(nodeId));
     return this.graph.getNodeAttributes(nodeId);
   }
 }
@@ -207,7 +205,7 @@ export class GraphologyForceAtlas2Webworker extends GraphologyLayout {
     let settings = {
       ...this.defaultLayoutSettings,
       ...sensibleSettings,
-      adjustSizes: graph.order < 300 ? true : false
+      adjustSizes: graph.order < 300 ? true : false,
     };
 
     if (graph.order > 5000) {
@@ -215,7 +213,7 @@ export class GraphologyForceAtlas2Webworker extends GraphologyLayout {
         ...settings,
         barnesHutOptimize: true,
         barnesHutTheta: 0.75,
-        slowDown: 0.75
+        slowDown: 0.75,
       };
     }
 

libs/shared/lib/graph-layout/layout.ts

@@ -23,7 +23,6 @@ export abstract class Layout<provider extends Providers> {
 
     if (boundingBox !== undefined) {
       this.boundingBox = boundingBox;
-      // console.log(`Setting bounding box to ${JSON.stringify(this.boundingBox)}`);
     }
 
     if (this.verbose) {

libs/shared/lib/mock-data/query-result/marieBoucherSample.json

@@ -190,13 +190,15 @@
             "_id": "merchant/0",
             "label": "merchant",
             "attributes": {
-                "name": "Elise",
+                "name": "Margaret",
+                "name2": "Name0",
                 "data": [
                     1801,
                     1802,
                     1803,
                     1804
                 ],
+                "birth":"france",
                 "community": "Legrand"
             }
         },
@@ -205,11 +207,13 @@
             "label": "merchant",
             "attributes": {
                 "name": "Jacques",
+                "name2": "Name1",
                 "data": [
                     1801,
                     1802,
                     1803
                 ],
+                "birth":"UK",
                 "community": "Legrand"
             }
         },
@@ -218,12 +222,14 @@
             "label": "merchant",
             "attributes": {
                 "name": "Hubert",
+                "name2": "Name2",
                 "data": [
                     1803,
                     1804,
                     1802,
                     1801
                 ],
+                "birth":"Germany",
                 "community": "Dupont"
             }
         },
@@ -232,11 +238,13 @@
             "label": "merchant",
             "attributes": {
                 "name": "Roze",
+                "name2": "Name3",
                 "data": [
                     1804,
                     1802,
                     1803
                 ],
+                "birth":"france",
                 "community": "Legrand"
             }
         },
@@ -245,6 +253,8 @@
             "label": "merchant",
             "attributes": {
                 "name": "Vallet",
+                "birth":"france",
+                "name2": "Name4",
                 "data": [
                     1804,
                     1802,
@@ -257,12 +267,14 @@
             "label": "merchant",
             "attributes": {
                 "name": "John",
+                "name2": "Name5",
                 "data": [
                     1804,
                     1803,
                     1801,
                     1802
                 ],
+                "birth":"USA",
                 "community": "Legrand"
             }
         },
@@ -271,12 +283,14 @@
             "label": "merchant",
             "attributes": {
                 "name": "Joseph",
+                "name2": "Name6",
                 "data": [
                     1804,
                     1803,
                     1801,
                     1802
                 ],
+                "birth":"USA",
                 "community": "Dupont"
             }
         },
@@ -285,6 +299,8 @@
             "label": "merchant",
             "attributes": {
                 "name": "Antoine",
+                "birth":"Spain",
+                "name2": "Name7",
                 "data": [
                     1804,
                     1803,
@@ -298,6 +314,8 @@
             "label": "merchant",
             "attributes": {
                 "name": "Philippe",
+                "birth":"Spain",
+                "name2": "Name8",
                 "data": [
                     1804,
                     1803
@@ -310,6 +328,8 @@
             "label": "merchant",
             "attributes": {
                 "name": "Claude",
+                "birth":"Spain",
+                "name2": "Name9",
                 "data": [
                     1804,
                     1803
@@ -322,6 +342,7 @@
             "label": "merchant",
             "attributes": {
                 "name": "Guillaume",
+                "name2": "Name10",
                 "data": [
                     1804,
                     1803
@@ -333,6 +354,8 @@
             "label": "merchant",
             "attributes": {
                 "name": "Madeleine",
+                "birth":"Spain",
+                "name2": "Name11",
                 "data": [
                     1803,
                     1804
@@ -344,6 +367,7 @@
             "label": "merchant",
             "attributes": {
                 "name": "Renexent",
+                "name2": "Name12",
                 "data": [
                     1803,
                     1804