alphafold--first-test-url

[aurreco-uga]

No description provided.

[aurreco-uga]

[bobular]

Hi @aurreco-uga - I figured out the problem and solution but got Claude to do the typing below.

Problem

The error messages in the AlphaFold section are rendering outside the CollapsibleSection component. Looking at the screenshot provided, the pink error message appears as a standalone element rather than being contained within the expandable/collapsible "AlphaFold" section.

Current Behavior

The code has several early returns that render error states:

• No data URL (lines 81-92)
• Loading state (lines 95-106)
• Invalid/404 URL (lines 109-145)

These all return plain <div> elements that are not wrapped in the CollapsibleSection structure. Only when dataUrlStatus === 'valid' does it render <BlockRecordAttributeSection {...props} />, which provides the proper collapsible section wrapper.

Additional Issue

The error messages may be rendering regardless of whether the section is collapsed or expanded. The error states should only be visible when the section is open.

Proposed Solution

Create a wrapper component within the same file that mimics what BlockRecordAttributeSection does - it should:

1. Set up the CollapsibleSection structure
2. Accept children as a prop to render custom content inside the section
3. Respect the props.isCollapsed state

Example Implementation

  // Add this wrapper component in AlphaFoldAttributeSection.tsx
  function AlphaFoldErrorWrapper({
    children,
    attribute: { name, displayName, help },
    isCollapsed,
    onCollapsedChange,
    title
  }: Props & { children: React.ReactNode }) {
    const headerContent = title ?? (
      <DefaultSectionTitle displayName={displayName} help={help} />
    );

    return (
      <CollapsibleSection
        id={name}
        className="wdk-RecordAttributeSection"
        headerContent={headerContent}
        isCollapsed={isCollapsed}
        onCollapsedChange={onCollapsedChange}
      >
        <div className="wdk-RecordAttributeSectionContent">
          {children}
        </div>
      </CollapsibleSection>
    );
  }

Note: You'll need to import CollapsibleSection and DefaultSectionTitle from the appropriate WDK locations.

Then Update the Early Returns

Replace the plain <div> returns with the wrapper:

// No data URL case (lines 81-92)
if (!hasDataUrl) {
  return (
    <AlphaFoldErrorWrapper {...props}>
      <div className="wdk-RecordAttributeSectionItem" style={{ padding: '1em' }}>
        <p>
          <em>AlphaFold structure prediction not available for this gene.</em>
        </p>
      </div>
    </AlphaFoldErrorWrapper>
  );
}

// + do similar for:
// Loading state (lines 95-106)
// Invalid URL case (lines 109-145)

Benefits

1. Consistent UI: All states (error, loading, valid) appear within the same collapsible section structure
2. Proper Collapsing: Error messages will only be visible when the section is expanded
3. Cleaner Code: Reuses the existing section wrapper pattern
4. Better UX: Users see the AlphaFold section header and can choose to expand/collapse it, regardless of the content state

Next Steps

1. Examine BlockRecordAttributeSection implementation to determine the exact CollapsibleSection imports and props needed
2. Implement the AlphaFoldErrorWrapper component
3. Update all early return statements to use the wrapper
4. Test that the section collapses/expands properly in all states
5. Include testing of expand/collapse from left-hand navigation panel

[bobular]

btw I did consider alternative solutions. We could have enhanced BlockRecordAttributeSection to take error message props and it could have displayed those, but that felt like overkill for a single use case. The wrapper approach keeps the validation logic localized to the AlphaFold component without adding complexity to a shared component used throughout the codebase.

[aurreco-uga]

omar approved the current proposal, UI wise.. how about merging it into the patch branch and we work on your proposal for main? i could see other sections with similar issues and it would be good to handle all the same...

[bobular]

I'd need to test it on a dev site first. Do you have one? It wasn't simple for me to put up a local dev server or a dev site due to the yarn3/yarn4 divergence.

[aurreco-uga]

i have my implement on https://aurreco.plasmodb.org/plasmo.aurreco/app/record/gene/PfDd2_130048800
(68g site with patch branch for monorepo plus updates for alphafold)

or are you meaning to test your proposal on a master site? i thought we could do that later

[bobular]

Thanks.

I don't like the way it breaks the page mechanics. Once the section has been expanded there is no way to hide the warning message by collapsing it again. Even via the left-hand nav menu.

I prefer to implement* my suggestion (I can do it if you prefer) and then re-implement something more general later when we have identified the wider need.

ETA: * and cherry pick into main

[bobular]

Hi @aurreco-uga - I demoed and discussed with Steve in scrum and we're fine with this being merged as-is to the legacy branch(es). If we need to revisit this on the feature site/main (Kathryn's latest message suggests it may be less of a problem when the data is less stale) then we have this PR to work from.

[aurreco-uga]

done
https://aurreco.tritrypdb.org/tritrypdb.aurreco/app/record/gene/LdBPK_353670.1#category:structure-analysis
pls merge

[bobular]

Just wondering why you didn't wrap this (and the next "early return" a few lines down) in the AlphaFoldErrorWrapper?

[aurreco-uga]

we havent seen instances of those.. probably i was in a hurry and focused on what was needed..

[bobular]

we havent seen instances of those.. probably i was in a hurry and focused on what was needed..

Sure - no worries!