Add an expand option for long sequence lists [...]

[anna-parker]

As we at times have very long lists of substitutions it would be good to allow users the the option to expand or close the list of all mutations for a sequence.

[theosanderson]

I think we should maybe do a couple of different things:

• collapsing feature beyond a few lines of mutations
• if the number of mutations is truly insane, many thousands: maybe we should just decline to show mutations at all and either display "[too many mutations to display]", or display nothing to avoid e.g. degrading people's browser performance

[theosanderson]

As mentioned on Slack it would be nice to use hidden-until-found for all truncation

[chaoran-chen]

React unfortunately doesn't support hidden-until-found, yet: facebook/react#24741

<div hidden="until-found"> gets translated to just <div hidden>.

[theosanderson]

Ah, we should be able to hack this with useRef and useEffect though I'd guess (manipulating the raw dom). I can try to make a wrapper component that does that

[theosanderson]

Hmm my experiments didn't work. Not sure why, but we can forget about this for now. For the record, my code:

import React, { useRef, useEffect, type ReactNode } from 'react';

interface HiddenUntilFoundProps {
  hidden: string; 
  children?: ReactNode;  
}

export const HiddenUntilFound: React.FC<HiddenUntilFoundProps> = ({hidden, children}) => {
  const elementRef = useRef<HTMLDivElement>(null);  // Specify that the ref will be attached to a div element
  
  useEffect(() => {
    if (elementRef.current) {
      elementRef.current.hidden = hidden;
    }
  }, [hidden]);

  return (
    <div ref={elementRef}>
      {children}
    </div>
  );
};
used as e.g. <HiddenUntilFound hidden="until-found">hello</HiddenUntilFound>

I can see that the DOM seems to get set up kind of correctly, but it doesn't work in the end. It seems like some more permanent hidden, which results in display:none gets added.