replaced immutable.js with immer; updated packages

package.json

@@ -78,7 +78,7 @@
     "@types/jest": "^23.3.2",
     "@types/node": "^10.9.4",
     "@types/node-fetch": "^2.1.2",
-    "@types/react": "^16.4.13",
+    "@types/react": "^16.4.14",
     "@types/react-dom": "^16.0.7",
     "benchmark": "^2.1.4",
     "cpx": "^1.5.0",
@@ -87,15 +87,14 @@
     "file-loader": "^2.0.0",
     "glslify-import": "^3.1.0",
     "glslify-loader": "^1.0.2",
-    "graphql-code-generator": "^0.11.0",
-    "graphql-codegen-typescript-template": "^0.11.0",
-    "graphql-tag": "^2.9.2",
-    "jest": "^23.5.0",
+    "graphql-code-generator": "^0.12.2",
+    "graphql-codegen-typescript-template": "^0.12.2",
+    "jest": "^23.6.0",
     "jest-raw-loader": "^1.0.1",
     "mini-css-extract-plugin": "^0.4.2",
     "node-sass": "^4.9.3",
     "raw-loader": "^0.5.1",
-    "resolve-url-loader": "^2.3.1",
+    "resolve-url-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.0",
     "ts-jest": "^23.1.4",
@@ -103,19 +102,19 @@
     "typescript": "^3.0.3",
     "uglify-js": "^3.4.9",
     "util.promisify": "^1.0.0",
-    "webpack": "^4.17.2",
+    "webpack": "^4.19.0",
     "webpack-cli": "^3.1.0"
   },
   "dependencies": {
     "argparse": "^1.0.10",
     "compression": "^1.7.3",
     "express": "^4.16.3",
-    "graphql": "^0.13.2",
+    "graphql": "^14.0.2",
     "graphql-request": "^1.8.2",
-    "immutable": "^4.0.0-rc.9",
+    "immer": "^1.6.0",
     "node-fetch": "^2.2.0",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
+    "react": "^16.5.1",
+    "react-dom": "^16.5.1",
     "rxjs": "^6.3.2"
   }
 }

src/mol-app/controller/misc/jobs.ts

@@ -5,7 +5,7 @@
  * Copyright (c) 2016 - now David Sehnal, licensed under Apache 2.0, See LICENSE file for more info.
  */
 
-import { Map } from 'immutable'
+import produce from 'immer'
 import { filter } from 'rxjs/operators';
 
 import { Controller } from '../controller'
@@ -21,7 +21,7 @@ export interface JobInfo {
 }
 
 export interface JobsState {
-    jobs: Map<number, JobInfo>
+    jobs: { [k: number]: JobInfo }
 }
 
 export class JobsController extends Controller<JobsState> {
@@ -30,38 +30,42 @@ export class JobsController extends Controller<JobsState> {
         let jobs = this.latestState.jobs!;
 
         if (!isWatched) {
-            if (jobs.has(state.jobId)) {
-                jobs = jobs.delete(state.jobId);
+            if (jobs[state.jobId] !== undefined) {
+                jobs = produce(jobs, _jobs => { delete _jobs[state.jobId] });
                 this.setState({ jobs });
             }
             return;
         }
 
-        jobs = jobs.set(state.jobId, {
-            name: state.name,
-            message: state.message,
-            abort: state.abort
-        });
+        jobs = produce(jobs, _jobs => {
+            _jobs[state.jobId] = {
+                name: state.name,
+                message: state.message,
+                abort: state.abort
+            };
+        })
         this.setState({ jobs });
     }
 
     private started(job: Job.Info) {
         this.setState({
-            jobs: this.latestState.jobs!.set(job.id, { name: job.name, message: 'Running...' })
+            jobs: produce(this.latestState.jobs!, _jobs => {
+                _jobs[job.id] = { name: job.name, message: 'Running...' }
+            })
         });
     }
 
     private completed(taskId: number) {
-        if (!this.latestState.jobs!.has(taskId)) return;
+        if (!this.latestState.jobs![taskId]) return;
 
         this.setState({
-            jobs: this.latestState.jobs!.delete(taskId)
+            jobs: produce(this.latestState.jobs!, _jobs => { delete _jobs[taskId] })
         });
     }
 
     constructor(context: Context, private type: Job.Type) {
         super(context, {
-            jobs: Map<number, JobInfo>()
+            jobs: {}
         });
 
         JobEvents.StateUpdated.getStream(this.context)

src/mol-app/controller/misc/log.ts

@@ -5,18 +5,20 @@
  * Copyright (c) 2016 - now David Sehnal, licensed under Apache 2.0, See LICENSE file for more info.
  */
 
-import { List } from 'immutable'
+import produce from 'immer'
 
 import { Controller } from '../controller'
 import { Context } from '../../context/context';
 import { LogEvent } from '../../event/basic';
 import { Logger } from '../../service/logger';
 
-export class LogController extends Controller<{ entries: List<Logger.Entry> }> {
+export class LogController extends Controller<{ entries: Logger.Entry[] }> {
     constructor(context: Context) {
-        super(context, { entries: List<Logger.Entry>() });
+        super(context, { entries: [] });
 
         LogEvent.getStream(this.context)
-            .subscribe(e => this.setState({ entries: this.latestState.entries.push(e.data) }))
+            .subscribe(e => this.setState({
+                entries: produce(this.latestState.entries, _entries => { _entries.push(e.data) })
+            }))
     }
 }

src/mol-app/ui/misc/jobs.tsx

@@ -30,10 +30,10 @@ export class Overlay extends View<JobsController, {}, {}> {
     render() {
         const state = this.controller.latestState;
 
-        if (!state.jobs!.count()) return <div className='molstar-empty-control' />
+        if (!Object.keys(state.jobs).length) return <div className='molstar-empty-control' />
 
         const jobs: any[] = [];
-        state.jobs!.forEach((t, k) => jobs.push(<JobState key={k} info={t!} />));
+        Object.keys(state.jobs).forEach(k => jobs.push(<JobState key={k} info={state.jobs[parseInt(k)]} />));
 
         return <div className='molstar-overlay'>
             <div className='molstar-overlay-background' />
@@ -52,10 +52,10 @@ export class BackgroundJobs extends View<JobsController, {}, {}> {
     render() {
         const state = this.controller.latestState;
 
-        if (!state.jobs!.count()) return <div className='molstar-empty-control' />
+        if (!Object.keys(state.jobs).length) return <div className='molstar-empty-control' />
 
         const jobs: any[] = [];
-        state.jobs!.forEach((t, k) => jobs.push(<JobState key={k} info={t!} isSmall={true} />));
+        Object.keys(state.jobs).forEach(k => jobs.push(<JobState key={k} info={state.jobs[parseInt(k)]} isSmall={true} />));
 
         return <div className='molstar-background-jobs'>
             {jobs}

tsconfig.json

@@ -8,8 +8,6 @@
         "noUnusedLocals": true,
         "strictNullChecks": true,
         "strictFunctionTypes": true,
-        //"keyofStringsOnly": true,
-        // temp fix for immutable package: has(key: string): key is keyof TProps; => has(key: string | number | Symbol): key is keyof TProps;
         //"downlevelIteration": true,
         "jsx": "react",
         "lib": [ "es6", "dom", "esnext.asynciterable", "es2016" ],