add config-algorithm for ac

web-app/client/proxy.config.js

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

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

@@ -0,0 +1,71 @@
+import { atom } from 'jotai';
+import { MFDSortBy, OrderBy, Pagination } from 'types/globalTypes';
+
+export type ACHighlight = {
+  index: number;
+  rowIndex: number;
+  withinLimit: boolean;
+  maximumDistance: string;
+  furthestPointIndex: number;
+  value: string;
+  clusterValue: string;
+};
+
+export type ACCluster = {
+  value: string;
+  highlightsTotalCount: number;
+  highlights: ACHighlight[];
+};
+
+type ACTaskAtom = {
+  taskID: string;
+  result: boolean | undefined;
+  clustersTotalCount: number;
+  clusterIndex: number;
+  cluster: ACCluster;
+  pagination: Pagination;
+  sortBy: MFDSortBy;
+  orderBy: OrderBy;
+};
+
+export const ACAtomDefaultValues: ACTaskAtom = {
+  // general task data
+  taskID: '',
+  result: undefined,
+  clustersTotalCount: 0,
+  // current cluster data
+  clusterIndex: 0,
+  cluster: {
+    value: '',
+    highlightsTotalCount: 0,
+    highlights: [],
+  },
+  pagination: {
+    offset: 0,
+    limit: 0,
+  },
+  sortBy: MFDSortBy.MAXIMUM_DISTANCE,
+  orderBy: OrderBy.ASC,
+};
+
+export const MFDAtomDefaultValuesWithParams = (
+  taskID: string,
+  clusterIndex = 0,
+  limit = 0,
+  sortBy = MFDSortBy.MAXIMUM_DISTANCE,
+  orderBy = OrderBy.ASC
+) => ({
+  ...ACAtomDefaultValues,
+  taskID,
+  clusterIndex,
+  pagination: {
+    offset: 0,
+    limit,
+  },
+  sortBy,
+  orderBy,
+});
+
+const ACAtom = atom<ACTaskAtom>(ACAtomDefaultValues);
+
+export default ACAtom;

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

@@ -6,7 +6,7 @@ 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 styles from './ConfigureAlgorithm.module.scss';
 
 type QueryProps<T extends UsedPrimitivesType> = {
   primitive: T;
@@ -34,18 +34,27 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
     formParams,
   });
 
+  const numColumnContainer = `container${
+    entries.length > 4 ? 'Over4' : 'Less4'
+  }Inputs`;
+
+  const containerOuter = entries.length > 4 ? 'bigContainer' : 'containerLess4Inputs'
+
   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={styles[containerOuter]}>
+        <div className={styles[numColumnContainer]}>
+          <PresetSelector
+            presets={formPresets}
+            isCustom={methods.formState.isDirty}
+            changePreset={changePreset}
+            isLoading={fileNameLoading}
+          />
+        </div>
+
+        <div className={styles.line} />
+        <div className={styles[numColumnContainer]}>{entries}</div>
       </div>
-      <div className={styles.line} />
-      <div className={styles.container}>{entries}</div>
     </WizardLayout>
   );
 };

web-app/client/src/styles/ConfigureAlgorithm.module.scss → web-app/client/src/components/AlgorithmFormConfigurator/ConfigureAlgorithm.module.scss

@@ -4,14 +4,31 @@
   margin-top: 16px;
 }
 
-$container-width: 466px;
-
-.container {
+.containerLess4Inputs, .bigContainer {
   margin: auto;
   flex-direction: column;
   gap: 24px;
   display: flex;
-  width: $container-width;
+  width: 100%;
+  max-width: 466px;
+}
+
+.bigContainer {
+  max-width: 1100px;
+}
+
+.containerOver4Inputs {
+  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;
+  }
 }
 
 .filler {
@@ -30,9 +47,9 @@ $container-width: 466px;
 }
 
 .line {
-  width: $container-width;
+  width: 100%;
+  grid-column: span 2;
   border: 0;
   border-top: 1px solid $black-25;
-  margin: 1em 0;
   padding: 0;
 }

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 './ConfigureAlgorithm.module.scss';
 
 const FormHeader = (
   <>

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

@@ -200,16 +200,15 @@ const useFormFactory = <T extends UsedPrimitivesType>({
               );
             }
 
-            if (fieldProps.type === 'custom')
+            if (fieldProps.type === 'custom') {
+              const Component = fieldProps.component;
               return (
+
                 <div className={'Custom'} key={fieldProps.label}>
-                  {fieldProps.component({
-                    key: fieldProps.label,
-                    ...fieldProps,
-                    ...field,
-                  })}
+                  <Component {..._.omit(fieldProps, ['component', 'rules']) as any} {...field}/>
                 </div>
               );
+            }
 
             return (
               <div key={fieldProps.label}>

web-app/client/src/components/Inputs/NumberInput/NumberInput.tsx

@@ -21,7 +21,7 @@ interface NumberInputProps {
 }
 
 type Props = InputPropsBase &
-  Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
+  Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'value'> & {
     tooltip?: ReactNode;
     numberProps?: NumberInputProps;
     onChange: (value: number) => void;

web-app/client/src/components/Inputs/NumberSlider/NumberSlider.tsx

@@ -34,7 +34,7 @@ const NumberSlider: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange,
     ...props
   },
-  ref
+  ref,
 ) => {
   const min = sliderProps?.min || 0;
   const max = sliderProps?.max || 100;
@@ -67,17 +67,25 @@ const NumberSlider: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     setTempValue(value === undefined ? '' : value?.toString());
   }, [value]);
 
