fix some comments

Desbordante · Dec 9, 2023 · 67f2bdf · 67f2bdf
1 parent b824685
commit 67f2bdf
Show file tree

Hide file tree

Showing 40 changed files with 975 additions and 726 deletions.
diff --git a/web-app/client/.gitignore b/web-app/client/.gitignore
@@ -43,4 +43,4 @@ cmsTypes.ts
 .graphqlconfig
 schema.graphql
 
-web-app\client\proxy.config.js
+proxy.config.js
diff --git a/web-app/client/package.json b/web-app/client/package.json
@@ -62,7 +62,6 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/apollo-upload-client": "^17.0.1",
     "@types/classnames": "^2.3.1",
     "@types/clientjs": "^0.2.0",

diff --git a/web-app/client/src/atoms/ACTaskAtom.ts b/web-app/client/src/atoms/ACTaskAtom.ts
@@ -1,11 +1,12 @@
-import { Intervals } from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
+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: Intervals[];
+  intervals: Interval[];
   outliers: number[];
 };
 

diff --git a/...onents/АС/Intervals/Intervals.module.scss → ...ponents/ACInstance/ACInstance.module.scss b/...onents/АС/Intervals/Intervals.module.scss → ...ponents/ACInstance/ACInstance.module.scss
@@ -2,61 +2,51 @@
 
 .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;
-  background-color: $white;
-  border: solid 2px $black;
-  border-radius: 8px;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
 }
 
 .icons {
-  color: $black-75;
   width: 16px;
   height: 16px;
+  color: $black-75;
 }
 
 .containerInner {
-  min-width: 0;
-  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
-}
-
-.default {
-  background-color: $white-25;
-  border-color: $black-50;
-}
-
-.error {
-  background-color: $error-10;
-  border-color: $error;
+  width: 100%;
+  min-width: 0;  
 }
 
 .selected {
-  background-color: $secondary-1;
   border-color: $primary-0;
+  background-color: $secondary-1;
 }
 
 .attributes {
   display: flex;
-  gap: 8px;
   align-items: center;
+  gap: 8px;
 }
 
 .attr {
   @include paragraph-small;
-  border-radius: 8px;
-  text-align: center;
-  background: $black-10;
   border: 2px solid transparent;
-  color: $black-75;
+  border-radius: 8px;  
   padding-left: 8px;
   padding-right: 8px;
+  background: $black-10;
+  text-align: center;
+  color: $black-75;
 }
diff --git a/web-app/client/src/components/ACInstance/ACInstance.tsx b/web-app/client/src/components/ACInstance/ACInstance.tsx
@@ -0,0 +1,86 @@
+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 cn from 'classnames';
+import { useAtom } from 'jotai';
+import { FC } from 'react';
+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: id,
+      attribute1: attributes.attr1,
+      attribute2: attributes.attr2,
+      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.attr}>{attributes.attr1}</div>
+          <OperationIcon className={styles.icons}/>
+
+          <div className={styles.attr}>{attributes.attr2}</div>
+        </div>
+      </div>
+      <CollapsableView
+        title="Intervals"
+        output={intervals.intervals.map((elem) => `[${elem[0]}, ${elem[1]}]`)}
+        amount={intervals.amount}
+      />
+      <CollapsableView
+        title="Outliers"
+        output={outliers.outliers.map((elem) => elem.toString())}
+      />
+    </div>
+  );
+};
+
+export default ACInstance;
diff --git a/web-app/client/src/components/ACInstance/index.ts b/web-app/client/src/components/ACInstance/index.ts
@@ -0,0 +1 @@
+export { default } from './ACInstance';
diff --git a/web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.tsx b/web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.tsx
@@ -1,12 +1,11 @@
+import cn from 'classnames';
+import { useRouter } from 'next/router';
 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 cn from 'classnames';
-import { useRouter } from 'next/router';
-import React from 'react';
 import styles from './ConfigureAlgorithm.module.scss';
 
 type QueryProps<T extends UsedPrimitivesType> = {
@@ -34,11 +33,7 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
     primitive,
     formParams,
   });
-
-  const numColumnContainer = `container${
-    entries.length > 4 ? 'Over4' : 'Less4'
-  }Inputs`;
-
+
   return (
     <WizardLayout header={FormHeader} footer={FormFooter(router, onSubmit)}>
       <div
@@ -47,7 +42,15 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
           entries.length > 4 && styles.bigFormContainer,
         )}
       >
-        <div className={styles[numColumnContainer]}>
+        <div
+          className={
+            styles[
+              entries.length > 4
+                ? 'containerOver4Inputs'
+                : 'baseFormContainer'
+            ]
+          }
+        >
           <PresetSelector
             presets={formPresets}
             isCustom={methods.formState.isDirty}
@@ -57,7 +60,17 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
         </div>
 
         <div className={styles.line} />
-        <div className={styles[numColumnContainer]}>{entries}</div>
+        <div
+          className={
+            styles[
+              entries.length > 4
+                ? 'containerOver4Inputs'
+                : 'containerLess4Inputs'
+            ]
+          }
+        >
+          {entries}
+        </div>
       </div>
     </WizardLayout>
   );

diff --git a/web-app/client/src/components/AlgorithmFormConfigurator/ConfigureAlgorithm.module.scss b/web-app/client/src/components/AlgorithmFormConfigurator/ConfigureAlgorithm.module.scss
@@ -4,12 +4,11 @@
   margin-top: 16px;
 }
 
-
-.baseFormContainer {
-  margin: auto;
+.baseFormContainer, .containerLess4Inputs {
+  display: flex;
   flex-direction: column;
   gap: 24px;
-  display: flex;
+  margin: auto;
   width: 100%;
   max-width: 466px;
 }
@@ -18,15 +17,6 @@
   max-width: 1100px;
 }
 
-.containerLess4Inputs {
-  margin: auto;
-  flex-direction: column;
-  gap: 24px;
-  display: flex;
-  width: 100%;
-  max-width: 466px;
-}
-
 .containerOver4Inputs {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -42,9 +32,9 @@
 }
 
 .line {
-  width: 100%;
   grid-column: span 2;
   border: 0;
   border-top: 1px solid $black-25;
+  width: 100%;
   padding: 0;
 }