remove !important

web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx

@@ -16,7 +16,7 @@ import {
   NoticeProps,
 } from 'react-select';
 import ChevronDownIcon from '@assets/icons/arrow-down.svg?component';
-import EmptyButton from '@assets/icons/close.svg?component';
+import EmptyButton from '@assets/icons/cross.svg?component';
 import { InputPropsBase } from '@components/Inputs';
 import badgeStyles from '@components/Inputs/MultiSelect/OptionBadge/OptionBadge.module.scss';
 import { Option as OptionType } from 'types/inputs';

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

@@ -17,3 +17,7 @@
     margin-left: 24px;
   }
 }
+
+.cross {
+  color: $white;
+}

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

@@ -1,5 +1,5 @@
 import { FC, useLayoutEffect, useReducer, useRef } from 'react';
-import Cross from '@assets/icons/white-cross.svg?component';
+import Cross from '@assets/icons/cross.svg?component';
 import styles from './MobileBanner.module.scss';
 
 const isMobile = () =>
@@ -37,7 +37,7 @@ const MobileBanner: FC = () => {
         unavailable.
       </small>
       <button aria-label="close" className={styles.close} onClick={hide}>
-        <Cross />
+        <Cross className={styles.cross} />
       </button>
     </div>
   );

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

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import { useEffect } from 'react';
 import { animated, useSpring } from 'react-spring';
-import CloseIcon from '@assets/icons/close.svg?component';
+import CloseIcon from '@assets/icons/cross.svg?component';
 import OutsideClickObserver from '@components/OutsideClickObserver';
 import { FCWithChildren } from 'types/react';
 import styles from './ModalContainer.module.scss';

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

@@ -61,7 +61,7 @@
       padding: 8px 24px;
     }
 
-    tr:nth-child(even) {
+    tr.alternate:nth-child(even) {
       background-color: $black-05;
     }
   }
@@ -87,6 +87,7 @@
     display: none;
   }
 }
