10838 filter by sentiments combinations color legends section dn fe (#…

…128) * feat(bivariate-lengends): color legend view refactoring * fix(bivariate-legend): change Sentiments filters behavior * fix(bivariate-legends): improve filtering behavior * feat(bivariate-legends): improve bivariate legends filtering * fix(bivariate-legend): move arrays are equal to Utils * fix(bivariate-colors): fix bivariate legend colors generation * chore: bugfixes * chore: add more comments * chore: add more comments * fix(bivariate-legend-filters): apply changes for PR * chore: update ui-kit version * chore: PR ammendments * fix(ui-kit): update ui kit version * fix(bivariate-filters): sentiments filters fix
konturio · Aug 31, 2022 · f72947b · f72947b
1 parent 00c9620
commit f72947b
Show file tree

Hide file tree

Showing 21 changed files with 489 additions and 168 deletions.
diff --git a/cosmos/cosmos.userdeps.js b/cosmos/cosmos.userdeps.js
@@ -10,6 +10,7 @@ import './../node_modules/@konturio/default-theme/typography.css';
 import fixture0 from './../src/components/BivariateLegend/BivariateLegend.fixture.tsx';
 import fixture1 from './../src/features/bivariate_color_manager/components/MiniLegend/MiniLegend.fixture.tsx';
 import fixture2 from './../src/features/bivariate_manager/components/BivariateMatrixControl/react-cosmos/BivariateMatrixControl.fixture.tsx';
+
 import decorator0 from './../cosmos.decorator.tsx';
 import decorator1 from './../src/cosmos.decorator.tsx';
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "@deck.gl/mesh-layers": "^8.5.4",
     "@konturio/default-icons": "^2.0.0-alpha.26",
     "@konturio/default-theme": "^2.4.0-alpha.12",
-    "@konturio/ui-kit": "^3.0.0-alpha.56",
+    "@konturio/ui-kit": "^3.0.0-alpha.72",
     "@loaders.gl/core": "^3.2.3",
     "@nebula.gl/edit-modes": "1.0.3",
     "@nebula.gl/layers": "1.0.3",

diff --git a/src/components/LayerControl/LayerControl.tsx b/src/components/LayerControl/LayerControl.tsx
@@ -12,8 +12,7 @@ interface LayerControl {
   enabled: boolean;
   hidden: boolean;
   controls?: JSX.Element[];
-  onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
-    React.ChangeEventHandler<HTMLInputElement>;
+  onChange: (isChecked: boolean) => void;
   legend?: LayerLegend;
   className?: string;
 }

diff --git a/src/components/LayerInput/LayerInput.tsx b/src/components/LayerInput/LayerInput.tsx
@@ -6,8 +6,7 @@ export interface LayerInput {
   enabled: boolean;
   type: 'checkbox' | 'radio' | 'not-interactive';
   label?: React.ReactChild | React.ReactChild[];
-  onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
-    React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (isChecked: boolean) => void;
   onClick?: React.MouseEventHandler<HTMLInputElement>;
 }
 

diff --git a/src/components/LoadingSpinner/KonturSpinner.tsx b/src/components/LoadingSpinner/KonturSpinner.tsx
@@ -47,6 +47,20 @@ function AnimatedRect({ frame, speed, animationStepSize, dashes }) {
   );
 }
 
