WIP

Vizzuality · Sep 18, 2023 · cbf016b · cbf016b
1 parent 98adaf4
commit cbf016b
Show file tree

Hide file tree

Showing 23 changed files with 910 additions and 324 deletions.
diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
 
-import cx from 'classnames';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
 
 import { useFeatureFlags } from 'hooks/feature-flags';
 
@@ -10,16 +10,17 @@ import Select from 'components/forms/select';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import STRAT_1_IMG from 'images/info-buttons/img_strat_1.png';
 import STRAT_2_IMG from 'images/info-buttons/img_strat_2.png';
 import STRAT_3_IMG from 'images/info-buttons/img_strat_3.png';
 
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
+// import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import INTERSECT_SVG from 'svgs/ui/intersect.svg?sprite';
 import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
 import REMOVE_SVG from 'svgs/ui/remove.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
+// import SHOW_SVG from 'svgs/ui/show.svg?sprite';
 import SPLIT_SVG from 'svgs/ui/split.svg?sprite';
 
 export interface ItemProps {
@@ -128,17 +129,12 @@ export const Item: React.FC<ItemProps> = ({
   // RENDER
   return (
     <div
-      className={cx({
+      className={cn({
         'bg-gray-700 text-white': true,
         [className]: !!className,
       })}
     >
-      <header
-        className={cx({
-          'border-l-4 px-4 py-2': true,
-          'border-yellow-400': true,
-        })}
-      >
+      <header className="border-l-4 border-yellow-400 px-4 py-2">
         <div className="flex items-start justify-between">
           <h2 className="font-heading text-sm">{name}</h2>
 
@@ -153,7 +149,7 @@ export const Item: React.FC<ItemProps> = ({
                   aria-label="manage-see-on-map"
                   type="button"
                   onClick={() => setSplitOpen(!splitOpen)}
-                  className={cx({
+                  className={cn({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
                     'text-yellow-400': !!splitSelected,
@@ -177,12 +173,17 @@ export const Item: React.FC<ItemProps> = ({
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
                   'text-gray-300': !isShown,
                 })}
               >
-                <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
+                {isShown ? (
+                  <HiEye className="h-4 w-4 text-blue-400" />
+                ) : (
+                  <HiEyeOff className="h-4 w-4" />
+                )}
+                {/* <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} /> */}
               </button>
             </Tooltip>
 

diff --git a/app/components/map/legend/group/index.tsx b/app/components/map/legend/group/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, PropsWithChildren, useState } from 'react';
+import { ComponentProps, PropsWithChildren, useEffect, useState } from 'react';
 
 import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
 
@@ -22,6 +22,10 @@ const LegendGroup = ({
 >): JSX.Element => {
   const [isOpen, setOpen] = useState(defaultOpen && !disabled);
 
+  useEffect(() => {
+    if (!disabled && defaultOpen) setOpen(true);
+  }, [disabled, defaultOpen]);
+
   return (
     <Collapsible
       defaultOpen={defaultOpen && !disabled}
@@ -31,6 +35,7 @@ const LegendGroup = ({
         [className]: Boolean(className),
       })}
       disabled={disabled}
+      open={isOpen}
       {...props}
     >
       <CollapsibleTrigger className="py-2">

diff --git a/app/components/map/legend/index.tsx b/app/components/map/legend/index.tsx
@@ -1,50 +1,41 @@
-import React, { useMemo, Children, isValidElement } from 'react';
+import React, { useMemo, Children, isValidElement, PropsWithChildren } from 'react';
 
 import { ScrollArea } from 'components/scroll-area';
 import { cn } from 'utils/cn';
 
 import SortableList from './sortable/list';
 
-export interface LegendProps {
+export const Legend = ({
+  open,
+  children,
+  className = '',
+  sortable,
+  onChangeOrder,
+}: PropsWithChildren<{
   open: boolean;
   className?: string;
-  children: React.ReactNode;
-  maxHeight: string | number;
   sortable?: {
     enabled: boolean;
     handle: boolean;
     handleIcon: React.ReactNode;
   };
   onChangeOrder?: (id: string[]) => void;
   onChangeOpen?: (open: boolean) => void;
-}
-
-export const Legend: React.FC<LegendProps> = ({
-  open,
-  children,
-  className = '',
-  maxHeight,
-  sortable,
-  onChangeOrder,
-}: LegendProps) => {
+}>): JSX.Element => {
   const isChildren = useMemo(() => {
     return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
   }, [children]);
 
   return (
     <div
       className={cn({
+        'flex flex-col': true,
         hidden: !isChildren,
         [className]: !!className,
       })}
     >
-      {open && isChildren && (
-        <ScrollArea
-          className="relative flex w-full flex-grow flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black"
-          style={{
-            maxHeight,
-          }}
-        >
+      {open && (
+        <ScrollArea className="relative flex w-full flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black">
           <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
             {!!sortable && (
               <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>

diff --git a/app/components/map/legend/item/index.tsx b/app/components/map/legend/item/index.tsx
@@ -10,8 +10,6 @@ import { cn } from 'utils/cn';
 
 import OPACITY_SVG from 'svgs/map/opacity.svg?sprite';
 import DRAG_SVG from 'svgs/ui/drag.svg?sprite';
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
 
 export interface LegendItemProps {
   id: string;
@@ -64,8 +62,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
     });
     return chldn && chldn.some((c) => !!c);
   }, [children]);
-
-  const { opacity = 1, visibility = true } = settings || {};
+  const { opacity = 1, visibility = false } = settings || {};
 
   const { format } = useNumberFormatter({
     style: 'percent',

diff --git a/app/components/map/legend/types.d.ts b/app/components/map/legend/types.d.ts
@@ -0,0 +1 @@
+export type LegendItemType = 'matrix' | 'basic' | 'choropleth' | 'gradient';
diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts
@@ -9,12 +9,15 @@ import {
 } from 'react-query';
 
 import { AxiosRequestConfig } from 'axios';
+import chroma from 'chroma-js';
 import Fuse from 'fuse.js';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
 import partition from 'lodash/partition';
 import { useSession } from 'next-auth/react';
 
+import { COLORS } from 'hooks/map/constants';
+
 import { ItemProps as IntersectItemProps } from 'components/features/intersect-item/component';
 import { ItemProps as RawItemProps } from 'components/features/raw-item/component';
 import { Feature } from 'types/api/feature';
@@ -227,7 +230,7 @@ export function useSelectedFeatures(
     select: ({ data }) => {
       const { features = [] } = data;
 
-      let parsedData = features.map((d) => {
+      let parsedData = features.map((d, index) => {
         const { featureId, geoprocessingOperations, metadata } = d;
 
         const {
@@ -293,12 +296,18 @@ export function useSelectedFeatures(
           );
         }
 
+        const color =
+          features.length > COLORS['features-preview'].ramp.length
+            ? chroma.scale(COLORS['features-preview'].ramp).colors(features.length)[index]
+            : COLORS['features-preview'].ramp[index];
+
         return {
           ...d,
           id: featureId,
           name: alias || featureClassName,
           type: tag,
           description,
+          color,
 
           // SPLIT
           splitOptions,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type LegendItemType = 'matrix' \| 'basic' \| 'choropleth' \| 'gradient';