updated packages & tsc

package.json

@@ -119,7 +119,7 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.2.4",
+    "typescript": "^4.4.2",
     "webpack": "^5.37.1",
     "webpack-cli": "^4.7.0",
     "webpack-version-file-plugin": "^0.4.0"
@@ -141,14 +141,14 @@
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "h264-mp4-encoder": "^1.0.12",
-    "immer": "^8.0.1",
+    "immer": "^9.0.6",
     "immutable": "^3.8.2",
     "node-fetch": "^2.6.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rxjs": "^6.6.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rxjs": "^7.3.0",
     "swagger-ui-dist": "^3.37.2",
-    "tslib": "^2.1.0",
+    "tslib": "^2.3.1",
     "util.promisify": "^1.0.1",
     "xhr2": "^0.2.0"
   }

src/apps/viewer/index.ts

@@ -325,7 +325,7 @@ export class Viewer {
     }
 
     handleResize() {
-        this.plugin.layout.events.updated.next();
+        this.plugin.layout.events.updated.next(void 0);
     }
 }
 

src/cli/cifschema/util/cif-dic.ts

@@ -372,7 +372,7 @@ export function generateSchema(frames: CifFrame[], imports: Imports = new Map())
             const parent_name = item_linked.getField('parent_name');
             if (child_name && parent_name) {
                 for (let i = 0; i < item_linked.rowCount; ++i) {
-                    const childName = child_name.str(i);
+                    const childName: string = child_name.str(i);
                     const parentName = parent_name.str(i);
                     if (childName in links && links[childName] !== parentName) {
                         console.log(`${childName} linked to ${links[childName]}, ignoring link to ${parentName}`);

src/mol-canvas3d/canvas3d.ts

@@ -732,7 +732,7 @@ namespace Canvas3D {
             resized,
             setProps: (properties, doNotRequestDraw = false) => {
                 const props: PartialCanvas3DProps = typeof properties === 'function'
-                    ? produce(getProps(), properties)
+                    ? produce(getProps(), properties as any)
                     : properties;
 
                 const cameraState: Partial<Camera.Snapshot> = Object.create(null);

src/mol-model-props/computed/interactions/contacts-builder.ts

@@ -46,7 +46,7 @@ namespace IntraContactsBuilder {
                     get: () => {
                         return elementsIndex || (elementsIndex = InteractionsIntraContacts.createElementsIndex(graph, features, elementsCount));
                     }
-                });
+                }) as any;
                 return contacts;
             }
         };

src/mol-plugin-state/manager/animation.ts

@@ -34,11 +34,11 @@ class PluginAnimationManager extends StatefulPluginComponent<PluginAnimationMana
     get animations() { return this._animations; }
 
     private triggerUpdate() {
-        this.events.updated.next();
+        this.events.updated.next(void 0);
     }
 
     private triggerApply() {
-        this.events.applied.next();
+        this.events.applied.next(void 0);
     }
 
     getParams(): PD.Params {

src/mol-plugin-state/manager/interactivity.ts

@@ -52,7 +52,7 @@ class InteractivityManager extends StatefulPluginComponent<InteractivityManagerS
         this.updateState({ props: _new });
         this.lociSelects.setProps(_new);
         this.lociHighlights.setProps(_new);
-        this.events.propsUpdated.next();
+        this.events.propsUpdated.next(void 0);
     }
 
     constructor(readonly plugin: PluginContext, props: Partial<InteractivityManager.Props> = {}) {

src/mol-plugin-state/manager/snapshots.ts

@@ -51,13 +51,13 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
             current: this.state.current === id ? void 0 : this.state.current,
             entries: this.state.entries.delete(this.getIndex(e))
         });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     add(e: PluginStateSnapshotManager.Entry) {
         this.entryMap.set(e.snapshot.id, e);
         this.updateState({ current: e.snapshot.id, entries: this.state.entries.push(e) });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     replace(id: string, snapshot: PluginState.Snapshot) {
@@ -72,7 +72,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
         });
         this.entryMap.set(snapshot.id, e);
         this.updateState({ current: e.snapshot.id, entries: this.state.entries.set(idx, e) });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     move(id: string, dir: -1 | 1) {
@@ -91,21 +91,21 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
         entries.set(from, f);
 
         this.updateState({ current: e.snapshot.id, entries: entries.asImmutable() });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     clear() {
         if (this.state.entries.size === 0) return;
         this.entryMap.clear();
         this.updateState({ current: void 0, entries: List<PluginStateSnapshotManager.Entry>() });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     setCurrent(id: string) {
         const e = this.getEntry(id);
         if (e) {
             this.updateState({ current: id as UUID });
-            this.events.changed.next();
+            this.events.changed.next(void 0);
         }
         return e && e.snapshot;
     }
@@ -152,7 +152,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
             isPlaying: false,
             nextSnapshotDelayInMs: snapshot.playback ? snapshot.playback.nextSnapshotDelayInMs : PluginStateSnapshotManager.DefaultNextSnapshotDelayInMs
         });
