Skip to content

Commit

Permalink
fix: small toolbar fixes (#1777)
Browse files Browse the repository at this point in the history 
* fix mui console warn
Co-authored-by: eduardo aleixo <eh-am@users.noreply.github.com>
  • Loading branch information
@dogfrogfog
dogfrogfog authored Dec 1, 2022
1 parent 3951bc2 commit 196c6d8
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 50 deletions.
5 changes: 3 additions & 2 deletions packages/pyroscope-flamegraph/src/Toolbar.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@ $buttonHeight: 37px;

.divider {
width: 1px;
height: 35px;
margin: 0 2px;
height: $buttonHeight;
background-color: var(--ps-ui-border);
}

Expand All @@ -91,7 +92,7 @@ $buttonHeight: 37px;
border-radius: 4px;
border: none;
padding: 0 5px;
height: 35px;
height: $buttonHeight;

&.active,
&.active:hover {
Expand Down
48 changes: 25 additions & 23 deletions packages/pyroscope-flamegraph/src/Toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ import styles from './Toolbar.module.scss';

const cx = classNames.bind(styles);

const DIVIDER_WIDTH = 5;
const QUERY_INPUT_WIDTH = 175;
// 4 is marginLeft(2px) + marginRight(2px). also we can simulate divider side margins here
const TOOLBAR_SQUARE_WIDTH = 40 + 4;
const LEFT_MARGIN = 2;
const RIGHT_MARGIN = 2;
const TOOLBAR_SQUARE_WIDTH = 40 + LEFT_MARGIN + RIGHT_MARGIN;
const MORE_BUTTON_WIDTH = 16;

const calculateCollapsedItems = (
Expand Down Expand Up @@ -162,7 +164,7 @@ const Toolbar = memo(
<Divider />
</>
),
width: TOOLBAR_SQUARE_WIDTH * 2,
width: TOOLBAR_SQUARE_WIDTH * 2 + DIVIDER_WIDTH,
};
const resetItem = {
el: <ResetView isFlamegraphDirty={isFlamegraphDirty} reset={reset} />,
Expand All @@ -175,24 +177,22 @@ const Toolbar = memo(
selectedNode={selectedNode}
onFocusOnSubtree={onFocusOnSubtree}
/>
<Divider />
</>
),
width: TOOLBAR_SQUARE_WIDTH,
width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
};
const viewSectionItem = enableChangingDisplay
? {
el: (
<>
<Divider />
<ViewSection
flamegraphType={flamegraphType}
view={view}
updateView={updateView}
/>
</>
<ViewSection
flamegraphType={flamegraphType}
view={view}
updateView={updateView}
/>
),
// sandwich view is hidden in diff view
width: TOOLBAR_SQUARE_WIDTH * (flamegraphType === 'single' ? 4 : 3),
width: TOOLBAR_SQUARE_WIDTH * (flamegraphType === 'single' ? 4 : 3), // 1px is to display divider
}
: null;
const exportDataItem = isValidElement(ExportData)
Expand All @@ -203,7 +203,7 @@ const Toolbar = memo(
{ExportData}
</>
),
width: TOOLBAR_SQUARE_WIDTH,
width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
}
: null;

Expand Down Expand Up @@ -330,15 +330,17 @@ function ResetView({
}) {
return (
<Tooltip placement="top" title="Reset View">
<Button
id="reset"
disabled={!isFlamegraphDirty}
onClick={reset}
className={styles.resetViewButton}
aria-label="Reset View"
>
<FontAwesomeIcon icon={faUndo} />
</Button>
<span>
<Button
id="reset"
disabled={!isFlamegraphDirty}
onClick={reset}
className={styles.resetViewButton}
aria-label="Reset View"
>
<FontAwesomeIcon icon={faUndo} />
</Button>
</span>
</Tooltip>
);
}
Expand Down
55 changes: 30 additions & 25 deletions packages/pyroscope-flamegraph/src/__snapshots__/Toolbar.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`ProfileHeader should render toolbar correctly 1`] = `
>
<div
class="item"
style="width: 88px;"
style="width: 93px;"
>
<button
aria-label="Head first"
Expand Down Expand Up @@ -101,34 +101,39 @@ exports[`ProfileHeader should render toolbar correctly 1`] = `
class="item"
style="width: 44px;"
>
<button
<span
aria-label="Reset View"
class="button default resetViewButton noIcon"
class=""
data-mui-internal-clone-element="true"
disabled=""
id="reset"
type="button"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-undo fa-w-16 "
data-icon="undo"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
<button
aria-label="Reset View"
class="button default resetViewButton noIcon"
disabled=""
id="reset"
type="button"
>
<path
d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
fill="currentColor"
/>
</svg>
</button>
<svg
aria-hidden="true"
class="svg-inline--fa fa-undo fa-w-16 "
data-icon="undo"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
fill="currentColor"
/>
</svg>
</button>
</span>
</div>
<div
class="item"
style="width: 44px;"
style="width: 49px;"
>
<div
aria-label="Collapse nodes above"
Expand Down Expand Up @@ -158,14 +163,14 @@ exports[`ProfileHeader should render toolbar correctly 1`] = `
</svg>
</button>
</div>
<div
class="divider"
/>
</div>
<div
class="item"
style="width: 176px;"
>
<div
class="divider"
/>
<div
class="viewType"
>
Expand Down

0 comments on commit 196c6d8

Please sign in to comment.