<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Place tickmarks at nicer locations when displaying memory profiles about speedscope HOT 2 OPEN

jlfwong commented on May 11, 2024

Place tickmarks at nicer locations when displaying memory profiles

from speedscope.

Comments (2)

jlfwong commented on May 11, 2024

@vmarchaud since you're explicitly supporting import of v8 memory profiles, fixing this might be of interest to you. Right now, the tick boundaries are always aligned along powers of ten, which results in very unintuitive placement of those tickmarks for memory profiles.

If you did want to investigate this, some of the relevant code is here:

speedscope/src/views/flamechart-pan-zoom-view.tsx

Lines 318 to 362 in 0fe0c45

 private renderTimeIndicators() { 

 const ctx = this.overlayCtx 

 if (!ctx) return 

 const physicalViewSpaceFrameHeight = 

 this.LOGICAL_VIEW_SPACE_FRAME_HEIGHT * window.devicePixelRatio 

 const physicalViewSize = this.physicalViewSize() 

 const configToPhysical = this.configSpaceToPhysicalViewSpace() 

 const physicalViewSpaceFontSize = FontSize.LABEL * window.devicePixelRatio 

 const labelPaddingPx = (physicalViewSpaceFrameHeight - physicalViewSpaceFontSize) / 2 

 const left = this.props.configSpaceViewportRect.left() 

 const right = this.props.configSpaceViewportRect.right() 

 // We want about 10 gridlines to be visible, and want the unit to be 

 // 1eN, 2eN, or 5eN for some N 

 // Ideally, we want an interval every 100 logical screen pixels 

 const logicalToConfig = ( 

 this.configSpaceToPhysicalViewSpace().inverted() || new AffineTransform() 

 ).times(this.logicalToPhysicalViewSpace()) 

 const targetInterval = logicalToConfig.transformVector(new Vec2(200, 1)).x 

 const minInterval = Math.pow(10, Math.floor(Math.log10(targetInterval))) 

 let interval = minInterval 

 if (targetInterval / interval > 5) { 

 interval *= 5 

 } else if (targetInterval / interval > 2) { 

 interval *= 2 

 } 

 { 

 const y = this.props.renderInverted ? physicalViewSize.y - physicalViewSpaceFrameHeight : 0 

 ctx.fillStyle = 'rgba(255, 255, 255, 0.8)' 

 ctx.fillRect(0, y, physicalViewSize.x, physicalViewSpaceFrameHeight) 

 ctx.fillStyle = Colors.DARK_GRAY 

 ctx.textBaseline = 'top' 

 for (let x = Math.ceil(left / interval) * interval; x < right; x += interval) { 

 // TODO(jlfwong): Ensure that labels do not overlap 

 const pos = Math.round(configToPhysical.transformPosition(new Vec2(x, 0)).x) 

 const labelText = this.props.flamechart.formatValue(x) 

 const textWidth = cachedMeasureTextWidth(ctx, labelText) 

 ctx.fillText(labelText, pos - textWidth - labelPaddingPx, y + labelPaddingPx) 

 ctx.fillRect(pos, 0, 1, physicalViewSize.y) 

 } 

 } 

 }

. Values are formatted based on a ValueFormatter instance stored on the Profile objects: https://github.com/jlfwong/speedscope/blob/master/src/lib/value-formatters.ts. It seems appropriate to me to add methods to value formatter to help inform the spacing and placement of the gridlines (in this case to use powers of 1024 rather than powers of 10, or something along those lines).

from speedscope.

vmarchaud commented on May 11, 2024

@onydra

from speedscope.

Place tickmarks at nicer locations when displaying memory profiles about speedscope HOT 2 OPEN

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	private renderTimeIndicators() {
	const ctx = this.overlayCtx
	if (!ctx) return

	const physicalViewSpaceFrameHeight =
	this.LOGICAL_VIEW_SPACE_FRAME_HEIGHT * window.devicePixelRatio
	const physicalViewSize = this.physicalViewSize()
	const configToPhysical = this.configSpaceToPhysicalViewSpace()
	const physicalViewSpaceFontSize = FontSize.LABEL * window.devicePixelRatio
	const labelPaddingPx = (physicalViewSpaceFrameHeight - physicalViewSpaceFontSize) / 2

	const left = this.props.configSpaceViewportRect.left()
	const right = this.props.configSpaceViewportRect.right()
	// We want about 10 gridlines to be visible, and want the unit to be
	// 1eN, 2eN, or 5eN for some N
	// Ideally, we want an interval every 100 logical screen pixels
	const logicalToConfig = (
	this.configSpaceToPhysicalViewSpace().inverted() \|\| new AffineTransform()
	).times(this.logicalToPhysicalViewSpace())
	const targetInterval = logicalToConfig.transformVector(new Vec2(200, 1)).x
	const minInterval = Math.pow(10, Math.floor(Math.log10(targetInterval)))
	let interval = minInterval
	if (targetInterval / interval > 5) {
	interval *= 5
	} else if (targetInterval / interval > 2) {
	interval *= 2
	}

	{
	const y = this.props.renderInverted ? physicalViewSize.y - physicalViewSpaceFrameHeight : 0

	ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
	ctx.fillRect(0, y, physicalViewSize.x, physicalViewSpaceFrameHeight)
	ctx.fillStyle = Colors.DARK_GRAY
	ctx.textBaseline = 'top'
	for (let x = Math.ceil(left / interval) * interval; x < right; x += interval) {
	// TODO(jlfwong): Ensure that labels do not overlap
	const pos = Math.round(configToPhysical.transformPosition(new Vec2(x, 0)).x)
	const labelText = this.props.flamechart.formatValue(x)
	const textWidth = cachedMeasureTextWidth(ctx, labelText)
	ctx.fillText(labelText, pos - textWidth - labelPaddingPx, y + labelPaddingPx)
	ctx.fillRect(pos, 0, 1, physicalViewSize.y)
	}
	}
	}