-        this.events.changed.next();
+        this.events.changed.next(void 0);
         if (!current) return;
         const entry = this.getEntry(current);
         const next = entry && entry.snapshot;
@@ -288,7 +288,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
                 this.next();
                 return;
             }
-            this.events.changed.next();
+            this.events.changed.next(void 0);
             const snapshot = e.snapshot;
             const delay = typeof snapshot.durationInMs !== 'undefined' ? snapshot.durationInMs : this.state.nextSnapshotDelayInMs;
             this.timeoutHandle = setTimeout(this.next, delay);
@@ -301,7 +301,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<{
         this.updateState({ isPlaying: false });
         if (typeof this.timeoutHandle !== 'undefined') clearTimeout(this.timeoutHandle);
         this.timeoutHandle = void 0;
-        this.events.changed.next();
+        this.events.changed.next(void 0);
     }
 
     togglePlay() {

src/mol-plugin-state/manager/structure/component.ts

@@ -53,7 +53,7 @@ class StructureComponentManager extends StatefulPluginComponent<StructureCompone
     async setOptions(options: StructureComponentManager.Options) {
         const interactionChanged = options.interactions !== this.state.options.interactions;
         this.updateState({ options });
-        this.events.optionsUpdated.next();
+        this.events.optionsUpdated.next(void 0);
 
         const update = this.dataState.build();
 

src/mol-plugin-state/manager/structure/focus.ts

@@ -66,14 +66,14 @@ export class StructureFocusManager extends StatefulPluginComponent<StructureFocu
             // move to top, use new
             arrayRemoveAtInPlace(this.state.history, idx);
             this.state.history.unshift(entry);
-            this.events.historyUpdated.next();
+            this.events.historyUpdated.next(void 0);
             return;
         }
 
         this.state.history.unshift(entry);
         if (this.state.history.length > HISTORY_CAPACITY) this.state.history.pop();
 
-        this.events.historyUpdated.next();
+        this.events.historyUpdated.next(void 0);
     }
 
     set(entry: FocusEntry) {
@@ -156,7 +156,7 @@ export class StructureFocusManager extends StatefulPluginComponent<StructureFocu
             if (keep.length !== this.history.length) {
                 this.history.length = 0;
                 this.history.push(...keep);
-                this.events.historyUpdated.next();
+                this.events.historyUpdated.next(void 0);
             }
         });
 

src/mol-plugin-state/manager/structure/selection.ts

@@ -175,7 +175,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
             }
         }
 
-        this.events.additionsHistoryUpdated.next();
+        this.events.additionsHistoryUpdated.next(void 0);
     }
 
     private tryAddHistory(loci: StructureElement.Loci) {
@@ -194,7 +194,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
             // move to top
             arrayRemoveAtInPlace(this.additionsHistory, idx);
             this.additionsHistory.unshift(entry);
-            this.events.additionsHistoryUpdated.next();
+            this.events.additionsHistoryUpdated.next(void 0);
             return;
         }
 
@@ -204,13 +204,13 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
         this.additionsHistory.unshift({ id: UUID.create22(), loci, label });
         if (this.additionsHistory.length > HISTORY_CAPACITY) this.additionsHistory.pop();
 
-        this.events.additionsHistoryUpdated.next();
+        this.events.additionsHistoryUpdated.next(void 0);
     }
 
     private clearHistory() {
         if (this.state.additionsHistory.length !== 0) {
             this.state.additionsHistory = [];
-            this.events.additionsHistoryUpdated.next();
+            this.events.additionsHistoryUpdated.next(void 0);
         }
     }
 
@@ -225,7 +225,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
             this.modifyHistory(e, 'remove');
         }
         if (historyEntryToRemove.length !== 0) {
-            this.events.additionsHistoryUpdated.next();
+            this.events.additionsHistoryUpdated.next(void 0);
         }
     }
 
@@ -239,7 +239,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
                 this.referenceLoci = undefined;
             }
             this.state.stats = void 0;
-            this.events.changed.next();
+            this.events.changed.next(void 0);
         }
     }
 
@@ -276,7 +276,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
                     changedHistory = true;
                 }
             }
-            if (changedHistory) this.events.additionsHistoryUpdated.next();
+            if (changedHistory) this.events.additionsHistoryUpdated.next(void 0);
         } else {
             // clear the selection for ref
             this.entries.set(ref, new SelectionEntry(StructureElement.Loci(structure, [])));
@@ -288,7 +288,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
             this.clearHistoryForStructure(structure);
 
             this.state.stats = void 0;
-            this.events.changed.next();
+            this.events.changed.next(void 0);
         }
     }
 
@@ -305,8 +305,8 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
         }
         this.referenceLoci = undefined;
         this.state.stats = void 0;
-        this.events.changed.next();
-        this.events.loci.clear.next();
+        this.events.changed.next(void 0);
+        this.events.loci.clear.next(void 0);
         this.clearHistory();
         return selections;
     }
@@ -426,7 +426,7 @@ export class StructureSelectionManager extends StatefulPluginComponent<Structure
 
         if (changed) {
             this.state.stats = void 0;
-            this.events.changed.next();
+            this.events.changed.next(void 0);
         }
     }
 

