feat(FOROME-1305): rework attribute selection

Author: QSdmitrioul

src/components/input-search/input-search.tsx

@@ -15,7 +15,6 @@ interface IInputSearchProps {
   canClearInput?: boolean
 }
 
-// eslint-disable-next-line react/display-name
 export const InputSearch = memo(
   ({ ...rest }: IInputSearchProps): ReactElement => {
     const { className, big = false, canClearInput = true, ...tempRest } = rest

src/components/popup-card/popup-card.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react'
 import cn, { Argument } from 'classnames'
 

src/components/prediction-power-indicator/prediction-power-indicator.styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import { theme } from '@theme'
 
-const getSize = (size: 'sm' | 'md'): number => (size === 'sm' ? 6 : 8)
+const getSize = (size: 'sm' | 'md'): number => (size === 'sm' ? 6 : 12)
 
 const colors = [theme('colors.grey.blue'), '#fde66b', '#98e18b', '#19af00']
 
@@ -30,9 +30,9 @@ export const PredictionPowerPoint = styled.span<{
   vertical-align: middle;
   line-height: 0;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 13px;
 
-  width: ${props => getSize(props.size)}px;
-  height: ${props => getSize(props.size)}px;
+  width: 3px;
+  height: ${({ size }) => getSize(size)}px;
   background-color: ${props => colors[props.colorIndex]};
 `

src/components/units-list/units-list-group/units-list-group.module.css

@@ -29,6 +29,10 @@
   }
 
   &__title {
-    flex: 1 0 auto
+    @apply typography-m;
+
+    font-weight: 500;
+    color: theme("colors.grey.blue");
+    flex: 1 0 auto;
   }
 }

src/components/units-list/units-list-group/units-list-group.tsx

@@ -44,7 +44,7 @@ export const UnitsListGroup = ({
           <PredictionPowerIndicator className="mr-2" value={power} />
         )}
         <span className={styles.groupHeader__title}>{name}</span>
-        <DropdownArrow isOpen={!isCollapsed} />
+        <DropdownArrow isOpen={!isCollapsed} dark />
       </div>
       {!isCollapsed &&
         attributes.map(unit => (

src/components/units-list/units-list-unit/units-list-unit.module.css

@@ -6,33 +6,19 @@
   display: flex;
   align-items: center;
 
-  &__add-button {
-    flex: 0 0 auto;
-    width: 16px;
-    height: 16px;
-    margin-right: theme("spacing[1.5]");
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: theme("colors.white");
-    background: theme("colors.blue.bright");
-    font-size: 16px;
-    border-radius: 8px;
-    overflow: hidden;
-    cursor: pointer;
-
-    &:hover {
-      background: theme("colors.blue.dark");
-    }
+  &:hover {
+    color: theme("colors.grey.blue");
   }
 
   &__title {
-    flex: 1 0 auto;
+    margin-right: 10px;
     color: theme("colors.black");
     cursor: pointer;
 
     @apply typography-s;
 
+    font-weight: 500;
+
     &:hover {
       color: theme("colors.blue.dark");
     }
@@ -41,7 +27,7 @@
       color: theme("colors.white");
 
       &:hover {
-        color: theme("colors.white");
+        color: theme("colors.grey.blue");
       }
     }
   }

src/components/units-list/units-list-unit/units-list-unit.tsx

@@ -4,6 +4,7 @@ import { ReactElement, useCallback, useState } from 'react'
 import cn, { Argument } from 'classnames'
 
 import { TUnit } from '@store/stat-units'
+import { DropdownArrow } from '@ui/dropdown-arrow'
 import { PredictionPowerIndicator } from '@components/prediction-power-indicator'
 import { AttributeKinds } from '@service-providers/common'
 import { UnitChart } from '../unit-chart'
@@ -36,17 +37,14 @@ export const UnitsListUnit = ({
         unit.histogram &&
         unit.histogram.length > 0))
 
-  const onClickUnitName = useCallback(
+  const openCharts = useCallback(
     () => setChartVisible(!!hasChart && !isChartVisible),
     [hasChart, isChartVisible],
   )
 
   return (
     <div className={cn(styles.unit, className)}>
       <div className={styles.unitTitle}>
-        <button className={styles.unitTitle__addButton} onClick={onSelect}>
-          +
-        </button>
         {unit.power && (
           <PredictionPowerIndicator
             className={styles.unitTitle__power}
@@ -57,12 +55,13 @@ export const UnitsListUnit = ({
         <UnitsListUnitName
           tooltip={tooltip}
           name={name}
-          onClick={onClickUnitName}
+          onClick={onSelect}
           className={cn(
             styles.unitTitle__title,
             isDark && styles.unitTitle__title_dark,
           )}
         />
+        <DropdownArrow size="sm" isOpen={isChartVisible} onClick={openCharts} />
       </div>
       {hasChart && isChartVisible && <UnitChart className="mt-2" unit={unit} />}
     </div>

src/pages/filter/dtree/components/query-builder/ui/next-step/content-code/content-code.tsx

@@ -9,7 +9,6 @@ interface IContentCodeProps {
   codeResult: string
 }
 
-// eslint-disable-next-line react/display-name
 export const ContentCode = memo(
   ({ codeCondition, codeResult }: IContentCodeProps): ReactElement => (
     <div className={styles.contentCode}>

src/pages/main/components/sidebar/datasets-list/datasets-list.utils.tsx

@@ -4,7 +4,6 @@ import { IDirInfoDatasetDescriptor } from '@service-providers/vault-level/vault-
 
 export const datasetNameByKey =
   (level: number = 0) =>
-  // eslint-disable-next-line react/display-name
   (key: string) => {
     const { dirInfoData } = dirinfoStore
 

src/ui/dropdown-arrow/dropdown-arrow.module.css

@@ -1,8 +1,8 @@
 .arrow {
-  border-left: 1px solid;
-  border-bottom: 1px solid;
-  width: 6px;
-  height: 6px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  width: 8px;
+  height: 8px;
   transform-origin: 35% 65%;
   transform: rotate(-45deg);
   transition: transform 0.15s ease-in-out;
@@ -12,8 +12,12 @@
     transform: rotate(135deg);
   }
 
+  &_black {
+    color: theme("colors.blue.darkHover");
+  }
+
   &_sm {
-    width: 4px;
-    height: 4px;
+    width: 6px;
+    height: 6px;
   }
 }

src/ui/dropdown-arrow/dropdown-arrow.tsx

@@ -6,12 +6,14 @@ import cn from 'classnames'
 interface IDropdownArrowProps extends Omit<HTMLProps<HTMLSpanElement>, 'size'> {
   size?: 'md' | 'sm'
   isOpen?: boolean
+  dark?: boolean
 }
 
 export const DropdownArrow = ({
   className,
   size = 'md',
   isOpen,
+  dark,
   ...htmlProps
 }: IDropdownArrowProps): ReactElement => {
   return (
@@ -20,6 +22,7 @@ export const DropdownArrow = ({
         styles.arrow,
         isOpen && styles.arrow_open,
         styles[`arrow_${size}`],
+        dark && styles.arrow_black,
         className,
       )}
       {...htmlProps}