can't toggle between structures

[joemin]

Hi, this is maybe more of a question than an issue, but I'm not sure how to resolve this.

Basically, my use case is this: I would like to toggle between the known structure of a protein (which exists as a PDB file), and a predicted structure (another PDB file).

I want to allow the user to select which version of the structure to view in the same component (as there may be many predictions, and I don't want to have too many structure viewers on the page).

What I have tried is something similar to the following:

export default function StructureViewer(props) {

  const [selectedStructure, setSelectedStructure] = useState('');
  const [path, setPath] = useState(null);
  const structureBlobs = {'known': new Blob(), 'predicted': new Blob()}; // in the actual code these are real blobs
  const availableStructures = ['known', 'predicted'];

  useEffect(() => {
    setPath(structureBlobs[selectedStructure]);
  }, [selectedStructure])


  const handleStructureInputChange = (event) => {
    setSelectedStructure(event.target.value);
  }

...

  return (
      <AutoSizer disableHeight>
          <Stage
            height={'300px'}
            width={width}
            params={{
              backgroundColor: '#f5f5f5',
              quality: 'low',
              ...stageParams,
            }}
            cameraState={{}}
          >
            <Component
              path={path}
              reprList={reprList}
              transform={viewerControls}
              loadFileParams={loadFileParams}
            />
          </Stage>
      </AutoSizer>

      <label>Select which structure to view:</label>
      <br/>
      <select name='structure' onChange={handleStructureInputChange}>
        {
          availableStructures.map( (structureName) =>
            <option
              key={structureName.toLowerCase()}
              value={structureName.toLowerCase()}
            >
              {structureName}
            </option>
          )
        }
      </select>
  )
}

This works just fine for viewing the structure at first, but when I select a new structure and change the value of structureName (which changes path), instead of clearing the previous structure and displaying the new one, it superimposes them!

This may be an interesting feature in the future, but for now it's not the desired behavior. Looking at the Component class, it looks like when path updates, it should trigger a re-render here:

  useAsyncEffect(
    function* loadFile(setCancelHandler, c) {
      const abortController = new AbortController();
      setCancelHandler(() => abortController.abort());
      let nextComponent: NGL.Component | undefined;
      try {
        nextComponent = (yield* c(stage.loadFile(path, loadFileParams))) as
          | NGL.Component
          | undefined;
      } catch (error) {
        if (onLoadFailure) {
          onLoadFailure(error);
        }
      }
      if (nextComponent) {
        setComponent(nextComponent);
      }
    },
    [loadFileParams, onLoadFailure, path, stage]
  );

does setComponent(nextComponent) not clear the current component? or is there an easy workaround?

would love any help, and thank you in advance!

[gky360]

Thank you for reporting an issue!

I think I forgot to add a cleanup function to remove an old component from the stage.
I'll add a cleanup function. 4cc4498

[joemin]

amazing, thank you!