Skip to content

feat: add Fit Mode to Context Menu #1698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 14, 2022
Merged

feat: add Fit Mode to Context Menu #1698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f9fb241
feat: add Fit Mode to Context Menu
dogfrogfog Nov 10, 2022
f307c8f
Update packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphCompone…
dogfrogfog Nov 10, 2022
47fd2d7
fix: change text
dogfrogfog Nov 14, 2022
405f574
Merge branch 'main' into feature/add-tail-head-first-func-to-context-…
dogfrogfog Nov 14, 2022
2ff86e3
add icons
dogfrogfog Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ describe('FlamegraphComponent', () => {

render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand All @@ -46,6 +47,7 @@ describe('FlamegraphComponent', () => {

render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -83,6 +85,7 @@ describe('FlamegraphComponent', () => {

render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -117,6 +120,7 @@ describe('FlamegraphComponent', () => {

const { rerender } = render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -152,6 +156,7 @@ describe('FlamegraphComponent', () => {

rerender(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -187,6 +192,7 @@ describe('FlamegraphComponent', () => {

render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -228,6 +234,7 @@ describe('FlamegraphComponent', () => {
it('renders when type is single', () => {
render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down Expand Up @@ -255,6 +262,7 @@ describe('FlamegraphComponent', () => {
const flamebearer = TestData.DiffTree;
render(
<FlamegraphComponent
updateFitMode={() => ({})}
selectedItem={Maybe.nothing()}
setActiveItem={() => ({})}
showCredit
Expand Down
28 changes: 26 additions & 2 deletions packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ import ContextMenuHighlight from './ContextMenuHighlight';
import FlamegraphTooltip from '../../Tooltip/FlamegraphTooltip';
import ContextMenu from './ContextMenu';
import LogoLink from './LogoLink';
import { SandwichIcon } from '../../Icons';
import { SandwichIcon, HeadFirstIcon, TailFirstIcon } from '../../Icons';
import { PX_PER_LEVEL } from './constants';
import Header from './Header';
import { FlamegraphPalette } from './colorPalette';
import type { ViewTypes } from './viewTypes';
import { FitModes, HeadMode, TailMode } from '../../fitMode/fitMode';
import indexStyles from './styles.module.scss';

interface FlamegraphProps {
flamebearer: Flamebearer;
focusedNode: ConstructorParameters<typeof Flamegraph>[2];
fitMode: ConstructorParameters<typeof Flamegraph>[3];
updateFitMode: (f: FitModes) => void;
highlightQuery: ConstructorParameters<typeof Flamegraph>[4];
zoom: ConstructorParameters<typeof Flamegraph>[5];
showCredit: boolean;
Expand Down Expand Up @@ -63,6 +65,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
flamebearer,
focusedNode,
fitMode,
updateFitMode,
highlightQuery,
zoom,
toolbarVisible,
Expand Down Expand Up @@ -238,6 +241,26 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
);
};

const FitModeItem = () => {
const isHeadFirst = fitMode === HeadMode;

const handleClick = () => {
const newValues = isHeadFirst ? TailMode : HeadMode;
updateFitMode(newValues);
};

return (
<MenuItem
className={indexStyles.fitModeItem}
key="fit-mode"
onClick={handleClick}
>
{isHeadFirst ? <TailFirstIcon /> : <HeadFirstIcon />}
Show text {isHeadFirst ? 'tail first' : 'head first'}
</MenuItem>
);
};

return [
<MenuItem key="reset" disabled={!dirty} onClick={onReset}>
<FontAwesomeIcon icon={faRedo} />
Expand All @@ -247,9 +270,10 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
CopyItem(),
HighlightSimilarNodesItem(),
OpenInSandwichViewItem(),
FitModeItem(),
];
},
[flamegraph, selectedItem]
[flamegraph, selectedItem, fitMode]
);

const constructCanvas = () => {
Expand Down
1 change: 1 addition & 0 deletions packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
flex: 1;
position: relative;

.fitModeItem svg,
.sandwichItem svg {
width: 1em;
margin-right: 10px;
Expand Down
2 changes: 2 additions & 0 deletions packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ class FlameGraphRenderer extends Component<
selectedItem={this.state.selectedItem}
updateView={this.updateView}
fitMode={this.state.fitMode}
updateFitMode={this.updateFitMode}
zoom={this.state.flamegraphConfigs.zoom}
focusedNode={this.state.flamegraphConfigs.focusedNode}
onZoom={this.onFlamegraphZoom}
Expand Down Expand Up @@ -481,6 +482,7 @@ class FlameGraphRenderer extends Component<
setActiveItem={this.setActiveItem}
selectedItem={this.state.selectedItem}
fitMode={this.state.fitMode}
updateFitMode={this.updateFitMode}
zoom={this.state.flamegraphConfigs.zoom}
focusedNode={this.state.flamegraphConfigs.focusedNode}
onZoom={this.onFlamegraphZoom}
Expand Down