Some updates.

package.json

@@ -35,7 +35,7 @@
     "angular2-multiselect-dropdown": "^4.6.3",
     "core-js": "^3.6.4",
     "eslint": ">=4.18.2",
-    "highcharts": "^8.0.4",
+    "highcharts": "^9.1.0",
     "plotly.js": "^1.52.3",
     "rxjs": "~6.5.4",
     "serialize-javascript": ">=2.1.1",

src/app/app.component.css

@@ -0,0 +1,3 @@
+ul.navlist {
+    list-style-type: none !important;
+}

src/app/disease-parameter-settings/disease-parameter-settings.component.html

@@ -9,4 +9,4 @@
     <input matInput type="number" [(ngModel)]="simulation.gamma" />
 </mat-form-field> &nbsp;<fa-icon [icon]="faInfo"  matTooltip="The fraction of people that recover per timestep. If, on average, it takes 10 days to recover, and the timestep is one day, this value should be 0.1."></fa-icon>
 
-<p>The current disease-spread parameter R0 is: <strong>{{ simulation.beta / simulation.gamma }}</strong>&nbsp;<fa-icon [icon]="faInfo"  matTooltip="This value describes how many people an infected person infects, on average, over the course of their recovery. If this value is above 1, an epidemic in an unvaccinated population is possible."></fa-icon></p>  
+<p>The current disease-spread parameter R0 is: <strong>{{ simulation.beta / simulation.gamma | number}}</strong>&nbsp;<fa-icon [icon]="faInfo"  matTooltip="This value describes how many people an infected person infects, on average, over the course of their recovery. If this value is above 1, an epidemic in an unvaccinated population is possible."></fa-icon></p>  

src/app/flight-data.service.ts

@@ -83,7 +83,11 @@ export class BaseDataService {
   }
 
   countryIndexIsValid(idx: number): boolean {
-    return (idx >= 0 && idx < this.countries.length);
+    if (idx >= 0 && idx < this.countries.length) {
+      return this.countries[idx].fractionIncoming > 0;  
+    } else {
+      return false;
+    }
   }
 }
 

src/app/map-view/map-view.component.html

@@ -1,6 +1,7 @@
 <div style="width: 100%; height: 600px;" id="myDiv"></div>
-<button mat-raised-button color="primary" (click)="visualize()">Run full animation</button> <br />
-<button mat-raised-button color="primary" (click)="draw()">Draw single frame</button> <br />
+<button mat-raised-button color="primary" *ngIf="!is_running" (click)="visualize()" style="margin-right: 20px;">Run full animation</button> 
+<button mat-raised-button color="primary" *ngIf="is_running" (click)="stop()" style="margin-right: 20px;">Stop animation</button>
+<button mat-raised-button color="primary" (click)="reset()" style="margin-right: 20px;">Reset animation</button>
 <mat-slider
     class="example-margin"
     [disabled]="disabled"

src/app/map-view/map-view.component.ts