+
 .disabled .table tbody {
   td {
     color: $black-10;

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

@@ -23,6 +23,7 @@ const Table: FC<TableProps> = ({
   hiddenColumnIndices,
   onScroll,
   className,
+  alternateRowColors = true,
 }) => {
   const threshold = 200;
 
@@ -94,7 +95,7 @@ const Table: FC<TableProps> = ({
     >
       <table className={styles.table}>
         <thead>
-          <tr>
+          <tr className={classNames(alternateRowColors && styles.alternate)}>
             {displayHeader.map((item, columnIndex) => (
               <td
                 key={item}

web-app/client/src/components/ScrollableNodeTable/TableTypes.ts

@@ -17,4 +17,5 @@ export type TableProps = {
   hiddenColumnIndices?: number[];
   onScroll?: (direction: ScrollDirection) => void;
   className?: string;
+  alternateRowColors?: boolean;
 };

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

@@ -5,29 +5,23 @@
 }
 
 .greenOdd {
-  background: $success-10 !important; // stylelint-disable-line declaration-no-important
+  background: $success-10;
 }
 
 .redEven {
   background: $error-05;
 }
 
 .redOdd {
-  background: $error-10 !important; // stylelint-disable-line declaration-no-important
+  background: $error-10;
 }
 
 .checkmark {
-  path {
-    fill: $success-100;
-    stroke: none;
-  }
+  color: $success-100;
 }
 
 .cross {
-  path {
-    fill: $error-100;
-    stroke: none;
-  }
+  color: $error-100;
 }
 
 .valueText {

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

@@ -1,3 +1,4 @@
+import { FC, useMemo } from 'react';
 import Check from '@assets/icons/check.svg?component';
 import Cross from '@assets/icons/cross.svg?component';
 
@@ -6,7 +7,6 @@ import Table, {
   ScrollDirection,
   TableProps,
 } from '@components/ScrollableNodeTable';
-import { FC, useMemo } from 'react';
 
 import styles from './AFDTable.module.scss';
 
@@ -44,7 +44,7 @@ const getAFDRow: (row: AFDTableRow, position: number) => Row = (
       row.isFrequent ? (
         <Check className={styles.checkmark} height={20} width={20} />
       ) : (
-        <Cross height={20} width={20} />
+        <Cross className={styles.cross} height={20} width={20} />
       ),
       ...row.snippetRow,
     ],

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

@@ -1,41 +1,35 @@
 @import "styles/common";
 
 .greenHighlighted {
-  background: $success-25 !important; // stylelint-disable-line declaration-no-important
+  background: $success-25;
 }
 
 .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
+  background: $success-10;
 }
 
 .redHighlighted {
-  background: $error-25 !important; // stylelint-disable-line declaration-no-important
+  background: $error-25;
 }
 
 .redEven {
-  background: $error-05 !important; // stylelint-disable-line declaration-no-important
+  background: $error-05;
 }
 
 .redOdd {
-  background: $error-10 !important; // stylelint-disable-line declaration-no-important
+  background: $error-10;
 }
 
 .checkmark {
-  path {
-    fill: $success-100;
-    stroke: none;
-  }
+  color: $success-100;
 }
 
 .cross {
-  path {
-    fill: $error-100;
-    stroke: none;
-  }
+  color: $error-100;
 }
 
 .valueText {

web-app/client/src/components/ScrollableNodeTable/implementations/MFDTable.tsx

@@ -66,7 +66,7 @@ const getMFDRow: (
       highlight.withinLimit ? ( // icon
         <Check className={styles.checkmark} height={20} width={20} />
       ) : (
-        <Cross height={20} width={20} />
+        <Cross className={styles.cross} height={20} width={20} />
       ),
       highlight.maximumDistance, // maximum distance
       highlight.index, // index

web-app/client/src/components/Toast/ToastContainer.module.scss

@@ -71,3 +71,7 @@
     opacity: 0.9;
   }
 }
+
+.cross {
+  color: $white;
+}

web-app/client/src/components/Toast/ToastContainer.tsx

@@ -4,12 +4,12 @@ import {
   ToastContainer as TostifyToastContainer,
   CloseButtonProps,
 } from 'react-toastify';
-import Cross from '@assets/icons/white-cross.svg?component';
+import Cross from '@assets/icons/cross.svg?component';
 import styles from './ToastContainer.module.scss';
 
 const CloseButton: FC<CloseButtonProps> = ({ closeToast, ariaLabel }) => (
   <button onClick={closeToast} aria-label={ariaLabel} className={styles.close}>
-    <Cross />
+    <Cross className={styles.cross} />
   </button>
 );
 

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+const DescriptionCFD: FC = () => {
+  return (
+    <>
+      Conditional functional dependencies are relaxed form of functional
+      dependencies and are mainly used for data cleaning and error detection
+      problems. A single CFD is represented by two entities:
+      <ol>
+        <li>a binary relationship between disjoint sets of attributes and </li>
+        <li>
+          conditions (also known as pattern tableau) which specify the subset of
+          tuples on which a relationship holds.
+        </li>
+      </ol>
+      CFDs mining process is parameterized by confidence and support levels,
+      which makes CFD in terms of resources consumption more complex concept
+      than FD.
+    </>
+  );
+};
+
+export default DescriptionCFD;

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { MainPrimitiveType } from 'types/globalTypes';
 import DescriptionAFD from './descriptionAFD';
+import DescriptionCFD from './descriptionCFD';
 
 export type PrimitiveInfoType = {
   label: string;
@@ -17,8 +18,7 @@ const primitiveInfo: Partial<Record<MainPrimitiveType, PrimitiveInfoType>> = {
   },
   [MainPrimitiveType.CFD]: {
     label: 'Conditional Functional Dependencies',
-    description:
-      'Conditional functional dependencies are relaxed form of functional dependencies and are mainly used for data cleaning and error detection problems. A single CFD is represented by two entities: (1) a binary relationship between disjoint sets of attributes and (2) conditions (also known as pattern tableau) which specify the subset of tuples on which a relationship holds. CFDs mining process is parameterized by confidence and support levels, which makes CFD in terms of resources consumption more complex concept than FD.',
+    description: <DescriptionCFD />,
     link: 'https://mstrutov.github.io/Desbordante/guides/cfd-mining.html',
   },
   [MainPrimitiveType.AR]: {

web-app/client/src/pages/reports/approximate-dependencies.tsx

@@ -1,3 +1,5 @@
+import React, { ReactElement, useCallback, useRef, useState } from 'react';
+import { FormProvider } from 'react-hook-form';
 import EyeIcon from '@assets/icons/eye.svg?component';
 import ArrowCrossed from '@assets/icons/line-arrow-right-crossed.svg?component';
 import Arrow from '@assets/icons/line-arrow-right.svg?component';
@@ -10,29 +12,45 @@ import Pagination from '@components/Pagination/Pagination';
 import ReportFiller from '@components/ReportFiller/ReportFiller';
 import ReportsLayout from '@components/ReportsLayout';
 
+import { ScrollDirection } from '@components/ScrollableNodeTable';
 import { AFDTable } from '@components/ScrollableNodeTable/implementations/AFD/AFDTable';
 import styles from '@styles/ApproximateDependencies.module.scss';
 
-import React, { ReactElement, useState } from 'react';
-import { FormProvider } from 'react-hook-form';
 import { PrimitiveType } from 'types/globalTypes';
 import { NextPageWithLayout } from 'types/pageWithLayout';
 import { data } from './AFDFakeData';
-import { Scrolling } from './onScroll';
 
 const ReportsAFD: NextPageWithLayout = () => {
-  const [clusterIndex, setClusterIndex] = useState(0);
+  const defaultLimit = 150;
+  const defaultOffsetDifference = 50;
+  const maxLimit = data.result.clustersTotalCount;
 
+  const [clusterIndex, setClusterIndex] = useState(0);
   const [isOrderingShown, setIsOrderingShown] = useState(false);
   const [isVisibilityShown, setIsVisibilityShown] = useState(false);
+  const shouldIgnoreScrollEvent = useRef(false);
+
+  const [limit, setLimit] = useState(defaultLimit);
 
   const { threshold, violatingRows, clustersTotalCount } = data.result;
   const { frequentness, mostFrequentValue, size, distinctRHSValues } =
     data.clusterInfo;
 
   const methods = useFilters(PrimitiveType.AFD);
 
-  const onScroll = Scrolling();
+  const onScroll = useCallback(
+    (direction: ScrollDirection) => {
+      if (!shouldIgnoreScrollEvent.current && direction === 'down') {
+        shouldIgnoreScrollEvent.current = true;
+        if (limit < maxLimit) {
+          setLimit((limit) => limit + defaultOffsetDifference);
+        } else {
+          shouldIgnoreScrollEvent.current = false;
+        }
+      }
+    },
+    [limit, defaultOffsetDifference, maxLimit],
+  );
 
   return (
     <>
@@ -64,10 +82,8 @@ const ReportsAFD: NextPageWithLayout = () => {
           )}
           {!clustersTotalCount && !data.result && (
             <ReportFiller
-              title={
-                'No clusters have been discovered (functional dependency may not hold)'
-              }
-              description={'Try restarting the task with different parameters'}
+              title="No clusters have been discovered (functional dependency may not hold)"
+              description="Try restarting the task with different parameters"
               icon={<ArrowCrossed />}
             />
           )}