Make adaptive trimmer more resilient

Up to now, the adaptive trimmer needed to be inserted in a DOM element
with a fixed width, and overflow-X set to hidden.
(This was required so that it can find the best size to fill it, detecting
overflow.)

This was fragile, because it relied on all parent components being configured
in a particular way.

This changes makes it so that we can detect overflow recursively
on any of the parent elements, which means that there are no
restrictions on parent configuration.

List of technical changes:
- New method for detecting overflow (on all parent elements)
- Check overflow status on short string as baseline,
  and then compare the situation with a longer string
- Introduce debug logging (on demand)
- Introduce a context-sensitive minimum length
- Support shortener functions that return a different length than requested
- Make sure to never elongate instead of shortening
- Reduce jumpy behavior (by hiding content during size discovery)
- Move the logic to a separate hook
- Introduce singleton controller, injected as context
- Set minimum lengths where required
- Add more extensive debug output
- Use more descriptive names for debugging
- Solve some wrapping issues related to highlighting

Author: csillag

.changelog/1963.trivial.md

@@ -0,0 +1 @@
+Make adaptive trimmer more resilient

src/app/components/Account/AccountLink.tsx

@@ -22,22 +22,11 @@ const WithTypographyAndLink: FC<{
   mobile?: boolean
   children: ReactNode
   labelOnly?: boolean
-}> = ({ scope, address, children, mobile, labelOnly }) => {
+}> = ({ scope, address, children, labelOnly }) => {
   const to = RouteUtils.getAccountRoute(scope, address)
   return (
     <WithHighlighting address={address}>
-      <Typography
-        variant="mono"
-        component="span"
-        sx={{
-          ...(mobile
-            ? {
-                maxWidth: '100%',
-                overflow: 'hidden',
-              }
-            : {}),
-        }}
-      >
+      <Typography variant="mono" component="span">
         {labelOnly ? (
           children
         ) : (
@@ -186,13 +175,21 @@ export const AccountLink: FC<Props> = ({
           <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
             <AccountMetadataSourceIndicator source={accountMetadata.source} />
             <AdaptiveHighlightedText
+              idPrefix="account-name"
               text={accountName}
               pattern={highlightedPartOfName}
               extraTooltip={tooltipTitle}
+              minLength={5}
             />
           </Box>
         )}
-        <AdaptiveTrimmer text={address} strategy="middle" tooltipOverride={tooltipTitle} />
+        <AdaptiveTrimmer
+          idPrefix="account-address"
+          text={address}
+          strategy="middle"
+          tooltipOverride={tooltipTitle}
+          minLength={13}
+        />
       </>
     </WithTypographyAndLink>
   )

src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx

@@ -1,14 +1,34 @@
-import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, ReactNode, useMemo } from 'react'
 import Box from '@mui/material/Box'
 import InfoIcon from '@mui/icons-material/Info'
 import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
+import { getAdaptiveId, ShorteningResult, useAdaptiveSizing } from './hooks'
 
 type AdaptiveDynamicTrimmerProps = {
+  /**
+   * The ID (prefix) used for debugging
+   */
+  idPrefix: string
+
+  /**
+   * A function to return the full content
+   */
   getFullContent: () => {
     content: ReactNode
     length: number
   }
-  getShortenedContent: (wantedLength: number) => ReactNode
+
+  /**
+   * A function to return shortened content
+   */
+  getShortenedContent: (wantedLength: number) => ShorteningResult
+
+  /**
+   * The minimum length we ever want to shorten to.
+   *
+   * Default is 2
+   */
+  minLength?: number
 
   /**
    * Normally, the tooltip will be the full content. Do you want to add something?
@@ -19,6 +39,11 @@ type AdaptiveDynamicTrimmerProps = {
    * Normally, the tooltip will be the full content. Do you want to replace it with something else?
    */
   tooltipOverride?: ReactNode
+
+  /**
+   * Do we want to see debug output about the adaptive trimming process?
+   */
+  debugMode?: boolean
 }
 
 /**
@@ -31,132 +56,44 @@ type AdaptiveDynamicTrimmerProps = {
  * expects a function to provide a shortened version of the components.
  */
 export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
+  idPrefix,
   getFullContent,
   getShortenedContent,
   extraTooltip,
   tooltipOverride,
+  debugMode = false,
+  minLength = 2,
 }) => {
-  // Initial setup
-  const textRef = useRef<HTMLDivElement | null>(null)
-  const { content: fullContent, length: fullLength } = getFullContent()
-
-  // Data about the currently rendered version
-  const [currentContent, setCurrentContent] = useState<ReactNode>()
-  const [currentLength, setCurrentLength] = useState(0)
-
-  // Known good - this fits
-  const [largestKnownGood, setLargestKnownGood] = useState(0)
-
-  // Known bad - this doesn't fit
-  const [smallestKnownBad, setSmallestKnownBad] = useState(fullLength + 1)
-
-  // Are we exploring our possibilities now?
-  const [inDiscovery, setInDiscovery] = useState(false)
-
-  const attemptContent = useCallback((content: ReactNode, length: number) => {
-    setCurrentContent(content)
-    setCurrentLength(length)
-  }, [])
-
-  const attemptShortenedContent = useCallback(
-    (length: number) => {
-      const content = getShortenedContent(length)
-
-      attemptContent(content, length)
-    },
-    [attemptContent, getShortenedContent],
+  const id = useMemo(() => getAdaptiveId(idPrefix), [idPrefix])
+
+  const { currentContent, fullContent, textRef, isTruncated, isFinal } = useAdaptiveSizing(
+    id,
+    getFullContent,
+    getShortenedContent,
+    debugMode,
+    minLength,
   )
 
-  const initDiscovery = useCallback(() => {
-    setLargestKnownGood(0)
-    setSmallestKnownBad(fullLength + 1)
-    attemptContent(fullContent, fullLength)
-    setInDiscovery(true)
-  }, [fullContent, fullLength, attemptContent])
-
-  useEffect(() => {
-    initDiscovery()
-    const handleResize = () => {
-      initDiscovery()
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [initDiscovery])
-
-  useEffect(() => {
-    if (inDiscovery) {
-      if (!textRef.current) {
-        return
-      }
-      const isOverflow = textRef.current.scrollWidth > textRef.current.clientWidth
-
-      if (isOverflow) {
-        // This is too much
-
-        // Update known bad length
-        const newSmallestKnownBad = Math.min(currentLength, smallestKnownBad)
-        setSmallestKnownBad(newSmallestKnownBad)
-
-        // We should try something smaller
-        attemptShortenedContent(Math.floor((largestKnownGood + newSmallestKnownBad) / 2))
-      } else {
-        // This is OK
-
-        // Update known good length
-        const newLargestKnownGood = Math.max(currentLength, largestKnownGood)
-        setLargestKnownGood(currentLength)
-
-        if (currentLength === fullLength) {
-          // The whole thing fits, so we are good.
-          setInDiscovery(false)
-        } else {
-          if (currentLength + 1 === smallestKnownBad) {
-            // This the best we can do, for now
-            setInDiscovery(false)
-          } else {
-            // So far, so good, but we should try something longer
-            attemptShortenedContent(Math.floor((newLargestKnownGood + smallestKnownBad) / 2))
-          }
-        }
-      }
-    }
-  }, [
-    attemptShortenedContent,
-    currentLength,
-    fullContent,
-    fullLength,
-    inDiscovery,
-    initDiscovery,
-    largestKnownGood,
-    smallestKnownBad,
-  ])
-
-  const title =
-    currentLength !== fullLength ? (
-      <Box>
-        <Box>{tooltipOverride ?? fullContent}</Box>
-        {extraTooltip && (
-          <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
-            <InfoIcon />
-            {extraTooltip}
-          </Box>
-        )}
-      </Box>
-    ) : (
-      extraTooltip
-    )
+  const title = isTruncated ? (
+    <Box>
+      <Box>{tooltipOverride ?? fullContent}</Box>
+      {extraTooltip && (
+        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+          <InfoIcon />
+          {extraTooltip}
+        </Box>
+      )}
+    </Box>
+  ) : (
+    extraTooltip
+  )
 
   return (
-    <Box
-      ref={textRef}
-      sx={{
-        overflow: 'hidden',
-        maxWidth: '100%',
-        textWrap: 'nowrap',
-      }}
-    >
-      <MaybeWithTooltip title={title} spanSx={{ whiteSpace: 'nowrap' }}>
+    <Box component={'span'} ref={textRef} sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
+      <MaybeWithTooltip
+        title={title}
+        spanSx={{ textWrap: 'nowrap', whiteSpace: 'nowrap', opacity: isFinal ? 1 : 0 }}
+      >
         {currentContent}
       </MaybeWithTooltip>
     </Box>

src/app/components/AdaptiveTrimmer/AdaptiveTrimmer.tsx

@@ -3,9 +3,21 @@ import { AdaptiveDynamicTrimmer } from './AdaptiveDynamicTrimmer'
 import { trimLongString } from 'app/utils/trimLongString'
 
 type AdaptiveTrimmerProps = {
+  /**
+   * ID prefix to use (for debugging)
+   */
+  idPrefix?: string
+
   text: string | undefined
   strategy: 'middle' | 'end'
 
+  /**
+   * The minimum length we ever want to shorten to.
+   *
+   * Default is 2
+   */
+  minLength?: number
+
   /**
    * Normally, the tooltip will be the text. Do you want to add something extra?
    */
@@ -15,6 +27,11 @@ type AdaptiveTrimmerProps = {
    * Normally, the tooltip will be the text. Do you want to replace it with something else?
    */
   tooltipOverride?: ReactNode
+
+  /**
+   * De we want extra debug output about the sizing process?
+   */
+  debugMode?: boolean
 }
 
 /**
@@ -27,19 +44,37 @@ type AdaptiveTrimmerProps = {
  * supplying it with a generator function which simply trims the given text to the wanted length.
  */
 export const AdaptiveTrimmer: FC<AdaptiveTrimmerProps> = ({
+  idPrefix = 'adaptive-trimmer',
   text = '',
   strategy = 'end',
   extraTooltip,
   tooltipOverride,
-}) => (
-  <AdaptiveDynamicTrimmer
-    getFullContent={() => ({ content: text, length: text.length })}
-    getShortenedContent={length =>
-      strategy === 'middle'
-        ? trimLongString(text, Math.floor(length / 2) - 1, Math.floor(length / 2) - 1)!
-        : trimLongString(text, length, 0)!
-    }
-    tooltipOverride={tooltipOverride}
-    extraTooltip={extraTooltip}
-  />
-)
+  minLength,
+  debugMode,
+}) => {
+  // console.log('Text', text)
+  return (
+    <AdaptiveDynamicTrimmer
+      idPrefix={idPrefix}
+      getFullContent={() => ({ content: text, length: text.length })}
+      getShortenedContent={wantedLength => {
+        if (wantedLength >= text.length) {
+          return {
+            content: text,
+            length: text.length,
+          }
+        }
+        const content =
+          strategy === 'middle'
+            ? trimLongString(text, Math.floor(wantedLength / 2), Math.ceil(wantedLength / 2) - 1)!
+            : trimLongString(text, wantedLength, 0)!
+        const length = content.length
+        return { content, length }
+      }}
+      minLength={minLength}
+      tooltipOverride={tooltipOverride}
+      extraTooltip={extraTooltip}
+      debugMode={debugMode}
+    />
+  )
+}