Added population chart to statistics panel

src/Controllers/ControlPanel.js

@@ -1,5 +1,6 @@
 const Hyperparams = require("../Hyperparameters");
 const Modes = require("./ControlModes");
+const StatsPanel = require("./StatsPanel");
 
 class ControlPanel {
     constructor(engine) {
@@ -17,16 +18,22 @@ class ControlPanel {
         this.editor_controller = this.engine.organism_editor.controller;
         this.env_controller.setControlPanel(this);
         this.editor_controller.setControlPanel(this);
+        this.stats_panel = new StatsPanel();
+        this.stats_panel.render();
     }
 
     defineMinMaxControls(){
         $('#minimize').click ( function() {
             $('.control-panel').css('display', 'none');
             $('.hot-controls').css('display', 'block');
-        });
+            this.stats_panel.stopAutoRender();
+        }.bind(this));
         $('#maximize').click ( function() {
             $('.control-panel').css('display', 'grid');
             $('.hot-controls').css('display', 'none');
+            if (this.id == 'stats') {
+                self.stats_panel.startAutoRender();
+            }
         });
     }
 
@@ -76,19 +83,24 @@ class ControlPanel {
     }
 
     defineTabNavigation() {
+        this.tab_id = 'about';
         var self = this;
         $('.tabnav-item').click(function() {
             $('.tab').css('display', 'none');
             var tab = '#'+this.id+'.tab';
             self.engine.organism_editor.is_active = (this.id == 'editor');
+            if (this.id == 'stats') {
+                self.stats_panel.startAutoRender();
+            }
+            self.id = this.id;
+            
             $(tab).css('display', 'grid');
         });
     }
 
     defineHyperparameterControls() {
         $('#food-prod-prob').change(function() {
-            var food_prob = 
-            Hyperparams.foodProdProb = $('#food-prod-prob').val();;
+            Hyperparams.foodProdProb = $('#food-prod-prob').val();
         }.bind(this));
         $('#lifespan-multiplier').change(function() {
             Hyperparams.lifespanMultiplier = $('#lifespan-multiplier').val();
@@ -199,7 +211,9 @@ class ControlPanel {
                 case "drop-org":
                     self.setMode(Modes.Clone);
                     self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg();
-                    self.env_controller.make_new_species = true;
+                    self.env_controller.add_new_species = self.editor_controller.new_species;
+                    self.editor_controller.new_species = false;
+                    // console.log(self.env_controller.add_new_species)
                     break;
                 case "drag-view":
                     self.setMode(Modes.Drag);
@@ -215,6 +229,7 @@ class ControlPanel {
         var env = this.engine.env;
         $('#reset-env').click( function() {
             this.engine.env.reset();
+            this.stats_panel.clearData();
         }.bind(this));
         $('#auto-reset').change(function() {
             env.auto_reset = this.checked;
@@ -264,6 +279,7 @@ class ControlPanel {
         $('#avg-mut').text("Average Mutation Rate: " + Math.round(this.engine.env.averageMutability() * 100) / 100);
         $('#largest-org').text("Largest Organism: " + this.engine.env.largest_cell_count + " cells");
         $('#reset-count').text("Auto reset count: " + this.engine.env.reset_count);
+        this.stats_panel.updateData(this.engine.env.total_ticks, this.engine.env.organisms.length)
     }
 
 }

src/Controllers/EditorController.js

@@ -10,6 +10,7 @@ class EditorController extends CanvasController{
         this.mode = Modes.None;
         this.edit_cell_type = null;
         this.highlight_org = false;
+        this.new_species = false;
         this.defineCellTypeSelection();
         this.defineEditorDetails();
     }
@@ -41,8 +42,10 @@ class EditorController extends CanvasController{
             else
                 this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
         }
-        if (this.right_click)
+        else if (this.right_click)
             this.env.removeCellFromOrg(this.mouse_c, this.mouse_r);
+
+        this.new_species = true;
         this.setBrainPanelVisibility();
         this.setMoveRangeVisibility();
         this.updateDetails();

src/Controllers/EnvironmentController.js

@@ -10,8 +10,7 @@ class EnvironmentController extends CanvasController{
         super(env, canvas);
         this.mode = Modes.Drag;
         this.org_to_clone = null;
-        this.species_to_clone = null;
-        this.make_new_species = false;
+        this.add_new_species = false;
         this.defineZoomControls();
         this.scale = 1;
     }
@@ -121,16 +120,19 @@ class EnvironmentController extends CanvasController{
                 case Modes.Clone:
                     if (this.org_to_clone != null){
                         var new_org = new Organism(this.mouse_c, this.mouse_r, this.env, this.org_to_clone);
-                        if (this.make_new_species){
-                            this.species_to_clone = FossilRecord.addSpecies(new_org, null)
-                            this.make_new_species = false;
+                        if (this.add_new_species){
+                            FossilRecord.addSpeciesObj(new_org.species);
+                            new_org.species.start_tick = this.env.total_ticks;
+                            this.add_new_species = false;
+                            new_org.species.population = 0;
                         }
-                        else {
-                            new_org.species = this.species_to_clone;
-                            this.species_to_clone.addPop();
+                        else if (this.org_to_clone.species.extinct){
+                            FossilRecord.resurrect(this.org_to_clone.species);
                         }
+
                         if (new_org.isClear(this.mouse_c, this.mouse_r)){
-                            this.env.addOrganism(new_org)
+                            this.env.addOrganism(new_org);
+                            new_org.species.addPop();
                         }
                     }
                     break;

src/Controllers/StatsPanel.js

@@ -0,0 +1,77 @@
+const FossilRecord = require("../Stats/FossilRecord");
+
+class StatsPanel {
+    constructor() {
+        this.defineControls();
+        this.clearData();
+        this.last_update_tick = 0;
+        this.update_every = 100;
+
+        // maps species to their index in chart's data storage
+        this.species_index_map = [];
+        this.index_counter = 0;
+        this.min_display = 10;
+    }
+
+    startAutoRender(){
+        this.render_loop = setInterval(function(){this.render();}.bind(this), 1000);
+    }
+
+    stopAutoRender() {
+        clearInterval(this.render_loop);
+    }
+
+    defineControls() {
+        $('#update-chart').click( function() {
+            this.render();
+        }.bind(this));
+    }
+
+    updateData(tick, population_size) {
+        if (tick - this.last_update_tick >= this.update_every){
+            // this.data[0].dataPoints.push({x: tick, y:population_size});
+            this.last_update_tick = tick;
+
+            for (var species of FossilRecord.extant_species) {
+                if (species.cumulative_pop < this.min_display){
+                    continue;
+                }
+                
+                if (this.species_index_map[species.name] == null) {
+                    console.log("new species")
+                    this.species_index_map[species.name] = this.index_counter;
+                    this.index_counter++;
+                    this.data.push({
+                        type: "line",
+                        markerType: "none",
+                        dataPoints: []
+                    });
+                }
+                var data_index = this.species_index_map[species.name];
+                this.data[data_index].dataPoints.push({x:tick, y:species.population});
+            }
+        }
+    }
+    
+    render() {
+        this.chart.render();
+    }
+
+    clearData() {
+        this.data = [{
+            type: "line",
+            markerType: "none",
+            dataPoints: []
+        }];
+        this.chart = new CanvasJS.Chart("chartContainer", {
+            title:{
+                text: "Population" 
+            },
+            data: this.data
+        });
+        this.render();
+    }
+    
+}
+
+module.exports = StatsPanel;