diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000000000000000000000000000000000000..b512c09d476623ff4bf8d0d63c29b784925dbdf8
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index e35789def0cfe075414a549041e95c960b8a2c40..3a29f10fe025a48e2859a3b0f067bf9061d59475 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -2,6 +2,8 @@ image: node:16-alpine
stages:
- setup
- test
+ - build
+ - dockerize
install-dependencies:
stage: setup
@@ -33,14 +35,40 @@ install-dependencies:
paths:
- node_modules/.cache/nx
-build:
- stage: test
- extends: .distributed
- script:
- - yarn nx affected --base=HEAD~1 --target=build --parallel --max-parallel=3
-
test:
stage: test
extends: .distributed
script:
- yarn nx affected --base=HEAD~1 --target=test --parallel --max-parallel=2
+
+build:
+ stage: build
+ only:
+ - main
+ needs:
+ - install-dependencies
+ artifacts:
+ paths:
+ - node_modules/.cache/nx
+ - dist/apps/web-graphpolaris
+ script:
+ # - yarn nx affected --base=HEAD~1 --target=build --parallel --max-parallel=3
+ # only build web-graphpolaris
+ - yarn nx build web-graphpolaris --prod
+
+build-docker:
+ image: docker:stable
+ stage: dockerize
+ tags:
+ - docker
+ only:
+ - main
+ script:
+ - docker build --progress plain -t datastropheregistry.azurecr.io/frontend:latest:latest .
+ # after_script:
+ # - docker login datastropheregistry.azurecr.io -u $REGISTRY_USERNAME -p $REGISTRY_PASSWORD
+ # - if [[ ! -z $CI_COMMIT_BRANCH+x ]]; then DOCKER_TAG=$CI_COMMIT_BRANCH; else DOCKER_TAG=$CI_MERGE_REQUEST_TARGET_BRANCH_NAME; fi
+ # - docker tag $CI_PROJECT_NAME-webserver-service datastropheregistry.azurecr.io/$CI_PROJECT_NAME-webserver-service:$DOCKER_TAG
+ # - docker push datastropheregistry.azurecr.io/$CI_PROJECT_NAME-webserver-service:$DOCKER_TAG
+ dependencies:
+ - build
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6324a78d9f129a028e3518b3bc3ccb4be511a062..0c27507c7c9016a219a2527fa8d4b61b0302bfad 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,5 +24,14 @@
"store",
"libs"
],
- "jest.jestCommandLine": "nx affected:test"
+ "jest.jestCommandLine": "nx affected:test",
+
+ "jsonColorToken.languages": [
+ "json",
+ "jsonc",
+ "javascript",
+ "javascriptreact",
+ "typescript",
+ "typescriptreact"
+ ]
}
diff --git a/Dockerfile b/Dockerfile
index 5ae50ee3abb63bbc32251cc96e7094c28d330d66..39c70241463b4eebd6f935ad20eb0dbee962c535 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,13 +1,12 @@
-# # Prepare nginx
-# FROM nginx:1.19-alpine
-# WORKDIR /app
+# Prepare nginx
+FROM nginx:1.19-alpine
+WORKDIR /app
-# # ! This copy source needs to be changed to reflect the actual app name
-# COPY ./dist/apps/frontend /usr/share/nginx/html
+COPY ./dist/apps/web-graphpolaris /usr/share/nginx/html
-# RUN rm /etc/nginx/conf.d/default.conf
-# COPY nginx/nginx.conf /etc/nginx/conf.d
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/conf.d
-# # Fire up nginx
-# EXPOSE 80
-# CMD ["nginx", "-g", "daemon off;"]
+# Fire up nginx
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/README.md b/README.md
index 9f79b01a9bf341c469a185d07e24283bc938c6cc..ebcaddb86091a83d3a8e2df8a5d1defc53f03b89 100644
--- a/README.md
+++ b/README.md
@@ -7,23 +7,23 @@ Due to the way auth works (using a sameSite cookie), the procedure for running l
### MacOS / Linux
1. `sudo vim /etc/hosts` open the hosts file with your prefered text editor as root
-2. Add a new row containing `127.0.0.1 local.datastrophe.science.uu.nl`, this will route traffic from `local.datastrophe.science.uu.nl` to `127.0.0.1`
+2. Add a new row containing `127.0.0.1 local.graphpolaris.com`, this will route traffic from `local.graphpolaris.com` to `127.0.0.1`
3. `brew install mkcert` install mkcert utility
4. `mkcert -install` generate local CA (certificate authority)
5. Move into the /certs folder at the project root using `cd`
-6. `mkcert --key-file local-key.pem --cert-file local-cert.pem local.datastrophe.science.uu.nl` create certificates for local SSL
+6. `mkcert --key-file local-key.pem --cert-file local-cert.pem local.graphpolaris.com` create certificates for local SSL
### Windows
1. Open the `hosts` file under `C:\Windows\System32\drivers\etc` using a text editor, as administrator
-2. Add a new row containing `127.0.0.1 local.datastrophe.science.uu.nl`, this will route traffic from `local.datastrophe.science.uu.nl` to `127.0.0.1`
+2. Add a new row containing `127.0.0.1 local.graphpolaris.com`, this will route traffic from `local.graphpolaris.com` to `127.0.0.1`
3. Install mkcert using any of the ways described [here](https://github.com/FiloSottile/mkcert#windows)
4. Open an elevated Powershell or CMD session
5. Move into the /certs folder at the project root using `cd`
-6. `mkcert --key-file local-key.pem --cert-file local-cert.pem local.datastrophe.science.uu.nl` create certificates for local SSL
+6. `mkcert --key-file local-key.pem --cert-file local-cert.pem local.graphpolaris.com` create certificates for local SSL
> No idea if the Windows steps work
## Running Locally
-To run the application using SSL (with these keys) simply run `nx run web-graphpolaris:dev`, or `yarn nx run web-graphpolaris:dev` if `nx` is not installed globally. This should open a window to `https://local.datastrophe.science.uu.nl:4200/` automatically.
+To run the application using SSL (with these keys) simply run `nx run web-graphpolaris:dev`, or `yarn nx run web-graphpolaris:dev` if `nx` is not installed globally. This should open a window to `https://local.graphpolaris.com:4200/` automatically.
diff --git a/apps/web-graphpolaris/project.json b/apps/web-graphpolaris/project.json
index dc9c691acc30a77b498ee4ee9c7abf79928cff15..86403889595b911f74d0f30838cc3bc428eb2251 100644
--- a/apps/web-graphpolaris/project.json
+++ b/apps/web-graphpolaris/project.json
@@ -7,7 +7,7 @@
"executor": "@nrwl/web:dev-server",
"options": {
"buildTarget": "web-graphpolaris:build",
- "host": "local.datastrophe.science.uu.nl",
+ "host": "local.graphpolaris.com",
"port": 4200,
"watch": true,
"hmr": true,
@@ -19,7 +19,9 @@
},
"build": {
"executor": "@nrwl/web:webpack",
- "outputs": ["{options.outputPath}"],
+ "outputs": [
+ "{options.outputPath}"
+ ],
"defaultConfiguration": "production",
"options": {
"compiler": "babel",
@@ -33,18 +35,18 @@
"apps/web-graphpolaris/src/favicon.ico",
"apps/web-graphpolaris/src/assets"
],
- "styles": ["apps/web-graphpolaris/src/styles.scss"],
+ "styles": [
+ "apps/web-graphpolaris/src/styles.scss"
+ ],
"scripts": [],
"webpackConfig": "@nrwl/react/plugins/webpack"
},
"configurations": {
"production": {
- "fileReplacements": [
- {
- "replace": "apps/graphpolaris/src/environments/environment.ts",
- "with": "apps/graphpolaris/src/environments/environment.prod.ts"
- }
- ],
+ "fileReplacements": [{
+ "replace": "apps/graphpolaris/src/environments/environment.ts",
+ "with": "apps/graphpolaris/src/environments/environment.prod.ts"
+ }],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
@@ -69,14 +71,20 @@
},
"lint": {
"executor": "@nrwl/linter:eslint",
- "outputs": ["{options.outputFile}"],
+ "outputs": [
+ "{options.outputFile}"
+ ],
"options": {
- "lintFilePatterns": ["apps/graphpolaris/**/*.{ts,tsx,js,jsx}"]
+ "lintFilePatterns": [
+ "apps/graphpolaris/**/*.{ts,tsx,js,jsx}"
+ ]
}
},
"test": {
"executor": "@nrwl/jest:jest",
- "outputs": ["coverage/apps/graphpolaris"],
+ "outputs": [
+ "coverage/apps/graphpolaris"
+ ],
"options": {
"jestConfig": "apps/web-graphpolaris/jest.config.js",
"passWithNoTests": true
@@ -105,7 +113,9 @@
},
"build-storybook": {
"executor": "@nrwl/storybook:build",
- "outputs": ["{options.outputPath}"],
+ "outputs": [
+ "{options.outputPath}"
+ ],
"options": {
"uiFramework": "@storybook/react",
"outputPath": "dist/storybook/graphpolaris",
@@ -121,4 +131,4 @@
}
},
"tags": []
-}
+}
\ No newline at end of file
diff --git a/apps/web-graphpolaris/src/app/app.tsx b/apps/web-graphpolaris/src/app/app.tsx
index a9e7eb790222d8840f14d1c89271f8719bc191a4..6be79b2f6674c5f19dc0e18e83851ed4f48d9bb8 100644
--- a/apps/web-graphpolaris/src/app/app.tsx
+++ b/apps/web-graphpolaris/src/app/app.tsx
@@ -1,16 +1,18 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { GetUserInfo } from '@graphpolaris/shared/data-access/api';
-import { AuthorizationHandler } from '@graphpolaris/shared/data-access/authorization';
-import {
- assignNewGraphQueryResult,
- useAppDispatch,
-} from '@graphpolaris/shared/data-access/store';
import { useEffect, useState } from 'react';
import GridLayout from 'react-grid-layout';
import LoginScreen from '../components/login/loginScreen';
import Panel from '../components/panels/panel';
import { RawJSONVis } from '../components/visualisations/rawjsonvis/rawjsonvis';
import SemanticSubstrates from '../components/visualisations/semanticsubstrates/semanticsubstrates';
+import Schema from '../components/schema/schema';
+import { GetUserInfo } from '@graphpolaris/shared/data-access/api';
+import QueryBuilder from '../components/querybuilder/querybuilder';
+import {
+ assignNewGraphQueryResult,
+ useAppDispatch,
+} from '@graphpolaris/shared/data-access/store';
+import { AuthorizationHandler } from '@graphpolaris/shared/data-access/authorization';
function useIsAuthorized() {
const [userAuthorized, setUserAuthorized] = useState(false);
@@ -61,7 +63,9 @@ export function App() {
key="query-panel"
data-grid={{ x: 3, y: 20, w: 5, h: 10, maxH: 20, isDraggable: false }}
>
- <Panel content="Query Panel" color="blue"></Panel>
+ <Panel content="Query Panel" color="blue">
+ <QueryBuilder />
+ </Panel>
</div>
<div
key="visualisation-panel"
diff --git a/apps/web-graphpolaris/src/components/login/loginScreen.tsx b/apps/web-graphpolaris/src/components/login/loginScreen.tsx
index 93339edaadd13653822233ecf9aac3468f9f4435..fc1cf4a89f19194a218396348dbcc5cf4dc1e608 100644
--- a/apps/web-graphpolaris/src/components/login/loginScreen.tsx
+++ b/apps/web-graphpolaris/src/components/login/loginScreen.tsx
@@ -102,7 +102,7 @@ const LoginScreen = () => {
<img
onClick={() =>
openSignInWindow(
- 'https://datastrophe.science.uu.nl/user/sign-in?provider=1'
+ 'https://api.graphpolaris.com/user/sign-in?provider=1'
)
}
src="assets/login-screen/google.png"
@@ -111,7 +111,7 @@ const LoginScreen = () => {
<img
onClick={() =>
openSignInWindow(
- 'https://datastrophe.science.uu.nl/user/sign-in?provider=2'
+ 'https://api.graphpolaris.com/user/sign-in?provider=2'
)
}
src="assets/login-screen/github.png"
@@ -119,9 +119,7 @@ const LoginScreen = () => {
/>
<p
onClick={() =>
- openSignInWindow(
- 'https://datastrophe.science.uu.nl/user/create_free/'
- )
+ openSignInWindow('https://api.graphpolaris.com/user/create_free/')
}
>
Developer
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connection.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connection.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..618f67b6bc755f3e1766712d77f3e72dd0981291
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connection.tsx
@@ -0,0 +1,73 @@
+import { handles } from '@graphpolaris/querybuilder/usecases';
+import React from 'react';
+import { EdgeProps, getSmoothStepPath, Position } from 'react-flow-renderer';
+
+/**
+ * A custom query element edge line component.
+ * @param {EdgeProps} param0 The coordinates for the start and end point, the id and the style.
+ */
+export default function ConnectionLine({
+ id,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ style,
+ sourceHandleId,
+ targetHandleId,
+}: EdgeProps) {
+ //Centering the line
+ sourceY -= 3;
+ targetY -= 3;
+
+ // Correct line positions with hardcoded numbers, because react flow lacks this functionality
+ // if (sourceHandleId == ) sourceX += 2;
+
+ // if (targetHandleId == Handles.ToAttributeHandle) targetX += 2;
+
+ let spos: Position = Position.Bottom;
+ if (sourceHandleId == handles.relation.fromEntity) {
+ spos = Position.Left;
+ sourceX += 7;
+ sourceY += 3;
+ } else if (sourceHandleId == handles.relation.toEntity) {
+ spos = Position.Right;
+ sourceX -= 2;
+ sourceY -= 3;
+ } else if (
+ sourceHandleId !== undefined &&
+ sourceHandleId !== null &&
+ sourceHandleId.includes('functionHandle')
+ ) {
+ spos = Position.Top;
+ sourceX -= 4;
+ sourceY += 3;
+ }
+
+ let tpos: Position = Position.Bottom;
+ if (targetHandleId == handles.relation.fromEntity) {
+ tpos = Position.Left;
+ targetX += 7;
+ targetY += 3;
+ } else if (targetHandleId == handles.relation.toEntity) {
+ tpos = Position.Right;
+ targetX -= 2;
+ targetY -= 3;
+ }
+
+ // Create smoothstep line
+ const path = getSmoothStepPath({
+ sourceX: sourceX,
+ sourceY: sourceY,
+ sourcePosition: spos,
+ targetX: targetX,
+ targetY: targetY,
+ targetPosition: tpos,
+ });
+
+ return (
+ <g stroke="#2e2e2e">
+ <path id={id} fill="none" strokeWidth={3} style={style} d={path} />
+ </g>
+ );
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connectionDrag.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connectionDrag.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9932aecdd154e7aa1af622afb9ddbf14fb170c77
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowLines/connectionDrag.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ConnectionLineComponentProps } from 'react-flow-renderer';
+
+/**
+ * A custom query element to render the line when connecting flow elements.
+ * @param {ConnectionLineComponentProps} param0 Source and target coordinates of the edges.
+ */
+export default function ConnectionDragLine({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+}: ConnectionLineComponentProps) {
+ return (
+ <g>
+ <path
+ fill="none"
+ stroke="#222"
+ strokeWidth={2.5}
+ className="animated"
+ d={`M${sourceX},${sourceY}L ${targetX},${targetY}`}
+ />
+ <circle
+ cx={sourceX}
+ cy={sourceY}
+ fill="#fff"
+ r={3}
+ stroke="#222"
+ strokeWidth={1.5}
+ />
+ <circle
+ cx={targetX}
+ cy={targetY}
+ fill="#fff"
+ r={3}
+ stroke="#222"
+ strokeWidth={1.5}
+ />
+ </g>
+ );
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.module.scss b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ba5ba22c49c279617faef06e92d4256e49a36fb
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.module.scss
@@ -0,0 +1,60 @@
+@use './variables.module.scss';
+
+.attribute {
+ display: flex;
+ font-family: monospace;
+ font-weight: bold;
+ font-size: variables.$fontsize;
+ border-radius: 2px;
+}
+
+// .handle {
+// border: 0px;
+// border-radius: 10px;
+// left: 12px;
+// width: 7px;
+// height: 7px;
+// margin-bottom: 11px;
+// background: rgba(255, 255, 255, 0.6);
+// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+// transform-origin: center;
+// }
+
+.contentWrapper {
+ display: flex;
+ align-items: center;
+
+ .content {
+ padding: variables.$ypad 0 variables.$ypad 1ch;
+ max-width: 15ch;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+}
+
+.attributeInput {
+ float: right;
+ padding: 0 1ch 0 0;
+ display: flex;
+ align-items: center;
+
+ input {
+ background-color: rgba(100, 100, 100, 0.1);
+ font-family: monospace;
+ font-size: variables.$fontsize;
+ border: 1px solid rgba(100, 100, 100, 0.3);
+ border-radius: 2px;
+ height: variables.$height;
+ outline: none;
+ transition: border 0.3s;
+ color: black;
+ &::placeholder {
+ color: black;
+ }
+
+ &:focus {
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ }
+ }
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..41b5803cc251e5f345702e9a364ee9eac4c6b113
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/attributepill.tsx
@@ -0,0 +1,96 @@
+import {
+ CheckDatatypeConstraint,
+ GetAttributeBoolOperators,
+} from '@graphpolaris/querybuilder/usecases';
+import {
+ updateQBAttributeOperator,
+ updateQBAttributeValue,
+ useAppDispatch,
+} from '@graphpolaris/shared/data-access/store';
+import { useTheme } from '@mui/material';
+import React, { useMemo, useState } from 'react';
+import styles from './attributepill.module.scss';
+import AttributeOperatorSelect from './operatorselect';
+
+/**
+ * Component to render an attribute flow element
+ * @param {FlowElement<EntityData>)} param0 The data of an entity flow element.
+ */
+export const AttributeRFPill = React.memo(
+ ({ id, data }: { id: string; data: any }) => {
+ const theme = useTheme();
+ const dispatch = useAppDispatch();
+ const [value, setValue] = useState(data?.value || '');
+
+ const onChange = (e: any) => {
+ setValue(e.target.value);
+ };
+ const validateInput = () => {
+ const newValue = CheckDatatypeConstraint(data.datatype, value);
+ setValue(newValue);
+ dispatch(updateQBAttributeValue({ id, value: newValue }));
+ };
+
+ // Calculates the size of the input
+ const getInputWidth = () => {
+ if (value == '') return 1;
+ else if (value.length > 10) return 10;
+ return value.length;
+ };
+
+ const boolOperators = useMemo(
+ () => GetAttributeBoolOperators(data?.datatype),
+ [data?.datatype]
+ );
+
+ // Determine the backgroundcolor based on if the attribute is connected to a entity or relation
+ let bgcolor;
+ if (data?.attributeOfA == 'entity')
+ bgcolor = theme.palette.queryBuilder.entity.lighterbg;
+ else if (data?.attributeOfA == 'relation')
+ bgcolor = theme.palette.queryBuilder.relation.lighterbg;
+ else bgcolor = theme.palette.queryBuilder.attribute.background;
+
+ return (
+ <div
+ className={styles.attribute}
+ style={{
+ background: bgcolor,
+ color: theme.palette.queryBuilder.text,
+ }}
+ >
+ {/* <Handle
+ id={Handles.Attribute}
+ type="source"
+ position={Position.Bottom}
+ className={styles.handle}
+ /> */}
+ <div className={styles.contentWrapper}>
+ <span className={styles.content} title={data.name}>
+ {data.name}
+ </span>
+ <AttributeOperatorSelect
+ selected={data?.operator}
+ options={boolOperators}
+ changed={(o) =>
+ dispatch(updateQBAttributeOperator({ id, operator: o.value }))
+ }
+ />
+ <span className={styles.attributeInput}>
+ <input
+ style={{ maxWidth: `${getInputWidth()}ch` }}
+ type="string"
+ placeholder={'?'}
+ value={value}
+ onChange={onChange}
+ onBlur={validateInput}
+ onKeyDown={(e) => e.key == 'Enter' && validateInput()}
+ ></input>
+ </span>
+ </div>
+ </div>
+ );
+ }
+);
+
+export default AttributeRFPill;
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.module.scss b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c31d2744f029e77c53efbfac2aae8983640770a
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.module.scss
@@ -0,0 +1,70 @@
+@use './variables.module.scss';
+
+.container {
+ position: relative;
+ vertical-align: baseline;
+ margin: 0 1ch;
+ font-weight: normal;
+ font-size: 7px;
+}
+
+.valueContainer {
+ color: #6a6a6a;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-radius: 2px;
+ background-color: transparent;
+
+ transition: border-color 0.2s;
+
+ height: variables.$height;
+ align-items: center;
+ display: flex;
+ padding: 0 1px 1px 1px;
+
+ &.highlighted,
+ &:hover {
+ border-color: rgba(0, 0, 0, 0.4);
+ }
+}
+
+.listbox {
+ font-size: 10px;
+ box-sizing: border-box;
+ padding: 5px;
+ margin: 5px 0 0 0;
+ list-style: none;
+ position: absolute;
+ height: auto;
+ box-shadow: 0 5px 13px -3px #e0e3e7;
+ background: white;
+ border: 1px solid #cdd2d7;
+ border-radius: 0.75em;
+ color: #1a2027;
+ overflow: auto;
+ z-index: 1;
+ outline: 0px;
+ left: -8px;
+
+ &.hidden {
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.4s 0.1s ease, visibility 0.4s 0.1s step-end;
+ }
+
+ & > li {
+ padding: 1px 4px;
+ border-radius: 2px;
+
+ &.selected {
+ background: #f1f1f1;
+ }
+
+ &:hover {
+ background: #e7ebf0;
+ }
+
+ &[aria-selected='true'] {
+ background: #e0e3e7;
+ }
+ }
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..470c87618fdbd49fd8d70b3de926e0d3605cd12a
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/operatorselect.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { SelectOption } from '@mui/base';
+import styles from './operatorselect.module.scss';
+import { useRef, useState } from 'react';
+
+// const grey = {
+// 100: '#E7EBF0',
+// 200: '#E0E3E7',
+// 300: '#CDD2D7',
+// 400: '#B2BAC2',
+// 500: '#A0AAB4',
+// 600: '#6F7E8C',
+// 700: '#3E5060',
+// 800: '#2D3843',
+// 900: '#1A2027',
+// };
+
+interface Props {
+ options: SelectOption<string>[];
+ selected: string;
+ changed?: (newSelected: SelectOption<string>) => void;
+}
+
+function AttributeOperatorSelect({
+ options,
+ selected,
+ changed = () => {},
+}: Props) {
+ const listboxRef = useRef<HTMLUListElement>(null);
+ const [listboxVisible, setListboxVisible] = useState(false);
+ const [currSelected, setCurrSelected] = useState(
+ options.find((o) => o.value == selected)?.label || options[0].label
+ );
+
+ React.useEffect(() => {
+ if (listboxVisible) {
+ listboxRef.current?.focus();
+ }
+ }, [listboxVisible]);
+
+ const changeSelected = (option: SelectOption<string>) => {
+ if (option.label != currSelected) {
+ setCurrSelected(option.label);
+ changed(option);
+ }
+ };
+
+ return (
+ <div
+ className={styles.container}
+ // onMouseOver={() => setListboxVisible(true)}
+ onMouseOut={() => setListboxVisible(false)}
+ onClick={() => setListboxVisible(true)}
+ onFocus={() => setListboxVisible(true)}
+ onBlur={() => setListboxVisible(false)}
+ >
+ <div
+ className={
+ styles.valueContainer + ' ' + (listboxVisible && styles.highlighted)
+ }
+ >
+ <span>{currSelected}</span>
+ </div>
+ {options.length > 1 && (
+ <ul
+ className={styles.listbox + ' ' + (!listboxVisible && styles.hidden)}
+ ref={listboxRef}
+ onMouseOver={() => setListboxVisible(true)}
+ >
+ {options.map((option) => (
+ <li
+ className={option.label == currSelected ? styles.selected : ''}
+ key={option.value}
+ onClick={() => changeSelected(option)}
+ >
+ {option.label}
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ );
+}
+
+export default AttributeOperatorSelect;
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/variables.module.scss b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/variables.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..08bc31bb67c70a043d0114880fceada930fe14b1
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/attributepill/variables.module.scss
@@ -0,0 +1,3 @@
+$height: 5px;
+$fontsize: 6px;
+$ypad: 2px;
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.module.scss b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..755d2b41d564abe3f9e4eb41f56865ef7d2432f4
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.module.scss
@@ -0,0 +1,49 @@
+.entity {
+ display: flex;
+ font-family: monospace;
+ font-weight: bold;
+ font-size: 10px;
+ padding: 4px 2ch;
+ border-radius: 3px;
+}
+
+.highlighted {
+ box-shadow: black 0 0 2px;
+}
+
+.handleLeft {
+ border: 0px;
+ border-radius: 0px;
+ left: 12px;
+ width: 7px;
+ height: 7px;
+ margin-bottom: 11px;
+ background: rgba(255, 255, 255, 0.6);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+ transform-origin: center;
+}
+
+// .handleBottom {
+// border: 0px;
+// border-radius: 0px;
+// width: 7px;
+// height: 7px;
+// left: 27.5px;
+// margin-bottom: 11px;
+// background: rgba(255, 255, 255, 0.6);
+// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+// transform: rotate(-45deg);
+// transform-origin: center;
+// }
+
+.contentWrapper {
+ margin-left: 3ch;
+
+ span {
+ max-width: 20ch;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: block;
+ }
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e5f6f7ba5d6a97bd5b47daea744a3a033cd09e7
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/entitypill/entitypill.tsx
@@ -0,0 +1,63 @@
+import { handles } from '@graphpolaris/querybuilder/usecases';
+import { useTheme } from '@mui/material';
+import React, { useEffect } from 'react';
+import { FlowElement, Handle, Position } from 'react-flow-renderer';
+import styles from './entitypill.module.scss';
+import cn from 'classnames';
+
+// export const Handless = {
+// entity: {
+// attributes: 'attributesHandle',
+// relations: 'relationsHandle',
+// },
+// };
+
+// /** Links need handles to what they are connected to (and which side) */
+// export enum Handles {
+// RelationLeft = 'leftEntityHandle', //target
+// RelationRight = 'rightEntityHandle', //target
+// ToAttributeHandle = 'attributesHandle', //target
+// ToRelation = 'relationsHandle', //source
+// Attribute = 'AttributeHandle', //source
+// ReceiveFunction = 'receiveFunctionHandle', //target
+// FunctionBase = 'functionHandle_', // + name from FunctionTypes args //source
+// }
+
+/**
+ * Component to render an entity flow element
+ * @param {FlowElement<EntityData>)} param0 The data of an entity flow element.
+ */
+export const EntityRFPill = React.memo(({ data }: { data: any }) => {
+ const theme = useTheme();
+
+ return (
+ <div
+ className={cn(styles.entity, {
+ [styles.highlighted]: data.suggestedForConnection,
+ })}
+ style={{
+ background: theme.palette.queryBuilder.entity.background,
+ color: theme.palette.queryBuilder.text,
+ }}
+ >
+ <Handle
+ id={handles.entity.relation}
+ type="source"
+ position={Position.Bottom}
+ className={styles.handleLeft}
+ style={data?.isConnected ? { backgroundColor: '#2e2e2e' } : {}}
+ />
+ {/* <Handle
+ id={Handles.ToAttributeHandle}
+ type="target"
+ position={Position.Bottom}
+ className={styles.handleBottom}
+ /> */}
+ <div className={styles.contentWrapper}>
+ <span title={data.name}>{data.name}</span>
+ </div>
+ </div>
+ );
+});
+
+export default EntityRFPill;
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.module.scss b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aff84b2e5d8b9caba6dd9fdd34a99b54614946d4
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.module.scss
@@ -0,0 +1,110 @@
+.relation {
+ display: flex;
+ text-align: center;
+ font-family: monospace;
+ font-weight: bold;
+ font-size: 10px;
+ background-color: transparent;
+}
+
+.highlighted {
+ box-shadow: black 0 0 2px;
+}
+
+.contentWrapper {
+ display: flex;
+ align-items: center;
+
+ .handleLeft {
+ position: relative;
+ z-index: 3;
+
+ top: 25%;
+ border: 0px;
+ border-radius: 0px;
+
+ background: transparent;
+ transform-origin: center;
+
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: rgba(255, 255, 255, 0.7) 6px solid;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-bottom: 7px solid transparent;
+ border-right: rgba(0, 0, 0, 0.1) 8px solid;
+ top: -7px;
+ right: -7px;
+ }
+ }
+ .highlighted {
+ z-index: -1;
+ box-shadow: 0 0 2px 1px gray;
+ }
+
+ .content {
+ margin: 0 2ch;
+ padding: 3px 0;
+ max-width: 20ch;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .handleRight {
+ position: relative;
+ top: 25%;
+ border: 0px;
+ border-radius: 0px;
+
+ background: transparent;
+ transform-origin: center;
+
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: rgba(255, 255, 255, 0.7) 6px solid;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-bottom: 7px solid transparent;
+ border-left: rgba(0, 0, 0, 0.1) 8px solid;
+ top: -7px;
+ left: -7px;
+ }
+ }
+}
+
+$height: 10px;
+.arrowLeft {
+ z-index: 2;
+ width: 0;
+ height: 0;
+ border-top: $height solid transparent;
+ border-bottom: $height solid transparent;
+
+ border-right: $height solid;
+}
+
+.arrowRight {
+ width: 0;
+ height: 0;
+ border-top: $height solid transparent;
+ border-bottom: $height solid transparent;
+
+ border-left: $height solid;
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.tsx b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f1d4d8592cf367e719ac3db963948b5c06145ef1
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/customFlowPills/relationpill/relationpill.tsx
@@ -0,0 +1,96 @@
+import { handles } from '@graphpolaris/querybuilder/usecases';
+import { useTheme } from '@mui/material';
+import { Handle, Position } from 'react-flow-renderer';
+import cn from 'classnames';
+
+import styles from './relationpill.module.scss';
+
+/**
+ * Component to render a relation flow element
+ * @param { FlowElement<RelationData>} param0 The data of a relation flow element.
+ */
+export default function RelationRFPill({ data }: { data: any }) {
+ const theme = useTheme();
+
+ // const minRef = useRef<HTMLInputElement>(null);
+ // const maxRef = useRef<HTMLInputElement>(null);
+
+ // const [readOnlyMin, setReadOnlyMin] = useState(true);
+ // const [readOnlyMax, setReadOnlyMax] = useState(true);
+
+ // const onDepthChanged = (depth: string) => {
+ // // Don't allow depth above 99
+ // const limit = 99;
+ // if (data != undefined) {
+ // data.depth.min = data.depth.min >= limit ? limit : data.depth.min;
+ // data.depth.max = data.depth.max >= limit ? limit : data.depth.max;
+
+ // // Check for for valid depth: min <= max
+ // if (depth == 'min') {
+ // if (data.depth.min > data.depth.max) data.depth.max = data.depth.min;
+ // setReadOnlyMin(true);
+ // } else if (depth == 'max') {
+ // if (data.depth.max < data.depth.min) data.depth.min = data.depth.max;
+ // setReadOnlyMax(true);
+ // }
+
+ // // Set to the correct width
+ // if (maxRef.current)
+ // maxRef.current.style.maxWidth = calcWidth(data.depth.max);
+ // if (minRef.current)
+ // minRef.current.style.maxWidth = calcWidth(data.depth.min);
+ // }
+ // };
+
+ // const calcWidth = (data: number) => {
+ // return data.toString().length + 0.5 + 'ch';
+ // };
+
+ return (
+ <div className={styles.relation}>
+ <div
+ className={styles.arrowLeft}
+ style={{
+ borderRightColor: theme.palette.queryBuilder.relation.background,
+ }}
+ />
+ <div
+ className={cn(styles.contentWrapper, {
+ [styles.highlighted]: data.suggestedForConnection,
+ })}
+ style={{
+ color: theme.palette.queryBuilder.text,
+ background: theme.palette.queryBuilder.relation.background,
+ }}
+ >
+ <Handle
+ id={handles.relation.fromEntity}
+ type="target"
+ position={Position.Left}
+ className={styles.handleLeft}
+ style={
+ data?.isFromEntityConnected ? { borderRightColor: '#2e2e2e' } : {} // TODO: this should be color from theme
+ }
+ />
+ <span className={styles.content} title={data.name}>
+ {data.name}
+ </span>
+ <Handle
+ id={handles.relation.toEntity}
+ type="source"
+ position={Position.Right}
+ className={styles.handleRight}
+ style={
+ data?.isToEntityConnected ? { borderLeftColor: '#2e2e2e' } : {}
+ }
+ />
+ </div>
+ <div
+ className={styles.arrowRight}
+ style={{
+ borderLeftColor: theme.palette.queryBuilder.relation.background,
+ }}
+ />
+ </div>
+ );
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/querybuilder.module.scss b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..db83f46964a46bd398e50188c6d83bd06769b52c
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.module.scss
@@ -0,0 +1,8 @@
+.reactflow {
+ width: 100%;
+ height: 500px;
+
+ // :global(.react-flow__edges) {
+ // z-index: 4 !important;
+ // }
+}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b406d60b5879ace0bfe90fa43b1a151fd83198f8
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+ colorPaletteConfigSlice,
+ querybuilderSlice,
+ setQuerybuilderNodes,
+} from '@graphpolaris/shared/data-access/store';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { configureStore } from '@reduxjs/toolkit';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Provider } from 'react-redux';
+import QueryBuilder from './querybuilder';
+import { MultiGraph } from 'graphology';
+import { addPill, handles } from '@graphpolaris/querybuilder/usecases';
+
+export default {
+ component: QueryBuilder,
+} as ComponentMeta<typeof QueryBuilder>;
+
+const Template: ComponentStory<typeof QueryBuilder> = (args) => (
+ <QueryBuilder {...args} />
+);
+
+// Mock palette store
+const mockStore = configureStore({
+ reducer: {
+ colorPaletteConfig: colorPaletteConfigSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
+const graph = new MultiGraph();
+addPill('0', { type: 'entity', x: 100, y: 100, name: 'Entity Pill' }, graph);
+// graph.addNode('0', { type: 'entity', x: 100, y: 100, name: 'Entity Pill' });
+addPill(
+ '1',
+ { type: 'relation', x: 140, y: 140, name: 'Relation Pill' },
+ graph
+);
+addPill(
+ '2',
+ {
+ type: 'attribute',
+ x: 170,
+ y: 160,
+ name: 'Attr string',
+ datatype: 'string',
+ operator: 'EQ',
+ value: 'mark',
+ },
+ graph
+);
+addPill(
+ '3',
+ {
+ type: 'attribute',
+ x: 170,
+ y: 170,
+ name: 'Attr number',
+ datatype: 'float',
+ operator: 'EQ',
+ },
+ graph
+);
+addPill(
+ '4',
+ {
+ type: 'attribute',
+ x: 130,
+ y: 120,
+ name: 'Attr bool',
+ datatype: 'bool',
+ operator: 'EQ',
+ value: 'true',
+ },
+ graph
+);
+console.log(graph.getNodeAttributes('2'));
+graph.addEdge('2', '1', { type: 'attribute_connection' });
+graph.addEdge('3', '1', { type: 'attribute_connection' });
+graph.addEdge('4', '0', { type: 'attribute_connection' });
+graph.addEdge('0', '1', {
+ type: 'entity_relation',
+ targetHandle: handles.relation.fromEntity,
+});
+// graph.addEdge('1', '0', {
+// type: 'entity_relation',
+// sourceHandle: handles.relation.entity,
+// });
+mockStore.dispatch(setQuerybuilderNodes(graph.export()));
+
+export const Simple = Template.bind({});
+Simple.decorators = [
+ (story) => (
+ <Provider store={mockStore}>
+ <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
+ </Provider>
+ ),
+];
diff --git a/apps/web-graphpolaris/src/components/querybuilder/querybuilder.tsx b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3870f76de645a2d47757c5e0a40e2c8bea89503b
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.tsx
@@ -0,0 +1,104 @@
+import {
+ createReactFlowElements,
+ dragPill,
+ dragPillStarted,
+ dragPillStopped,
+} from '@graphpolaris/querybuilder/usecases';
+import {
+ setQuerybuilderNodes,
+ useAppDispatch,
+ useQuerybuilderNodes,
+} from '@graphpolaris/shared/data-access/store';
+import { useMemo, useRef } from 'react';
+import ReactFlow, {
+ ReactFlowProvider,
+ Background,
+ Node,
+ isNode,
+} from 'react-flow-renderer';
+import styles from './querybuilder.module.scss';
+import ConnectionLine from './customFlowLines/connection';
+import ConnectionDragLine from './customFlowLines/connectionDrag';
+import AttributeRFPill from './customFlowPills/attributepill/attributepill';
+import EntityRFPill from './customFlowPills/entitypill/entitypill';
+import RelationRFPill from './customFlowPills/relationpill/relationpill';
+
+const nodeTypes = {
+ entity: EntityRFPill,
+ relation: RelationRFPill,
+ attribute: AttributeRFPill,
+};
+const edgeTypes = {
+ connection: ConnectionLine,
+};
+
+const onLoad = (reactFlowInstance: any) => {
+ setTimeout(() => reactFlowInstance.fitView(), 0);
+};
+
+const QueryBuilder = (props: {}) => {
+ const nodes = useQuerybuilderNodes();
+ const dispatch = useAppDispatch();
+ const isDraggingPill = useRef(false);
+
+ const elements = useMemo(() => createReactFlowElements(nodes), [nodes]);
+
+ const onNodeDrag = (
+ event: React.MouseEvent<Element, MouseEvent>,
+ node: Node<any>
+ ) => {
+ // Get the node in the elements list to get the previous location
+ const pNode = elements.find((e) => e.id == node.id);
+ if (!(pNode && isNode(pNode))) return;
+ // This is then used to calculate the delta position
+ const dx = node.position.x - pNode.position.x;
+ const dy = node.position.y - pNode.position.y;
+
+ // Check if we started dragging, if so, call the drag started usecase
+ if (!isDraggingPill.current) {
+ dragPillStarted(node.id, nodes);
+ isDraggingPill.current = true;
+ }
+
+ // Call the drag usecase
+ dragPill(node.id, nodes, dx, dy, node.position);
+
+ // Dispatch the new graphology object, so reactflow will get rerendered
+ dispatch(setQuerybuilderNodes(nodes.export()));
+ };
+ const onNodeDragStop = (
+ event: React.MouseEvent<Element, MouseEvent>,
+ node: Node<any>
+ ) => {
+ isDraggingPill.current = false;
+
+ // Call the drag pill stopped usecase
+ dragPillStopped(node.id, nodes);
+
+ // Dispatch the new graphology object, so reactflow will get rerendered
+ dispatch(setQuerybuilderNodes(nodes.export()));
+ };
+
+ return (
+ <div>
+ <ReactFlowProvider>
+ <ReactFlow
+ elements={elements}
+ snapGrid={[10, 10]}
+ // snapToGrid
+ nodeTypes={nodeTypes}
+ edgeTypes={edgeTypes}
+ connectionLineComponent={ConnectionDragLine}
+ onLoad={onLoad}
+ onNodeDrag={onNodeDrag}
+ onNodeDragStop={onNodeDragStop}
+ className={styles.reactflow}
+ >
+ <Background gap={10} size={0.7} />
+ </ReactFlow>
+ </ReactFlowProvider>
+ </div>
+ );
+};
+
+export default QueryBuilder;
diff --git a/deployment.yml b/deployment.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fc945c18719db08baaf0e539fd9a16bcecb04609
--- /dev/null
+++ b/deployment.yml
@@ -0,0 +1,35 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+ name: frontend-webserver-deployment
+ labels:
+ app: frontend-webserver
+spec:
+ replicas: 1
+ selector:
+ matchLabels:
+ app: frontend-webserver
+ template:
+ metadata:
+ labels:
+ app: frontend-webserver
+ spec:
+ containers:
+ - name: container
+ image: datastropheregistry.azurecr.io/frontend:latest
+ ports:
+ - containerPort: 3000
+ imagePullSecrets:
+ - name: docker-regcred
+
+---
+kind: Service
+apiVersion: v1
+metadata:
+ name: frontend-webserver
+spec:
+ selector:
+ app: frontend-webserver
+ ports:
+ - port: 3000
+ targetPort: 80
diff --git a/libs/querybuilder/usecases/.babelrc b/libs/querybuilder/usecases/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..cf7ddd99c615a064ac18eb3109eee4f394ab1faf
--- /dev/null
+++ b/libs/querybuilder/usecases/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}
diff --git a/libs/querybuilder/usecases/.eslintrc.json b/libs/querybuilder/usecases/.eslintrc.json
new file mode 100644
index 0000000000000000000000000000000000000000..3456be9b9036a42c593c82b050281230e4ca0ae4
--- /dev/null
+++ b/libs/querybuilder/usecases/.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/querybuilder/usecases/README.md b/libs/querybuilder/usecases/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..f919d5ec5c4710fe9263506b367251e7e6a92baa
--- /dev/null
+++ b/libs/querybuilder/usecases/README.md
@@ -0,0 +1,7 @@
+# querybuilder-usecases
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test querybuilder-usecases` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/querybuilder/usecases/jest.config.js b/libs/querybuilder/usecases/jest.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..941f4fbc2eed65bcc6b5a914c29364dcd1fff9bb
--- /dev/null
+++ b/libs/querybuilder/usecases/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+ displayName: 'querybuilder-usecases',
+ 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/querybuilder/usecases',
+};
diff --git a/libs/querybuilder/usecases/project.json b/libs/querybuilder/usecases/project.json
new file mode 100644
index 0000000000000000000000000000000000000000..271a62582eacd5887d6adbf6a5027c3b12618eaf
--- /dev/null
+++ b/libs/querybuilder/usecases/project.json
@@ -0,0 +1,23 @@
+{
+ "root": "libs/querybuilder/usecases",
+ "sourceRoot": "libs/querybuilder/usecases/src",
+ "projectType": "library",
+ "targets": {
+ "lint": {
+ "executor": "@nrwl/linter:eslint",
+ "outputs": ["{options.outputFile}"],
+ "options": {
+ "lintFilePatterns": ["libs/querybuilder/usecases/**/*.ts"]
+ }
+ },
+ "test": {
+ "executor": "@nrwl/jest:jest",
+ "outputs": ["coverage/libs/querybuilder/usecases"],
+ "options": {
+ "jestConfig": "libs/querybuilder/usecases/jest.config.js",
+ "passWithNoTests": true
+ }
+ }
+ },
+ "tags": []
+}
diff --git a/libs/querybuilder/usecases/src/index.ts b/libs/querybuilder/usecases/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32e0c81f2ecfe335cb61852728753c148b9c6c8b
--- /dev/null
+++ b/libs/querybuilder/usecases/src/index.ts
@@ -0,0 +1,6 @@
+export * from './lib/attribute/getAttributeBoolOperators';
+export * from './lib/attribute/checkInput';
+export * from './lib/createReactFlowElements';
+export * from './lib/pillHandles';
+export * from './lib/dragging/dragPill';
+export * from './lib/addPill';
diff --git a/libs/querybuilder/usecases/src/lib/addPill.ts b/libs/querybuilder/usecases/src/lib/addPill.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7b359d8f0fc77f1281fa57a7c200f13acfb820e
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/addPill.ts
@@ -0,0 +1,94 @@
+import {
+ setQuerybuilderNodes,
+ store,
+} from '@graphpolaris/shared/data-access/store';
+import Graph from 'graphology';
+import { Attributes } from 'graphology-types';
+
+/** monospace fontsize table */
+const widthPerFontsize = {
+ 6: 3.6167,
+ 7: 4.2167,
+ 10: 6.0167,
+};
+
+/** Adds a query builder pill to the graphology nodes object. */
+export function addPill(
+ id: string,
+ attributes: Attributes,
+ nodes: Graph
+): boolean {
+ const { type, name } = attributes;
+ if (!type || !name) return false;
+ let { x, y } = attributes;
+
+ // Check if x and y are present, otherwise set them to 0
+ if (!x) x = 0;
+ if (!y) y = 0;
+
+ // Get the width and height of a node
+ const { w, h } = calcWidthHeightOfPill(attributes);
+
+ // Add a node to the graphology object
+ nodes.addNode(id, { ...attributes, x, y, w, h });
+
+ // Set the new nodes in the query builder slice
+ store.dispatch(setQuerybuilderNodes(nodes.export()));
+
+ return true;
+}
+
+/** Calculates the width and height of a query builder pill.
+ * DEPENDS ON STYLING, if styling changed, change this.
+ */
+function calcWidthHeightOfPill(attributes: Attributes): {
+ w: number;
+ h: number;
+} {
+ const { type, name } = attributes;
+
+ let w = 0;
+ let h = 0;
+ switch (type) {
+ case 'entity': {
+ // calculate width and height of entity pill
+ w = Math.min(name.length, 20) * widthPerFontsize[10]; // for fontsize 10px
+
+ const widthOfPillWithoutText = 42.1164; // WARNING: depends on styling
+ w += widthOfPillWithoutText;
+ h = 20;
+ break;
+ }
+ case 'relation': {
+ // calculate width and height of relation pill
+ w = Math.min(name.length, 20) * widthPerFontsize[10]; // for fontsize 10px
+
+ const widthOfPillWithoutText = 56.0666; // WARNING: depends on styling
+ w += widthOfPillWithoutText;
+ h = 20;
+ break;
+ }
+ case 'attribute': {
+ // calculate width and height of relation pill
+ const pixelsPerChar = widthPerFontsize[6]; // for fontsize 10px
+ w = name.length * pixelsPerChar;
+
+ const { datatype, operator } = attributes;
+ let value = attributes['value'];
+ if (!datatype || !operator) return { w: 0, h: 0 };
+ if (!value) value = '?';
+
+ // Add width of operator
+ w += operator.length * widthPerFontsize[7];
+ // use a max of 10, because max-width is set to 10ch;
+ w += Math.min(value.length, 10) * widthPerFontsize[6];
+
+ const widthOfPillWithoutText = 25.6666; // WARNING: depends on styling
+ w += widthOfPillWithoutText;
+ h = 12;
+ break;
+ }
+ }
+
+ return { w, h };
+}
diff --git a/libs/querybuilder/usecases/src/lib/attribute/checkInput.ts b/libs/querybuilder/usecases/src/lib/attribute/checkInput.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1c29ab1f05d62105afaf80faaa405c30ce60535
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/attribute/checkInput.ts
@@ -0,0 +1,34 @@
+/** Checks if the string input is a number. */
+function isNumber(x: string): boolean {
+ if (typeof x != 'string') return false;
+ return !Number.isNaN(x) && !Number.isNaN(parseFloat(x));
+}
+function isBoolean(s: string): boolean {
+ return s == 'true' || s == 'false' || s == '0' || s == '1';
+}
+function toBoolean(s: string): string {
+ if (s == '1' || s == 'true') return 'true';
+ return 'false';
+}
+
+/** Checks if the provided value has the same as the datatype of the attribute. */
+export function CheckDatatypeConstraint(type: string, str: string): string {
+ let res = '';
+ switch (type) {
+ case 'string':
+ res = str;
+ break;
+ case 'bool':
+ isBoolean(str) ? (res = toBoolean(str)) : (res = '');
+ break;
+ case 'int':
+ case 'float':
+ case 'number':
+ isNumber(str) ? (res = '' + parseFloat(str)) : (res = '');
+ break;
+ default:
+ res = str;
+ break;
+ }
+ return res;
+}
diff --git a/libs/querybuilder/usecases/src/lib/attribute/getAttributeBoolOperators.ts b/libs/querybuilder/usecases/src/lib/attribute/getAttributeBoolOperators.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22809a7cde969f5be4da3978e650231a38ca1c4f
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/attribute/getAttributeBoolOperators.ts
@@ -0,0 +1,63 @@
+/** Determines the available boolean operators for a certain datatype. */
+export function GetAttributeBoolOperators(
+ datatype: string
+): { label: string; value: string }[] {
+ switch (datatype) {
+ case 'text':
+ case 'string':
+ return [
+ {
+ label: '=',
+ value: 'EQ',
+ },
+ {
+ label: '≠',
+ value: 'NEQ',
+ },
+ {
+ label: 'inc',
+ value: 'includes',
+ },
+ {
+ label: 'exc',
+ value: 'excludes',
+ },
+ ];
+ case 'int':
+ case 'float':
+ return [
+ {
+ label: '=',
+ value: 'EQ',
+ },
+ {
+ label: '≠',
+ value: 'NEQ',
+ },
+ {
+ label: '>',
+ value: 'GT',
+ },
+ {
+ label: '≥',
+ value: 'GTE',
+ },
+ {
+ label: '<',
+ value: 'LT',
+ },
+ {
+ label: '≤',
+ value: 'LTE',
+ },
+ ];
+ case 'bool':
+ default:
+ return [
+ {
+ label: '=',
+ value: 'EQ',
+ },
+ ];
+ }
+}
diff --git a/libs/querybuilder/usecases/src/lib/createReactFlowElements.ts b/libs/querybuilder/usecases/src/lib/createReactFlowElements.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eba3bf06477f9bd53ac9e1c87ea13126ecd58e02
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/createReactFlowElements.ts
@@ -0,0 +1,130 @@
+import Graph, { MultiGraph } from 'graphology';
+import { Attributes } from 'graphology-types';
+import { Elements, Node, Edge, XYPosition } from 'react-flow-renderer';
+
+// Takes the querybuilder graph as an input and creates react flow elements for them.
+export function createReactFlowElements(graph: Graph): Elements<Node | Edge> {
+ const elements: Elements<Node | Edge> = [];
+
+ graph.forEachNode((node: string, attributes: Attributes): void => {
+ let data;
+ let position = { x: attributes?.x || 0, y: attributes?.y || 0 };
+
+ switch (attributes.type) {
+ case 'entity':
+ data = {
+ isConnected: graph
+ .neighbors(node)
+ .some((nb) => graph.getNodeAttribute(nb, 'type') == 'relation'),
+ };
+ break;
+ case 'relation':
+ data = {
+ isFromEntityConnected: graph
+ .inNeighbors(node)
+ .some((nb) => graph.getNodeAttribute(nb, 'type') == 'entity'),
+ isToEntityConnected: graph
+ .outNeighbors(node)
+ .some((nb) => graph.getNodeAttribute(nb, 'type') == 'entity'),
+ };
+ break;
+ case 'attribute': {
+ const ERNeighbors = graph.outNeighbors(node).filter((nb) => {
+ const type = graph.getNodeAttribute(nb, 'type');
+ return type == 'entity' || type == 'relation';
+ });
+ let attributeOfA = '';
+ if (ERNeighbors.length > 0)
+ attributeOfA = graph.getNodeAttribute(ERNeighbors[0], 'type');
+ data = {
+ datatype: attributes.datatype,
+ operator: attributes.operator,
+ value: attributes.value,
+ attributeOfA: attributeOfA,
+ };
+ // Get the position of the attribute, based on the connection to entity or relation
+ const p = getAttributePosition(node, graph);
+ if (p) position = p;
+ break;
+ }
+ }
+ // Each pill should have a name and type
+ data = {
+ ...data,
+ name: attributes.name,
+ suggestedForConnection: attributes.suggestedForConnection, // Highlights the pill, with shadow or something
+ };
+
+ const RFNode: Node = {
+ id: node,
+ type: attributes.type,
+ position: position,
+ data: data,
+ };
+ elements.push(RFNode);
+ });
+
+ // Add the reactflow edges
+ graph.forEachEdge((edge, attributes, source, target): void => {
+ // connection from attributes don't have visible connection lines
+ if (attributes.type == 'attribute_connection') return;
+
+ const RFEdge: Edge = {
+ id: edge,
+ source: source,
+ target: target,
+ type: 'connection',
+ sourceHandle: attributes.sourceHandle,
+ targetHandle: attributes.targetHandle,
+ };
+ elements.push(RFEdge);
+ });
+
+ return elements;
+}
+
+/** Gets the position of an attribute based on the connection to an entity or relation.
+ * It uses the position of the parent pill and what the index is of this attribute in all
+ * the connected attributes to the parent.
+ */
+function getAttributePosition(
+ id: string,
+ nodes: MultiGraph
+): XYPosition | undefined {
+ const nbs = nodes.filterOutNeighbors(id, (_, { type }) =>
+ ['entity', 'relation'].includes(type)
+ );
+
+ if (nbs.length > 1)
+ console.log(
+ 'WARNING: attribute connected to more than one entity or relation'
+ );
+ else if (nbs.length == 1) {
+ const nb = nbs[0];
+ const connectedAttributes = nodes.filterInNeighbors(
+ nb,
+ (_, { type }) => type == 'attribute'
+ );
+
+ // An entity can have more attributes, what is the attributes index in the attributes array of that entity?
+ let nthAttibute = -1;
+ for (let i = 0; i < connectedAttributes.length; i++) {
+ if (connectedAttributes[i] == id) {
+ nthAttibute = i;
+ break;
+ }
+ }
+
+ const nbAttr = nodes.getNodeAttributes(nb);
+
+ const pos = { x: nbAttr.x + 30, y: nbAttr.y + nbAttr.h };
+ // ASSUMES THAT EACH ATTRIBUTE HAS THE SAME HEIGHT
+ const heightOfAttributes = nodes.getNodeAttribute(id, 'h') - 1;
+ pos.y += nthAttibute * heightOfAttributes;
+
+ return pos;
+ }
+
+ // If the attribute has no (attribute_)connection, don't position it.
+ return undefined;
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/dragAttribute.ts b/libs/querybuilder/usecases/src/lib/dragging/dragAttribute.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df89ab57dcc526b42c151e868a50add049efbe7d
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/dragAttribute.ts
@@ -0,0 +1,30 @@
+import { MultiGraph } from 'graphology';
+import { GetClosestPill } from './getClosestPill';
+
+export function DragAttributePillStarted(id: string, nodes: MultiGraph) {
+ // if the attribute is still connected to an entity or relation pill, disconnect
+ const es = nodes.outEdges(id);
+ es.forEach((e) => nodes.dropEdge(e));
+}
+
+export function DragAttributePill(
+ id: string,
+ nodes: MultiGraph,
+ dx: number,
+ dy: number
+) {
+ // Get the closes entity or relation node
+ const closestNode = GetClosestPill(id, nodes, ['entity', 'relation']);
+ // If we found one, highlight it by adding an attribute
+ if (closestNode)
+ nodes.setNodeAttribute(closestNode, 'suggestedForConnection', true);
+}
+
+export function DragAttibutePillStopped(id: string, nodes: MultiGraph) {
+ // If there is currently a node with the suggestedForConnection attribute
+ // connect this attribute to it
+ nodes.forEachNode((node, { suggestedForConnection }) => {
+ if (suggestedForConnection)
+ nodes.addEdge(id, node, { type: 'attribute_connection' });
+ });
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/dragAttributesAlong.ts b/libs/querybuilder/usecases/src/lib/dragging/dragAttributesAlong.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56697ab3f9cd125629c309c9df699419365a4a49
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/dragAttributesAlong.ts
@@ -0,0 +1,27 @@
+import Graph from 'graphology';
+
+/**
+ * Changes the position of connected attributes.
+ * @param id The id of the node which could have attributes connected to it (entity or relation)
+ * @param nodes The graphology query builder object
+ * @param dx The change in x
+ * @param dy The change in y
+ * @returns True if any attribute positions were changed
+ */
+export function DragAttributesAlong(
+ id: string,
+ nodes: Graph,
+ dx: number,
+ dy: number
+): boolean {
+ let didChangeAttributes = false;
+ nodes.forEachInNeighbor(id, (nb) => {
+ if (nodes.getNodeAttribute(nb, 'type') == 'attribute') {
+ nodes.updateNodeAttribute(nb, 'x', (x) => x + dx);
+ nodes.updateNodeAttribute(nb, 'y', (y) => y + dy);
+ didChangeAttributes = true;
+ }
+ });
+
+ return didChangeAttributes;
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/dragEntity.ts b/libs/querybuilder/usecases/src/lib/dragging/dragEntity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..171124ac9330a007b531311fec85dceeb4ccf945
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/dragEntity.ts
@@ -0,0 +1,18 @@
+import { MultiGraph } from 'graphology';
+
+export function DragEntityPillStarted(id: string, nodes: MultiGraph) {
+ // Started dragging entity usecase
+}
+
+export function DragEntityPill(
+ id: string,
+ nodes: MultiGraph,
+ dx: number,
+ dy: number
+) {
+ // Code for dragging an entity pill should go here
+}
+
+export function DragEntityPillStopped(id: string, nodes: MultiGraph) {
+ // Stopped dragging entity pill
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/dragPill.ts b/libs/querybuilder/usecases/src/lib/dragging/dragPill.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3832c103d94fbb2d759edc082cd643051580712a
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/dragPill.ts
@@ -0,0 +1,90 @@
+import { MultiGraph } from 'graphology';
+import { XYPosition } from 'react-flow-renderer';
+import {
+ DragAttibutePillStopped,
+ DragAttributePill,
+ DragAttributePillStarted,
+} from './dragAttribute';
+import { DragAttributesAlong } from './dragAttributesAlong';
+import {
+ DragEntityPill,
+ DragEntityPillStarted,
+ DragEntityPillStopped,
+} from './dragEntity';
+import {
+ DragRelationPill,
+ DragRelationPillStarted,
+ DragRelationPillStopped,
+} from './dragRelation';
+
+export function dragPillStarted(id: string, nodes: MultiGraph) {
+ switch (nodes.getNodeAttribute(id, 'type')) {
+ case 'attribute':
+ DragAttributePillStarted(id, nodes);
+ break;
+ case 'entity':
+ DragEntityPillStarted(id, nodes);
+ break;
+ case 'relation':
+ DragRelationPillStarted(id, nodes);
+ break;
+ }
+}
+
+/**
+ * A general drag usecase for any pill, it will select the correct usecase for each pill
+ * @param id
+ * @param nodes The graphology query builder nodes object
+ * @param dx Delta x
+ * @param dy Delta y
+ * @param position The already updated positiong (dx dy are already applied)
+ */
+export function dragPill(
+ id: string,
+ nodes: MultiGraph,
+ dx: number,
+ dy: number,
+ position: XYPosition
+) {
+ // Update the position of the node in the graphology object
+ nodes.setNodeAttribute(id, 'x', position.x);
+ nodes.setNodeAttribute(id, 'y', position.y);
+
+ // Remove the highlighted attribute from each node
+ nodes.forEachNode((node) =>
+ nodes.removeNodeAttribute(node, 'suggestedForConnection')
+ );
+
+ switch (nodes.getNodeAttribute(id, 'type')) {
+ case 'attribute':
+ DragAttributePill(id, nodes, dx, dy);
+ break;
+ case 'entity':
+ DragAttributesAlong(id, nodes, dx, dy);
+ DragEntityPill(id, nodes, dx, dy);
+ break;
+ case 'relation':
+ DragAttributesAlong(id, nodes, dx, dy);
+ DragRelationPill(id, nodes, dx, dy);
+ break;
+ }
+}
+
+export function dragPillStopped(id: string, nodes: MultiGraph) {
+ switch (nodes.getNodeAttribute(id, 'type')) {
+ case 'attribute':
+ DragAttibutePillStopped(id, nodes);
+ break;
+ case 'entity':
+ DragEntityPillStopped(id, nodes);
+ break;
+ case 'relation':
+ DragRelationPillStopped(id, nodes);
+ break;
+ }
+
+ // Remove all suggestedForConnection attributes
+ nodes.forEachNode((node) =>
+ nodes.removeNodeAttribute(node, 'suggestedForConnection')
+ );
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/dragRelation.ts b/libs/querybuilder/usecases/src/lib/dragging/dragRelation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12bf51961ae8cff27113c73a14c81d1e6c346b91
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/dragRelation.ts
@@ -0,0 +1,18 @@
+import { MultiGraph } from 'graphology';
+
+export function DragRelationPillStarted(id: string, nodes: MultiGraph) {
+ // Started dragging relation usecase
+}
+
+export function DragRelationPill(
+ id: string,
+ nodes: MultiGraph,
+ dx: number,
+ dy: number
+) {
+ // Code for dragging an relation pill should go here
+}
+
+export function DragRelationPillStopped(id: string, nodes: MultiGraph) {
+ // Stopped dragging relation pill
+}
diff --git a/libs/querybuilder/usecases/src/lib/dragging/getClosestPill.ts b/libs/querybuilder/usecases/src/lib/dragging/getClosestPill.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a3fd44874fa8de1f5b3d1508d456dfae0848faa
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/dragging/getClosestPill.ts
@@ -0,0 +1,40 @@
+import { MultiGraph } from 'graphology';
+
+/**
+ * Gets the closest node to id
+ * @param id
+ * @param nodes Graphology querybuilder MultiGraph object
+ * @param allowedNodeTypes An array of the node types which are included in the search
+ * @param maxDistance The maximum distance
+ * @returns the closest node if within range
+ */
+export function GetClosestPill(
+ id: string,
+ nodes: MultiGraph,
+ allowedNodeTypes: string[],
+ maxDistance = 150
+): string | undefined {
+ const { x, y, w, h } = nodes.getNodeAttributes(id);
+ const center: { x: number; y: number } = { x: x + w / 2, y: y + h / 2 };
+
+ let minDist = maxDistance * maxDistance;
+ let closestNode: string | undefined = undefined;
+ nodes.forEachNode((node, { x, y, w, h, type }) => {
+ if (allowedNodeTypes.includes(type)) {
+ const nodeCenter: { x: number; y: number } = {
+ x: x + w / 2,
+ y: y + h / 2,
+ };
+
+ const dx = center.x - nodeCenter.x;
+ const dy = center.y - nodeCenter.y;
+ const dist = dx * dx + dy * dy;
+ if (dist < minDist) {
+ minDist = dist;
+ closestNode = node;
+ }
+ }
+ });
+
+ return closestNode;
+}
diff --git a/libs/querybuilder/usecases/src/lib/pillHandles.ts b/libs/querybuilder/usecases/src/lib/pillHandles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..355bdd8e5ce2cd821e49d3bef74bb9d925637b50
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/pillHandles.ts
@@ -0,0 +1,14 @@
+// This file describes the connection points (handles) on a query builder pill
+// For example the connection from entity to left relation handle
+
+export const handles = {
+ entity: {
+ /** The handle for a connection from an entity to a relation pill */
+ relation: 'entity:to_relation',
+ },
+ relation: {
+ /** The handle for a connection from a relation to an entity pill */
+ toEntity: 'relation:to_entity',
+ fromEntity: 'relation:from_entity',
+ },
+};
diff --git a/libs/querybuilder/usecases/src/lib/querybuilder-usecases.spec.ts b/libs/querybuilder/usecases/src/lib/querybuilder-usecases.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..684984e68f06f7cff30cc3f8c00749fd61c1aa9b
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/querybuilder-usecases.spec.ts
@@ -0,0 +1,7 @@
+import { querybuilderUsecases } from './querybuilder-usecases';
+
+describe('querybuilderUsecases', () => {
+ it('should work', () => {
+ expect(querybuilderUsecases()).toEqual('querybuilder-usecases');
+ });
+});
diff --git a/libs/querybuilder/usecases/src/lib/querybuilder-usecases.ts b/libs/querybuilder/usecases/src/lib/querybuilder-usecases.ts
new file mode 100644
index 0000000000000000000000000000000000000000..06d687eb90fbdd6d6e752c90417a12a854aff52b
--- /dev/null
+++ b/libs/querybuilder/usecases/src/lib/querybuilder-usecases.ts
@@ -0,0 +1,3 @@
+export function querybuilderUsecases(): string {
+ return 'querybuilder-usecases';
+}
diff --git a/libs/querybuilder/usecases/tsconfig.json b/libs/querybuilder/usecases/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..6ebadfb9de07f71cd20ee1102f3512550505ad2a
--- /dev/null
+++ b/libs/querybuilder/usecases/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "extends": "../../../tsconfig.base.json",
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ],
+ "compilerOptions": {
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "resolveJsonModule": true
+ }
+}
diff --git a/libs/querybuilder/usecases/tsconfig.lib.json b/libs/querybuilder/usecases/tsconfig.lib.json
new file mode 100644
index 0000000000000000000000000000000000000000..efdd77fbf5b34f06e8efa8ad8bc87e11a3c1e9af
--- /dev/null
+++ b/libs/querybuilder/usecases/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/querybuilder/usecases/tsconfig.spec.json b/libs/querybuilder/usecases/tsconfig.spec.json
new file mode 100644
index 0000000000000000000000000000000000000000..d8716fecfa3b7929f162b71e7a966c579a63c071
--- /dev/null
+++ b/libs/querybuilder/usecases/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/api/src/lib/database.ts b/libs/shared/data-access/api/src/lib/database.ts
index 8d6700de6f55dde670227d1cedf1080c44637e28..da706c42a71c1cedc8a777afd5870480b3ec17eb 100644
--- a/libs/shared/data-access/api/src/lib/database.ts
+++ b/libs/shared/data-access/api/src/lib/database.ts
@@ -14,7 +14,7 @@ export type AddDatabaseRequest = {
export function AddDatabase(request: AddDatabaseRequest): Promise<void> {
return new Promise((resolve, reject) => {
- fetch('https://datastrophe.science.uu.nl/user/database', {
+ fetch('https://api.graphpolaris.com/user/database', {
method: 'POST',
credentials: 'same-origin',
headers: new Headers({
@@ -34,7 +34,7 @@ export function AddDatabase(request: AddDatabaseRequest): Promise<void> {
export function GetAllDatabases(): Promise<Array<string>> {
return new Promise<Array<string>>((resolve, reject) => {
- fetch('https://datastrophe.science.uu.nl/user/database', {
+ fetch('https://api.graphpolaris.com/user/database', {
method: 'GET',
credentials: 'same-origin',
headers: new Headers({
@@ -57,7 +57,7 @@ export function GetAllDatabases(): Promise<Array<string>> {
export function DeleteDatabase(name: string): Promise<void> {
return new Promise((resolve, reject) => {
- fetch('https://datastrophe.science.uu.nl/user/database/' + name, {
+ fetch('https://api.graphpolaris.com/user/database/' + name, {
method: 'DELETE',
credentials: 'same-origin',
headers: new Headers({
diff --git a/libs/shared/data-access/api/src/lib/user.ts b/libs/shared/data-access/api/src/lib/user.ts
index 457ce20f6af6c8be31727f2b9757134827b4fc70..b3d7b3fc9e6b5411369a4a5b11e3ed8e7e009065 100644
--- a/libs/shared/data-access/api/src/lib/user.ts
+++ b/libs/shared/data-access/api/src/lib/user.ts
@@ -10,7 +10,7 @@ export type User = {
export function GetUserInfo(): Promise<User> {
return new Promise<User>((resolve, reject) => {
- fetch('https://datastrophe.science.uu.nl/user/', {
+ fetch('https://api.graphpolaris.com/user/', {
method: 'GET',
credentials: 'same-origin',
headers: new Headers({
diff --git a/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts b/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts
index fc92922419ad609e85767e55dd35b06b2a581012..bc6001fd2aed8d24d60abf15411167af64629e81 100644
--- a/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts
+++ b/libs/shared/data-access/authorization/src/lib/authorizationHandler.ts
@@ -1,5 +1,3 @@
-import { Cookies } from 'react-cookie';
-
export class AuthorizationHandler {
private static _instance: AuthorizationHandler;
private accessToken = '';
@@ -52,7 +50,7 @@ export class AuthorizationHandler {
*/
private async getNewAccessToken(): Promise<authResponse> {
// If we have an access token already, append it to the url as a query param to keep sessionID the same
- let url = 'https://datastrophe.science.uu.nl/auth/refresh';
+ let url = 'https://api.graphpolaris.com/auth/refresh';
if (this.accessToken != '') {
url += '?access_token=' + this.accessToken;
}
@@ -104,7 +102,7 @@ export class AuthorizationHandler {
* initialiseRefreshToken attempts to initialise a refresh token
*/
private async initialiseRefreshToken() {
- fetch('https://datastrophe.science.uu.nl/auth/refresh', {
+ fetch('https://api.graphpolaris.com/auth/refresh', {
method: 'POST',
credentials: 'include',
})
diff --git a/libs/shared/data-access/store/src/index.ts b/libs/shared/data-access/store/src/index.ts
index c855ded7f0ce61ed13dc286d637aff7a2c3446ef..3e2aec2be9ea77de09c1c598a15a1ef30fe68713 100644
--- a/libs/shared/data-access/store/src/index.ts
+++ b/libs/shared/data-access/store/src/index.ts
@@ -7,6 +7,12 @@ export {
schemaSlice,
selectSchemaLayout
} from './lib/schemaSlice';
+export {
+ querybuilderSlice,
+ setQuerybuilderNodes,
+ updateQBAttributeOperator,
+ updateQBAttributeValue,
+} from './lib/querybuilderSlice';
export {
selectGraphQueryResult,
selectGraphQueryResultLinks,
diff --git a/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts b/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
index bb41dc4a815f5dccb73c3ac51de8ed57728483e0..64d340262ec623a4f427a7c5e149c350beaff8d5 100644
--- a/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
+++ b/libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts
@@ -1,4 +1,3 @@
-import { palette } from '@mui/system';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './store';
@@ -6,6 +5,22 @@ import type { RootState } from './store';
export interface ExtraColorsForMui5 {
/** Colors that can be used for data visualisation, e.g. nodes, edges */
dataPointColors: string[];
+
+ queryBuilder: {
+ text: string;
+ entity: {
+ background: string;
+ lighterbg?: string;
+ };
+ relation: {
+ background: string;
+ lighterbg?: string;
+ };
+ attribute: {
+ background: string;
+ lighterbg?: string;
+ };
+ };
}
/** Our custom color palette config. With the palette options from MUI that we are going to use. */
@@ -45,7 +60,21 @@ export interface ColorPaletteConfig {
// But we don't reference that type directly here to stay decoupled
export const initialState: ColorPaletteConfig = {
lightPalette: {
- custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+ custom: {
+ dataPointColors: ['#ff0000', '#00ff00', '#0000ff'],
+ queryBuilder: {
+ text: 'black',
+ entity: {
+ background: '#FC4F4F',
+ },
+ relation: {
+ background: '#FF9F45',
+ },
+ attribute: {
+ background: '#C7C7C7',
+ },
+ },
+ },
// 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: {
@@ -60,7 +89,21 @@ export const initialState: ColorPaletteConfig = {
},
},
darkPalette: {
- custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+ custom: {
+ dataPointColors: ['#ff0000', '#00ff00', '#0000ff'],
+ queryBuilder: {
+ text: 'black',
+ entity: {
+ background: '#FC4F4F',
+ },
+ relation: {
+ background: '#FF9F45',
+ },
+ attribute: {
+ background: '#C7C7C7',
+ },
+ },
+ },
primary: {
main: '#e3f3fd',
},
diff --git a/libs/shared/data-access/store/src/lib/hooks.ts b/libs/shared/data-access/store/src/lib/hooks.ts
index 801f34a8077abdcdd9efdf2bfaa4161f00c10e26..6b67cbead6799c62e78c19c23f58830593e2d195 100644
--- a/libs/shared/data-access/store/src/lib/hooks.ts
+++ b/libs/shared/data-access/store/src/lib/hooks.ts
@@ -1,18 +1,20 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { selectGraphQueryResult } from './graphQueryResultSlice';
import { selectSchema, selectSchemaLayout } from './schemaSlice';
+import { selectQuerybuilderNodes } from './querybuilderSlice';
import type { RootState, AppDispatch } from './store';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
-// Gives the graphQueryResult from the store
+/** Gives the graphQueryResult from the store */
export const useGraphQueryResult = () => useAppSelector(selectGraphQueryResult);
// Gives the schema form the store (as a graphology object)
export const useSchema = () => useAppSelector(selectSchema);
-
// Gives the schema form the store (as a graphology object)
-export const useSchemaLayout = () => useAppSelector(selectSchemaLayout);
\ No newline at end of file
+export const useSchemaLayout = () => useAppSelector(selectSchemaLayout);
+export const useQuerybuilderNodes = () =>
+ useAppSelector(selectQuerybuilderNodes);
diff --git a/libs/shared/data-access/store/src/lib/querybuilderSlice.ts b/libs/shared/data-access/store/src/lib/querybuilderSlice.ts
new file mode 100644
index 0000000000000000000000000000000000000000..877444a06b9ebe70c06a866e9ecc6d28efc001b5
--- /dev/null
+++ b/libs/shared/data-access/store/src/lib/querybuilderSlice.ts
@@ -0,0 +1,79 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+import { MultiGraph } from 'graphology';
+import { Attributes, SerializedGraph } from 'graphology-types';
+
+// Define the initial state using that type
+export const initialState = {
+ graphologySerialized: new MultiGraph().export(),
+ // schemaLayout: 'Graphology_noverlap',
+};
+
+export const querybuilderSlice = createSlice({
+ name: 'querybuilder',
+ // `createSlice` will infer the state type from the `initialState` argument
+ initialState,
+ reducers: {
+ setQuerybuilderNodes: (
+ state,
+ action: PayloadAction<SerializedGraph<Attributes, Attributes, Attributes>>
+ ) => {
+ state.graphologySerialized = action.payload;
+ },
+ updateQBAttributeOperator: (
+ state,
+ action: PayloadAction<{ id: string; operator: string }>
+ ) => {
+ const graph = MultiGraph.from(state.graphologySerialized);
+ graph.setNodeAttribute(
+ action.payload.id,
+ 'operator',
+ action.payload.operator
+ );
+ state.graphologySerialized = graph.export();
+ },
+ updateQBAttributeValue: (
+ state,
+ action: PayloadAction<{ id: string; value: string }>
+ ) => {
+ const graph = MultiGraph.from(state.graphologySerialized);
+ graph.setNodeAttribute(action.payload.id, 'value', action.payload.value);
+ state.graphologySerialized = graph.export();
+ },
+ // addQuerybuilderNode: (
+ // state,
+ // action: PayloadAction<{ id: string; attributes: Attributes }>
+ // ) => {
+ // const graph = MultiGraph.from(state.graphologySerialized);
+ // graph.addNode(action.payload.id, action.payload.attributes);
+ // state.graphologySerialized = graph.export();
+ // },
+ // setGraphLayout: (state, action: PayloadAction<AllLayoutAlgorithms>) => {
+ // state.schemaLayout = action.payload;
+ // },
+ },
+});
+
+export const {
+ setQuerybuilderNodes,
+ updateQBAttributeOperator,
+ updateQBAttributeValue,
+} = querybuilderSlice.actions;
+
+/** Select the querybuilder nodes and convert it to a graphology object */
+export const selectQuerybuilderNodes = (state: RootState): MultiGraph => {
+ // This is really weird but for some reason all the attributes appeared as read-only otherwise
+ return MultiGraph.from(
+ MultiGraph.from(state.querybuilder.graphologySerialized).export()
+ );
+};
+
+// /**
+// * selects the SchemaLayout enum
+// * @param {GraphLayout} state
+// * @returns {GraphLayout} enum of type GraphLayout
+// */
+// export const selectSchemaLayout = (state: RootState) =>
+// state.schema.schemaLayout;
+
+export default querybuilderSlice.reducer;
diff --git a/libs/shared/data-access/store/src/lib/schemaSlice.ts b/libs/shared/data-access/store/src/lib/schemaSlice.ts
index 4d0afa25e6ee20c813fb242805f3fbd0bcf3032b..c7d1febd677be2187fb20b67074f1839e87c9770 100644
--- a/libs/shared/data-access/store/src/lib/schemaSlice.ts
+++ b/libs/shared/data-access/store/src/lib/schemaSlice.ts
@@ -79,8 +79,10 @@ export const { readInSchemaFromBackend, setSchema } = schemaSlice.actions;
* Select the schema and convert it to a graphology object
* */
export const selectSchema = (state: RootState) => {
- // console.log(state);
- return MultiGraph.from(state.schema.graphologySerialized);
+ // This is really weird but for some reason all the attributes appeared as read-only otherwise
+ return MultiGraph.from(
+ MultiGraph.from(state.schema.graphologySerialized).export()
+ );
};
// /**
diff --git a/libs/shared/data-access/store/src/lib/store.ts b/libs/shared/data-access/store/src/lib/store.ts
index 7198337bde3e8b98b11d6336552743c71d8e413a..30a41ddb43d55a86517bb818054405da4e45daf6 100644
--- a/libs/shared/data-access/store/src/lib/store.ts
+++ b/libs/shared/data-access/store/src/lib/store.ts
@@ -1,6 +1,7 @@
import { configureStore } from '@reduxjs/toolkit';
import colorPaletteConfigSlice from './colorPaletteConfigSlice';
import graphQueryResultSlice from './graphQueryResultSlice';
+import querybuilderSlice from './querybuilderSlice';
import schemaSlice from './schemaSlice';
export const store = configureStore({
@@ -8,6 +9,7 @@ export const store = configureStore({
graphQueryResult: graphQueryResultSlice,
schema: schemaSlice,
colorPaletteConfig: colorPaletteConfigSlice,
+ querybuilder: querybuilderSlice,
},
});
diff --git a/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts b/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
index 43235684422e51bacf514cf32e21f1bf69c7305b..aa9a6de51d703d3d79d1c03ab6f573e24d5e5cf4 100644
--- a/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
+++ b/libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts
@@ -1,5 +1,6 @@
import { ColorPaletteConfig } from '@graphpolaris/shared/data-access/store';
import { ThemeOptions } from '@mui/material/styles';
+import Color from 'color';
/** Maps our color palette config (stored in redux) to the mui 5 theme format */
export default function MapColorsConfigToMuiTheme(
@@ -14,11 +15,70 @@ export default function MapColorsConfigToMuiTheme(
primary: colorsConfig.darkPalette.primary,
secondary: colorsConfig.darkPalette.secondary,
dataPointColors: colorsConfig.darkPalette.custom.dataPointColors,
+ queryBuilder: {
+ text: colorsConfig.darkPalette.custom.queryBuilder.text,
+ entity: {
+ background:
+ colorsConfig.darkPalette.custom.queryBuilder.entity
+ .background,
+ lighterbg: Color(
+ colorsConfig.darkPalette.custom.queryBuilder.entity.background
+ )
+ .lighten(0.2)
+ .toString(),
+ },
+ relation: {
+ background:
+ colorsConfig.darkPalette.custom.queryBuilder.relation
+ .background,
+ lighterbg: Color(
+ colorsConfig.darkPalette.custom.queryBuilder.relation
+ .background
+ )
+ .lighten(0.2)
+ .toString(),
+ },
+ attribute: {
+ background:
+ colorsConfig.darkPalette.custom.queryBuilder.attribute
+ .background,
+ },
+ },
}
: {
primary: colorsConfig.lightPalette.primary,
secondary: colorsConfig.lightPalette.secondary,
dataPointColors: colorsConfig.lightPalette.custom.dataPointColors,
+ queryBuilder: {
+ text: colorsConfig.lightPalette.custom.queryBuilder.text,
+ entity: {
+ background:
+ colorsConfig.lightPalette.custom.queryBuilder.entity
+ .background,
+ lighterbg: Color(
+ colorsConfig.lightPalette.custom.queryBuilder.entity
+ .background
+ )
+ .lighten(0.2)
+ .toString(),
+ },
+ relation: {
+ background:
+ colorsConfig.lightPalette.custom.queryBuilder.relation
+ .background,
+ lighterbg: Color(
+ colorsConfig.lightPalette.custom.queryBuilder.relation
+ .background
+ )
+ .lighten(0.2)
+ .toString(),
+ },
+ attribute: {
+ background:
+ colorsConfig.lightPalette.custom.queryBuilder.attribute
+ .background,
+ },
+ },
}),
},
};
diff --git a/libs/shared/models/yarn.lock b/libs/shared/models/yarn.lock
new file mode 100644
index 0000000000000000000000000000000000000000..fb57ccd13afbd082ad82051c2ffebef4840661ec
--- /dev/null
+++ b/libs/shared/models/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/libs/shared/schema-utils/yarn.lock b/libs/shared/schema-utils/yarn.lock
new file mode 100644
index 0000000000000000000000000000000000000000..fb57ccd13afbd082ad82051c2ffebef4840661ec
--- /dev/null
+++ b/libs/shared/schema-utils/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..ef2e21a890fc402b46472b5c18fd5b95c3a53a2e
--- /dev/null
+++ b/nginx/nginx.conf
@@ -0,0 +1,16 @@
+server {
+ listen 80;
+
+ location / {
+ root /usr/share/nginx/html;
+ index index.html index.htm;
+ try_files $uri $uri/ /index.html;
+ }
+
+ error_page 500 502 503 504 /50x.html;
+
+ location = /50x.html {
+ root /usr/share/nginx/html;
+ }
+
+}
diff --git a/package.json b/package.json
index 910a0f4083e87cea15b91f10f3475dcdcde43e50..9d07a7788766fc39c5af14ad5142bf853f2776fe 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
"@types/cytoscape": "^3.19.4",
"@types/react-grid-layout": "^1.3.0",
"@types/styled-components": "^5.1.21",
+ "classnames": "^2.3.1",
+ "color": "^4.2.1",
"core-js": "^3.6.5",
"cytoscape": "^3.21.0",
"graphology": "^0.24.0",
@@ -57,6 +59,7 @@
"@svgr/webpack": "^5.4.0",
"@testing-library/react": "12.1.2",
"@testing-library/react-hooks": "7.0.2",
+ "@types/color": "^3.0.3",
"@types/jest": "27.0.2",
"@types/node": "16.11.7",
"@types/react": "17.0.30",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 7a399ebf1769e00e2136b3160fbb57ad1ccd3f1a..a5bafb69c61a39d4c988430267936172aeb36df7 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -19,6 +19,9 @@
"@graphpolaris/models": ["libs/shared/models/src/index.ts"],
"@graphpolaris/schema-utils": ["libs/shared/schema-utils/src/index.ts"],
"@graphpolaris/schema/usecases": ["libs/schema/usecases/src/index.ts"],
+ "@graphpolaris/querybuilder/usecases": [
+ "libs/querybuilder/usecases/src/index.ts"
+ ],
"@graphpolaris/shared/data-access/api": [
"libs/shared/data-access/api/src/index.ts"
],
diff --git a/workspace.json b/workspace.json
index 4b974196b33da4ad2e075a2a3bc4317db624ffa1..d829d3ca0515a309a5a268383dcf3764953f2251 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,6 +1,7 @@
{
"version": 2,
"projects": {
+ "querybuilder-usecases": "libs/querybuilder/usecases",
"schema-usecases": "libs/schema/usecases",
"shared-data-access-api": "libs/shared/data-access/api",
"shared-data-access-authorization": "libs/shared/data-access/authorization",
diff --git a/yarn.lock b/yarn.lock
index 3d6d637e556c329bdf8245c184f4c09526f253cf..ad3e6305a7719eb8dc8d0e2a9ad48f4ff0bc32e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4072,7 +4072,7 @@
dependencies:
"@types/node" "*"
-"@types/color-convert@^2.0.0":
+"@types/color-convert@*", "@types/color-convert@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
@@ -4084,6 +4084,13 @@
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+"@types/color@^3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.3.tgz#e6d8d72b7aaef4bb9fe80847c26c7c786191016d"
+ integrity sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==
+ dependencies:
+ "@types/color-convert" "*"
+
"@types/connect-history-api-fallback@^1.3.5":
version "1.3.5"
resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -6420,6 +6427,11 @@ classcat@^5.0.3:
resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.3.tgz#38eaa0ec6eb1b10faf101bbcef2afb319c23c17b"
integrity sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ==
+classnames@^2.3.1:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+ integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
clean-css@^4.2.3:
version "4.2.4"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -6571,16 +6583,32 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+color-string@^1.9.0:
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
+ integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
+ dependencies:
+ color-name "^1.0.0"
+ simple-swizzle "^0.2.2"
+
color-support@^1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
+color@^4.2.1:
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/color/-/color-4.2.1.tgz#498aee5fce7fc982606c8875cab080ac0547c884"
+ integrity sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==
+ dependencies:
+ color-convert "^2.0.1"
+ color-string "^1.9.0"
+
colord@^2.9.1:
version "2.9.2"
resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
@@ -10305,6 +10333,11 @@ is-arrayish@^0.2.1:
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+is-arrayish@^0.3.1:
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+ integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
is-bigint@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -15059,6 +15092,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.6.tgz#24e630c4b0f03fea446a2bd299e62b4a6ca8d0af"
integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
+simple-swizzle@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+ integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+ dependencies:
+ is-arrayish "^0.3.1"
+
sisteransi@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"