Algebraic Constraints Frontend

web-app/client/package.json

@@ -48,6 +48,7 @@
     "react-select": "^5.4.0",
     "react-spring": "^9.5.2",
     "react-toastify": "^9.1.1",
+    "recharts": "^2.10.3",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "yup": "^0.32.11"
@@ -72,6 +73,7 @@
     "@types/react-collapse": "^5.0.1",
     "@types/react-dom": "18.0.6",
     "@types/react-outside-click-handler": "^1.3.1",
+    "@types/recharts": "^1.8.28",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^6.5.0",

web-app/client/proxy.config.js

@@ -28,5 +28,5 @@ module.exports = async () => {
       source: `${cmsProxyURL}/:path*`,
       destination: `${cmsGraphQLEndpoint}/:path*`,
     },
-  ]
+  ];
 };

web-app/client/src/atoms/ACTaskAtom.ts

@@ -0,0 +1,53 @@
+import { Interval } from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
+import { atom } from 'jotai';
+import { ACSortBy, OrderBy, Pagination } from 'types/globalTypes';
+
+export type ACInstance = {
+  id: string;
+  attribute1: string;
+  attribute2: string;
+  intervals: Interval[];
+  outliers: number[];
+};
+
+type ACTaskAtom = {
+  taskID: string;
+  instanceSelected: ACInstance | null;
+  pagination: Pagination;
+  sortBy: ACSortBy;
+  orderBy: OrderBy;
+};
+
+export const ACAtomDefaultValues: ACTaskAtom = {
+  // general task data
+  taskID: '',
+  instanceSelected: null,
+  pagination: {
+    offset: 0,
+    limit: 6,
+  },
+  sortBy: ACSortBy.NUMBER_OF_INTERVALS,
+  orderBy: OrderBy.ASC,
+};
+
+export const ACAtomDefaultValuesWithParams = (
+  taskID: string,
+  instanceSelected: ACInstance | null,
+  sortBy = ACSortBy.NUMBER_OF_INTERVALS,
+  orderBy = OrderBy.ASC,
+  offset = 0,
+) => ({
+  ...ACAtomDefaultValues,
+  instanceSelected,
+  taskID,
+  pagination: {
+    offset,
+    limit: 6,
+  },
+  sortBy,
+  orderBy,
+});
+
+const ACAtom = atom<ACTaskAtom>(ACAtomDefaultValues);
+
+export default ACAtom;

web-app/client/src/components/ACInstance/ACInstance.module.scss

