Approximate Functional Dependencies frontend

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

@@ -0,0 +1,72 @@
+import { Checkbox } from '@components/Inputs';
+
+import { ControlledSelect } from '@components/Inputs/Select';
+import ListPropertiesModal from '@components/ListPropertiesModal';
+import React, { FC, useState } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { AFDSortRowsBy, OrderBy } from 'types/globalTypes';
+import { FiltersFields } from './Filters';
+
+type VisibilityProps = {
+  onCloseWindow: () => void;
+};
+
+export const VisibilityWindow: FC<VisibilityProps> = ({ onCloseWindow }) => {
+  const baseForm = useFormContext();
+
+  const { control, watch, reset } = useForm<Partial<FiltersFields>>({
+    defaultValues: {
+      rowsOrdering: baseForm.watch('rowsOrdering'),
+      direction: baseForm.watch('direction'),
+      showOnlyLRHS: baseForm.watch('showOnlyLRHS'),
+    },
+  });
+  const initialShowOnlyLRHS = watch('showOnlyLRHS') as boolean;
+  const [isShowOnlyLRHS, setShowOnlyLRHS] = useState(initialShowOnlyLRHS);
+  const { rowsOrdering, direction } = watch();
+
+  const orderingOptions = [
+    { value: AFDSortRowsBy.RHS_VALUES, label: 'RHS values' },
+    { value: AFDSortRowsBy.ROW_INDEX, label: 'Row index' },
+  ];
+
+  const directionOptions = [
+    { value: OrderBy.ASC, label: 'Ascending' },
+    { value: OrderBy.DESC, label: 'Descending' },
+  ];
+
+  return (
+    <ListPropertiesModal
+      name="Visibility"
+      onClose={() => {
+        reset();
+        onCloseWindow();
+      }}
+      onApply={() => {
+        baseForm.setValue('rowsOrdering', rowsOrdering);
+        baseForm.setValue('direction', direction);
+        baseForm.setValue('showOnlyLRHS', isShowOnlyLRHS);
+        onCloseWindow();
+      }}
+    >
+      <Checkbox
+        label="Show only LHS and RHS columns"
+        checked={isShowOnlyLRHS}
+        onChange={() => setShowOnlyLRHS((prev) => !prev)}
+      />
+      <ControlledSelect
+        control={control}
+        controlName="rowsOrdering"
+        label="Order rows by"
+        options={orderingOptions}
+      />
+      <ControlledSelect
+        control={control}
+        controlName="direction"
+        label="Direction"
+        options={directionOptions}
+      />
+    </ListPropertiesModal>
+  );
+};
+export default VisibilityWindow;

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

@@ -8,12 +8,16 @@ import {
   AROrderingParameter,
   OrderDirection,
   PrimitiveType,
+  AFDSortRowsBy,
+  AFDSortBy,
 } from 'types/globalTypes';
 
 export type Sorting =
   | FDOrderingParameter
   | CFDOrderingParameter
-  | AROrderingParameter;
+  | AROrderingParameter
+  | AFDSortBy
+  | AFDSortRowsBy;
 
 export type FiltersFields = {
   ordering: Sorting;
@@ -23,6 +27,8 @@ export type FiltersFields = {
   mustContainRhsColIndices: string;
   mustContainLhsColIndices: string;
   showKeys: boolean;
+  rowsOrdering: Sorting;
+  showOnlyLRHS: boolean;
 };
 
 const getDefaultOrdering: (primitive: PrimitiveType) => Sorting = (primitive) =>
@@ -38,6 +44,8 @@ export const useFilters = (primitive: PrimitiveType) => {
       mustContainRhsColIndices: '',
       mustContainLhsColIndices: '',
       showKeys: false,
+      rowsOrdering: AFDSortRowsBy.ROW_INDEX,
+      showOnlyLRHS: false,
     },
   });
 

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

@@ -1,18 +1,20 @@
-import _ from 'lodash';
-import React, { FC } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
 import { ControlledSelect } from '@components/Inputs/Select';
 import ListPropertiesModal from '@components/ListPropertiesModal';
 import { OrderingTitles } from '@constants/titles';
+import _ from 'lodash';
+import React, { FC } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
 import { OrderDirection, PrimitiveType } from 'types/globalTypes';
 import { FiltersFields } from './Filters';
 
 type OrderingProps = {
+  labelOrderBy?: string;
   setIsOrderingShown: (arg: boolean) => void;
   primitive: PrimitiveType;
 };
 
 export const OrderingWindow: FC<OrderingProps> = ({
+  labelOrderBy = 'Order by',
   setIsOrderingShown,
   primitive,
 }) => {
@@ -56,7 +58,7 @@ export const OrderingWindow: FC<OrderingProps> = ({
       <ControlledSelect
         control={control}
         controlName="ordering"
-        label="Order by"
+        label={labelOrderBy}
         options={_.values(orderingOptions)}
       />
       <ControlledSelect

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/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/ReportsLayout/ReportsLayout.tsx

@@ -40,6 +40,11 @@ const menuMFDClusters = {
   pathname: '/reports/metric-dependencies',
   icon: <ClusterIcon />,
 };
+const menuAFDClusters = {
+  label: 'Clusters',
+  pathname: '/reports/approximate-dependencies',
+  icon: <ClusterIcon />,
+};
 
 export const reportsTabs: Record<
   PrimitiveType,
@@ -51,6 +56,7 @@ export const reportsTabs: Record<
   [PrimitiveType.AR]: [menuPrimitiveList, menuDatasetSnippet],
   [PrimitiveType.TypoFD]: [menuPrimitiveList, menuClusters, menuDatasetSnippet],
   [PrimitiveType.MFD]: [menuMFDClusters],
+  [PrimitiveType.AFD]: [menuAFDClusters],
   [PrimitiveType.Stats]: [],
 };
 
@@ -61,7 +67,10 @@ export const ReportsLayout: FC<Props> = ({
 }) => {
   const router = useRouter();
   const { data } = useTaskState();
-  const type = data.type as PrimitiveType;
+  const type =
+    data.taskID === 'b30c10d1-348a-4624-86f5-3f83f42c4319'
+      ? PrimitiveType.AFD
+      : (data.type as PrimitiveType);
 
   return (
     <div className={classNames(styles.page, pageClass)}>

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;
 };