Merge branch 'feat/add-dark-mode-support' into develop

apps/web-graphpolaris/src/app/app.tsx

@@ -11,12 +11,18 @@ import { RawJSONVis } from '../components/visualisations/rawjsonvis/rawjsonvis';
 import SemanticSubstrates from '../components/visualisations/semanticsubstrates/semanticsubstrates';
 import LoginScreen from '../components/login/loginScreen';
 import Schema from '../components/schema/schema';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GetUserInfo } from '@graphpolaris/shared/data-access/api';
 
 function useIsAuthorized() {
   const [userAuthorized, setUserAuthorized] = useState(false);
 
-  const authCallback = () => {
+  const authCallback = async () => {
     setUserAuthorized(true);
+
+    // Print the user that is currently logged in
+    const user = await GetUserInfo();
+    console.log(user);
   };
 
   AuthorizationHandler.instance().setCallback(authCallback);

apps/web-graphpolaris/src/components/panels/panel.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { configureStore } from '@reduxjs/toolkit';
 import { colorPaletteConfigSlice } from '@graphpolaris/shared/data-access/store';
 import { Provider } from 'react-redux';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
 
 export default {
   /* 👇 The title prop is optional.
@@ -16,7 +16,7 @@ export default {
   decorators: [
     (story) => (
       <Provider store={Mockstore}>
-        <OurThemeProvider>{story()}</OurThemeProvider>
+        <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
       </Provider>
     ),
   ],

apps/web-graphpolaris/src/components/schema/schema.stories.tsx

@@ -6,7 +6,7 @@ import {
   setSchema,
   store,
 } from '@graphpolaris/shared/data-access/store';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
 import {
   movieSchema,
   northWindSchema,
@@ -28,7 +28,7 @@ export default {
   decorators: [
     (story) => (
       <Provider store={Mockstore}>
-        <OurThemeProvider>{story()}</OurThemeProvider>
+        <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
       </Provider>
     ),
   ],

apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from '@graphpolaris/shared/data-access/store';
 import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
 
 export default {
   /* 👇 The title prop is optional.
@@ -23,7 +23,7 @@ export default {
   decorators: [
     (story) => (
       <Provider store={Mockstore}>
-        <OurThemeProvider>{story()}</OurThemeProvider>
+        <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
       </Provider>
     ),
   ],

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx

@@ -2,7 +2,7 @@ import {
   colorPaletteConfigSlice,
   graphQueryResultSlice,
 } from '@graphpolaris/shared/data-access/store';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
 import { configureStore } from '@reduxjs/toolkit';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Provider } from 'react-redux';
@@ -19,7 +19,7 @@ export default {
   decorators: [
     (story) => (
       <Provider store={Mockstore}>
-        <OurThemeProvider>{story()}</OurThemeProvider>
+        <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
       </Provider>
     ),
   ],

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/system/Box';
 import {
   changeDataPointColors,
   changePrimary,
+  toggleDarkMode,
   useAppDispatch,
 } from '@graphpolaris/shared/data-access/store';
 import styled from 'styled-components';
@@ -11,7 +12,7 @@ import { Button } from '@mui/material';
 const Div = styled.div`
   // add :{ theme: Theme } if you want to have typing (autocomplete)
   background-color: ${({ theme }: { theme: Theme }) =>
-    theme.palette.dataPointColors[0]};
+    theme.palette.primary.main};
 `;
 
 const SemanticSubstrates = () => {
@@ -21,18 +22,23 @@ const SemanticSubstrates = () => {
   return (
     <>
       <Div>
-        <h1>semantic substrates div</h1>
+        <h1>semantic substrates, primary.main</h1>
       </Div>
       <div
         style={{
-          backgroundColor: theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.dark,
         }}
       >
-        <h1>semantic substrates h1</h1>
+        <h1>semantic substrates, primary.dark</h1>
       </div>
       <input
         onChange={(v) =>
-          dispatch(changePrimary({ main: v.currentTarget.value }))
+          dispatch(
+            changePrimary({
+              main: v.currentTarget.value,
+              darkMode: theme.palette.mode,
+            })
+          )
         }
         type="color"
         name="head"
@@ -70,7 +76,9 @@ const SemanticSubstrates = () => {
         value={theme.palette.dataPointColors[1]}
       />
       <p>Change dataPointColor 1</p>
-      <Button variant="contained">hoi</Button>
+      <Button variant="contained" onClick={() => dispatch(toggleDarkMode())}>
+        toggle dark mode
+      </Button>
     </>
   );
 };

apps/web-graphpolaris/src/main.tsx

@@ -4,13 +4,15 @@ import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
 import { store } from '@graphpolaris/shared/data-access/store';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
 import App from './app/app';
 import LoginPopupComponent from './components/login/popup';
+import { CssBaseline } from '@mui/material';
 
 ReactDOM.render(
   <Provider store={store}>
-    <OurThemeProvider>
+    <GraphPolarisThemeProvider>
+      <CssBaseline />
       <Router>
         <Routes>
           {/* Route to auth component in popup */}
@@ -19,7 +21,7 @@ ReactDOM.render(
           <Route path="/" element={<App />}></Route>
         </Routes>
       </Router>
-    </OurThemeProvider>
+    </GraphPolarisThemeProvider>
   </Provider>,
   document.getElementById('root')
 );

libs/shared/data-access/api/.babelrc

+{
+  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}

libs/shared/data-access/api/.eslintrc.json

+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/shared/data-access/api/README.md

+# shared-data-access-api
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-data-access-api` to execute the unit tests via [Jest](https://jestjs.io).

libs/shared/data-access/api/jest.config.js

+module.exports = {
+  displayName: 'shared-data-access-api',
+  preset: '../../../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../../coverage/libs/shared/data-access/api',
+};

libs/shared/data-access/api/project.json

+{
+  "root": "libs/shared/data-access/api",
+  "sourceRoot": "libs/shared/data-access/api/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/shared/data-access/api/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/shared/data-access/api"],
+      "options": {
+        "jestConfig": "libs/shared/data-access/api/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

libs/shared/data-access/api/src/index.ts

+export { User, GetUserInfo } from './lib/user';

libs/shared/data-access/api/src/lib/database.ts

+// All database related API calls
+
+import { AuthorizationHandler } from '@graphpolaris/shared/data-access/authorization';
+
+export type AddDatabaseRequest = {
+  name: string;
+  internal_database_name: string;
+  url: string;
+  port: number;
+  username: string;
+  password: string;
+  type: number; // Database type. 0 = ArangoDB, 1 = Neo4j
+};
+
+export function AddDatabase(request: AddDatabaseRequest): Promise<void> {
+  return new Promise((resolve, reject) => {
+    fetch('https://datastrophe.science.uu.nl/user/database', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: new Headers({
+        Authorization:
+          'Bearer ' + AuthorizationHandler.instance().AccessToken(),
+      }),
+      body: JSON.stringify(request),
+    }).then((response: Response) => {
+      if (!response.ok) {
+        reject(response.statusText);
+      }
+
+      resolve();
+    });
+  });
+}
+
+export function GetAllDatabases(): Promise<Array<string>> {
+  return new Promise<Array<string>>((resolve, reject) => {
+    fetch('https://datastrophe.science.uu.nl/user/database', {
+      method: 'GET',
+      credentials: 'same-origin',
+      headers: new Headers({
+        Authorization:
+          'Bearer ' + AuthorizationHandler.instance().AccessToken(),
+      }),
+    })
+      .then((response: Response) => {
+        if (!response.ok) {
+          reject(response.statusText);
+        }
+
+        return response.json();
+      })
+      .then((json: any) => {
+        resolve(json.databases);
+      });
+  });
+}
+
+export function DeleteDatabase(name: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    fetch('https://datastrophe.science.uu.nl/user/database/' + name, {
+      method: 'DELETE',
+      credentials: 'same-origin',
+      headers: new Headers({
+        Authorization:
+          'Bearer ' + AuthorizationHandler.instance().AccessToken(),
+      }),
+    }).then((response: Response) => {
+      if (!response.ok) {
+        reject(response.statusText);
+      }
+
+      resolve();
+    });
+  });
+}

libs/shared/data-access/api/src/lib/user.ts

+// All user related API calls
+
+import { AuthorizationHandler } from '@graphpolaris/shared/data-access/authorization';
+
+export type User = {
+  Name: string;
+  Email: string;
+  SignInProvider: number;
+};
+
+export function GetUserInfo(): Promise<User> {
+  return new Promise<User>((resolve, reject) => {
+    fetch('https://datastrophe.science.uu.nl/user/', {
+      method: 'GET',
+      credentials: 'same-origin',
+      headers: new Headers({
+        Authorization:
+          'Bearer ' + AuthorizationHandler.instance().AccessToken(),
+      }),
+    })
+      .then((response: Response) => {
+        if (!response.ok) {
+          reject(response.statusText);
+        }
+
+        return response.json();
+      })
+      .then((json: any) => {
+        resolve({
+          Name: json.name,
+          Email: json.email,
+          SignInProvider: json.sign_in_provider,
+        });
+      });
+  });
+}

libs/shared/data-access/api/tsconfig.json

+{
+  "extends": "../../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

libs/shared/data-access/api/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "types": []
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

libs/shared/data-access/api/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/shared/data-access/authorization/src/lib/authorizationHandler.ts

@@ -157,7 +157,7 @@ export class AuthorizationHandler {
    * SetAccessToken sets the current access token (should only be called by the sign-in component)
    * @param accessToken
    */
-  SetAccessToken(accessToken: string) {
+  async SetAccessToken(accessToken: string) {
     this.accessToken = accessToken;
 
     console.log(this.accessToken);
@@ -170,7 +170,6 @@ export class AuthorizationHandler {
       this.refreshTokens();
     }, 10 * 60 * 1000);
 
-    // TODO: Change auth state
     if (this.callback) {
       this.callback();
     }

libs/shared/data-access/store/src/index.ts

@@ -17,6 +17,7 @@ export {
 export {
   changePrimary,
   changeDataPointColors,
+  toggleDarkMode,
   selectColorPaletteConfig,
   colorPaletteConfigSlice,
 } from './lib/colorPaletteConfigSlice';