Efficient viz

src/components/BundleManager.vue

@@ -4,12 +4,12 @@
     <p>You can set up several bundles and then inspect them more closely to compare.</p>
     <div class="row">
         <div class="col-sm-6">
-            <div v-if="activeSeq.name === undefined" class="alert alert-warning">Select a sequence</div>
-            <div v-if="activeSeq.name !== undefined" class="alert alert-primary">Active sequence: {{activeSeq.name}}</div>
+            <div v-if="activeSeq.isValid === undefined" class="alert alert-warning">Select a sequence</div>
+            <div v-else class="alert alert-primary">Active sequence: {{activeSeq.name}}</div>
         </div>
         <div class="col-sm-6">
-            <div v-if="activeViz.name === undefined" class="alert alert-warning">Select a vizualizer</div>
-            <div v-if="activeViz.name !== undefined" class="alert alert-primary">Active vizualizer: {{activeViz.name}}</div>
+            <div v-if="activeViz.isValid === undefined" class="alert alert-warning">Select a vizualizer</div>
+            <div v-else class="alert alert-primary">Active vizualizer: {{activeViz.name}}</div>
         </div>
     </div>
     <button v-if="readyToBundle" class="btn btn-primary" v-on:click="$emit('createBundle')">Create Bundle</button>
@@ -19,6 +19,7 @@
         v-bind:key="bundle.uid"
         v-bind:seq="bundle.seq"
         v-bind:viz="bundle.viz"
+        v-on:drawBundle="$emit('drawBundle', $event)"
     />
     </div>
         <!--<button v-if="readyToDraw" type="button" class="btn btn-warning" v-on:click="draw">Draw</button>-->
@@ -39,7 +40,7 @@ export default {
     },
     computed: {
         readyToBundle: function() {
-            return this.activeSeq.name !== undefined && this.activeViz.name !== undefined;
+            return this.activeSeq.isValid !== undefined && this.activeViz.isValid !== undefined;
         }
     }
 }

src/components/CanvasArea.vue

@@ -1,6 +1,15 @@
 <template>
-    <div id="canvas-container">
-        <div id="p5-goes-here"></div>
+    <div id="canvas-container" class="row">
+        <div class="col-sm-2">
+            <div class="list-group">
+                <a href="#" v-on:click="$emit('closeCanvas')" aria-label="Back" class="list-group-item list-group-item-action">
+                    &#8249; Back
+                </a>
+            </div>
+        </div>
+        <div class="col-sm-10">
+            <div id="p5-goes-here"></div>
+        </div>
     </div>
 </template>
 
@@ -13,39 +22,42 @@ export default {
         activeSeq: Object,
         activeViz: Object
     },
