Merge pull request #4442 from relative-ci/fix-treemap

fix treemap
relative-ci · May 2, 2024 · 852ba88 · 852ba88
2 parents e333114 + e605b3e
commit 852ba88
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 37 deletions.
diff --git a/packages/ui/src/components/delta/delta.jsx b/packages/ui/src/components/delta/delta.jsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './delta.module.css';
 
-export const Delta = ({ className, displayValue, deltaType, inverted }) => {
+export const Delta = ({ className = '', displayValue, deltaType, inverted = false }) => {
   const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
   return <span className={rootClassName}>{displayValue}</span>;
 };

diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css b/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css
@@ -91,7 +91,7 @@
 .tile:hover::before {
   transition: var(--ui-transition-in);
   transition-property: opacity;
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 .tileContent {
@@ -162,7 +162,7 @@
 }
 
 .tile-NO_CHANGE:hover::before {
-  opacity: 0.3;
+  opacity: 0.4;
 }
 
 .tile-HIGH_NEGATIVE::before {
@@ -174,11 +174,21 @@
 }
 
 .tile-LOW_NEGATIVE::before {
-  color: var(--color-red-25);
+  color: var(--color-red-50);
+  opacity: 0.6;
+}
+
+.tile-LOW_NEGATIVE:hover::before {
+  opacity: 0.5;
 }
 
 .tile-LOW_POSITIVE::before {
-  color: var(--color-green-25);
+  color: var(--color-green-50);
+  opacity: 0.6;
+}
+
+.tile-LOW_POSITIVE:hover::before {
+  opacity: 0.5;
 }
 
 .tile-POSITIVE::before {

diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.utils.ts b/packages/ui/src/components/metrics-treemap/metrics-treemap.utils.ts
@@ -19,7 +19,7 @@ function getReportMetricRowMaxValue(item: ReportMetricRow): number {
 export function getTreemapNodes(items: Array<ReportMetricRow>): Tree {
   const rootChildren: Array<TreeLeaf> = items.map((item) => ({
     id: item.key,
-    label: item.key,
+    label: item.label,
     value: getReportMetricRowMaxValue(item),
     item,
   }));

diff --git a/packages/ui/src/hooks/metrics-display-type.ts b/packages/ui/src/hooks/metrics-display-type.ts
@@ -12,9 +12,14 @@ const QUERY_PARAM_VALUE = 'dt';
 // Display type group by param name
 const QUERY_PARAM_GROUP_BY = 'dtg';
 
+type MetricsDisplayTypeData = {
+  value: MetricsDisplayType;
+  groupBy: string;
+};
+
 type UseMetricsDisplayType = [
   { value: MetricsDisplayType; groupBy?: string },
-  (value: MetricsDisplayType, newGroupBy?: string) => void,
+  (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void,
 ];
 
 export const useMetricsDisplayType = (
@@ -27,18 +32,19 @@ export const useMetricsDisplayType = (
 
   const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } =
     queryParams;
-
-  const [storageValue, setStorageValue] = useLocalStorage(QUERY_PARAM_VALUE, DEFAULT_VALUE);
-  const [storageGroupBy, setStorageGroupBy] = useLocalStorage(
-    QUERY_PARAM_GROUP_BY,
-    DEFAULT_GROUP_BY,
+  const [localStorage, setLocalStorage] = useLocalStorage<Partial<MetricsDisplayTypeData>>(
+    'storage',
+    {
+      value: DEFAULT_VALUE,
+      groupBy: DEFAULT_GROUP_BY,
+    },
   );
 
   /**
    * Normalize display type value
    */
   const value = useMemo(() => {
-    const resolvedValue = queryParamValue || storageValue;
+    const resolvedValue = queryParamValue ?? localStorage?.value;
 
     if (!resolvedValue) {
       return DEFAULT_VALUE;
@@ -49,13 +55,13 @@ export const useMetricsDisplayType = (
     }
 
     return resolvedValue as MetricsDisplayType;
-  }, [queryParamValue, storageValue]);
+  }, [queryParamValue, localStorage?.value]);
 
   /**
    * Normalize display type group by
    */
   const groupBy = useMemo(() => {
-    const resolvedValue = queryParamGroupBy || storageGroupBy;
+    const resolvedValue = queryParamGroupBy ?? localStorage?.groupBy;
 
     if (!resolvedValue) {
       return DEFAULT_GROUP_BY;
@@ -66,7 +72,7 @@ export const useMetricsDisplayType = (
     }
 
     return resolvedValue;
-  }, [queryParamGroupBy, storageGroupBy]);
+  }, [queryParamGroupBy, localStorage?.groupBy]);
 
   /**
    * Synchronize query params when values are different
@@ -78,37 +84,23 @@ export const useMetricsDisplayType = (
   }, [value, queryParamValue, groupBy, queryParamGroupBy, setQueryParams]);
 
   /**
-   * Synchronize storeage when values are different
+   * Synchronize storage when values are different
    */
   useEffect(() => {
-    if (value !== storageValue) {
-      setStorageValue(value);
-    }
-    if (groupBy !== storageValue) {
-      setStorageGroupBy(groupBy);
+    if (value !== localStorage?.value || groupBy !== localStorage.groupBy) {
+      setLocalStorage({ value, groupBy });
     }
-  }, [
-    value,
-    storageValue,
-    groupBy,
-    storageGroupBy,
-    setQueryParams,
-    setStorageValue,
-    setStorageGroupBy,
-  ]);
+  }, [value, groupBy, setLocalStorage, localStorage]);
 
   const setDisplayType = useCallback(
     (newValue: MetricsDisplayType, newGroupBy: string = DEFAULT_GROUP_BY) => {
-      setStorageValue(newValue);
-      setStorageGroupBy(newGroupBy);
-
       setQueryParams({
         [QUERY_PARAM_VALUE]: newValue,
         [QUERY_PARAM_GROUP_BY]: newGroupBy,
       });
     },
-    [setStorageValue, setQueryParams],
+    [setQueryParams],
   );
 
-  return [{ value, groupBy }, setDisplayType];
+  return useMemo(() => [{ value, groupBy }, setDisplayType], [value, groupBy, setDisplayType]);
 };
diff --git a/packages/ui/src/ui/loader/loader.jsx b/packages/ui/src/ui/loader/loader.jsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './loader.module.css';
 
-export const Loader = ({ className, size, ...restProps }) => (
+export const Loader = ({ className = '', size = 'medium', ...restProps }) => (
   <span className={cx(css.root, className, css[size])} {...restProps} />
 );