diff --git a/cosmos/cosmos.userdeps.js b/cosmos/cosmos.userdeps.js index 07a58c519..d69d439b6 100644 --- 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 index f4e05747d..fb234abab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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", @@ -949,9 +949,9 @@ "integrity": "sha512-RQeDPUBvwBGTcXFYgav56uyx5fMJPbcFUZuZBicE1pX2q0/axG2a6o/IWpQQUALiy4npr7H1yWP+SlgcJh/RLg==" }, "node_modules/@konturio/ui-kit": { - "version": "3.0.0-alpha.56", - "resolved": "https://registry.npmjs.org/@konturio/ui-kit/-/ui-kit-3.0.0-alpha.56.tgz", - "integrity": "sha512-6UcsjWF98HTYiTmiN3nW87JaObiualhRgcH3b/Xs1cfHIq5uxeuJbzFg98BGTrVRXOVE5tg4otFgrwZYoUX8Ew==", + "version": "3.0.0-alpha.72", + "resolved": "https://registry.npmjs.org/@konturio/ui-kit/-/ui-kit-3.0.0-alpha.72.tgz", + "integrity": "sha512-bK+8n+CZHLhyYuoJOgmKwiFuXyUBSWzhwE1rpBo/BUUsrJg76Eh4wehV8b/MTAPfAuhGjIhOZIiPcE27LQ6zyg==", "dependencies": { "downshift": "^6.1.7", "nanoid": "^4.0.0", @@ -15167,9 +15167,9 @@ "integrity": "sha512-RQeDPUBvwBGTcXFYgav56uyx5fMJPbcFUZuZBicE1pX2q0/axG2a6o/IWpQQUALiy4npr7H1yWP+SlgcJh/RLg==" }, "@konturio/ui-kit": { - "version": "3.0.0-alpha.56", - "resolved": "https://registry.npmjs.org/@konturio/ui-kit/-/ui-kit-3.0.0-alpha.56.tgz", - "integrity": "sha512-6UcsjWF98HTYiTmiN3nW87JaObiualhRgcH3b/Xs1cfHIq5uxeuJbzFg98BGTrVRXOVE5tg4otFgrwZYoUX8Ew==", + "version": "3.0.0-alpha.72", + "resolved": "https://registry.npmjs.org/@konturio/ui-kit/-/ui-kit-3.0.0-alpha.72.tgz", + "integrity": "sha512-bK+8n+CZHLhyYuoJOgmKwiFuXyUBSWzhwE1rpBo/BUUsrJg76Eh4wehV8b/MTAPfAuhGjIhOZIiPcE27LQ6zyg==", "requires": { "downshift": "^6.1.7", "nanoid": "^4.0.0", diff --git a/package.json b/package.json index debd44ff9..9de1bbc8c 100644 --- 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 index e2ddf032b..c20f4da98 100644 --- 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) => void) & - React.ChangeEventHandler; + onChange: (isChecked: boolean) => void; legend?: LayerLegend; className?: string; } diff --git a/src/components/LayerInput/LayerInput.tsx b/src/components/LayerInput/LayerInput.tsx index 5fe37704c..2794cebc3 100644 --- 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) => void) & - React.ChangeEventHandler; + onChange?: (isChecked: boolean) => void; onClick?: React.MouseEventHandler; } diff --git a/src/components/LoadingSpinner/KonturSpinner.tsx b/src/components/LoadingSpinner/KonturSpinner.tsx index a99c2f05e..ef80f7d97 100644 --- 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,7 +72,8 @@ function KonturSpinnerComponent({ speed = 20, /** Spinner size */ size = 70, -}) { + className, +}: KonturSpinnerProps) { return ( 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/src/features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.module.css b/src/features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.module.css new file mode 100644 index 000000000..c7ad11231 --- /dev/null +++ b/src/features/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; + } +} diff --git a/src/features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.tsx b/src/features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.tsx new file mode 100644 index 000000000..8163c5144 --- /dev/null +++ b/src/features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters.tsx @@ -0,0 +1,210 @@ +import { Autocomplete, Select } from '@konturio/ui-kit'; +import { useCallback, useMemo, useRef, useState } from 'react'; +import { useAtom } from '@reatom/react'; +import { Plus16 } from '@konturio/default-icons'; +import { nanoid } from 'nanoid'; +import cn from 'clsx'; +import { i18n } from '~core/localization'; +import { bivariateColorManagerResourceAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerResource'; +import { capitalize } from '~utils/common'; +import { bivariateColorManagerDataAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; +import style from './ColorLegendFilters.module.css'; +import type { SelectItemType } from '@konturio/ui-kit'; + +const SentimentFiltersClasses = { + noValue: style.NoValue, +}; + +const LayerFilterClasses = { + menu: style.AutocompleteMenu, +}; + +type FilterValueType = { key: string; value: string[] }; + +export const ColorLegendFilters = () => { + const [ + { indicators, layersFilter }, + { setLayersFilter, setSentimentsFilter }, + ] = useAtom(bivariateColorManagerDataAtom, (state) => ({ + indicators: state.indicators, + layersFilter: state.filters.layers, + })); + + const [loading] = useAtom( + bivariateColorManagerResourceAtom, + (state) => state.loading, + ); + + const selectIndicatorsData: SelectItemType[] = useMemo(() => { + return ( + indicators?.map((indicator) => ({ + title: indicator.label, + value: indicator.name, + })) || [] + ); + }, [indicators]); + + // calculate unique direction items that are available in indicators list + const selectDirectionsData: SelectItemType[] = useMemo(() => { + const uniqueDirectionsSet = new Set(); + + indicators?.forEach((indicator) => { + const { + direction: [startDirection, endDirection], + } = indicator; + startDirection.forEach((di) => uniqueDirectionsSet.add(di)); + endDirection.forEach((di) => uniqueDirectionsSet.add(di)); + }); + + return Array.from(uniqueDirectionsSet).map((directionItem) => ({ + title: capitalize(directionItem), + value: directionItem, + })); + }, [indicators]); + + const [sentimentFiltersCount, setSentimentFiltersCount] = useState(1); + const sentimentFilterValues = useRef([ + { key: nanoid(4), value: [] }, + ]); + + const onResetSentiments = useCallback( + (index: number) => { + if (sentimentFilterValues.current[index]?.value?.length) { + if (index !== 0) { + // when clearing not first filter, just remove it's value from values array and reduce filters count + sentimentFilterValues.current.splice(index, 1); + setSentimentFiltersCount(sentimentFiltersCount - 1); + } else { + // when resetting first filter. + // if sentiment filters count is 2 (actual filter and plus button (which is also a filter but without a + // selected value)). Then set filters count to 1 and reset it's value, so plus button/filter will be removed, + // only first actual filter without value will be shown + if (sentimentFiltersCount === 2) { + setSentimentFiltersCount(1); + sentimentFilterValues.current[0].value = []; + } else { + // if amount of filters is more than 2. remove first filter and shift values + sentimentFilterValues.current.shift(); + setSentimentFiltersCount(sentimentFiltersCount - 1); + } + } + setSentimentsFilter( + sentimentFilterValues.current.reduce((acc, sf) => { + if (sf.value.length) { + acc.push(sf.value); + } + return acc; + }, [] as string[][]), + ); + } + }, + [sentimentFiltersCount, setSentimentFiltersCount, setSentimentsFilter], + ); + + const onSelectSentiment = useCallback( + ( + selection: SelectItemType | SelectItemType[] | null | undefined, + index: number, + ) => { + if (selection && Array.isArray(selection) && selection?.length) { + if (!sentimentFilterValues.current[index]?.value?.length) { + sentimentFilterValues.current.push({ key: nanoid(4), value: [] }); + setSentimentFiltersCount(sentimentFiltersCount + 1); + } + sentimentFilterValues.current[index].value = selection?.map((itm) => + itm.value.toString(), + ); + setSentimentsFilter( + sentimentFilterValues.current.reduce((acc, sf) => { + if (sf.value.length) { + acc.push(sf.value); + } + return acc; + }, [] as string[][]), + ); + + setLayersFilter(); + } else { + onResetSentiments(index); + } + }, + [ + sentimentFiltersCount, + setSentimentFiltersCount, + onResetSentiments, + setLayersFilter, + setSentimentsFilter, + ], + ); + + const onChangeLayer = useCallback( + (item) => { + if (item.selectedItem && sentimentFilterValues.current[0].value?.length) { + if (sentimentFiltersCount > 1) { + setSentimentFiltersCount(1); + } + sentimentFilterValues.current.length = 1; + sentimentFilterValues.current[0].value = []; + setSentimentsFilter(); + } + setLayersFilter(item.selectedItem?.value || undefined); + }, + [ + setLayersFilter, + sentimentFiltersCount, + setSentimentFiltersCount, + setSentimentsFilter, + ], + ); + + return ( +
+ {!loading && ( +
+ {[...Array(sentimentFiltersCount)].map((item, index) => ( + + ))} + + {i18n.t('bivariate.color_manager.layers_filter')} + +
+ )} +
+ ); +}; diff --git a/src/features/bivariate_color_manager/components/LegendWithMap/LegendWithMap.module.css b/src/features/bivariate_color_manager/components/LegendWithMap/LegendWithMap.module.css index 29fa96c65..a7af62ee0 100644 --- a/src/features/bivariate_color_manager/components/LegendWithMap/LegendWithMap.module.css +++ b/src/features/bivariate_color_manager/components/LegendWithMap/LegendWithMap.module.css @@ -4,6 +4,7 @@ flex-direction: column; gap: var(--double-unit); height: 100%; + min-height: calc(100vh - 50px); } .axisDirectionLabel { diff --git a/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.module.css b/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.module.css new file mode 100644 index 000000000..2ade86484 --- /dev/null +++ b/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.module.css @@ -0,0 +1,6 @@ +.LegendMap { + display: flex; + flex-direction: column; + width: 492px; + flex-shrink: 0; +} diff --git a/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.tsx b/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.tsx new file mode 100644 index 000000000..8800575aa --- /dev/null +++ b/src/features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer.tsx @@ -0,0 +1,56 @@ +import { useAtom } from '@reatom/react'; +import { + CSSTransitionWrapper, + fadeClassNames, +} from '~features/bivariate_color_manager/components/CssTransitionWrapper/CssTransitionWrapper'; +import { LegendWithMap } from '~features/bivariate_color_manager/components/LegendWithMap/LegendWithMap'; +import { bivariateColorManagerDataAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; +import style from './LegendWithMapContainer.module.css'; +import type { LayerSelectionInput } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; +import type { LayerSelectionFull } from '~features/bivariate_color_manager/components/LegendWithMap/LegendWithMap'; + +function isFullSelection( + selection: LayerSelectionInput | null, +): selection is LayerSelectionFull { + return ( + selection?.horizontal !== undefined && selection?.vertical !== undefined + ); +} + +export const LegendWithMapContainer = () => { + const [{ filteredData, layersSelection }] = useAtom( + bivariateColorManagerDataAtom, + (state) => ({ + filteredData: state.filteredData, + layersSelection: state.layersSelection, + }), + ); + + const selectedData = + filteredData && Object.keys(filteredData).length > 0 && layersSelection?.key + ? filteredData[layersSelection.key] + : null; + + return ( +
+ + {(ref) => ( +
+ {selectedData && isFullSelection(layersSelection) && ( + + )} +
+ )} + +
+ ); +}; diff --git a/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.module.css b/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.module.css new file mode 100644 index 000000000..683057205 --- /dev/null +++ b/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.module.css @@ -0,0 +1,11 @@ +.ListBody { + display: flex; + overflow: auto; + padding: 0 calc(var(--unit) * 3) 0 calc(var(--unit) * 3); + justify-content: center; + + & .LoadingSpinner { + position: absolute; + top: calc(50% - 35px); + } +} diff --git a/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.tsx b/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.tsx new file mode 100644 index 000000000..59c021c16 --- /dev/null +++ b/src/features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer.tsx @@ -0,0 +1,37 @@ +import { useAtom } from '@reatom/react'; +import { KonturSpinner } from '~components/LoadingSpinner/KonturSpinner'; +import { SentimentsCombinationsList } from '~features/bivariate_color_manager/components'; +import { bivariateColorManagerResourceAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerResource'; +import { bivariateColorManagerDataAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; +import style from './SentimentsListContainer.module.css'; + +export const SentimentsListContainer = () => { + const [loading] = useAtom( + bivariateColorManagerResourceAtom, + (state) => state.loading, + ); + + const [ + { filteredData: data, layersSelection, selectedRows, filters }, + { setLayersSelection, setSelectedRows }, + ] = useAtom(bivariateColorManagerDataAtom); + + const anyFilterActivated = Object.values(filters).filter(Boolean).length > 0; + + return ( +
+ {loading ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/src/features/layers_in_area/atoms/areaLayersDetailsResource.ts b/src/features/layers_in_area/atoms/areaLayersDetailsResource.ts index 606dbeed6..a43e2a211 100644 --- a/src/features/layers_in_area/atoms/areaLayersDetailsResource.ts +++ b/src/features/layers_in_area/atoms/areaLayersDetailsResource.ts @@ -4,6 +4,7 @@ import { enabledLayersAtom } from '~core/logical_layers/atoms/enabledLayers'; import { focusedGeometryAtom } from '~core/shared_state/focusedGeometry'; import { currentEventFeedAtom } from '~core/shared_state'; import { createResourceAtom } from '~utils/atoms'; +import { arraysAreEqual } from '~utils/array/arraysAreEqual'; import { areaLayersListResource } from './areaLayersListResource'; import type { LayerInAreaDetails } from '../types'; @@ -139,10 +140,3 @@ export const areaLayersDetailsResourceAtom = createResourceAtom( 'areaLayersDetailsResourceAtom', areaLayersDetailsParamsAtom, ); - -function arraysAreEqual(arr1: any[], arr2: any[]) { - return ( - arr1.length === arr2.length && - arr1.every((value, index) => value === arr2[index]) - ); -} diff --git a/src/utils/array/arraysAreEqual.ts b/src/utils/array/arraysAreEqual.ts new file mode 100644 index 000000000..6b63745f1 --- /dev/null +++ b/src/utils/array/arraysAreEqual.ts @@ -0,0 +1,16 @@ +export function arraysAreEqualWithStrictOrder( + array1: T[], + array2: T[], +): boolean { + return ( + array1.length === array2.length && + array1.every((value, index) => value === array2[index]) + ); +} + +export function arraysAreEqual(array1: T[], array2: T[]): boolean { + return ( + array1.length === array2.length && // length fastcheck to skip expensive shallow copying and sorting + arraysAreEqualWithStrictOrder(array1.slice().sort(), array2.slice().sort()) + ); +} diff --git a/src/views/BivariateManager/BivariateManager.module.css b/src/views/BivariateManager/BivariateManager.module.css index 042405216..0f2bb8348 100644 --- a/src/views/BivariateManager/BivariateManager.module.css +++ b/src/views/BivariateManager/BivariateManager.module.css @@ -42,4 +42,8 @@ } } } + + & .TabPanels { + width: 100%; + } } diff --git a/src/views/BivariateManager/BivariateManager.tsx b/src/views/BivariateManager/BivariateManager.tsx index 1dd6a5f8a..a05e231e4 100644 --- a/src/views/BivariateManager/BivariateManager.tsx +++ b/src/views/BivariateManager/BivariateManager.tsx @@ -48,7 +48,7 @@ export function BivariateManagerPage() { - + Sentiments diff --git a/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.module.css b/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.module.css index 7757ef1bf..4ade57257 100644 --- a/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.module.css +++ b/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.module.css @@ -2,41 +2,11 @@ display: flex; } -.LegendMap { - display: flex; - flex-direction: column; - width: 492px; - flex-shrink: 0; - - & > div { - height: 100%; - } -} - -.ListFilters { - display: flex; - align-items: center; - padding: 24px 32px 16px 32px; -} - .List { display: flex; flex-direction: column; flex-grow: 1; border-right: 1px solid var(--faint-weak); - min-width: 440px; - max-height: calc(100vh - 50px); -} - -.ListBody { - display: flex; - overflow: auto; - padding: 0 calc(var(--unit) * 3) 0 calc(var(--unit) * 3); - justify-content: center; -} - -.LayersFilterMenu { - z-index: 2; - max-height: 60vh; - overflow: auto; + min-width: 670px; + height: calc(100vh - 50px); } diff --git a/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.tsx b/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.tsx index 6366cf0ad..93550231a 100644 --- a/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.tsx +++ b/src/views/BivariateManager/sub_views/ColorLegends/ColorLegendsView.tsx @@ -1,108 +1,14 @@ -import { Select } from '@konturio/ui-kit'; -import { useAtom } from '@reatom/react'; -import { useMemo } from 'react'; -import { i18n } from '~core/localization'; -import { KonturSpinner } from '~components/LoadingSpinner/KonturSpinner'; -import { SentimentsCombinationsList } from '~features/bivariate_color_manager/components'; -import { bivariateColorManagerResourceAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerResource'; -import { - CSSTransitionWrapper, - fadeClassNames, -} from '~features/bivariate_color_manager/components/CssTransitionWrapper/CssTransitionWrapper'; -import { LegendWithMap } from '~features/bivariate_color_manager/components/LegendWithMap/LegendWithMap'; -import { bivariateColorManagerDataAtom } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; +import { ColorLegendFilters } from '~features/bivariate_color_manager/components/ColorLegendFilters/ColorLegendFilters'; +import { SentimentsListContainer } from '~features/bivariate_color_manager/components/SentimentsListContainer/SentimentsListContainer'; +import { LegendWithMapContainer } from '~features/bivariate_color_manager/components/LegendWithMapContainer/LegendWithMapContainer'; import style from './ColorLegendsView.module.css'; -import type { LayerSelectionInput } from '~features/bivariate_color_manager/atoms/bivariateColorManagerData'; -import type { LayerSelectionFull } from '~features/bivariate_color_manager/components/LegendWithMap/LegendWithMap'; -import type { BivariateColorManagerData } from '~features/bivariate_color_manager/atoms/bivariateColorManagerResource'; -import type { SelectItemType } from '@konturio/ui-kit/tslib/Select/types'; -const LayersFilterMenuClasses = { menu: style.LayersFilterMenu }; - -function itemToString(item) { - return item ? item.title : ''; -} - -function isFullSelection( - selection: LayerSelectionInput | null, -): selection is LayerSelectionFull { - return ( - selection?.horizontal !== undefined && selection?.vertical !== undefined - ); -} - -export const ColorLegendsView = () => { - const [ - { filteredData: data, indicators, layersSelection, selectedRows, filters }, - { setLayersSelection, setLayersFilter, setSelectedRows }, - ] = useAtom(bivariateColorManagerDataAtom); - const [{ loading }] = useAtom(bivariateColorManagerResourceAtom); - const filteredDataNotEmpty = data && Object.keys(data).length > 0; - const selectedData = - filteredDataNotEmpty && layersSelection?.key - ? (data as BivariateColorManagerData)[layersSelection.key] - : null; - const anyFilterActivated = Object.values(filters).filter(Boolean).length > 0; - - const selectIndicatorsData: SelectItemType[] = useMemo(() => { - return ( - indicators?.map((indicator) => ({ - title: indicator.label, - value: indicator.name, - })) || [] - ); - }, [indicators]); - - return ( -
-
-
- -
-
- {loading ? ( - - ) : ( - - )} -
-
- -
- - {(ref) => ( -
- {selectedData && isFullSelection(layersSelection) && ( - - )} -
- )} - -
+export const ColorLegendsView = () => ( +
+
+ +
- ); -}; + +
+);