-  const prepareValue = (s: string) => {
+  const placeInsideBorders = (s: string): number => {
     const parsed = Number.parseFloat(s);
-    return Number.isNaN(parsed) ? min : parsed;
+    if (!Number.isNaN(parsed)) {
+      if (parsed <= min) return min;
+      if (parsed >= max) return max;
+      return parsed;
+    } else return min;
+  };
+  const prepareValue = (s: string): number => {
+    const parsed = placeInsideBorders(s);
+    return parsed;
   };
 
   return (
     <div
       className={classNames(
         styles.inputText,
         props.disabled && styles.disabled,
-        className
+        className,
       )}
     >
       <div className={styles.top}>
@@ -88,7 +96,10 @@ const NumberSlider: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         <Text
           {...props}
           value={tempValue}
-          onBlur={(e) => onChange(prepareValue(e.target.value))}
+          onBlur={(e) => {
+            onChange(prepareValue(e.target.value));
+            setTempValue(prepareValue(e.target.value).toString());
+          }}
           onChange={(e) => setTempValue(e.currentTarget.value)}
           className={styles.text}
           ref={ref}

web-app/client/src/components/Inputs/Text/Text.tsx

@@ -30,10 +30,10 @@ const Text: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         className,
       )}
     >
-      <div className={styles.top}>
-        {label && <label htmlFor={inputId}>{label}</label>}
+      {label && <div className={styles.top}>
+        <label htmlFor={inputId}>{label}</label>
         {tooltip && <Tooltip>{tooltip}</Tooltip>}
-      </div>
+      </div>}
       <input
         type={type}
         ref={ref}

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

@@ -28,6 +28,7 @@
   align-items: center;
   padding: 0;
   position: relative;
+  text-align: center;
 }
 
 .footer {

web-app/client/src/constants/configuratorForm/ACForm/SeedCustomInputs/SeedCustomInput.module.scss

@@ -0,0 +1,9 @@
+.seedCustomInput {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+}
+
+.input {
+  width: 100%;
+}

web-app/client/src/constants/configuratorForm/ACForm/SeedCustomInputs/SeedCustomInput.tsx

@@ -0,0 +1,41 @@
+import Button from '@components/Button';
+import styles from './SeedCustomInput.module.scss';
+import { NumberInput } from '@components/Inputs';
+import {
+  FormCustomProps,
+  FormFieldProps,
+  FormNumberInputProps,
+} from 'types/form';
+import {
+  BaseSyntheticEvent,
+  FC,
+  ForwardRefRenderFunction,
+  forwardRef,
+} from 'react';
+import { ControllerRenderProps } from 'react-hook-form';
+import { ACDefaults } from '../index';
+
+//Omit<FormFieldProps<Defaults, string>, "rules"> & Record<string, any> & ControllerRenderProps<Defaults>
+
+type Props = Omit<FormCustomProps<typeof ACDefaults, 'seed'>, 'rules'> &
+  ControllerRenderProps<typeof ACDefaults, 'seed'>;
+
+const SeedCustomInput: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  props,
+  ref,
+) => {
+  const handlerRandomSeed = () => {
+    const newSeed = Math.round(Math.random() * 999_999);
+    props.onChange(newSeed);
+  };
+  return (
+    <div className={styles.seedCustomInput}>
+      <NumberInput className={styles.input} {...props} ref={ref} />
+      <Button variant="secondary" onClick={handlerRandomSeed}>
+        Random
+      </Button>
+    </div>
+  );
+};
+
+export default forwardRef(SeedCustomInput);