Improving scale management performances with memoization?

[soykje]

Hi everyone 👋

I'm actually working on a visualization based on audio data from Audio Web API :

const getAudioData = () => {
  const dataBuffer = new Uint8Array(BUFFER_LENGTH)

  audioAnalyzer.getByteTimeDomainData(dataBuffer)

  if (dataBuffer.some((v) => v > 0)) {
    setAudioData((d) => [...d, dataBuffer])
  }

  audioReqId.current = requestAnimationFrame(getAudioData)
}

So I get an array of Uint8Arrays, which come quite big after a while... So I'm having performance issues 😞

I wanted to improve my code, in particular my scale management:

// Scales
const angleScale = scaleLinear({
  domain: [0, BUFFER_LENGTH],
  range: [0, Math.PI * 2]
})

const radiusScale = scalePower({
  domain: [0, 255],
  range: [0, VIZ_DIAMETER / 2],
  exponent: 2
})

// Accessors
const angle = (_, i) => angleScale(i)
const radius = (d) => radiusScale(d)

// Scale update
useEffect(() => {
  if (!audioData.length) return

  updateScale(radiusScale, {
    domain: [min(audioData[audioData.length - 1]), 255]
  })
}, [audioData, radiusScale])

But I'm quite lost with this updateScale helper, and maybe also I am too much a noob... but how should I use memoization util. like useMemo() with it? Should I also memoize my accessors?

I tried this but it doesn't seem to be efficient:

// Accessors
const angle = useMemo(() => (_, i) => angleScale(i), [angleScale])
const radius = useMemo(() => (d) => radiusScale(d), [radiusScale])

// Scale update
const updateRadiusScale = useCallback((data) => updateScale(radiusScale, {
  domain: [min(data[data.length - 1]), 255]
}), [radiusScale])

useEffect(() => {
  if (!audioData.length) return

  updateRadiusScale(audioData)
}, [audioData, updateRadiusScale])

I'm getting started in this, so any help would be great, I'll be very happy to learn from you!

Thx in advance

[williaster]

Hey @soykje 👋 thanks for checking out visx.

It's a bit hard to follow your question without a complete example. Generally using useMemo for scale creation is recommended, so something like

const radiusScale = useMemo(() =>
  scalePower({
    domain: [0, 255],
    range: [0, VIZ_DIAMETER / 2],
    exponent: 2
  }),
  [],
);

Based on that it doesn't actually look like your scale range or domain actually ever need to change based on the data (since there are no dependencies to the data)? In that case it would only be created once / wouldn't need to be updated.

Another note is that updateScale actually returns a copy of the scale, and because you're not updating what radiusScale is pointing to, I don't think it's updating. I would probably just recommend creating a fresh scale, or if your input data does change you could call radiusScale.domain(newDomain) which will update the scale mapping.

Hope that helps, let me know if you have any follow up questions!

[soykje]

Hello @williaster, and thank you for your answer!

Sorry for my late response... Busy these days, and also continuing testing and learning!

So to explain maybe more clearly my problem: I started extracting audio data from an .mp3 file using Web Audio API, and passing it (accumulated, so ending with an array of Uint8Arrays) to a React Context. In the same time I was trying to render, with Visx <LineRadial />, a complete radial waveform from this audio file.
I was actually encountering two issues, which I think are/were related: performances (browser freezing) and "rendering result consistency" (two renderings from same file are never the same... not even quite^^).

Now, after fixing my performance issues by using more accurately useMemo and useCallback with my components and also my Context, I'm still getting inconsistent rendering results... 😢

It may be a wrong use of Web Audio API within React, or maybe still related to performance issues between data extraction and rendering... For now, I'm more encline to think that my problem could be related to extraction/rendering which are too huge tasks for my browser... Maybe this is were simply lies my problem?

So it doesn't seem related to Visx library, which still does a great job (thx about your updateScale enlightment, btw!). Maybe more about the technical choices I made, or simply my technical skills! 😮

I guess we could end here... I'll still be using Visx, maybe just not in this case. Still, thx again for your time! 🙏