@@ -22,6 +22,8 @@ export class MapViewComponent implements OnInit {
   thumbLabel = false;
   vertical = false;
   tickInterval = 1;
+  time = 0;
+  is_running = false;
 
 
   layout = {
@@ -32,10 +34,11 @@ export class MapViewComponent implements OnInit {
         projection: {
             type: 'mercator'
         }
-    }
-};
+    },
+  };
 
   constructor(private simulation: SimulationService, private baseData: BaseDataService, public plotlyService: PlotlyService) {
+
     this.simulation.SimulationDone.subscribe((d) => {
       if (d) {
         this.disabled = false;
@@ -54,13 +57,19 @@ export class MapViewComponent implements OnInit {
       values[i] = 0;
       countries[i] = this.baseData.countries[i].nameCode;
     }
+    let max_z = 0.001;
+    for(let i = 0; i < this.baseData.countries.length; i++) {
+      if(this.baseData.countries[i].simulationResultI[0] + this.baseData.countries[i].simulationResultS[0] + this.baseData.countries[i].simulationResultR[0] > 50000000) {
+        max_z = Math.max(max_z, this.baseData.countries[i].globalPeakRate * 100);
+      }
+    }
     this.data =  [{
       type: 'choropleth',
       locations: countries,
+      // locationmode: 'country names',
       z: values,
       text: [],
-      colorscale: [[0, 'rgb(255,255,255)'], [ 100, 'rgb(255,0,0)']],
-      autocolorscale: true,
+      colorscale: [[ 100, 'rgb(255,0,0)']],
       reversescale: false,
       marker: {
           line: {
@@ -70,7 +79,7 @@ export class MapViewComponent implements OnInit {
       },
       tick0: 0,
       zmin: 0,
-      zmax: 1,
+      zmax: max_z,
       dtick: 1000,
       colorbar: {
           autotic: true,
@@ -83,12 +92,22 @@ export class MapViewComponent implements OnInit {
     this.currentTime = 0;
   }
 
+  reset() {
+    this.time = 0;
+    this.is_running = false;
+  }
+
+  stop() {
+    this.is_running = false;
+  }
+
   visualize() {
-    let time = 0;
+    this.max = this.simulation.timeSpan;
+    this.is_running = true;
     const id = setInterval(() => {
-      this.drawForTime(time);
-      time += this.simulation.timeStepLength;
-      if (time > this.simulation.timeSpan) {
+      this.drawForTime(this.time);
+      this.time += this.simulation.timeStepLength;
+      if (this.time > this.simulation.timeSpan || !this.is_running) {
         clearInterval(id);
       }
     }, 100);

src/app/sidenav/sidenav.component.css

@@ -8,7 +8,7 @@
   .sidenav__list {
     padding: 0;
     margin-top: 85px;
-    list-style-type: none;
+    list-style-type: none!important;
   }
 
   .sidenav__list-item {
@@ -19,4 +19,9 @@
   .sidenav__list-item:hover {
     background-color: rgba(255, 255, 255, 0.2);
     cursor: pointer;
-  }
+  }
+
+.navlist {
+  list-style-type: none;
+  padding-left:0px;
+}

src/app/sidenav/sidenav.component.html

@@ -27,6 +27,8 @@
         </div>
       </a>
     </li>
+
+    <li class="navList__heading">Others<i class="far fa-file-alt"></i></li>
     <li><a routerLink="math">
         <div class="navList__subheading row row--align-v-center">
           <span class="navList__subheading-icon"><i class="fas fa-briefcase-medical"></i></span>
@@ -41,5 +43,12 @@
         </div>
       </a>
     </li>
+    <li><a href="https://github.com/SilverLinings89/VirusSimulator" target="_blank">
+      <div class="navList__subheading row row--align-v-center">
+        <span class="navList__subheading-icon"><i class="fas fa-briefcase-medical"></i></span>
+        <span class="navList__subheading-title">Github</span>
+      </div>
+    </a>
+  </li>
   </ul>
 </div>

src/app/simulation.service.ts

@@ -49,29 +49,37 @@ export class SimulationService {
     }
 
     for (let incomingCountry = 0; incomingCountry < countryCount; incomingCountry++ ) {
-      let dS = 0;
-      for (let j = 0; j < countryCount; j++) {
-        for (let k = 0; k < countryCount; k++) {
-          const i = incomingCountry;
-          dS -= this.beta *
-            this.baseData.computeCoupling(i, j) * this.baseData.countries[i].getLatestS() *
-            this.baseData.computeCoupling(k, j) * this.baseData.countries[k].getLatestI() /
-            this.baseData.countries[j].totalInhabitants;
+      if(this.baseData.countries[incomingCountry].fractionIncoming > 0 ) {
+        let dS = 0;
+        for (let j = 0; j < countryCount; j++) {
+          for (let k = 0; k < countryCount; k++) {
+            const i = incomingCountry;
+            dS -= this.beta *
+              this.baseData.computeCoupling(i, j) * this.baseData.countries[i].getLatestS() *
+              this.baseData.computeCoupling(k, j) * this.baseData.countries[k].getLatestI() /
+              this.baseData.countries[j].totalInhabitants;
+          }
         }
+        if (this.immunityRate > 0 && this.immunityRate <= 1) {
+          dS *= (1 - this.immunityRate);
+        }
+        const dR = this.gamma * this.baseData.countries[incomingCountry].getLatestI();
+        stepS[incomingCountry] = dS * this.timeStepLength;
+        stepI[incomingCountry] = (-dS - dR) * this.timeStepLength;
+        stepR[incomingCountry] = dR * this.timeStepLength;
       }
-      if (this.immunityRate > 0 && this.immunityRate <= 1) {
-        dS *= (1 - this.immunityRate);
-      }
-      const dR = this.gamma * this.baseData.countries[incomingCountry].getLatestI();
-      stepS[incomingCountry] = dS * this.timeStepLength;
-      stepI[incomingCountry] = (-dS - dR) * this.timeStepLength;
-      stepR[incomingCountry] = dR * this.timeStepLength;
     }
 
     for (let i = 0; i < countryCount; i++) {
-      this.baseData.countries[i].addSimulationResultS(stepS[i]);
-      this.baseData.countries[i].addSimulationResultI(stepI[i]);
-      this.baseData.countries[i].addSimulationResultR(stepR[i]);
+      if(this.baseData.countries[i].fractionIncoming > 0) {
+        this.baseData.countries[i].addSimulationResultS(stepS[i]);
+        this.baseData.countries[i].addSimulationResultI(stepI[i]);
+        this.baseData.countries[i].addSimulationResultR(stepR[i]);
+      }else {
+        this.baseData.countries[i].addSimulationResultS(0);
+        this.baseData.countries[i].addSimulationResultI(0);
+        this.baseData.countries[i].addSimulationResultR(0);
+      }
     }
   }
 
@@ -209,6 +217,7 @@ export class SimulationService {
       lowPeak,
       highPeak
     };
+    console.log(this.globaldata);
   }
 
   validateBeforeRun(): boolean {

src/app/world-view/world-view.component.html

@@ -37,7 +37,7 @@
         <div class="card__main">
             <p>At the end of the simulation, <strong>{{simulation.globaldata.globalFatalities}}</strong> have died globally and <strong>{{simulation.globaldata.globalRecovered - simulation.globaldata.globalFatalities}}</strong> have recovered.</p>
             <p>The peaks of the spread happened between day <strong>{{simulation.globaldata.earlyPeak.globalPeakStep * simulation.timeStepLength}} ({{simulation.globaldata.earlyPeak.nameFull}})</strong> and <strong>{{simulation.globaldata.latePeak.globalPeakStep * simulation.timeStepLength}} ({{simulation.globaldata.latePeak.nameFull}}).</strong></p>
-            <p>At its peak, the disease infected between <strong>{{simulation.globaldata.lowPeak.globalPeakRate * 100}}% ({{simulation.globaldata.lowPeak.nameFull}})</strong> and <strong>{{simulation.globaldata.highPeak.globalPeakRate * 100}}% ({{simulation.globaldata.highPeak.nameFull}})</strong> of the total population.</p>
+            <p>At its peak, the disease infected between <strong>{{simulation.globaldata.lowPeak.globalPeakRate * 100 | number}}% ({{simulation.globaldata.lowPeak.nameFull}})</strong> and <strong>{{simulation.globaldata.highPeak.globalPeakRate * 100 | number}}% ({{simulation.globaldata.highPeak.nameFull}})</strong> of the total population.</p>
         </div>
     </div>
 </div>