State gallery: Fix reinitialization after controls hidden and re-rendered

Author: midlik

src/app/extensions/state-gallery/ui.tsx

@@ -25,48 +25,33 @@ type Values = PD.ValuesFor<typeof Params>
 
 export class StateGalleryControls extends CollapsableControls<{}, StateGalleryControlsState> {
     protected defaultState(): StateGalleryControlsState & CollapsableState {
+        const existingManager = StateGalleryCustomState(this.plugin).manager?.value;
         return {
             // CollapsableControls state
             header: '3D State Gallery',
             brand: { accent: 'green', svg: CollectionsOutlinedSvg },
             isCollapsed: false,
             // Own state
-            entryId: '',
-            manager: undefined,
+            entryId: existingManager?.entryId ?? '',
+            manager: existingManager,
             isLoading: false,
             isBusy: false,
+            description: existingManager?.entryId.toUpperCase(),
         };
     }
 
     componentDidMount() {
         this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, sel => {
             if (this.state.entryId === '' && sel.structures.length > 0) {
                 const id = sel.structures[0].cell.obj?.data.model.entryId;
-                if (id) this.setEntryId(id.toLowerCase());
+                if (id) {
+                    this.setEntryId(id.toLowerCase());
+                }
             }
-            // this.setState({
-            //     isHidden: !this.canEnable(),
-            //     description: StructureHierarchyManager.getSelectedStructuresDescription(this.plugin),
-            //     description: this.state.entryId,
-            // });
         });
-        // this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
-        //     if (e.cell.transform.transformer === AssemblySymmetry3D) this.forceUpdate();
-        // });
         this.subscribe(this.plugin.behaviors.state.isBusy, isBusy => this.setState({ isBusy }));
     }
 
-    // private get pivot() {
-    //     const structures = this.plugin.managers.structure.hierarchy.selection.structures;
-    //     if (structures.length === 1) {
-    //         return this.plugin.managers.structure.hierarchy.selection.structures[0];
-    //     } else {
-    //         return undefined;
-    //     }
-    // }
-    // private canEnable() {
-    //     return isApplicable(this.pivot?.cell.obj?.data);
-    // }
     private get values(): Values {
         return {
             entryId: this.state.entryId,
@@ -75,24 +60,25 @@ export class StateGalleryControls extends CollapsableControls<{}, StateGalleryCo
     private setEntryId = (entryId: string) => {
         this.setState(old => ({
             entryId,
-            manager: (entryId === old.manager?.entryId) ? old.manager : undefined,
         }));
     };
     private load = async () => {
+        if (this.loadDisabled()) return;
         this.setState({ isLoading: true, description: undefined });
         const manager = await StateGalleryManager.create(this.plugin, this.state.entryId);
         this.setState({ manager, isLoading: false, description: this.state.entryId.toUpperCase() });
     };
     private onChangeValues = (values: Values) => {
         this.setEntryId(values.entryId);
     };
+    private loadDisabled = () => !this.state.entryId || this.state.entryId === this.state.manager?.entryId || this.state.isBusy || this.state.isLoading;
 
     protected renderControls(): React.JSX.Element | null {
         return <>
             <ParameterControls params={Params} values={this.values} onChangeValues={this.onChangeValues} onEnter={this.load} />
-            {!this.state.manager &&
+            {(!this.state.manager || this.state.manager.entryId !== this.state.entryId) &&
                 <Button icon={this.state.isLoading ? undefined : CheckSvg} title='Load'
-                    disabled={!this.state.entryId || this.state.isBusy || this.state.isLoading} onClick={this.load} className='msp-btn-block'>
+                    disabled={this.loadDisabled()} onClick={this.load} className='msp-btn-block'>
                     {this.state.isLoading ? 'Loading...' : 'Load'}
                 </Button>
             }
@@ -111,25 +97,24 @@ function ManagerControls(props: { manager: StateGalleryManager }) {
     const [selected, setSelected] = React.useState<Image | undefined>(undefined);
     const [status, setStatus] = React.useState<LoadingStatus>('ready');
 
+    const keyDownTargetRef = React.useRef<HTMLDivElement>(null);
+    const handleKeyDown = async (e: React.KeyboardEvent) => {
+        if (e.code === 'ArrowLeft') await props.manager.loadPrevious();
+        if (e.code === 'ArrowRight') await props.manager.loadNext();
+    };
+
     React.useEffect(() => {
-        if (images.length > 0) {
+        if (images.length > 0 && props.manager.events.requestedImage.value === undefined) {
             props.manager.load(images[0]);
         }
+        keyDownTargetRef.current?.focus();
         const subs = [
             props.manager.events.status.subscribe(status => setStatus(status)),
             props.manager.events.requestedImage.subscribe(img => setSelected(img)),
         ];
         return () => subs.forEach(sub => sub.unsubscribe());
     }, [props.manager]);
 
-    const keyDownTargetRef = React.useRef<HTMLDivElement>(null);
-    React.useEffect(() => keyDownTargetRef.current?.focus(), []);
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.code === 'ArrowLeft') props.manager.loadPrevious();
-        if (e.code === 'ArrowRight') props.manager.loadNext();
-    };
-
     if (nImages === 0) {
         return <div style={{ margin: 8 }}>No data available for {props.manager.entryId}.</div>;
     }

src/app/styles/index.scss

@@ -100,8 +100,7 @@ svg.pdbe-animated-logo {
 }
 
 .pdbemolstar-state-gallery-title-box {
-    // line-height: 32px; // line-height: $row-height;
-    width: 100%; // 400px;
+    width: 500px;
     max-width: 100%;
     background-color: #99999930; // background-color: $msp-form-control-background;
 }

src/app/ui/pdbe-viewport.tsx

@@ -39,7 +39,6 @@ export class CustomizableDefaultViewport extends DefaultViewport {
                     </div>
                 </div>
             </div>
-            {/* <SelectionViewportControls /> */}
             <VPControls />
             <BackgroundTaskProgress />
             <div className='msp-highlight-toast-wrapper'>