area/ui: Add a preference to render function names from the right

[yomete]

This adds a new preference to determine if long function names should be displayed from the left or right hand side. By default it is set to true/checked.

This new preference aims to solve the issue where long function names in the icicle graph are shortened due to the stack's width, and you only see the LHS of the function name.

When the preference is unchecked/set to false, and the rect that displays the function name is not wide enough to show the entire name, then we just show the right hand side of the function name.

Checked

Unchecked

[alwaysmeticulous]

🤖 Meticulous spotted visual differences in 103 of 209 screens tested: view and approve differences detected.

Meticulous simulated ~4 hours of user flows against your PR.

_{Last updated for commit 450644d. This comment will update as new commits are pushed.}

[manojVivek]

Just a minor feedback, looks great otherwise!

[manojVivek]

This useState + useEffect combo can be replaced with a single useMemo that returns the text that can be used below to render.

Technically, useState + useEffect method has to render the component twice before it renders the expected output while the useMemo approach would do it in a single render. Not a biggie, but it improves the readability as well.

[yomete]

good catch, i'll make that change.

[yomete]

hmm so I made changes based on the feedback above to now use useMemo.

  const displayText = useMemo(() => {
    const textElement = textRef.current;
    if (textElement === null) return text;

    return showFunctionNameFromLeft ? text : calculateTruncatedText(text, textElement, width);
  }, [text, width, showFunctionNameFromLeft, textRef]);

but with this new change we don't get to see the truncated text when it should be shown.

I'm assuming this is related to the usage of the textRef ref and the fact that useMemo is running before the ref is attached to the DOM, therefore the initial render will always have textRef.current as null, and the memoization is preventing subsequent updates.

[yomete]

cc @manojVivek

[manojVivek]

Ah yes, I missed the ref. Then lets go with the current implementation only.