src/mol-plugin/behavior/static/camera.ts

@@ -28,6 +28,6 @@ export function SetSnapshot(ctx: PluginContext) {
 export function Focus(ctx: PluginContext) {
     PluginCommands.Camera.Focus.subscribe(ctx, ({ center, radius, durationMs }) => {
         ctx.managers.camera.focusSphere({ center, radius }, { durationMs });
-        ctx.events.canvas3d.settingsUpdated.next();
+        ctx.events.canvas3d.settingsUpdated.next(void 0);
     });
 }

src/mol-plugin/behavior/static/misc.ts

@@ -16,13 +16,13 @@ export function registerDefault(ctx: PluginContext) {
 export function Canvas3DSetSettings(ctx: PluginContext) {
     PluginCommands.Canvas3D.ResetSettings.subscribe(ctx, () => {
         ctx.canvas3d?.setProps(DefaultCanvas3DParams);
-        ctx.events.canvas3d.settingsUpdated.next();
+        ctx.events.canvas3d.settingsUpdated.next(void 0);
     });
 
     PluginCommands.Canvas3D.SetSettings.subscribe(ctx, e => {
         if (!ctx.canvas3d) return;
 
         ctx.canvas3d?.setProps(e.settings);
-        ctx.events.canvas3d.settingsUpdated.next();
+        ctx.events.canvas3d.settingsUpdated.next(void 0);
     });
 }

src/mol-plugin/layout.ts

@@ -69,7 +69,7 @@ export class PluginLayout extends StatefulPluginComponent<PluginLayoutStateProps
         this.updateState(state);
         if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded) this.handleExpand();
 
-        this.events.updated.next();
+        this.events.updated.next(void 0);
     }
 
     root: HTMLElement | undefined;

src/mol-plugin/util/toast.ts

@@ -64,7 +64,7 @@ export class PluginToastManager extends StatefulPluginComponent<{
             hide: () => this.hideId(id)
         };
 
-        if (this.updateState({ entries: entries.set(id, e) })) this.events.changed.next();
+        if (this.updateState({ entries: entries.set(id, e) })) this.events.changed.next(void 0);
     }
 
     private timeout(id: number, delay?: number) {
@@ -86,7 +86,7 @@ export class PluginToastManager extends StatefulPluginComponent<{
         if (!e) return;
         if (e.timeout !== void 0) clearTimeout(e.timeout);
         e.hide = <any>void 0;
-        if (this.updateState({ entries: this.state.entries.delete(e.id) })) this.events.changed.next();
+        if (this.updateState({ entries: this.state.entries.delete(e.id) })) this.events.changed.next(void 0);
     }
 
     constructor(plugin: PluginContext) {

src/mol-plugin/util/viewport-screenshot.ts

@@ -286,7 +286,7 @@ class ViewportScreenshotHelper extends PluginComponent {
         canvasCtx.putImageData(imageData, 0, 0);
         if (this.cropParams.auto) this.autocrop();
 
-        this.events.previewed.next();
+        this.events.previewed.next(void 0);
         return { canvas, width: w, height: h };
     }
 

src/mol-state/action/manager.ts

@@ -38,7 +38,7 @@ class StateActionManager {
             }
         }
 
-        this.events.added.next();
+        this.events.added.next(void 0);
 
         return this;
     }
@@ -62,7 +62,7 @@ class StateActionManager {
             if (xs.length === 0) this.fromTypeIndex.delete(t.type);
         }
 
-        this.events.removed.next();
+        this.events.removed.next(void 0);
 
         return this;
     }

src/mol-util/download.ts

@@ -39,9 +39,9 @@ export function download (data: Blob | string, downloadName = 'download') {
             setTimeout(() => URL.revokeObjectURL(a.href), 4E4); // 40s
             setTimeout(() => click(a));
         }
-    } else if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
+    } else if (typeof navigator !== 'undefined' && (navigator as any).msSaveOrOpenBlob) {
         // native saveAs in IE 10+
-        navigator.msSaveOrOpenBlob(data, downloadName);
+        (navigator as any).msSaveOrOpenBlob(data, downloadName);
     } else {
         const ua = window.navigator.userAgent;
         const isSafari = /Safari/i.test(ua);

src/mol-util/input/input-observer.ts

@@ -558,7 +558,7 @@ namespace InputObserver {
         }
 
         function endDrag() {
-            interactionEnd.next();
+            interactionEnd.next(void 0);
         }
 
         function onPointerDown(ev: PointerEvent) {
@@ -671,16 +671,16 @@ namespace InputObserver {
 
         function onMouseEnter(ev: Event) {
             isInside = true;
-            enter.next();
+            enter.next(void 0);
         }
 
         function onMouseLeave(ev: Event) {
             isInside = false;
-            leave.next();
+            leave.next(void 0);
         }
 
         function onResize(ev: Event) {
-            resize.next();
+            resize.next({});
         }
 
         function insideBounds(pos: Vec2) {