+interface KonturSpinnerProps {
+  /** Dashes pattern */
+  dashes?: string;
+  /** Animation frame */
+  frame?: number;
+  /** Animation smooth */
+  animationStepSize?: number;
+  /** Refresh rate - render every N ms */
+  speed?: number;
+  /** Spinner size */
+  size?: number;
+  className?: string;
+}
+
 function KonturSpinnerComponent({
   /** Dashes pattern */
   dashes = '130 56',
@@ -58,14 +72,16 @@ function KonturSpinnerComponent({
   speed = 20,
   /** Spinner size */
   size = 70,
-}) {
+  className,
+}: KonturSpinnerProps) {
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 100 100"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M57.4748 31.1845L42.9629 46.9771C42.8586 47.0928 42.7215 47.1739 42.57 47.2097C42.4185 47.2454 42.2597 47.2342 42.1147 47.1775C41.9697 47.1207 41.8455 47.0212 41.7585 46.892C41.6715 46.7629 41.6259 46.6103 41.6278 46.4546V32.1483C41.6278 31.5785 41.4015 31.0321 40.9987 30.6292C40.5959 30.2263 40.0496 30 39.48 30H36.1481C35.5784 30 35.0321 30.2263 34.6294 30.6292C34.2266 31.0321 34.0003 31.5785 34.0003 32.1483V67.4147C33.9956 67.6992 34.0479 67.9818 34.1539 68.2458C34.2599 68.5098 34.4175 68.75 34.6176 68.9523C34.8176 69.1546 35.0561 69.3148 35.3189 69.4237C35.5817 69.5326 35.8636 69.5878 36.1481 69.5862H39.4684C39.7499 69.5878 40.0289 69.5336 40.2894 69.4269C40.5499 69.3203 40.7868 69.1631 40.9864 68.9646C41.186 68.766 41.3444 68.5299 41.4524 68.2699C41.5605 68.0099 41.6162 67.7312 41.6161 67.4496V59.681C41.7132 59.1313 41.9184 58.6063 42.2198 58.1365C42.6316 57.6894 43.1329 57.3339 43.6911 57.0933C44.2493 56.8527 44.8518 56.7323 45.4596 56.7399C46.0674 56.7476 46.6667 56.8832 47.2187 57.1378C47.7706 57.3924 48.2628 57.7604 48.6631 58.2178L57.4632 68.2857C57.8101 68.6891 58.2392 69.0138 58.7217 69.2381C59.2042 69.4624 59.729 69.5811 60.2611 69.5862H64.6843C64.9794 69.6007 65.2722 69.5268 65.5251 69.374C65.7781 69.2212 65.9797 68.9965 66.1043 68.7285C66.2289 68.4605 66.2709 68.1614 66.2247 67.8695C66.1786 67.5776 66.0465 67.3061 65.8453 67.0896L50.7529 50.6118C50.5436 50.3953 50.4266 50.1059 50.4266 49.8047C50.4266 49.5036 50.5436 49.2142 50.7529 48.9977L65.8453 32.5083C66.0465 32.2918 66.1786 32.0203 66.2247 31.7283C66.2709 31.4364 66.2289 31.1373 66.1043 30.8694C65.9797 30.6014 65.7781 30.3766 65.5251 30.2239C65.2722 30.0711 64.9794 29.9972 64.6843 30.0116H60.203C59.692 30.0082 59.1858 30.1107 58.7162 30.3125C58.2467 30.5144 57.824 30.8113 57.4748 31.1845Z"

diff --git a/src/core/localization/translations/en/common-messages.json b/src/core/localization/translations/en/common-messages.json
@@ -137,6 +137,7 @@
       },
 
       "color_manager": {
+        "sentiments_combinations_filter": "Sentiments combinations",
         "layers_filter": "Layers",
         "title": "Appearance administration",
         "no_legends": "There are no legends satisfying the conditions.",

diff --git a/src/features/bivariate_color_manager/atoms/bivariateColorManagerData.ts b/src/features/bivariate_color_manager/atoms/bivariateColorManagerData.ts
@@ -1,10 +1,13 @@
 import { createAtom } from '~utils/atoms';
+import { arraysAreEqualWithStrictOrder } from '~utils/array/arraysAreEqual';
 import { bivariateColorManagerResourceAtom } from './bivariateColorManagerResource';
-import type { TableDataValue } from './bivariateColorManagerResource';
-import type { BivariateColorManagerData } from './bivariateColorManagerResource';
+import type {
+  BivariateColorManagerData,
+  BivariateColorManagerDataValue,
+  TableDataValue,
+} from './bivariateColorManagerResource';
 import type { Indicator, Meta } from '~utils/bivariate';
-import type { SelectItemType } from '@konturio/ui-kit/tslib/Select/types';
-import type { BivariateColorManagerDataValue } from './bivariateColorManagerResource';
+import type { CornerRange } from '~utils/bivariate';
 
 export type BivariateColorManagerDataAtomState = {
   filteredData: BivariateColorManagerData | null;
@@ -19,11 +22,12 @@ export type BivariateColorManagerDataAtomState = {
 };
 
 export type Filters = {
-  layers: string | number | null;
+  layers?: string;
+  sentiments?: string[][];
 };
 
 export type FiltersKeys = keyof Filters;
-export type FiltersValues = Filters[keyof Filters];
+export type FiltersValues = Filters[FiltersKeys];
 
 export type LayerSelectionInput = {
   key: string;
@@ -38,7 +42,7 @@ const DEFAULT_STATE = {
   _initialData: null,
   filteredData: null,
   indicators: null,
-  filters: { layers: null },
+  filters: {},
   selectedRows: {},
   layersSelection: null,
   meta: null,
@@ -48,7 +52,8 @@ export const bivariateColorManagerDataAtom = createAtom(
   {
     setLayersSelection: (input: LayerSelectionInput) => input,
     runFilters: () => undefined,
-    setLayersFilter: (input: SelectItemType | null) => input,
+    setLayersFilter: (input?: string) => input,
+    setSentimentsFilter: (sentiments?: string[][]) => sentiments,
     setSelectedRows: (key: string) => key,
     bivariateColorManagerResourceAtom,
   },
@@ -74,8 +79,18 @@ export const bivariateColorManagerDataAtom = createAtom(
       }
     });
 
-    onAction('setLayersFilter', (input) => {
-      state.filters = { ...state.filters, layers: input?.value || null };
+    onAction('setLayersFilter', (layers) => {
+      state.filters = { ...state.filters, layers };
+      schedule((dispatch) => {
+        dispatch(create('runFilters'));
+      });
+    });
+
+    onAction('setSentimentsFilter', (sentiments) => {
+      state.filters = {
+        ...state.filters,
+        sentiments: sentiments?.length ? sentiments : undefined,
+      };
       schedule((dispatch) => {
         dispatch(create('runFilters'));
       });
@@ -93,6 +108,7 @@ export const bivariateColorManagerDataAtom = createAtom(
 
     onAction('runFilters', () => {
       const { filters, _initialData } = state;
+      if (!filters) return;
       const filterFunctionsToApply = Object.entries(filters)
         .map(([key, value]) => (value ? [filterFunctions[key], value] : null))
         .filter(Boolean) as [FilterFunction, FiltersValues][];
@@ -186,6 +202,38 @@ const layersFilterFunction: FilterFunction = (
   return Boolean(value.horizontal[indicator] || value.vertical[indicator]);
 };
 
+function mergeCorner(
+  corner1: CornerRange[],
+  corner2: CornerRange[],
+): CornerRange[] {
+  return [...new Set([...corner1, ...corner2])];
+}
+
+const sentimentsFilterFunction: FilterFunction = (
+  _key: string,
+  { directions: { horizontal, vertical } }: BivariateColorManagerDataValue,
+  sentiments: FiltersValues,
+): boolean => {
+  if (!sentiments || !Array.isArray(sentiments)) return false;
+
+  const colorCombinations = [
+    mergeCorner(vertical[0], horizontal[0]),
+    mergeCorner(vertical[0], horizontal[1]),
+    mergeCorner(vertical[1], horizontal[0]),
+    mergeCorner(vertical[1], horizontal[1]),
+  ];
+
+  for (let i = 0; i < colorCombinations.length; i++) {
+    for (let j = 0; j < sentiments.length; j++) {
+      if (arraysAreEqualWithStrictOrder(colorCombinations[i], sentiments[j])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
 type FilterFunction = (
   key: string,
   value: BivariateColorManagerDataValue,
@@ -196,4 +244,5 @@ const filterFunctions: {
   [key in FiltersKeys]: FilterFunction;
 } = {
   layers: layersFilterFunction,
+  sentiments: sentimentsFilterFunction,
 };
diff --git a/...tures/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.module.css b/...tures/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.module.css
@@ -0,0 +1,45 @@
+.ListFilters {
+  display: flex;
+  align-items: center;
+  padding: 24px 32px 16px 32px;
+  z-index: 2;
+
+  & .SentimentsFilters {
+    height: 36px;
+
+    &.LastFilter {
+      margin-right: 10px;
+    }
+  }
+
+  & .LayersFilters {
+    height: 36px;
+  }
+
+  & .NoValue.SentimentsAddButton {
+    width: auto !important;
+
+    & [class*='selectButton'] {
+      min-width: auto;
+    }
+
+    & [class*='buttonsContainer'] {
+      display: none;
+    }
+  }
+
+  & [class*='multiselectChip'] {
+    max-width: 100%;
+  }
+
+  & .FiltersContainer {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  & .AutocompleteMenu {
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+  }
+}