From 219e991da5f96b6942a36e91f1929c4cadc550be Mon Sep 17 00:00:00 2001
From: pavelpashkovsky <pavelpashkovsky@gmail.com>
Date: Thu, 8 Sep 2022 10:46:56 +0300
Subject: [PATCH 1/4] feat: collapse box

---
 .../pages/TagExplorerView.module.scss         | 11 +----
 webapp/javascript/pages/TagExplorerView.tsx   |  7 ++-
 webapp/javascript/ui/Box.module.scss          | 48 +++++++++++++++++++
 webapp/javascript/ui/Box.tsx                  | 41 +++++++++++++++-
 4 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/webapp/javascript/pages/TagExplorerView.module.scss b/webapp/javascript/pages/TagExplorerView.module.scss
index 9ff7d3531e..a15d1472d0 100644
--- a/webapp/javascript/pages/TagExplorerView.module.scss
+++ b/webapp/javascript/pages/TagExplorerView.module.scss
@@ -23,15 +23,8 @@
 
   .tableDescription {
     display: flex;
-    justify-content: space-between;
-    margin: 0 10px 10px;
-  }
-
-  .title {
-    display: inline-block;
-    font-weight: 500;
-    font-size: 18px;
-    margin-right: 5px;
+    justify-content: flex-end;
+    margin: 0 0 10px 10px;
   }
 
   .buttons {
diff --git a/webapp/javascript/pages/TagExplorerView.tsx b/webapp/javascript/pages/TagExplorerView.tsx
index 7793936c8c..0b01e05125 100644
--- a/webapp/javascript/pages/TagExplorerView.tsx
+++ b/webapp/javascript/pages/TagExplorerView.tsx
@@ -5,7 +5,7 @@ import type { ClickEvent } from '@szhsin/react-menu';
 import Color from 'color';
 
 import type { Profile } from '@pyroscope/models/src';
-import Box from '@webapp/ui/Box';
+import Box, { CollapseBox } from '@webapp/ui/Box';
 import Toolbar from '@webapp/components/Toolbar';
 import ExportData from '@webapp/components/ExportData';
 import TimelineChartWrapper, {
@@ -238,7 +238,7 @@ function TagExplorerView() {
             )}
           </div>
         </Box>
-        <Box>
+        <CollapseBox title={`${appName.unwrapOr('')} Descriptive Statistics`}>
           <Table
             appName={appName.unwrapOr('')}
             whereDropdownItems={whereDropdownItems}
@@ -248,7 +248,7 @@ function TagExplorerView() {
             handleGroupByTagValueChange={handleGroupByTagValueChange}
             isLoading={type === 'loading'}
           />
-        </Box>
+        </CollapseBox>
         <Box>
           <div className={styles.flamegraphWrapper}>
             {type === 'loading' ? (
@@ -377,7 +377,6 @@ function Table({
   return (
     <>
       <div className={styles.tableDescription} data-testid="explore-table">
-        <span className={styles.title}>{appName} Descriptive Statistics</span>
         <div className={styles.buttons}>
           <NavLink
             to={{
diff --git a/webapp/javascript/ui/Box.module.scss b/webapp/javascript/ui/Box.module.scss
index bb47fcb804..c96a992dec 100644
--- a/webapp/javascript/ui/Box.module.scss
+++ b/webapp/javascript/ui/Box.module.scss
@@ -10,3 +10,51 @@
   margin-bottom: 10px;
   padding: 10px;
 }
+
+.collapseBox {
+  @extend .box;
+  margin-bottom: 10px;
+
+  .box {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    height: auto;
+
+    &.collapsedContent {
+      height: 0;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.collapseTitle {
+  font-weight: 500;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--ps-ui-border);
+
+    .collapseIcon {
+      display: flex;
+    }
+  }
+}
+
+.collapseIcon {
+  display: none;
+  transition: transform 0.1s;
+
+  &.collapsed {
+    transform: rotate(90deg);
+    display: flex;
+  }
+}
diff --git a/webapp/javascript/ui/Box.tsx b/webapp/javascript/ui/Box.tsx
index dc28cd133f..6b64365ba6 100644
--- a/webapp/javascript/ui/Box.tsx
+++ b/webapp/javascript/ui/Box.tsx
@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames/bind';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import styles from './Box.module.scss';
 
+const cx = classNames.bind(styles);
 /**
  * Box renders its children with a box around it
  */
@@ -24,3 +28,38 @@ export default function Box(props: BoxProps) {
     </div>
   );
 }
+
+export interface CollapseBoxProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function CollapseBox({ title, children }: CollapseBoxProps) {
+  const [collapsed, toggleCollapse] = useState(false);
+
+  return (
+    <div className={styles.collapseBox}>
+      <div
+        onClick={() => toggleCollapse((c) => !c)}
+        className={styles.collapseTitle}
+        aria-hidden
+      >
+        {title}
+        <FontAwesomeIcon
+          className={cx({
+            [styles.collapseIcon]: true,
+            [styles.collapsed]: collapsed,
+          })}
+          icon={faChevronDown}
+        />
+      </div>
+      <Box
+        className={cx({
+          [styles.collapsedContent]: collapsed,
+        })}
+      >
+        {children}
+      </Box>
+    </div>
+  );
+}

From 2244f33727003309a524ca03670cbac864fe6f10 Mon Sep 17 00:00:00 2001
From: pavelpashkovsky <pavelpashkovsky@gmail.com>
Date: Thu, 8 Sep 2022 11:03:13 +0300
Subject: [PATCH 2/4] fix: .title

---
 webapp/javascript/pages/TagExplorerView.module.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/webapp/javascript/pages/TagExplorerView.module.scss b/webapp/javascript/pages/TagExplorerView.module.scss
index a15d1472d0..8599cd9c76 100644
--- a/webapp/javascript/pages/TagExplorerView.module.scss
+++ b/webapp/javascript/pages/TagExplorerView.module.scss
@@ -27,6 +27,13 @@
     margin: 0 0 10px 10px;
   }
 
+  .title {
+    display: inline-block;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+
   .buttons {
     position: relative;
 

From 40c0bfc5a0137a69db1949e670df09cea50439ca Mon Sep 17 00:00:00 2001
From: pavelpashkovsky <pavelpashkovsky@gmail.com>
Date: Fri, 9 Sep 2022 11:01:18 +0300
Subject: [PATCH 3/4] refactor: styles adjustements, added stories

---
 stories/Box.stories.tsx                     | 14 +++++++++++++-
 webapp/javascript/pages/TagExplorerView.tsx |  6 +++++-
 webapp/javascript/ui/Box.module.scss        |  7 ++-----
 webapp/javascript/ui/Box.tsx                |  3 ++-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/stories/Box.stories.tsx b/stories/Box.stories.tsx
index 750e7a9654..81b5884729 100644
--- a/stories/Box.stories.tsx
+++ b/stories/Box.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import Box from '@ui/Box';
+import Box, { CollapseBox } from '@ui/Box';
 import Button from '@ui/Button';
 import { ComponentMeta } from '@storybook/react';
 import '../webapp/sass/profile.scss';
@@ -24,3 +24,15 @@ export const BoxWithButtonNoPadding = () => (
     <h1>Hello, world</h1>
   </Box>
 );
+
+export const CollapseBoxWithContent = () => (
+  <CollapseBox title="Title">
+    <h1>Hello, world</h1>
+  </CollapseBox>
+);
+
+export const CollapseBoxWhenTitleIsEmptyString = () => (
+  <CollapseBox title="">
+    <h1>Hello, world</h1>
+  </CollapseBox>
+);
diff --git a/webapp/javascript/pages/TagExplorerView.tsx b/webapp/javascript/pages/TagExplorerView.tsx
index 0b01e05125..17d253cab9 100644
--- a/webapp/javascript/pages/TagExplorerView.tsx
+++ b/webapp/javascript/pages/TagExplorerView.tsx
@@ -238,7 +238,11 @@ function TagExplorerView() {
             )}
           </div>
         </Box>
-        <CollapseBox title={`${appName.unwrapOr('')} Descriptive Statistics`}>
+        <CollapseBox
+          title={`${appName
+            .map((a) => `${a} Descriptive Statistics`)
+            .unwrapOr('')}`}
+        >
           <Table
             appName={appName.unwrapOr('')}
             whereDropdownItems={whereDropdownItems}
diff --git a/webapp/javascript/ui/Box.module.scss b/webapp/javascript/ui/Box.module.scss
index c96a992dec..cfb820708c 100644
--- a/webapp/javascript/ui/Box.module.scss
+++ b/webapp/javascript/ui/Box.module.scss
@@ -39,18 +39,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 40px;
 
   &:hover {
     background-color: var(--ps-ui-border);
-
-    .collapseIcon {
-      display: flex;
-    }
   }
 }
 
 .collapseIcon {
-  display: none;
+  display: flex;
   transition: transform 0.1s;
 
   &.collapsed {
diff --git a/webapp/javascript/ui/Box.tsx b/webapp/javascript/ui/Box.tsx
index 6b64365ba6..ea23c14f70 100644
--- a/webapp/javascript/ui/Box.tsx
+++ b/webapp/javascript/ui/Box.tsx
@@ -30,6 +30,7 @@ export default function Box(props: BoxProps) {
 }
 
 export interface CollapseBoxProps {
+  // must be non empty
   title: string;
   children: React.ReactNode;
 }
@@ -44,7 +45,7 @@ export function CollapseBox({ title, children }: CollapseBoxProps) {
         className={styles.collapseTitle}
         aria-hidden
       >
-        {title}
+        <div>{title}</div>
         <FontAwesomeIcon
           className={cx({
             [styles.collapseIcon]: true,

From 5d4738071d3c3248bc9b4d0ce37e3fc21b695187 Mon Sep 17 00:00:00 2001
From: eduardo aleixo <eduardo@pyroscope.io>
Date: Fri, 9 Sep 2022 13:53:33 -0300
Subject: [PATCH 4/4] fix tsdoc

---
 webapp/javascript/pages/TagExplorerView.tsx | 2 +-
 webapp/javascript/ui/Box.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/javascript/pages/TagExplorerView.tsx b/webapp/javascript/pages/TagExplorerView.tsx
index 17d253cab9..3572eb34ce 100644
--- a/webapp/javascript/pages/TagExplorerView.tsx
+++ b/webapp/javascript/pages/TagExplorerView.tsx
@@ -241,7 +241,7 @@ function TagExplorerView() {
         <CollapseBox
           title={`${appName
             .map((a) => `${a} Descriptive Statistics`)
-            .unwrapOr('')}`}
+            .unwrapOr('Descriptive Statistics')}`}
         >
           <Table
             appName={appName.unwrapOr('')}
diff --git a/webapp/javascript/ui/Box.tsx b/webapp/javascript/ui/Box.tsx
index ea23c14f70..43f32c70c3 100644
--- a/webapp/javascript/ui/Box.tsx
+++ b/webapp/javascript/ui/Box.tsx
@@ -30,7 +30,7 @@ export default function Box(props: BoxProps) {
 }
 
 export interface CollapseBoxProps {
-  // must be non empty
+  /** must be non empty */
   title: string;
   children: React.ReactNode;
 }