@@ -0,0 +1,52 @@
+@import "styles/common";
+
+.containerOuter {
+  @include paragraph-small;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  border: solid 2px $black-50;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 16px;
+  max-width: 836px;
+  background-color: $white-25;
+  cursor: pointer;
+}
+
+.icons {
+  width: 16px;
+  height: 16px;
+  color: $black-75;
+}
+
+.containerInner {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.selected {
+  border-color: $primary-0;
+  background-color: $secondary-1;
+}
+
+.attributes {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.attribute {
+  @include paragraph-small;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+  background: $black-10;
+  text-align: center;
+  color: $black-75;
+}

web-app/client/src/components/ACInstance/ACInstance.tsx

@@ -0,0 +1,93 @@
+import cn from 'classnames';
+import { useAtom } from 'jotai';
+import { FC } from 'react';
+import DivisionIcon from '@assets/icons/division.svg?component';
+import MinusIcon from '@assets/icons/minus.svg?component';
+import MultiplicationIcon from '@assets/icons/multiplication.svg?component';
+import PlusIcon from '@assets/icons/plus.svg?component';
+import ACAtom, {
+  ACAtomDefaultValuesWithParams,
+  ACInstance,
+} from '@atoms/ACTaskAtom';
+import {
+  GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_attributes,
+  GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_intervals,
+  GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_outliers,
+  Operation,
+} from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
+import CollapsableView from '../CollapsableView';
+import styles from './ACInstance.module.scss';
+
+type Props = {
+  id: string;
+  attributes: GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_attributes;
+  operation: Operation;
+  outliers: GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_outliers;
+  intervals: GetMainTaskDeps_taskInfo_TaskInfo_data_result_ACTaskResult_ACs_intervals;
+};
+
+export const operationIcons = {
+  [Operation.ADDITION]: PlusIcon,
+  [Operation.MULTIPLICATION]: MultiplicationIcon,
+  [Operation.DIVISION]: DivisionIcon,
+  [Operation.SUBTRACTION]: MinusIcon,
+};
+
+const ACInstance: FC<Props> = ({
+  id,
+  attributes,
+  operation,
+  outliers,
+  intervals,
+}) => {
+  const [atom, setAtom] = useAtom(ACAtom);
+  const handleSelect = () => {
+    const instance: ACInstance = {
+      id,
+      attribute1: attributes.attribute1,
+      attribute2: attributes.attribute2,
+      intervals: intervals.intervals,
+      outliers: outliers.outliers,
+    };
+    setAtom({ ...ACAtomDefaultValuesWithParams(atom.taskID, instance) });
+  };
+
+  const OperationIcon = operationIcons[operation as Operation];
+
+  const isSelected = atom.instanceSelected?.id === id;
+
+  return (
+    <div
+      className={cn(styles.containerOuter, isSelected && styles.selected)}
+      onClick={handleSelect}
+    >
+      <div className={styles.containerInner}>
+        Operation
+        <div className={styles.attributes}>
+          <div className={styles.attribute}>{attributes.attribute1}</div>
+          <OperationIcon className={styles.icons} />
+
+          <div className={styles.attribute}>{attributes.attribute2}</div>
+        </div>
+      </div>
+      <CollapsableView title={`Intervals (${intervals.amount})`}>
+        {intervals.intervals.map((elem) => (
+          <>
+            <span
+              key={`intervals ${elem[0]} ${elem[1]}`}
+            >{`[${elem[0]}, ${elem[1]}]`}</span>{' '}
+          </>
+        ))}
+      </CollapsableView>
+      <CollapsableView title={`Outliers (${outliers.amount})`}>
+        {outliers.outliers.map((elem) => (
+          <>
+            <span key={`Outliers ${elem}`}>{elem}</span>{' '}
+          </>
+        ))}
+      </CollapsableView>
+    </div>
+  );
+};
+
+export default ACInstance;

web-app/client/src/components/ACInstance/index.ts

@@ -0,0 +1 @@
+export { default } from './ACInstance';

web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.module.scss

@@ -0,0 +1,40 @@
+@import "styles/common";
+
+.description {
+  margin-top: 16px;
+}
+
+.baseFormContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: auto;
+  width: 100%;
+  max-width: 466px;
+}
+
+.expandedFormContainer {
+  max-width: 1100px;
+}
+
+.expandedInputsContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 32px;
+  row-gap: 24px;
+  width: 100%;
+
+  @media (max-width: 960px) {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+}
+
+.line {
+  grid-column: span 2;
+  border: 0;
+  border-top: 1px solid $black-25;
+  width: 100%;
+  padding: 0;
+}

web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.tsx

@@ -1,12 +1,12 @@
-import { useRouter } from 'next/router';
-import React from 'react';
 import FormFooter from '@components/AlgorithmFormConfigurator/FormFooter';
 import FormHeader from '@components/AlgorithmFormConfigurator/FormHeader';
 import useFormFactory from '@components/AlgorithmFormConfigurator/useFormFactory';
 import PresetSelector from '@components/PresetSelector';
 import WizardLayout from '@components/WizardLayout';
 import { UsedPrimitivesType } from '@constants/formPrimitives';
-import styles from '@styles/ConfigureAlgorithm.module.scss';
+import cn from 'classnames';
+import { useRouter } from 'next/router';
+import styles from './AlgorithmFormConfigurator.module.scss';
 
 type QueryProps<T extends UsedPrimitivesType> = {
   primitive: T;
@@ -36,16 +36,38 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
 
   return (
     <WizardLayout header={FormHeader} footer={FormFooter(router, onSubmit)}>
-      <div className={styles.container}>
-        <PresetSelector
-          presets={formPresets}
-          isCustom={methods.formState.isDirty}
-          changePreset={changePreset}
-          isLoading={fileNameLoading}
-        />
+      <div
+        className={cn(
+          styles.baseFormContainer,
+          entries.length > 4 && styles.expandedFormContainer,
+        )}
+      >
+        <div
+          className={
+            entries.length > 4
+              ? styles.expandedInputsContainer
+              : styles.baseFormContainer
+          }
+        >
+          <PresetSelector
+            presets={formPresets}
+            isCustom={methods.formState.isDirty}
+            changePreset={changePreset}
+            isLoading={fileNameLoading}
+          />
+        </div>
+
+        <div className={styles.line} />
+        <div
+          className={
+            entries.length > 4
+              ? styles.expandedInputsContainer
+              : styles.baseFormContainer
+          }
+        >
+          {entries}
+        </div>
       </div>
-      <div className={styles.line} />
-      <div className={styles.container}>{entries}</div>
     </WizardLayout>
   );
 };

web-app/client/src/components/AlgorithmFormConfigurator/FormHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '@styles/ConfigureAlgorithm.module.scss';
+import styles from './AlgorithmFormConfigurator.module.scss';
 
 const FormHeader = (
   <>