diff --git a/apps/web-graphpolaris/src/app/app.tsx b/apps/web-graphpolaris/src/app/app.tsx
index 79360ad5071c4205bd860ccb279ed657a58760e9..5490311a6cd81a64417e6545b8fa255794f1d4ec 100644
--- a/apps/web-graphpolaris/src/app/app.tsx
+++ b/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);
diff --git a/apps/web-graphpolaris/src/components/panels/panel.stories.tsx b/apps/web-graphpolaris/src/components/panels/panel.stories.tsx
index 8fc51fb4cb691e8530e7ab70b5d05f06cf3fb8f1..4f570d0fdf85f20d4759e0207cb8045f67f1daa4 100644
--- a/apps/web-graphpolaris/src/components/panels/panel.stories.tsx
+++ b/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>
),
],
diff --git a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
index 7af9a1a171883b1e387ef9bb4c1853edde95749c..b67a468502bbed9211439a62a5df27ce4bdb0fbb 100644
--- a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
+++ b/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>
),
],
diff --git a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
index 53ae69c9279bbe6fcca3e2fe11b69dd326d596f2..3b10ca2d12d79022af4ed24afd69c60c3235f4e0 100644
--- a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/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>
),
],
diff --git a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
index e1f82267f5dd2ab227e564dc6649ae14867a3c13..944011b532a61cef8159459e8922b79f496dbb5c 100644
--- a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
+++ b/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>
),
],
diff --git a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx
index def471a0a05a3056fb5775bba6859ace73ed53f6..cb6c9e564d6d571df6698b755a7ab2f3f182a390 100644
--- a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx
+++ b/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>
</>
);
};
diff --git a/apps/web-graphpolaris/src/main.tsx b/apps/web-graphpolaris/src/main.tsx
index fd86257eb9cac7322bf78c711bce261fc8b19202..5c5a5a841f508e8f59e86911e2b27521dd42bbca 100644
--- a/apps/web-graphpolaris/src/main.tsx
+++ b/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')
);
diff --git a/libs/shared/data-access/api/.babelrc b/libs/shared/data-access/api/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..cf7ddd99c615a064ac18eb3109eee4f394ab1faf
--- /dev/null
+++ b/libs/shared/data-access/api/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}
diff --git a/libs/shared/data-access/api/.eslintrc.json b/libs/shared/data-access/api/.eslintrc.json
new file mode 100644
index 0000000000000000000000000000000000000000..632e9b0e22253922989d1153e06f7ba996c72d38
--- /dev/null
+++ b/libs/shared/data-access/api/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+ "extends": ["../../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.js", "*.jsx"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/libs/shared/data-access/api/README.md b/libs/shared/data-access/api/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3156f01c6b6befd68fe400d0c03a01d52ac3b5e7
--- /dev/null
+++ b/libs/shared/data-access/api/README.md
@@ -0,0 +1,7 @@
+# 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).
diff --git a/libs/shared/data-access/api/jest.config.js b/libs/shared/data-access/api/jest.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6f5553b2f38e80cf671a056bd731ff218828fc7
--- /dev/null
+++ b/libs/shared/data-access/api/jest.config.js
@@ -0,0 +1,14 @@
+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',
+};
diff --git a/libs/shared/data-access/api/project.json b/libs/shared/data-access/api/project.json
new file mode 100644
index 0000000000000000000000000000000000000000..362413c86100b967aa87d647e7a416bfd1b1d8c6
--- /dev/null
+++ b/libs/shared/data-access/api/project.json
@@ -0,0 +1,23 @@
+{
+ "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": []
+}
diff --git a/libs/shared/data-access/api/src/index.ts b/libs/shared/data-access/api/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..136d9ebb4b0d0d0dc89d1ac6330a62d19d681908
--- /dev/null
+++ b/libs/shared/data-access/api/src/index.ts
@@ -0,0 +1 @@
+export { User, GetUserInfo } from './lib/user';
diff --git a/libs/shared/data-access/api/src/lib/database.ts b/libs/shared/data-access/api/src/lib/database.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d6700de6f55dde670227d1cedf1080c44637e28
--- /dev/null
+++ b/libs/shared/data-access/api/src/lib/database.ts
@@ -0,0 +1,75 @@
+// 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();
+ });
+ });
+}
diff --git a/libs/shared/data-access/api/src/lib/user.ts b/libs/shared/data-access/api/src/lib/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..457ce20f6af6c8be31727f2b9757134827b4fc70
--- /dev/null
+++ b/libs/shared/data-access/api/src/lib/user.ts
@@ -0,0 +1,36 @@
+// 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,
+ });
+ });
+ });
+}
diff --git a/libs/shared/data-access/api/tsconfig.json b/libs/shared/data-access/api/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..d0953a0f8b8084fd7ca99de4a00f82435f8679cd
--- /dev/null
+++ b/libs/shared/data-access/api/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "extends": "../../../../tsconfig.base.json",
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ],
+ "compilerOptions": {
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ }
+}
diff --git a/libs/shared/data-access/api/tsconfig.lib.json b/libs/shared/data-access/api/tsconfig.lib.json
new file mode 100644
index 0000000000000000000000000000000000000000..2ef844c42b4d526dd97ef3b18591cc5c652781e5
--- /dev/null
+++ b/libs/shared/data-access/api/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../../../dist/out-tsc",
+ "declaration": true,
+ "types": []
+ },
+ "include": ["**/*.ts"],
+ "exclude": ["**/*.spec.ts"]
+}
diff --git a/libs/shared/data-access/api/tsconfig.spec.json b/libs/shared/data-access/api/tsconfig.spec.json
new file mode 100644
index 0000000000000000000000000000000000000000..315a5b0bbebaca96617a8dd5353901287ebd8e68
--- /dev/null
+++ b/libs/shared/data-access/api/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+ "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"
+ ]
+}
diff --git a/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts b/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts
index f3e4319a9525521d43ceee6b92e7d18b52defea5..fc92922419ad609e85767e55dd35b06b2a581012 100644
--- a/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts
+++ b/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();
}
diff --git a/libs/shared/data-access/store/src/index.ts b/libs/shared/data-access/store/src/index.ts
index ed570e9781b79508a514cad7c0d7babc610896c9..c5d854becbe24c904460bf6f554cd1263e237a4c 100644
--- a/libs/shared/data-access/store/src/index.ts
+++ b/libs/shared/data-access/store/src/index.ts
@@ -17,6 +17,7 @@ export {
export {
changePrimary,
changeDataPointColors,
+ toggleDarkMode,
selectColorPaletteConfig,
colorPaletteConfigSlice,
} from './lib/colorPaletteConfigSlice';
diff --git a/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts b/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
index 4b7475f9978fbc6ad42cf93b965d235c7d78e707..bb41dc4a815f5dccb73c3ac51de8ed57728483e0 100644
--- a/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
+++ b/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
@@ -1,32 +1,74 @@
+import { palette } from '@mui/system';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './store';
-/** Extra properties that are not present in the default PaletteOptions of mui. */
+/** Extra properties that are not present in the default PaletteOptions of mui. For autocompletion */
export interface ExtraColorsForMui5 {
/** Colors that can be used for data visualisation, e.g. nodes, edges */
dataPointColors: string[];
}
-/** Our custom color palette config. */
-export interface ColorPaletteConfig extends ExtraColorsForMui5 {
- primary: {
- main: string;
+/** Our custom color palette config. With the palette options from MUI that we are going to use. */
+export interface ColorPaletteConfig {
+ lightPalette: {
+ // Custom colors
+ custom: ExtraColorsForMui5;
+ // MUI colors
+ primary: {
+ light?: string;
+ main: string;
+ dark?: string;
+ };
+ secondary: {
+ light?: string;
+ main: string;
+ dark?: string;
+ };
};
- secondary: {
- main: string;
+ darkPalette: {
+ custom: ExtraColorsForMui5;
+ primary: {
+ light?: string;
+ main: string;
+ dark?: string;
+ };
+ secondary: {
+ light?: string;
+ main: string;
+ dark?: string;
+ };
};
+ darkMode: boolean;
}
// This looks very much like the mui Palette interface,
// But we don't reference that type directly here to stay decoupled
export const initialState: ColorPaletteConfig = {
- dataPointColors: ['#ff0000', '#00ff00', '#0000ff'],
- primary: {
- main: '#9999ff',
+ lightPalette: {
+ custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+ // If light and dark are not set, these will be calculated using main.
+ // light/dark have nothing with darkmode, these are just a light and dark variation
+ primary: {
+ // light: '#42a5f5',
+ main: '#1976d2',
+ // dark: '#1565c0',
+ },
+ secondary: {
+ // light: '#ba68c8',
+ main: '#9c27b0',
+ // dark: '#7b1fa2',
+ },
},
- secondary: {
- main: '#ff0000',
+ darkPalette: {
+ custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+ primary: {
+ main: '#e3f3fd',
+ },
+ secondary: {
+ main: '#f3e5f5',
+ },
},
+ darkMode: false,
};
export const colorPaletteConfigSlice = createSlice({
@@ -34,16 +76,33 @@ export const colorPaletteConfigSlice = createSlice({
// `createSlice` will infer the state type from the `initialState` argument
initialState,
reducers: {
- changePrimary: (state, action: PayloadAction<{ main: string }>) => {
- state.primary = action.payload;
+ changePrimary: (
+ state,
+ action: PayloadAction<{
+ main?: string;
+ light?: string;
+ dark?: string;
+ darkMode?: 'light' | 'dark';
+ }>
+ ) => {
+ const { main, light, dark, darkMode } = action.payload;
+ let palette = state.lightPalette;
+ if (darkMode == 'dark') palette = state.darkPalette;
+
+ if (main) palette.primary.main = main;
+ if (light) palette.primary.light = light;
+ if (dark) palette.primary.dark = dark;
},
changeDataPointColors: (state, action: PayloadAction<string[]>) => {
- state.dataPointColors = action.payload;
+ state.lightPalette.custom.dataPointColors = action.payload;
+ },
+ toggleDarkMode: (state) => {
+ state.darkMode = !state.darkMode;
},
},
});
-export const { changePrimary, changeDataPointColors } =
+export const { changePrimary, changeDataPointColors, toggleDarkMode } =
colorPaletteConfigSlice.actions;
// Select the schema and convert it to a graphology object
diff --git a/libs/shared/data-access/store/src/lib/store.ts b/libs/shared/data-access/store/src/lib/store.ts
index ca71bb46f3f2efafddbe673ba8f1d5a53d9deebc..7198337bde3e8b98b11d6336552743c71d8e413a 100644
--- a/libs/shared/data-access/store/src/lib/store.ts
+++ b/libs/shared/data-access/store/src/lib/store.ts
@@ -1,13 +1,13 @@
import { configureStore } from '@reduxjs/toolkit';
-import colorPaletteConfigSliceReducer from './colorPaletteConfigSlice';
-import graphQueryResultSliceReducer from './graphQueryResultSlice';
-import schemaSliceReducer from './schemaSlice';
+import colorPaletteConfigSlice from './colorPaletteConfigSlice';
+import graphQueryResultSlice from './graphQueryResultSlice';
+import schemaSlice from './schemaSlice';
export const store = configureStore({
reducer: {
- graphQueryResult: graphQueryResultSliceReducer,
- schema: schemaSliceReducer,
- colorPaletteConfig: colorPaletteConfigSliceReducer,
+ graphQueryResult: graphQueryResultSlice,
+ schema: schemaSlice,
+ colorPaletteConfig: colorPaletteConfigSlice,
},
});
diff --git a/libs/shared/data-access/store/tsconfig.lib.json b/libs/shared/data-access/store/tsconfig.lib.json
index 2ef844c42b4d526dd97ef3b18591cc5c652781e5..94c28cbd1b3e19a79ac8bca76709896f18c34531 100644
--- a/libs/shared/data-access/store/tsconfig.lib.json
+++ b/libs/shared/data-access/store/tsconfig.lib.json
@@ -5,6 +5,6 @@
"declaration": true,
"types": []
},
- "include": ["**/*.ts"],
+ "include": ["**/*.ts", "../theme/src/lib/colorPaletteConfigSlice.ts"],
"exclude": ["**/*.spec.ts"]
}
diff --git a/libs/shared/data-access/theme/src/index.ts b/libs/shared/data-access/theme/src/index.ts
index fae1f6948cf3d9f4fd40ea0c309bf39ea9f07f89..009824eca141e2b77653f611d6e8a03899061be2 100644
--- a/libs/shared/data-access/theme/src/index.ts
+++ b/libs/shared/data-access/theme/src/index.ts
@@ -1 +1 @@
-export * from './lib/ourThemeProvider';
+export * from './lib/graphPolarisThemeProvider';
diff --git a/libs/shared/data-access/theme/src/lib/ourThemeProvider.tsx b/libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.tsx
similarity index 89%
rename from libs/shared/data-access/theme/src/lib/ourThemeProvider.tsx
rename to libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.tsx
index 04f36156807eafc3dcf4d4f569da172f00792d38..3a1512f8c63af1aba262414799df202e365292b9 100644
--- a/libs/shared/data-access/theme/src/lib/ourThemeProvider.tsx
+++ b/libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.tsx
@@ -19,7 +19,11 @@ declare module '@mui/material/styles' {
}
}
-export function OurThemeProvider({ children }: { children: ReactNode }) {
+export function GraphPolarisThemeProvider({
+ children,
+}: {
+ children: ReactNode;
+}) {
const colorPaletteConfig = useAppSelector(selectColorPaletteConfig);
// Create a new theme when our custom color palette in redux changed
@@ -32,4 +36,4 @@ export function OurThemeProvider({ children }: { children: ReactNode }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
-export default OurThemeProvider;
+export default GraphPolarisThemeProvider;
diff --git a/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts b/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
index 53711e8d03ef2715de701272ea343575f8adbcfe..43235684422e51bacf514cf32e21f1bf69c7305b 100644
--- a/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
+++ b/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
@@ -7,9 +7,19 @@ export default function MapColorsConfigToMuiTheme(
): ThemeOptions {
return {
palette: {
- primary: { main: colorsConfig.primary.main },
- secondary: { main: colorsConfig.secondary.main },
- dataPointColors: colorsConfig.dataPointColors,
+ mode: colorsConfig.darkMode ? 'dark' : 'light',
+
+ ...(colorsConfig.darkMode
+ ? {
+ primary: colorsConfig.darkPalette.primary,
+ secondary: colorsConfig.darkPalette.secondary,
+ dataPointColors: colorsConfig.darkPalette.custom.dataPointColors,
+ }
+ : {
+ primary: colorsConfig.lightPalette.primary,
+ secondary: colorsConfig.lightPalette.secondary,
+ dataPointColors: colorsConfig.lightPalette.custom.dataPointColors,
+ }),
},
};
}
diff --git a/libs/shared/data-access/theme/tsconfig.lib.json b/libs/shared/data-access/theme/tsconfig.lib.json
index 1ab8e06a7111b168e84debca80bb4ac82f72f2aa..5286d47e4655c882bd8544a2e154bb8cf419a203 100644
--- a/libs/shared/data-access/theme/tsconfig.lib.json
+++ b/libs/shared/data-access/theme/tsconfig.lib.json
@@ -18,5 +18,11 @@
"**/*.spec.jsx",
"**/*.test.jsx"
],
- "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+ "include": [
+ "**/*.js",
+ "**/*.jsx",
+ "**/*.ts",
+ "**/*.tsx",
+ "../store/src/lib/colorPaletteConfigSlice.ts"
+ ]
}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b0ae10a05dbbb715dadd01b8cc54aef7018bc5ac..cd9c7fc960effe1a638e83bd4e1dd03b2bcc53c0 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -16,6 +16,9 @@
"baseUrl": ".",
"paths": {
"@graphpolaris/schema-usecases": ["libs/schema/usecases/src/index.ts"],
+ "@graphpolaris/shared/data-access/api": [
+ "libs/shared/data-access/api/src/index.ts"
+ ],
"@graphpolaris/shared/data-access/authorization": [
"libs/shared/data-access/authorization/src/index.ts"
],
diff --git a/workspace.json b/workspace.json
index d66d6e6672063525132bd6b6e3aedb7322d30e23..1e30cdac60853923072853d35375bf9d10055196 100644
--- a/workspace.json
+++ b/workspace.json
@@ -2,6 +2,7 @@
"version": 2,
"projects": {
"schema-usecases": "libs/schema/usecases",
+ "shared-data-access-api": "libs/shared/data-access/api",
"shared-data-access-authorization": "libs/shared/data-access/authorization",
"shared-data-access-store": "libs/shared/data-access/store",
"shared-data-access-theme": "libs/shared/data-access/theme",
@@ -9,4 +10,4 @@
"web-graphpolaris": "apps/web-graphpolaris",
"web-graphpolaris-e2e": "apps/web-graphpolaris-e2e"
}
-}
+}
\ No newline at end of file