remove !important

LiaSolo · LiaSolo · commit b778af9e2a25 · 2024-01-07T16:14:46.000+03:00
diff --git a/web-app/client/src/assets/icons/check.svg b/web-app/client/src/assets/icons/check.svg
@@ -1,3 +1,3 @@
-<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.541283 4.50023C0.545495 4.50515 0.549897 4.5099 0.554477 4.51448L2.87226 6.83004C2.96992 6.92761 3.12818 6.92755 3.22577 6.82991L7.44355 2.6099C7.44808 2.60537 7.45244 2.60066 7.45661 2.59579C7.53397 2.50545 7.5744 2.38925 7.56981 2.2704C7.56522 2.15155 7.51595 2.03882 7.43185 1.95472C7.34775 1.87062 7.23501 1.82135 7.11616 1.81676C6.99732 1.81217 6.88111 1.85259 6.79078 1.92996C6.78593 1.93411 6.78124 1.93845 6.77672 1.94296L3.0446 5.67083L1.22128 3.84751C1.21673 3.84296 1.212 3.83859 1.20712 3.8344C1.11678 3.75704 1.00058 3.71661 0.881731 3.7212C0.762884 3.72579 0.650146 3.77506 0.566045 3.85916C0.481945 3.94326 0.432677 4.056 0.428086 4.17485C0.423496 4.29369 0.463921 4.4099 0.541283 4.50023Z" fill="#7600D1" stroke="#7600D1" stroke-width="0.5" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.0035 11.676C2.00771 11.6809 2.01211 11.6856 2.01669 11.6902L8.97003 18.6369C9.06769 18.7344 9.22595 18.7344 9.32354 18.6367L21.9769 5.97674C21.9814 5.97221 21.9858 5.9675 21.9899 5.96262C22.1401 5.78727 22.2186 5.5617 22.2097 5.33099C22.2008 5.10029 22.1051 4.88145 21.9419 4.71819C21.7786 4.55494 21.5598 4.4593 21.3291 4.45039C21.0984 4.44148 20.8728 4.51995 20.6974 4.67013C20.6926 4.67428 20.6879 4.67862 20.6834 4.68313L9.13349 16.2199L3.31016 10.3966C3.30561 10.392 3.30089 10.3876 3.296 10.3835C3.12064 10.2333 2.89507 10.1548 2.66437 10.1637C2.43366 10.1726 2.21482 10.2683 2.05157 10.4315C1.88831 10.5948 1.79268 10.8136 1.78376 11.0443C1.77485 11.275 1.85333 11.5006 2.0035 11.676Z" fill="#000001" stroke="#000001" stroke-width="0.5" stroke-linejoin="round"/>
 </svg>
diff --git a/web-app/client/src/assets/icons/close.svg b/web-app/client/src/assets/icons/close.svg
diff --git a/web-app/client/src/assets/icons/cross.svg b/web-app/client/src/assets/icons/cross.svg
@@ -1,4 +1,4 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5 6L6.5 18L18.5 6ZM6.5 6L18.5 18L6.5 6Z" fill="#E6485B"/>
-<path d="M6.5 6L18.5 18M18.5 6L6.5 18L18.5 6Z" stroke="#E6485B" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.2045 5.2045C5.64384 4.76517 6.35616 4.76517 6.7955 5.2045L12 10.409L17.2045 5.2045C17.6438 4.76517 18.3562 4.76517 18.7955 5.2045C19.2348 5.64384 19.2348 6.35616 18.7955 6.7955L13.591 12L18.7955 17.2045C19.2348 17.6438 19.2348 18.3562 18.7955 18.7955C18.3562 19.2348 17.6438 19.2348 17.2045 18.7955L12 13.591L6.7955 18.7955C6.35616 19.2348 5.64384 19.2348 5.2045 18.7955C4.76517 18.3562 4.76517 17.6438 5.2045 17.2045L10.409 12L5.2045 6.7955C4.76517 6.35616 4.76517 5.64384 5.2045 5.2045Z" fill="#000001"/>
 </svg>
+
diff --git a/web-app/client/src/assets/icons/white-cross.svg b/web-app/client/src/assets/icons/white-cross.svg
diff --git a/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx b/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 { OptionWithBadges } from 'types/multiSelect';
diff --git a/web-app/client/src/components/MobileBanner/MobileBanner.module.scss b/web-app/client/src/components/MobileBanner/MobileBanner.module.scss
@@ -17,3 +17,7 @@
     margin-left: 24px;
   }
 }
+
+.cross {
+  color: $white;
+}
diff --git a/web-app/client/src/components/MobileBanner/MobileBanner.tsx b/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>
   );
