Merge pull request #4466 from relative-ci/improve-treemap

MetricsTreemap improvements
relative-ci · May 18, 2024 · 4f644eb · 4f644eb
2 parents 743030d + c7f0a8d
commit 4f644eb
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 68 deletions.
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -49,10 +49,10 @@ const DISPLAY_TYPE_GROUPS = {
 
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-  key,
-  label,
-  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-}));
+    key,
+    label,
+    defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+  }));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -163,9 +163,18 @@ RowHeader.defaultProps = {
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
-    props;
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
 
+  // Get treenodes based on group
   const treeNodes = useMemo(() => {
     if (displayType.groupBy === 'folder') {
       return getTreemapNodesGroupedByPath(items);
@@ -174,19 +183,28 @@ const ViewMetricsTreemap = (props) => {
     return getTreemapNodes(items);
   }, [items, displayType.groupBy]);
 
+  // Search based on the group path on group title click
   const onGroupClick = useCallback(
     (groupPath) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
       // Search by group path
       // 1. use `^` to match only the string beggining
-      // 2. add `/` suffix to match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${groupPath}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(`^${groupPath}/`);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -215,6 +233,7 @@ ViewMetricsTreemap.propTypes = {
   emptyMessage: PropTypes.node.isRequired,
   showEntryInfo: PropTypes.func.isRequired,
   updateSearch: PropTypes.func.isRequired,
+  search: PropTypes.string.isRequired,
 };
 
 export const BundleAssets = (props) => {
@@ -348,6 +367,7 @@ export const BundleAssets = (props) => {
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx
@@ -74,12 +74,22 @@ interface ViewMetricsTreemapProps {
   emptyMessage: React.ReactNode;
   showEntryInfo: React.ComponentProps<typeof MetricsTreemap>['onItemClick'];
   updateSearch: (newSerarch: string) => void;
+  search: string;
 }
 
 const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
-    props;
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
 
+  // Get treenodes based on group
   const treeNodes = useMemo(() => {
     if (displayType.groupBy === 'folder') {
       return getTreemapNodesGroupedByPath(items);
@@ -88,19 +98,28 @@ const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
     return getTreemapNodes(items);
   }, [items, displayType]);
 
+  // Search based on the group path on group title click
   const onGroupClick = useCallback(
     (groupPath: string) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
       // Search by group path
       // 1. use `^` to match only the string beggining
-      // 2. add `/` suffix to match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${groupPath}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(newSearch);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -306,6 +325,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -120,8 +120,9 @@ RowHeader.propTypes = {
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch, search } = props;
 
+  // Get treenodes based on group
   const treeNodes = useMemo(() => {
     if (displayType.groupBy === 'folder') {
       return getTreemapNodesGroupedByPath(items);
@@ -130,19 +131,28 @@ const ViewMetricsTreemap = (props) => {
     return getTreemapNodes(items);
   }, [items, displayType.groupBy]);
 
+  // Search based on the group path on group title click
   const onGroupClick = useCallback(
     (groupPath) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
       // Search by group path
       // 1. use `^` to match only the string beggining
-      // 2. add `/` suffix to match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${groupPath}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(newSearch);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -171,6 +181,7 @@ ViewMetricsTreemap.propTypes = {
   emptyMessage: PropTypes.node.isRequired,
   showEntryInfo: PropTypes.func.isRequired,
   updateSearch: PropTypes.func.isRequired,
+  search: PropTypes.string.isRequired,
 };
 
 export const BundlePackages = (props) => {
@@ -300,6 +311,7 @@ export const BundlePackages = (props) => {
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>

diff --git a/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css b/packages/ui/src/components/metrics-treemap/metrics-treemap.module.css
@@ -24,8 +24,9 @@
 }
 
 .tileGroupTitle {
+  position: relative;
   width: 100%;
-  padding: 4px 2px 4px var(--space-xxsmall);
+  padding: var(--space-xxxsmall) 1px var(--space-xxxsmall) var(--space-xxsmall);
   color: var(--color-text);
   font-family: var(--font-family-fixed);
   font-size: 10px;
@@ -36,7 +37,17 @@
 }
 
 .tileGroupTitleTotal {
-  margin-left: var(--space-xxxsmall);
+  margin-left: var(--space-xxsmall);
+  color: var(--color-text-light);
+}
+
+.tileGroupTitle {
+  transition: var(--ui-transition-out);
+}
+
+.tileGroupTitle:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--ui-transition-in);
 }
 
 /** Tile group size variation */
@@ -141,7 +152,13 @@
   flex: 0 1 auto;
   width: 100%;
   min-width: 0;
-  max-height: calc(2em * var(--line-height-heading));
+  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  white-space: normal;
   overflow: hidden;
 }
 
@@ -162,9 +179,8 @@
 
 /** Tile size variation */
 .tileSizeSmall .tileContent {
-  padding: var(--space-xxxsmall) var(--space-xxsmall);
-  gap: 0;
-  font-size: var(--size-xsmall);
+  padding: var(--space-xxxsmall);
+  font-size: 10px;
 }
 
 .tileSizeSmall .tileContentLabel {
@@ -173,7 +189,7 @@
 
 .tileSizeDefault {
   transition: var(--ui-transition-in);
-  transition-property: left top width height;
+  transition-property: left, top, width, height;
 }
 
 /** Tile diff variation */
@@ -196,7 +212,7 @@
 }
 
 .tile-NO_CHANGE {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
 }
 
 .tile-NO_CHANGE::before {