-    methods:{
-        draw: function(){
-            console.log('Drawing with Visualizer: ', this.activeViz.name);
-            console.log('Drawing with Sequence', this.activeSeq.name);
+    mounted: function(){
+        console.log('Drawing with Visualizer: ', this.activeViz.name);
+        console.log('Drawing with Sequence', this.activeSeq.name);
 
-            // params here are ID and finite
-            const activeSeq = this.activeSeq;
-            activeSeq.initialize();
+        // params here are ID and finite
+        const activeSeq = this.activeSeq;
+        activeSeq.initialize();
 
-            const activeViz = this.activeViz;
-            console.log(activeViz);
+        const activeViz = this.activeViz;
+        console.log(activeViz);
 
-            const drawing = new p5(function(sketch){
-                    activeViz.initialize(sketch, activeSeq);
+        const drawing = new p5(function(sketch){
+                activeViz.initialize(sketch, activeSeq);
 
-                    sketch.setup = function(){
-                        sketch.createCanvas(800, 800);
-                        sketch.background("white");
-                        activeViz.setup();
-                    }
+                sketch.setup = function(){
+                    sketch.createCanvas(800, 800);
+                    sketch.background("white");
+                    activeViz.setup();
+                }
 
-                    sketch.draw = function(){
-                        activeViz.draw();
-                    }
+                sketch.draw = function(){
+                    activeViz.draw();
+                }
 
 }, 'p5-goes-here');
 
-            drawing.setup();
-            drawing.draw();
-        }
+        drawing.setup();
+        drawing.draw();
+
     },
 }
 </script>
 
-<style>
+<style scoped>
+.back-btn {
+    cursor: pointer;
+}
+
 </style>

src/components/VizualizationMenu.vue

@@ -37,21 +37,21 @@ export default {
   },
   methods: {
     openParamsModal: function() {
-        this.showModal = true;
+      this.showModal = true;
     },
     closeParamsModal: function() {
-        this.showModal = false;
+      this.showModal = false;
     },
     setParams: function(viz) {
-              this.liveVizualizer = new viz.vizualizer();
-              this.openParamsModal();  
+      this.liveVizualizer = new viz.vizualizer();
+      this.openParamsModal();  
     },
     createViz: function() {
       const validationResult = this.liveVizualizer.validate();
       if(validationResult.isValid) {
-          this.errors = [];
-          this.closeParamsModal();
-          this.$emit("createViz", this.liveVizualizer);
+        this.errors = [];
+        this.closeParamsModal();
+        this.$emit("createViz", this.liveVizualizer);
       } else {
         this.errors = validationResult.errors;
       }

src/components/bundleCard.vue

@@ -6,7 +6,8 @@
         <h5 class="card-title">{{seq.name + ' + ' + viz.name}}</h5>
         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <div :id="this.uid"></div>
-        <a  href="#" class="btn btn-primary">Go somewhere</a>
+        <a  v-on:click="$emit('drawBundle', {seq: seq, viz: viz})" href="#" class="btn btn-primary mr-2">Draw</a>
+        <a  v-on:click="$emit('removeBundle', {seq: seq, viz: viz})" href="#" class="btn btn-danger">Remove</a>
   </div>
 </div>
 </div>

src/sequences/sequenceClassDefault.ts

@@ -15,16 +15,16 @@ export class SequenceClassDefault implements SequenceInterface {
     description = 'A Base sequence class';
     params: SequenceParamsSchema[] = [new SequenceParamsSchema('name', '', 'displayName', false, '0')];
     ready: boolean;
+    isValid: boolean;
 
     private settings: { [key: string]: string|number|boolean} = {};
-    private valid: boolean;
 
     constructor(ID: number, finite?: boolean) {
         this.ID = ID;
         this.cache = [];
         this.finite = finite || true;
         this.ready = false;
-        this.valid = false;
+        this.isValid = false;
     }
 
     /**
@@ -34,7 +34,7 @@ export class SequenceClassDefault implements SequenceInterface {
      * @param paramsFromUser user settings for the sequence passed from the UI
      */
     initialize(){
-        if(this.valid) {
+        if(this.isValid) {
             this.ready = true;
             return
         } else {
@@ -56,7 +56,7 @@ export class SequenceClassDefault implements SequenceInterface {
 		});
 
         if(this.settings['name'] !== undefined) {
-            this.valid = true;
+            this.isValid = true;
             return new ValidationStatus(true);
         }
 

src/sequences/sequenceConstant.ts

@@ -44,6 +44,7 @@ class SequenceConstant implements SequenceInterface{
 		});
 
         if(this.settings['constantValue'] !== undefined) {
+            this.isValid = true;
             return new ValidationStatus(true);
         } else {
             return new ValidationStatus(false, ["No constant value was provided."]);

src/views/ToolMain.vue

@@ -1,6 +1,15 @@
 <template>
     <div class="container-fluid">
-        <div class="row">
+        <div class="row" v-if="drawingActive" >
+          <div class="col-sm-12">
+                <CanvasArea 
+                  v-bind:activeViz="activeViz" 
+                  v-bind:activeSeq="activeSeq"
+                  v-on:closeCanvas="closeCanvas()"
+                />
+            </div>
+        </div>
+        <div class="row" v-if="!drawingActive">
             <div class="col-sm-2">
                 <SequenceMenu
                   v-bind:sequences="sequences"
@@ -19,10 +28,7 @@
                   v-bind:activeSeq="activeSeq"
                   v-bind:bundles="seqVizPairs"
                   v-on:createBundle="bundleSeqVizPair()"
-                />
-                <CanvasArea 
-                  v-bind:activeViz="activeViz" 
-                  v-bind:activeSeq="activeSeq"
+                  v-on:drawBundle="drawBundle($event)"
                 />
             </div>
         </div>
@@ -60,9 +66,21 @@ export default {
             viz: this.activeViz
         }
         this.seqVizPairs.push(bundle);
-        this.activeSeq = {};
-        this.activeViz = {};
-        console.log(this.seqVizPairs);
+        this.clearActive();
+    },
+    drawBundle: function(seqVizBundle){
+      console.log(seqVizBundle)
+      this.activeSeq = seqVizBundle.seq;
+      this.activeViz = seqVizBundle.viz;
+      this.drawingActive = true;
+    },
+    closeCanvas: function() {
+      this.clearActive();
+      this.drawingActive = false;
+    },
+    clearActive: function() {
+      this.activeViz = {};
+      this.activeSeq = {};
     }
   },
   data: function(){
@@ -88,7 +106,8 @@ export default {
       sequences: sequences,
       seqVizPairs: [],
       activeViz: {},
-      activeSeq: {}
+      activeSeq: {},
+      drawingActive: false
     }
     return state
   }

src/vizualizers/vizualizerDefault.ts

@@ -10,7 +10,7 @@ export class VizualizerDefault implements VizualizerInterface{
     ready = false;
     sketch: p5 = new p5(sketch => {return sketch});
     seq: SequenceInterface = new SequenceClassDefault(0, false);
-    private isValid = false;
+    public isValid = false;
 
     /***
       Sets the sketch and the sequence to draw with
@@ -31,13 +31,20 @@ export class VizualizerDefault implements VizualizerInterface{
       This checks that the params provided are within the bounds you need.
       Simply assign params to settings (using the provided function) and validate them
       Returns a ValidationStatus object (see VizualizerInterface.ts for details)
+
+      The default validation is always false, since it is automatically used by its children
+      so you are required to define a new validate function for every vizualizer.
       */
     validate() {
+        this.assignParams();
+        this.isValid = false;
+        return new ValidationStatus(false, ["This is the default validation function. Please define one for this vizualizer"]);
+    }
+
+    assignParams(){
 		this.params.forEach(param => {
 			this.settings[param.name] = param.value;
 		});
-        this.isValid = true;
-        return new ValidationStatus(true);
     }
 
     setup(){

src/vizualizers/vizualizerDifferences.ts

@@ -1,6 +1,7 @@
 import {SequenceInterface} from "@/sequences/sequenceInterface";
 import {VizualizerInterface, VizualizerParamsSchema, VizualizerSettings, VizualizerExportModule} from "@/vizualizers/vizualizerInterface";
 import { VizualizerDefault } from './vizualizerDefault';
+import { ValidationStatus } from '@/shared/validationStatus';
 /*
     var list=[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 877, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 971, 977, 983, 991, 997, 1009, 1013, 1019, 1021, 1031, 1033, 1039, 1049, 1051, 1061, 1063, 1069, 1087, 1091, 1093, 1097, 1103, 1109, 1117, 1123, 1129, 1151, 1153, 1163, 1171, 1181, 1187, 1193, 1201, 1213, 1217, 1223];
 
@@ -31,6 +32,15 @@ class VizDifferences extends VizualizerDefault implements VizualizerInterface{
 		this.params.push(numberTermsTop, levelsParam);
 	}
 
+	validate() {
+		this.assignParams();
+
+		if(this.settings.number <= this.settings.levels) return new ValidationStatus(false, ["n must be greater than levels"]);
+
+		this.isValid = true;
+		return new ValidationStatus(true);
+	}
+
 	drawDifferences(n: number, levels: number, sequence: SequenceInterface) {
 
 		//changed background color to grey since you can't see what's going on

src/vizualizers/vizualizerInterface.ts

@@ -44,17 +44,13 @@ export interface VizualizerSettings {
 }
 
 export interface VizualizerInterface {
+    isValid: boolean;
     /**
      * The parameters for the vizualizer to initialize.
      * In addition to providing the information in the schema, 
      * these will be used as default params in the event the user does not specify any.
      */
     params: VizualizerParamsSchema[];
-    /**
-     * The applied params. Mostly exists to simplify calling params, since we can 
-     * assign the param name to the settings key.
-     */
-	settings: VizualizerSettings;
     /**
      * A sequence instance that fulfills the sequence interface.
      */
@@ -67,7 +63,7 @@ export interface VizualizerInterface {
      * Intialize is simply applying the configuration params to the vizualizer to prepare it to draw. 
      * @param config User set configuration settings. Generally if none are provided, the Vizualizer should use its own default
      */
-    initialize(sketch: p5, seq: SequenceInterface, config?: VizualizerParamsSchema[]): void;
+    initialize(sketch: p5, seq: SequenceInterface): void;
     /**
      * Validates the cinfiguration
      */

src/vizualizers/vizualizerModFill.ts

@@ -2,9 +2,11 @@ import {SequenceInterface} from "@/sequences/sequenceInterface";
 import {VizualizerDefault} from "@/vizualizers/vizualizerDefault";
 import {VizualizerInterface, VizualizerParamsSchema, VizualizerSettings, VizualizerExportModule} from "@/vizualizers/vizualizerInterface";
 import p5 from 'p5';
+import { ValidationStatus } from '@/shared/validationStatus';
 //An example module
 
 class VizModFill extends VizualizerDefault implements VizualizerInterface {
+	name = "Mod Fill";
 	settings: VizualizerSettings = {};
 	rectWidth = 0;
 	rectHeight = 0;
@@ -24,18 +26,22 @@ class VizModFill extends VizualizerDefault implements VizualizerInterface {
 		this.i = 0;
 	}
 
-	initialize(sketch: p5, seq: SequenceInterface, config?: VizualizerParamsSchema[]) {
+	initialize(sketch: p5, seq: SequenceInterface){
 		this.sketch = sketch;
 		this.seq = seq;
-		config = config !== undefined ? config : this.params;
 
-		config.forEach(param => {
-			this.settings[param.name] = param.value;
-		});
 
 		this.ready = true;
 	}
 
+	validate(){
+		this.assignParams();
+		if(this.settings.modDimension > 0) return new ValidationStatus(true);
+		else if(this.settings.modDimension <= 0) return new ValidationStatus(false, ["Mod dimension must be positive"]);
+		else return new ValidationStatus(false, ["Please set a mod dimension"]);
+
+	}
+
 	drawNew(num: number, seq: SequenceInterface) {
 		const black = this.sketch.color(0);
 		this.sketch.fill(black);