add description

Author: LiaSolo

web-app/client/src/components/Filters/AFDVisibilityWindow.tsx

@@ -8,12 +8,10 @@ import { AFDSortRowsBy, OrderBy } from 'types/globalTypes';
 import { FiltersFields } from './Filters';
 
 type VisibilityProps = {
-  setIsVisibilityShown: (arg: boolean) => void;
+  onCloseWindow: () => void;
 };
 
-export const VisibilityWindow: FC<VisibilityProps> = ({
-  setIsVisibilityShown,
-}) => {
+export const VisibilityWindow: FC<VisibilityProps> = ({ onCloseWindow }) => {
   const baseForm = useFormContext();
 
   const { control, watch, reset } = useForm<Partial<FiltersFields>>({
@@ -26,7 +24,6 @@ export const VisibilityWindow: FC<VisibilityProps> = ({
   const initialShowOnlyLRHS = watch('showOnlyLRHS') as boolean;
   const [isShowOnlyLRHS, setShowOnlyLRHS] = useState(initialShowOnlyLRHS);
   const { rowsOrdering, direction } = watch();
-  console.log(rowsOrdering);
 
   const orderingOptions = [
     { value: AFDSortRowsBy.RHS_VALUES, label: 'RHS values' },
@@ -43,13 +40,13 @@ export const VisibilityWindow: FC<VisibilityProps> = ({
       name="Visibility"
       onClose={() => {
         reset();
-        setIsVisibilityShown(false);
+        onCloseWindow();
       }}
       onApply={() => {
         baseForm.setValue('rowsOrdering', rowsOrdering);
         baseForm.setValue('direction', direction);
         baseForm.setValue('showOnlyLRHS', isShowOnlyLRHS);
-        setIsVisibilityShown(false);
+        onCloseWindow();
       }}
     >
       <Checkbox
@@ -60,7 +57,7 @@ export const VisibilityWindow: FC<VisibilityProps> = ({
       <ControlledSelect
         control={control}
         controlName="rowsOrdering"
-        label={'Order rows by'}
+        label="Order rows by"
         options={orderingOptions}
       />
       <ControlledSelect

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

@@ -3,6 +3,17 @@
 .description {
   display: block;
 
+  ol {
+    list-style: decimal;
+    margin-left: 16px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+    li {
+      margin-bottom: 8px;
+    }
+  }
+
   svg {
     transform: translateY(2px);
   }

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

@@ -0,0 +1,43 @@
+@import "styles/common";
+
+.container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filler {
+  height: 80px;
+  width: fit-content;
+  margin: auto;
+  display: flex;
+  align-items: center;
+
+  .icon {
+    height: 80px;
+    width: 80px;
+    border-radius: 24px;
+    padding: 16px;
+    margin-right: 16px;
+    background-color: $primary-10;
+
+    svg {
+      height: 48px;
+      width: 48px;
+      color: $primary-0;
+    }
+  }
+
+  .text {
+    h6 {
+      @include heading-6;
+      margin-bottom: 8px;
+    }
+
+    p {
+      @include paragraph-small;
+      color: $black-75;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import styles from './ReportFiller.module.scss';
+
+type ReportFillerProps = {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+};
+const ReportFiller: FC<ReportFillerProps> = ({ title, description, icon }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.filler}>
+        {icon && <div className={styles.icon}>{icon}</div>}
+        <div className={styles.text}>
+          <h6>{title}</h6>
+          {description && <p>{description}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReportFiller;

web-app/client/src/components/ScrollableNodeTable/implementations/AFD/AFDTable.module.scss

@@ -1,23 +1,15 @@
 @import "styles/common";
 
-.greenHighlighted {
-  background: $success-25 !important; // stylelint-disable-line declaration-no-important
-}
-
 .greenEven {
-  background: $success-05 !important; // stylelint-disable-line declaration-no-important
+  background: $success-05;
 }
 
 .greenOdd {
   background: $success-10 !important; // stylelint-disable-line declaration-no-important
 }
 
-.redHighlighted {
-  background: $error-25 !important; // stylelint-disable-line declaration-no-important
-}
-
 .redEven {
-  background: $error-05 !important; // stylelint-disable-line declaration-no-important
+  background: $error-05;
 }
 
 .redOdd {

web-app/client/src/components/ScrollableNodeTable/implementations/AFD/AFDTable.tsx

@@ -41,7 +41,7 @@ const getAFDRow: (row: AFDTableRow, position: number) => Row = (
 ) => {
   return {
     items: [
-      row.isFrequent ? ( // icon
+      row.isFrequent ? (
         <Check className={styles.checkmark} height={20} width={20} />
       ) : (
         <Cross height={20} width={20} />

web-app/client/src/constants/configuratorForm/AFDForm.tsx

@@ -1,42 +1,26 @@
 import { useQuery } from '@apollo/client';
-import { useEffect, useMemo } from 'react';
 import badgeStyles from '@components/Inputs/MultiSelect/OptionBadge/OptionBadge.module.scss';
-import {
-  MFDAlgoOptions,
-  MFDColumnType,
-  MFDColumnTypeOptions,
-  MFDDistancesOptions,
-  MFDMetricOption,
-  MFDMetricOptions,
-  optionsByMetrics,
-} from '@constants/options';
+import { AFDOptions } from '@constants/options';
 import {
   getCountOfColumns,
   getCountOfColumns_datasetInfo_statsInfo_stats,
   getCountOfColumnsVariables,
 } from '@graphql/operations/queries/__generated__/getCountOfColumns';
 import { GET_COUNT_OF_COLUMNS } from '@graphql/operations/queries/getDatasetColumnCount';
 import { showError } from '@utils/toasts';
+import { useEffect, useMemo } from 'react';
 import {
   Defaults,
   FormFieldsProps,
-  CreateFormProcessor,
   CreateForm,
   FormSelectOptions,
   FormHook,
   Presets,
 } from 'types/form';
 import { OptionWithBadges } from 'types/multiSelect';
 
-const TypesCategories: Record<string, string> = {
-  Int: 'Numeric',
-  Double: 'Numeric',
-  BigInt: 'Numeric',
-  String: 'String',
-};
-
 const AFDDefaults = {
-  algorithmName: 'ApproximateVerification',
+  algorithmName: 'Naive AFD Verifier',
   lhsIndices: [] as number[],
   rhsIndices: [] as number[],
 } satisfies Defaults;
@@ -56,9 +40,10 @@ const AFDPresets: Presets<typeof AFDDefaults> = [
 const AFDFields = {
   algorithmName: {
     order: 0,
-    type: 'hidden_value',
-    label: '',
-    isDisplayable: false,
+    type: 'select',
+    label: 'Algorithm',
+    isLoading: false,
+    options: AFDOptions,
   },
   lhsIndices: {
     order: 1,
@@ -68,9 +53,8 @@ const AFDFields = {
     isLoading: true as boolean,
     rules: {
       validate: (value) => {
-        if (Array.isArray(value))
-          return value.length > 0 ? undefined : 'Cannot be empty';
-        return undefined;
+        if (Array.isArray(value) && value.length === 0)
+          return 'Cannot be empty';
       },
     },
   },
@@ -138,7 +122,6 @@ const useAFDFormHook: FormHook<typeof AFDDefaults, typeof AFDFields> = (
     }
   }, [columnData, loading, setForm]);
 };
-  
 
 export const AFDForm = CreateForm({
   formDefaults: AFDDefaults,

web-app/client/src/constants/descriptionAFD.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+const DescriptionAFD: FC = () => {
+  return (
+    <>
+      This task checks whether a single FD holds over a provided table. In case
+      if exact FD does not hold, then:
+      <ol>
+        <li>
+          the approximate FD is checked and the error threshold is returned,
+        </li>
+        <li>
+          the data that violates the FD is shown in the form of clusters — all
+          different RHS values for a fixed LHS one.
+        </li>
+      </ol>
+      For the notion of the approximate FD and the error threshold, check{' '}
+      <a href="https://www.vldb.org/pvldb/vol11/p759-kruse.pdf">
+        “Efficient discovery of approximate dependencies”
+      </a>{' '}
+      by S. Kruse and F. Naumann.
+    </>
+  );
+};
+
+export default DescriptionAFD;

web-app/client/src/constants/options.ts

@@ -25,6 +25,7 @@ const FDAlgorithms = [
 type FDAlgorithm = (typeof FDAlgorithms)[number];
 type CFDAlgorithm = 'CTane';
 type ARAlgorithm = 'Apriori';
+type AFDAlgorithm = 'Naive AFD Verifier';
 
 // const MFDAlgorithms = ['BRUTE', 'APPROX', 'CALIPERS'] as const;
 const MFDAlgorithms = ['Brute', 'Approx', 'Calipers'] as const;
@@ -35,7 +36,8 @@ export type Algorithms =
   | FDAlgorithm
   | CFDAlgorithm
   | ARAlgorithm
-  | MFDAlgorithm;
+  | MFDAlgorithm
+  | AFDAlgorithm;
 
 type AlgoProps = 'arity' | 'threshold' | 'threads';
 
@@ -50,6 +52,7 @@ export const TypoOptions = FDoptions;
 export const CFDoptions: AlgoOption[] = [toAlgoOption('CTane')];
 export const ARoptions: AlgoOption[] = [toAlgoOption('Apriori')];
 export const ApproxOptions: AlgoOption[] = [toAlgoOption('Pyro')];
+export const AFDOptions: AlgoOption[] = [toAlgoOption('Naive AFD Verifier')];
 
 const toScreamingSnakeAlgoOption = (algo: Algorithms): AlgoOption => {
   return {

…lient/src/constants/primitiveInfoType.ts …ient/src/constants/primitiveInfoType.tsxweb-app/client/src/constants/primitiveInfoType.ts renamed to web-app/client/src/constants/primitiveInfoType.tsx web-app/client/src/constants/primitiveInfoType.ts renamed to web-app/client/src/constants/primitiveInfoType.tsx

@@ -1,16 +1,18 @@
+import { ReactNode } from 'react';
 import { MainPrimitiveType } from 'types/globalTypes';
+import DescriptionAFD from './descriptionAFD';
 
 export type PrimitiveInfoType = {
   label: string;
-  description: string;
+  description: ReactNode;
   link?: string;
 };
 
 const primitiveInfo: Partial<Record<MainPrimitiveType, PrimitiveInfoType>> = {
   [MainPrimitiveType.FD]: {
-    label: 'Functional Dependencies',
+    label: 'Functional Dependency Discovery',
     description:
-      'Functional dependencies are crucial metadata for performing schema normalization, data cleaning and various data profiling tasks. A single FD represents a relationship between two disjoint sets of attributes, which states that the values from one set uniquely determine the values of another. Such hidden patterns provide a great start to get to know your data.',
+      'Functional dependencies are crucial metadata for performing schema normalization, data cleaning and various data profiling tasks. A single FD represents a relationship between two disjoint sets of attributes, which states that the values from one set uniquely determine the values of another. Such hidden patterns provide a great start to get to know your data. This task discovers all FDs (either exact or approximate) contained in a provided table.',
     link: 'https://mstrutov.github.io/Desbordante/guides/fd-mining.html',
   },
   [MainPrimitiveType.CFD]: {
@@ -37,8 +39,8 @@ const primitiveInfo: Partial<Record<MainPrimitiveType, PrimitiveInfoType>> = {
       'Metric verification is a process of checking whether a specific metric functional dependency (MFD) holds on data or not. MFD is a relaxed form of classic functional dependencies which allows small variations in the values of the right hand side of a dependency. It other words, for MFD X⟶Y we still expect two different tuples to agree on values of attributes in X, but their values on Y can differ no more than some threshold. MFD can be verified for numeric and string types using different metrics. Currently available are: Euclidean, Levenshtein and Cosine. Results of metric verification process are presented as clusters of records which share the same left hand side, but differ in the right one. If distance of records\' values too far from any points of the same cluster, they are tagged with an "X" mark. A check mark is used otherwise.',
   },
   [MainPrimitiveType.AFD]: {
-    label: 'Approximate Functional Dependencies',
-    description: 'Description',
+    label: 'Functional Dependency Validation',
+    description: <DescriptionAFD />,
   },
 } as const;