From 3d565547d67e116681b28900db5583da8e8796dd Mon Sep 17 00:00:00 2001
From: Leonardo Christino <leomilho@gmail.com>
Date: Tue, 8 Aug 2023 10:48:28 +0200
Subject: [PATCH] feat(css): new design applied to sb and visualizations
---
apps/web/tsconfig.node.json | 10 -
libs/config/node.d.ts | 2 +-
.../model/logic/mathAggregations.tsx | 745 ------------------
.../lib/querybuilder/panel/querypopup.tsx | 38 +
.../lib/querybuilder/panel/querysidepanel.tsx | 125 +++
5 files changed, 164 insertions(+), 756 deletions(-)
delete mode 100644 apps/web/tsconfig.node.json
delete mode 100644 libs/shared/lib/querybuilder/model/logic/mathAggregations.tsx
create mode 100644 libs/shared/lib/querybuilder/panel/querypopup.tsx
create mode 100644 libs/shared/lib/querybuilder/panel/querysidepanel.tsx
diff --git a/apps/web/tsconfig.node.json b/apps/web/tsconfig.node.json
deleted file mode 100644
index a54ca1adb..000000000
--- a/apps/web/tsconfig.node.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "allowSyntheticDefaultImports": true,
- "types": ["node", "vite/client"]
- },
- "include": ["vite.config.ts"]
-}
diff --git a/libs/config/node.d.ts b/libs/config/node.d.ts
index 8724df9c9..544d25be2 100644
--- a/libs/config/node.d.ts
+++ b/libs/config/node.d.ts
@@ -15,4 +15,4 @@ interface ImportMeta {
declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
-declare module "*.jpg";
+declare module "*.jpg";
\ No newline at end of file
diff --git a/libs/shared/lib/querybuilder/model/logic/mathAggregations.tsx b/libs/shared/lib/querybuilder/model/logic/mathAggregations.tsx
deleted file mode 100644
index 5baebb3b6..000000000
--- a/libs/shared/lib/querybuilder/model/logic/mathAggregations.tsx
+++ /dev/null
@@ -1,745 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-import { Position } from 'reactflow';
-import { GeneralDescription, MathAggregationTypes } from './general';
-
-export const MathAggregations: Record<MathAggregationTypes, GeneralDescription<MathAggregationTypes>> = {
- [MathAggregationTypes.AVG]: {
- key: 'mathFunctionAvg',
- name: 'Average',
- type: MathAggregationTypes.AVG,
- description: 'Average of all values',
- numInputs: 1,
- inputs: [{ name: '1', type: 'float', default: 0 }],
- output: { name: 'avg', type: 'float' },
- logic: ['Avg', '@1'],
- },
- [MathAggregationTypes.COUNT]: {
- key: 'mathFunctionCount',
- name: 'Count',
- type: MathAggregationTypes.COUNT,
- description: 'Count the number of values',
- numInputs: 1,
- inputs: [{ name: '1', type: 'float', default: 0 }],
-
- output: { name: 'count', type: 'float' },
- logic: ['Count', '@1'],
- },
- [MathAggregationTypes.MAX]: {
- key: 'mathFunctionMax',
- name: 'Maximum',
- type: MathAggregationTypes.MAX,
- description: 'Maximum of all values',
- numInputs: 1,
- inputs: [{ name: '1', type: 'float', default: 0 }],
- output: { name: 'max', type: 'float' },
- logic: ['Max', '@1'],
- },
- [MathAggregationTypes.MIN]: {
- key: 'mathFunctionMin',
- name: 'Minimum',
- type: MathAggregationTypes.MIN,
- description: 'Minimum of all values',
- numInputs: 1,
- inputs: [{ name: '1', type: 'float', default: 0 }],
- output: { name: 'min', type: 'float' },
- logic: ['Min', '@1'],
- },
- [MathAggregationTypes.SUM]: {
- key: 'mathFunctionSum',
- name: 'Sum',
- type: MathAggregationTypes.SUM,
- description: 'Sum of all values',
- numInputs: 1,
- inputs: [{ name: '1', type: 'float', default: 0 }],
- output: { name: 'sum', type: 'float' },
- logic: ['Sum', '@1'],
- },
- // [MathAggregationTypes.STD]: {
- // key: 'mathFunctionStd',
- // name: 'Standard Deviation',
- // type: MathAggregationTypes.STD,
- // description: 'Standard deviation of all values',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'std', type: 'float' },
- // logic: ['Std', '@1'],
- // },
- // [MathAggregationTypes.ADD]: {
- // key: 'mathFunctionAdd',
- // name: 'Add',
- // type: MathAggregationTypes.ADD,
- // description: 'Add two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float', default: 0 },
- // { name: '2', type: 'float', default: 0 },
- // ],
- // output: { name: '+', type: 'float' },
- // logic: ['+', '@1', '@2'],
- // },
- // [MathAggregationTypes.SUBTRACT]: {
- // key: 'mathFunctionSubtract',
- // name: 'Subtract',
- // type: MathAggregationTypes.SUBTRACT,
- // description: 'Subtract two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: '-', type: 'float' },
- // logic: ['-', '@1', '@2'],
- // },
- // [MathAggregationTypes.MULTIPLY]: {
- // key: 'mathFunctionMultiply',
- // name: 'Multiply',
- // type: MathAggregationTypes.MULTIPLY,
- // description: 'Multiply two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: '*', type: 'float' },
- // logic: ['*', '@1', '@2'],
- // },
- // [MathAggregationTypes.DIVIDE]: {
- // key: 'mathFunctionDivide',
- // name: 'Divide',
- // type: MathAggregationTypes.DIVIDE,
- // description: 'Divide two values',
-
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: '/', type: 'float' },
- // logic: ['/', '@1', '@2'],
- // },
- // [MathAggregationTypes.POWER]: {
- // key: 'mathFunctionPower',
- // name: 'Power',
- // type: MathAggregationTypes.POWER,
- // description: 'Raise a value to the power of another value',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: '^', type: 'float' },
- // logic: ['^', '@1', '@2'],
- // },
- // [MathAggregationTypes.SQRT]: {
- // key: 'mathFunctionSqrt',
- // name: 'Square Root',
- // type: MathAggregationTypes.SQRT,
- // description: 'Square root of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'sqrt', type: 'float' },
- // logic: ['Sqrt', '@1'],
- // },
- // [MathAggregationTypes.LOG]: {
- // key: 'mathFunctionLog',
- // name: 'Logarithm',
- // type: MathAggregationTypes.LOG,
- // description: 'Logarithm of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'log', type: 'float' },
- // logic: ['Log', '@1'],
- // },
- // [MathAggregationTypes.EXP]: {
- // key: 'mathFunctionExp',
- // name: 'Exponential',
- // type: MathAggregationTypes.EXP,
- // description: 'Exponential of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'exp', type: 'float' },
- // logic: ['Exp', '@1'],
- // },
- // [MathAggregationTypes.ABS]: {
- // key: 'mathFunctionAbs',
- // name: 'Absolute Value',
- // type: MathAggregationTypes.ABS,
- // description: 'Absolute value of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'abs', type: 'float' },
- // logic: ['Abs', '@1'],
- // },
- // [MathAggregationTypes.CEIL]: {
- // key: 'mathFunctionCeil',
- // name: 'Ceiling',
- // type: MathAggregationTypes.CEIL,
- // description: 'Ceiling of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'ceil', type: 'float' },
- // logic: ['Ceil', '@1'],
- // },
- // [MathAggregationTypes.FLOOR]: {
- // key: 'mathFunctionFloor',
- // name: 'Floor',
- // type: MathAggregationTypes.FLOOR,
- // description: 'Floor of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'floor', type: 'float' },
- // logic: ['Floor', '@1'],
- // },
- // [MathAggregationTypes.ROUND]: {
- // key: 'mathFunctionRound',
- // name: 'Round',
- // type: MathAggregationTypes.ROUND,
- // description: 'Round a value to the nearest integer',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'round', type: 'float' },
- // logic: ['Round', '@1'],
- // },
- // [MathAggregationTypes.TRUNC]: {
- // key: 'mathFunctionTrunc',
- // name: 'Truncate',
- // type: MathAggregationTypes.TRUNC,
- // description: 'Truncate a value to the nearest integer towards zero',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
-
- // output: { name: 'trunc', type: 'float' },
- // logic: ['Trunc', '@1'],
- // },
- // [MathAggregationTypes.RANDOM]: {
- // key: 'mathFunctionRandom',
- // name: 'Random',
- // type: MathAggregationTypes.RANDOM,
- // description: 'Random value between 0 and 1',
- // numInputs: 0,
- // inputs: [],
- // output: { name: 'random', type: 'float' },
- // logic: ['Random'],
- // },
- // [MathAggregationTypes.RANDOMINT]: {
- // key: 'mathFunctionRandomInt',
- // name: 'Random Integer',
- // type: MathAggregationTypes.RANDOMINT,
- // description: 'Random integer between two values',
- // numInputs: 2,
- // inputs: [
- // { name: 'min', type: 'float' },
- // { name: 'max', type: 'float' },
- // ],
- // output: { name: 'randomInt', type: 'float' },
- // logic: ['RandomInt', '@1', '@2'],
- // },
- // [MathAggregationTypes.SIN]: {
- // key: 'mathFunctionSin',
- // name: 'Sine',
- // type: MathAggregationTypes.SIN,
- // description: 'Sine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'sin', type: 'float' },
- // logic: ['Sin', '@1'],
- // },
- // [MathAggregationTypes.COS]: {
- // key: 'mathFunctionCos',
- // name: 'Cosine',
- // type: MathAggregationTypes.COS,
- // description: 'Cosine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'cos', type: 'float' },
- // logic: ['Cos', '@1'],
- // },
- // [MathAggregationTypes.TAN]: {
- // key: 'mathFunctionTan',
- // name: 'Tangent',
- // type: MathAggregationTypes.TAN,
- // description: 'Tangent of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'tan', type: 'float' },
- // logic: ['Tan', '@1'],
- // },
- // [MathAggregationTypes.ASIN]: {
- // key: 'mathFunctionAsin',
- // name: 'Arcsine',
- // type: MathAggregationTypes.ASIN,
- // description: 'Arcsine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'asin', type: 'float' },
- // logic: ['Asin', '@1'],
- // },
- // [MathAggregationTypes.ACOS]: {
- // key: 'mathFunctionAcos',
- // name: 'Arccosine',
- // type: MathAggregationTypes.ACOS,
- // description: 'Arccosine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'acos', type: 'float' },
- // logic: ['Acos', '@1'],
- // },
- // [MathAggregationTypes.ATAN]: {
- // key: 'mathFunctionAtan',
- // name: 'Arctangent',
- // type: MathAggregationTypes.ATAN,
- // description: 'Arctangent of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'atan', type: 'float' },
- // logic: ['Atan', '@1'],
- // },
- // [MathAggregationTypes.SINH]: {
- // key: 'mathFunctionSinh',
- // name: 'Hyperbolic Sine',
- // type: MathAggregationTypes.SINH,
- // description: 'Hyperbolic sine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'sinh', type: 'float' },
- // logic: ['Sinh', '@1'],
- // },
- // [MathAggregationTypes.COSH]: {
- // key: 'mathFunctionCosh',
- // name: 'Hyperbolic Cosine',
- // type: MathAggregationTypes.COSH,
- // description: 'Hyperbolic cosine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'cosh', type: 'float' },
- // logic: ['Cosh', '@1'],
- // },
- // [MathAggregationTypes.TANH]: {
- // key: 'mathFunctionTanh',
- // name: 'Hyperbolic Tangent',
- // type: MathAggregationTypes.TANH,
- // description: 'Hyperbolic tangent of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'tanh', type: 'float' },
- // logic: ['Tanh', '@1'],
- // },
- // [MathAggregationTypes.ASINH]: {
- // key: 'mathFunctionAsinh',
- // name: 'Hyperbolic Arcsine',
- // type: MathAggregationTypes.ASINH,
- // description: 'Hyperbolic arcsine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'asinh', type: 'float' },
- // logic: ['Asinh', '@1'],
- // },
- // [MathAggregationTypes.ACOSH]: {
- // key: 'mathFunctionAcosh',
- // name: 'Hyperbolic Arccosine',
- // type: MathAggregationTypes.ACOSH,
- // description: 'Hyperbolic arccosine of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'acosh', type: 'float' },
- // logic: ['Acosh', '@1'],
- // },
- // [MathAggregationTypes.ATANH]: {
- // key: 'mathFunctionAtanh',
- // name: 'Hyperbolic Arctangent',
- // type: MathAggregationTypes.ATANH,
- // description: 'Hyperbolic arctangent of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'atanh', type: 'float' },
- // logic: ['Atanh', '@1'],
- // },
- // [MathAggregationTypes.DEGREES]: {
- // key: 'mathFunctionDegrees',
- // name: 'Degrees',
- // type: MathAggregationTypes.DEGREES,
- // description: 'Convert a value from radians to degrees',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'degrees', type: 'float' },
- // logic: ['Degrees', '@1'],
- // },
- // [MathAggregationTypes.RADIANS]: {
- // key: 'mathFunctionRadians',
- // name: 'Radians',
- // type: MathAggregationTypes.RADIANS,
- // description: 'Convert a value from degrees to radians',
- // numInputs: 1,
-
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'radians', type: 'float' },
- // logic: ['Radians', '@1'],
- // },
- // [MathAggregationTypes.SIGN]: {
- // key: 'mathFunctionSign',
- // name: 'Sign',
- // type: MathAggregationTypes.SIGN,
- // description: 'Sign of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'sign', type: 'float' },
- // logic: ['Sign', '@1'],
- // },
- // [MathAggregationTypes.RANDOMNORMAL]: {
- // key: 'mathFunctionRandomNormal',
- // name: 'Random Normal',
- // type: MathAggregationTypes.RANDOMNORMAL,
- // description: 'Random value from a normal distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'mean', type: 'float' },
- // { name: 'std', type: 'float' },
- // ],
- // output: { name: 'randomNormal', type: 'float' },
- // logic: ['RandomNormal', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMLOGNORMAL]: {
- // key: 'mathFunctionRandomLogNormal',
- // name: 'Random Log Normal',
- // type: MathAggregationTypes.RANDOMLOGNORMAL,
- // description: 'Random value from a log normal distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'mean', type: 'float' },
- // { name: 'std', type: 'float' },
- // ],
- // output: { name: 'randomLogNormal', type: 'float' },
- // logic: ['RandomLogNormal', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMEXPONENTIAL]: {
- // key: 'mathFunctionRandomExponential',
- // name: 'Random Exponential',
- // type: MathAggregationTypes.RANDOMEXPONENTIAL,
- // description: 'Random value from an exponential distribution',
- // numInputs: 1,
- // inputs: [{ name: 'lambda', type: 'float' }],
- // output: { name: 'randomExponential', type: 'float' },
- // logic: ['RandomExponential', '@1'],
- // },
- // [MathAggregationTypes.RANDOMGAMMA]: {
- // key: 'mathFunctionRandomGamma',
- // name: 'Random Gamma',
- // type: MathAggregationTypes.RANDOMGAMMA,
- // description: 'Random value from a gamma distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'alpha', type: 'float' },
- // { name: 'beta', type: 'float' },
- // ],
- // output: { name: 'randomGamma', type: 'float' },
- // logic: ['RandomGamma', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMBETA]: {
- // key: 'mathFunctionRandomBeta',
- // name: 'Random Beta',
- // type: MathAggregationTypes.RANDOMBETA,
- // description: 'Random value from a beta distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'alpha', type: 'float' },
- // { name: 'beta', type: 'float' },
- // ],
- // output: { name: 'randomBeta', type: 'float' },
- // logic: ['RandomBeta', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMCHISQUARE]: {
- // key: 'mathFunctionRandomChiSquare',
- // name: 'Random Chi Square',
- // type: MathAggregationTypes.RANDOMCHISQUARE,
- // description: 'Random value from a chi square distribution',
- // numInputs: 1,
- // inputs: [{ name: 'k', type: 'float' }],
- // output: { name: 'randomChiSquare', type: 'float' },
- // logic: ['RandomChiSquare', '@1'],
- // },
- // [MathAggregationTypes.RANDOMWEIBULL]: {
- // key: 'mathFunctionRandomWeibull',
- // name: 'Random Weibull',
- // type: MathAggregationTypes.RANDOMWEIBULL,
- // description: 'Random value from a Weibull distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'k', type: 'float' },
- // { name: 'lambda', type: 'float' },
- // ],
- // output: { name: 'randomWeibull', type: 'float' },
- // logic: ['RandomWeibull', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMCAUCHY]: {
- // key: 'mathFunctionRandomCauchy',
- // name: 'Random Cauchy',
- // type: MathAggregationTypes.RANDOMCAUCHY,
- // description: 'Random value from a Cauchy distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'x0', type: 'float' },
- // { name: 'gamma', type: 'float' },
- // ],
- // output: { name: 'randomCauchy', type: 'float' },
- // logic: ['RandomCauchy', '@1', '@2'],
- // },
- // [MathAggregationTypes.RANDOMPOISSON]: {
- // key: 'mathFunctionRandomPoisson',
- // name: 'Random Poisson',
- // type: MathAggregationTypes.RANDOMPOISSON,
- // description: 'Random value from a Poisson distribution',
- // numInputs: 1,
- // inputs: [{ name: 'lambda', type: 'float' }],
- // output: { name: 'randomPoisson', type: 'float' },
- // logic: ['RandomPoisson', '@1'],
- // },
- // [MathAggregationTypes.RANDOMIRWINHALL]: {
- // key: 'mathFunctionRandomIrwinHall',
- // name: 'Random Irwin Hall',
- // type: MathAggregationTypes.RANDOMIRWINHALL,
- // description: 'Random value from an Irwin Hall distribution',
- // numInputs: 2,
- // inputs: [
- // { name: 'n', type: 'float' },
- // { name: 'scale', type: 'float' },
- // ],
- // output: { name: 'randomIrwinHall', type: 'float' },
- // logic: ['RandomIrwinHall', '@1', '@2'],
- // },
- // [MathAggregationTypes.CHIQUARETEST]: {
- // key: 'mathFunctionChiSquareTest',
- // name: 'Chi Square Test',
- // type: MathAggregationTypes.CHIQUARETEST,
- // description: 'Chi square test',
- // numInputs: 2,
- // inputs: [
- // { name: 'observed', type: 'float' },
- // { name: 'expected', type: 'float' },
- // ],
- // output: { name: 'chiSquareTest', type: 'float' },
- // logic: ['ChiSquareTest', '@1', '@2'],
- // },
- // [MathAggregationTypes.CORRELATION]: {
- // key: 'mathFunctionCorrelation',
- // name: 'Correlation',
- // type: MathAggregationTypes.CORRELATION,
- // description: 'Correlation between two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: 'correlation', type: 'float' },
- // logic: ['Correlation', '@1', '@2'],
- // },
- // [MathAggregationTypes.COVARIANCE]: {
- // key: 'mathFunctionCovariance',
- // name: 'Covariance',
- // type: MathAggregationTypes.COVARIANCE,
- // description: 'Covariance between two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: 'covariance', type: 'float' },
- // logic: ['Covariance', '@1', '@2'],
- // },
- // [MathAggregationTypes.FREQUENCY]: {
- // key: 'mathFunctionFrequency',
- // name: 'Frequency',
- // type: MathAggregationTypes.FREQUENCY,
- // description: 'Frequency of a value in a dataset',
- // numInputs: 2,
- // inputs: [
- // { name: 'value', type: 'float' },
- // { name: 'dataset', type: 'float' },
- // ],
- // output: { name: 'frequency', type: 'float' },
- // logic: ['Frequency', '@1', '@2'],
- // },
- // [MathAggregationTypes.MEAN]: {
- // key: 'mathFunctionMean',
- // name: 'Mean',
- // type: MathAggregationTypes.MEAN,
- // description: 'Mean of a dataset',
- // numInputs: 1,
- // inputs: [{ name: 'dataset', type: 'float' }],
- // output: { name: 'mean', type: 'float' },
- // logic: ['Mean', '@1'],
- // },
- // [MathAggregationTypes.MEDIAN]: {
- // key: 'mathFunctionMedian',
- // name: 'Median',
- // type: MathAggregationTypes.MEDIAN,
- // description: 'Median of a dataset',
- // numInputs: 1,
- // inputs: [{ name: 'dataset', type: 'float' }],
- // output: { name: 'median', type: 'float' },
- // logic: ['Median', '@1'],
- // },
- // [MathAggregationTypes.MODE]: {
- // key: 'mathFunctionMode',
- // name: 'Mode',
- // type: MathAggregationTypes.MODE,
- // description: 'Mode of a dataset',
- // numInputs: 1,
- // inputs: [{ name: 'dataset', type: 'float' }],
- // output: { name: 'mode', type: 'float' },
- // logic: ['Mode', '@1'],
- // },
- // [MathAggregationTypes.RANK]: {
- // key: 'mathFunctionRank',
- // name: 'Rank',
- // type: MathAggregationTypes.RANK,
- // description: 'Rank of a value in a dataset',
- // numInputs: 2,
- // inputs: [
- // { name: 'value', type: 'float' },
- // { name: 'dataset', type: 'float' },
- // ],
- // output: { name: 'rank', type: 'float' },
- // logic: ['Rank', '@1', '@2'],
- // },
- // [MathAggregationTypes.STDEV]: {
- // key: 'mathFunctionStdev',
- // name: 'Standard Deviation',
- // type: MathAggregationTypes.STDEV,
- // description: 'Standard deviation of a dataset',
- // numInputs: 1,
- // inputs: [{ name: 'dataset', type: 'float' }],
- // output: { name: 'stdev', type: 'float' },
- // logic: ['Stdev', '@1'],
- // },
- // [MathAggregationTypes.VARIANCE]: {
- // key: 'mathFunctionVariance',
- // name: 'Variance',
- // type: MathAggregationTypes.VARIANCE,
- // description: 'Variance of a dataset',
- // numInputs: 1,
- // inputs: [{ name: 'dataset', type: 'float' }],
- // output: { name: 'variance', type: 'float' },
- // logic: ['Variance', '@1'],
- // },
- // [MathAggregationTypes.ZSCORE]: {
- // key: 'mathFunctionZscore',
- // name: 'Z-Score',
- // type: MathAggregationTypes.ZSCORE,
- // description: 'Z-score of a value in a dataset',
- // numInputs: 2,
- // inputs: [
- // { name: 'value', type: 'float' },
- // { name: 'dataset', type: 'float' },
- // ],
- // output: { name: 'zscore', type: 'float' },
- // logic: ['Zscore', '@1', '@2'],
- // },
- // [MathAggregationTypes.AND]: {
- // key: 'mathFunctionAnd',
- // name: 'And',
- // type: MathAggregationTypes.AND,
- // description: 'Logical AND of two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'boolean' },
- // { name: '2', type: 'boolean' },
- // ],
- // output: { name: 'and', type: 'boolean' },
- // logic: ['And', '@1', '@2'],
- // },
- // [MathAggregationTypes.OR]: {
- // key: 'mathFunctionOr',
- // name: 'Or',
- // type: MathAggregationTypes.OR,
- // description: 'Logical OR of two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'boolean' },
- // { name: '2', type: 'boolean' },
- // ],
- // output: { name: 'or', type: 'boolean' },
- // logic: ['Or', '@1', '@2'],
- // },
- // [MathAggregationTypes.NOT]: {
- // key: 'mathFunctionNot',
- // name: 'Not',
- // type: MathAggregationTypes.NOT,
- // description: 'Logical NOT of a value',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'boolean' }],
- // output: { name: 'not', type: 'boolean' },
- // logic: ['Not', '@1'],
- // },
-
- // {
- // key: 'mathFunctionCount',
- // name: 'Count',
- // type: MathAggregationTypes.COUNT,
- // description: 'Count the number of values',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'count', type: 'float' },
- // logic: ['Count', '@1'],
- // },
- // {
- // key: 'mathFunctionMax',
- // name: 'Maximum',
- // type: MathAggregationTypes.MAX,
- // description: 'Maximum of all values',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'max', type: 'float' },
- // logic: ['Max', '@1'],
- // },
- // {
- // key: 'mathFunctionMin',
- // name: 'Minimum',
- // type: MathAggregationTypes.MIN,
- // description: 'Minimum of all values',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'min', type: 'float' },
- // logic: ['Min', '@1'],
- // },
- // {
- // key: 'mathFunctionSum',
- // name: 'Sum',
- // type: MathAggregationTypes.SUM,
- // description: 'Sum of all values',
- // numInputs: 1,
- // inputs: [{ name: '1', type: 'float' }],
- // output: { name: 'sum', type: 'float' },
- // logic: ['Sum', '@1'],
- // },
- // // {
- // // key: 'mathFunctionStd',
- // // name: 'Standard Deviation',
- // // type: MathAggregationTypes.STD,
- // // description: 'Standard deviation of all values',
- // // numInputs: 1,
- // // inputs: [{ name: '1', type: 'float' }],
- // // output: { name: 'std', type: 'float' },
- // // logic: ['Std', '@1'],
- // // },
- // {
- // key: 'mathFunctionAdd',
- // name: 'Add',
- // type: MathAggregationTypes.ADD,
- // description: 'Add two values',
- // numInputs: 2,
- // inputs: [
- // { name: '1', type: 'float' },
- // { name: '2', type: 'float' },
- // ],
- // output: { name: '+', type: 'float' },
- // logic: ['+', '@1', '@2'],
- // },
-};
-
-/** All available functions in the function bar. */
-export const MathAggregationArray: Array<GeneralDescription<MathAggregationTypes>> = Object.values(MathAggregations);
diff --git a/libs/shared/lib/querybuilder/panel/querypopup.tsx b/libs/shared/lib/querybuilder/panel/querypopup.tsx
new file mode 100644
index 000000000..1749d9697
--- /dev/null
+++ b/libs/shared/lib/querybuilder/panel/querypopup.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import Draggable from 'react-draggable';
+import { AllLogicDescriptions, MathFilters, NumberFunctions, QueryGraphEdgeHandle, StringFilters, StringFunctions } from '../model';
+import { InputNodeType } from '../model/logic/general';
+import { QuerySidePanel } from './querysidepanel';
+
+export function QueryBuilderModal(props: {
+ open: boolean;
+ handle: QueryGraphEdgeHandle | undefined;
+ onClose: () => void;
+ onClick: (item: AllLogicDescriptions) => void;
+}) {
+ const modal = React.useRef<HTMLDialogElement>(null);
+
+ useEffect(() => {
+ if (props.open) {
+ modal.current?.showModal();
+ } else {
+ modal.current?.close();
+ }
+ }, [props.open]);
+
+ function onClose() {
+ props.onClose();
+ }
+
+ return (
+ <dialog id="my_modal_1" className="modal " ref={modal} onClose={() => onClose()}>
+ <form method="dialog" className="modal-box h-auto">
+ <QuerySidePanel title="Logic Pills usable by the node" filter={props.handle?.attributeType} onClick={props.onClick} />
+ </form>
+
+ <form method="dialog" className="modal-backdrop">
+ <button>close</button>
+ </form>
+ </dialog>
+ );
+}
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel.tsx
new file mode 100644
index 000000000..186cd30de
--- /dev/null
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { AllLogicDescriptions, AllLogicMap } from '../model';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FunctionsIcon from '@mui/icons-material/Functions';
+import GridOnIcon from '@mui/icons-material/GridOn';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import AbcIcon from '@mui/icons-material/Abc';
+
+export const QuerySidePanel = (props: {
+ title: string;
+ filter?: string;
+ draggable?: boolean;
+ onClick?: (item: AllLogicDescriptions) => void;
+}) => {
+ const dataOps = [
+ {
+ title: 'aggregation',
+ description: 'Aggregation Functions',
+ icon: <GridOnIcon fontSize="small" />,
+ },
+ {
+ title: 'function',
+ description: 'Math Functions',
+ icon: <FunctionsIcon fontSize="small" />,
+ },
+ {
+ title: 'filter',
+ description: 'Filter Functions',
+ icon: <FilterAltIcon fontSize="small" />,
+ },
+ ];
+ const dataTypes = [
+ {
+ title: 'number',
+ description: 'Number',
+ icon: <NumbersIcon fontSize="small" />,
+ },
+ {
+ title: 'string',
+ description: 'Text',
+ icon: <AbcIcon fontSize="small" />,
+ },
+ ];
+
+ const filter = props.filter === 'number' ? 'float' : props.filter;
+ const [selectedOp, setSelectedOp] = useState(dataOps.findIndex((item) => item.title === filter) || -1);
+ const [selectedType, setSelectedType] = useState(dataTypes.findIndex((item) => item.title === filter) || -1);
+
+ const onDragStart = (event: React.DragEvent, value: AllLogicDescriptions) => {
+ console.log('drag start');
+
+ event.dataTransfer.setData('application/reactflow', JSON.stringify({ value }));
+ event.dataTransfer.effectAllowed = 'move';
+ };
+
+ return (
+ <div className="bg-offwhite-100 h-flex flex flex-col gap-2">
+ <h2 className="menu-title">{props.title}</h2>
+ <div className="btn-group w-full justify-center">
+ {dataOps.map((item, index) => (
+ <div key={item.title} data-tip={item.description} className="tooltip tooltip-top m-0 p-0">
+ <button
+ className={'btn btn-sm ' + (selectedOp === index ? 'btn-active' : '')}
+ onClick={(e) => {
+ e.preventDefault();
+ index === selectedOp ? setSelectedOp(-1) : setSelectedOp(index);
+ }}
+ >
+ {item.icon}
+ </button>
+ </div>
+ ))}
+ <div className="w-2" />
+ {dataTypes.map((item, index) => (
+ <div key={item.title} data-tip={item.description} className=" tooltip tooltip-top m-0 p-0">
+ <button
+ className={'btn btn-sm block ' + (selectedType === index ? 'btn-active' : '')}
+ onClick={(e) => {
+ e.preventDefault();
+ index === selectedType ? setSelectedType(-1) : setSelectedType(index);
+ }}
+ >
+ {item.icon}
+ </button>
+ </div>
+ ))}
+ </div>
+ <div className="overflow-x-hidden flex-shrink flex-grow-0 w-full">
+ <ul className="menu bg-base-200 p-0 [&_li>*]:rounded-none h-full w-full">
+ {Object.values(AllLogicMap)
+ .filter((item) => !filter || item.key.toLowerCase().includes(filter === 'number' ? 'float' : 'string'))
+ .filter((item) => selectedOp === -1 || item.key.toLowerCase().includes(dataOps?.[selectedOp].title))
+ .filter((item) => selectedType === -1 || item.key.toLowerCase().includes(dataTypes?.[selectedType].title))
+ .map((item, index) => (
+ <li key={item.key + item.description} className="h-fit">
+ <span
+ data-tip={item.description}
+ className="flex before:w-[10rem] before:text-center tooltip tooltip-bottom text-start "
+ onDragStart={(e) => onDragStart(e, item)}
+ draggable={props.draggable}
+ onClick={() => {
+ if (!props.draggable && props?.onClick) props.onClick(item);
+ }}
+ >
+ {item.icon && <span className="w-min">{item.icon}</span>}
+ <span className="w-full">{item.name}</span>
+ <span className="flex scale-75">
+ {item.key.toLowerCase().includes('filter') && <FilterAltIcon fontSize="small" />}
+ {item.key.toLowerCase().includes('function') && <FunctionsIcon fontSize="small" />}
+ {item.key.toLowerCase().includes('aggregation') && <GridOnIcon fontSize="small" />}
+ {item.key.toLowerCase().includes('number') && <NumbersIcon fontSize="small" />}
+ {item.key.toLowerCase().includes('string') && <AbcIcon fontSize="small" />}
+ </span>
+ </span>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ );
+};
+
+export type QueryBuilderProps = {
+ onRunQuery?: () => void;
+};
--
GitLab