diff --git a/web-app/client/src/components/ModalContainer/ModalContainer.tsx b/web-app/client/src/components/ModalContainer/ModalContainer.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import { useEffect, useRef } 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 { FCWithChildren } from 'types/react';
 import styles from './ModalContainer.module.scss';
 
diff --git a/web-app/client/src/components/ScrollableNodeTable/ScrollableNodeTable.module.scss b/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;
diff --git a/web-app/client/src/components/ScrollableNodeTable/ScrollableNodeTable.tsx b/web-app/client/src/components/ScrollableNodeTable/ScrollableNodeTable.tsx
@@ -23,6 +23,7 @@ const Table: FC<TableProps> = ({
   hiddenColumnIndices,
   onScroll,
   className,
+  alternateRowColors = true,
 }) => {
   const threshold = 200;
 
@@ -44,23 +45,23 @@ const Table: FC<TableProps> = ({
 
   const displayHeader = useMemo(
     () => header || data[0].items.map((_, index) => `Column ${index}`),
-    [header, data]
+    [header, data],
   );
 
   const highlightedRowsMap = useMemo(
     () => mapFromArray(highlightRowIndices),
-    [highlightRowIndices]
+    [highlightRowIndices],
   );
 
   const highlightedColumnsMap = useMemo(
     () => mapFromArray(highlightColumnIndices),
-    [highlightColumnIndices]
+    [highlightColumnIndices],
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedOnScroll = useCallback(
     _.debounce(onScroll || (async () => undefined), 500),
-    [onScroll]
+    [onScroll],
   );
 
   const handleScroll: UIEventHandler<HTMLDivElement> = (event) => {
@@ -94,15 +95,15 @@ const Table: FC<TableProps> = ({
     >
       <table className={styles.table}>
         <thead>
-          <tr>
+          <tr className={classNames(alternateRowColors && styles.alternate)}>
             {displayHeader.map((item, columnIndex) => (
               <td
                 key={item}
                 className={classNames(
                   columnIndex in highlightedColumnsMap && styles.highlighted,
                   hiddenColumnIndices &&
                     hiddenColumnIndices.includes(columnIndex) &&
-                    styles.hidden
+                    styles.hidden,
                 )}
               >
                 {item}
@@ -127,7 +128,7 @@ const Table: FC<TableProps> = ({
                         styles.highlighted,
                       hiddenColumnIndices &&
                         hiddenColumnIndices.includes(columnIndex) &&
-                        styles.hidden
+                        styles.hidden,
                     )}
                   >
                     {item}
diff --git a/web-app/client/src/components/ScrollableNodeTable/TableTypes.ts b/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;
 };
diff --git a/web-app/client/src/components/ScrollableNodeTable/implementations/AFD/AFDTable.module.scss b/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 {
diff --git a/web-app/client/src/components/ScrollableNodeTable/implementations/AFD/AFDTable.tsx b/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,
     ],
diff --git a/web-app/client/src/components/ScrollableNodeTable/implementations/MFDTable.module.scss b/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 {
diff --git a/web-app/client/src/components/ScrollableNodeTable/implementations/MFDTable.tsx b/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
diff --git a/web-app/client/src/components/Toast/ToastContainer.module.scss b/web-app/client/src/components/Toast/ToastContainer.module.scss
@@ -71,3 +71,7 @@
     opacity: 0.9;
   }
 }
+
+.cross {
+  color: $white;
+}
diff --git a/web-app/client/src/components/Toast/ToastContainer.tsx b/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>
 );
 
diff --git a/web-app/client/src/constants/descriptionCFD.tsx b/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;
diff --git a/web-app/client/src/constants/primitiveInfoType.tsx b/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]: {
diff --git a/web-app/client/src/pages/reports/approximate-dependencies.tsx b/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 />}
             />
           )}
diff --git a/web-app/client/src/pages/reports/onScroll.ts b/web-app/client/src/pages/reports/onScroll.ts

Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,7 @@`
`17`	`17`	`margin-left: 24px;`
`18`	`18`	`}`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+.cross {`
	`22`	`+ color: $white;`
	`23`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@`
`61`	`61`	`padding: 8px 24px;`
`62`	`62`	`}`
`63`	`63`
`64`		`- tr:nth-child(even) {`
	`64`	`+ tr.alternate:nth-child(even) {`
`65`	`65`	`background-color: $black-05;`
`66`	`66`	`}`
`67`	`67`	`}`
`@@ -87,6 +87,7 @@`
`87`	`87`	`display: none;`
`88`	`88`	`}`
`89`	`89`	`}`
	`90`	`+`
`90`	`91`	`.disabled .table tbody {`
`91`	`92`	`td {`
`92`	`93`	`color: $black-10;`