diff --git a/js/cells/DMACell.js b/js/cells/DMACell.js
index 769988d75a578e95ce8dc9272e2408c9d68f79da..1b53cd188b8f442e83ed434248d24f87ac1a9ea8 100644
--- a/js/cells/DMACell.js
+++ b/js/cells/DMACell.js
@@ -225,7 +225,7 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'globals', '
         }
         if (!returnTHREEObject) return materials[this.materialName];
         if (!materials[this.materialName]) {
-            console.warn("no material object found of type " + this.materialNames);
+            console.warn("no material object found of type " + this.materialName);
             return null;
         }
         if (!materials[this.materialName].threeMaterial){
@@ -393,6 +393,7 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'globals', '
         this.superCell = null;
         this.materialName = null;
         this.index = null;
+        this.length = null;
     };
 
     DMACell.prototype.destroyParts = function(){
diff --git a/js/cells/supercells/DMASuperCell.js b/js/cells/supercells/DMASuperCell.js
index a2fe3a82bb3b58f1c9b0ce736649b05b8d739218..3e492fcb9c3ec6a6aacc90432fb81dae0264b05b 100644
--- a/js/cells/supercells/DMASuperCell.js
+++ b/js/cells/supercells/DMASuperCell.js
@@ -13,11 +13,10 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
 
         DMACell.call(this, json, superCell);
 
+        var range;
         var material = this.getMaterial();
-        var range = appState.get("superCellRange");
-        console.log(material);
-        if (material.dimensions) range = material.dimensions;
         if (material.cellsMax) range = (new THREE.Vector3(1,1,1)).add(material.cellsMax).sub(material.cellsMin);
+        else range = this._getSuperCellRange();
         this.cells = this._makeChildCells(range, material);
 
         DMACell.prototype.setMode.call(this, null, function(){
@@ -26,6 +25,10 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
     }
     DMASuperCell.prototype = Object.create(DMACell.prototype);
 
+    DMASuperCell.prototype._getSuperCellRange = function(){
+        return appState.get("superCellRange").clone();
+    };
+
     DMASuperCell.prototype._makeChildCells = function(range, material){
         var cells = [];
         for (var x=0;x<range.x;x++){
@@ -35,21 +38,16 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
                 for (var z=0;z<range.z;z++){
                     //child cells add themselves to object3D
 
-                    var cellMaterialName = this.materialName;
                     cells[x][y].push(null);
 
                     if (material.sparseCells){
                         if (material.sparseCells[x][y][z]){
-                            if (material.sparseCells[x][y][z].materialName) {
-                                cellMaterialName = material.sparseCells[x][y][z].materialName;
-                                this._makeSubCellForIndex({index: new THREE.Vector3(x,y,z), materialName:cellMaterialName}, function(cell){
-                                    var index = cell.getIndex();
-                                    cells[index.x][index.y][index.z] = cell;
-                                });
-                            } else console.warn("no material for composite cell definition subcell");
+                            this._makeSubCellForIndex({index: new THREE.Vector3(x,y,z), materialName:material.sparseCells[x][y][z].materialName}, function(cell){
+                                cells[x][y][z] = cell;
+                            });
                         }//else no cell in this spot
                     } else {//if not from composite definition, add subcell at all possible indices in supercell range
-                        this._makeSubCellForIndex({index: new THREE.Vector3(x,y,z), materialName:cellMaterialName}, function(cell){
+                        this._makeSubCellForIndex({index: new THREE.Vector3(x,y,z), materialName:this.materialName}, function(cell){
                             cells[x][y][z] = cell;
                         });
                     }
diff --git a/js/cells/supercells/GIKSuperCell.js b/js/cells/supercells/GIKSuperCell.js
index c4520d2c21158c83cbd1116bd5fd6c116f4e2203..7d2d11edbdac6b1bc5c26d0eb1f248f76b1b19d3 100644
--- a/js/cells/supercells/GIKSuperCell.js
+++ b/js/cells/supercells/GIKSuperCell.js
@@ -4,11 +4,10 @@
 
 
 
-define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell', 'gikCell', 'materials'],
-    function(_, THREE, three, lattice, appState, DMASuperCell, GIKCell, materials){
+define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell', 'gikCell'],
+    function(_, THREE, three, lattice, appState, DMASuperCell, GIKCell){
 
     var unitGeos = {};
-    var gikMaterials = {};
 
     function makePartWithLength(length){
         var geo = new THREE.BoxGeometry(lattice.xScale(0),lattice.yScale(0),lattice.zScale(0));
@@ -17,12 +16,22 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell',
         return geo;
     }
 
-    GIKSuperCell = function(json, superCell){
+    function GIKSuperCell(json, superCell){
+        console.log(json.length);
+        this.length  = json.length || appState.get("superCellRange").x;
         DMASuperCell.call(this, json, superCell);
-    };
+    }
     GIKSuperCell.prototype = Object.create(DMASuperCell.prototype);
 
+    GIKSuperCell.prototype._getSuperCellRange = function(){
+        if (this.length) return new THREE.Vector3(this.length, 1, 1);
+        console.warn("no length property for gik super cell");
+        return null;
+    };
+
     GIKSuperCell.prototype._makeSubCellForIndex = function(json, callback){
+        console.log(json);
+        json.materialName = this.materialName;
         callback(new GIKCell(json, this));
     };
 
@@ -39,26 +48,6 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell',
         return unitGeos[key];
     };
 
-    GIKSuperCell.prototype.getMaterial = function(returnTHREEObject){
-        if (returnTHREEObject){
-            return materials[this.materialName].threeMaterial
-        }
-        var name = this._makeMaterialKey();
-        if (!gikMaterials[this.materialName]) gikMaterials[this.materialName] = {};
-        if (!gikMaterials[this.materialName][name]) {
-            gikMaterials[this.materialName][name] = {
-                materialName: this.materialName,
-                dimensions: new THREE.Vector3(length+1, 1, 1)
-            };
-        }
-        return gikMaterials[this.materialName][name];
-    };
-
-    GIKSuperCell.prototype._makeMaterialKey = function(){
-        var length = this.getLength();
-        return "length" + (length+1);
-    };
-
     GIKSuperCell.prototype._buildWireframe = function(mesh){
         var wireframe = new THREE.BoxHelper(mesh);
         wireframe.material.color.set(0x000000);
@@ -72,7 +61,15 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell',
     };
 
     GIKSuperCell.prototype.toJSON = function(){
-        return gikMaterials[this.materialName][this._makeMaterialKey()];
+        var data = DMASuperCell.prototype.toJSON.call(this);
+        if (!this.length) console.warn("no length assigned to gik supercell");
+        data.length = this.length;
+        return data;
+    };
+
+    GIKSuperCell.prototype.destroy = function(){
+        DMASuperCell.prototype.destroy.call(this);
+        this.length = null;
     };
 
     return GIKSuperCell;
diff --git a/js/highlighter/Highlighter.js b/js/highlighter/Highlighter.js
index 20e2f807399407c412af953d8a332b01c61a3525..ea7b81666b68367a2d1886dd51266ed81a882fd2 100644
--- a/js/highlighter/Highlighter.js
+++ b/js/highlighter/Highlighter.js
@@ -157,7 +157,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
         addRemoveVoxel: function(shouldAdd){
             if (shouldAdd){
                 if (!this.isVisible() || !this.highlightedObject) return;
-                lattice.getUItarget().addCellAtIndex(this._getNextCellPosition(), false, false, appState.get("materialType"));
+                lattice.getUItarget().addCellAtIndex(this._getNextCellPosition());
             } else {
                 if (!this.highlightedObject) return;
                 if (!(this.highlightedObject instanceof DMACell)) return;
diff --git a/js/lattice/Lattice.js b/js/lattice/Lattice.js
index 2441a73f64b1b8a2b2115b36bfbab2a7fe46b1bf..025370a2b8b2dee46d5530922f97c11bc6a2bc56 100644
--- a/js/lattice/Lattice.js
+++ b/js/lattice/Lattice.js
@@ -26,7 +26,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
 
             this.listenTo(this, "change:partType", this._updatePartType);
             this.listenTo(this, "change:cellType change:connectionType", function(){
-                this._updateLatticeType();
+                this._updateLatticeType();//pass no params
             });
             this.listenTo(this, "change:cellSeparation", this._updateCellSeparation);
 
diff --git a/js/lattice/LatticeBase.js b/js/lattice/LatticeBase.js
index 5c264f4e5e00607b18eca561f3ad26bcfe84cbfb..5bf3fb9f4c05e8dcc664b82247c71d7eb07b82e2 100644
--- a/js/lattice/LatticeBase.js
+++ b/js/lattice/LatticeBase.js
@@ -107,15 +107,19 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             var relativeMin = (new THREE.Vector3()).subVectors(range.min, cellsMin);
             var relativeMax = (new THREE.Vector3()).subVectors(range.max, this.get("cellsMin"));
 
+            var materialName = appState.get("materialType");
             for (var x=relativeMin.x;x<=relativeMax.x;x++){
                 for (var y=relativeMin.y;y<=relativeMax.y;y++){
                     for (var z=relativeMin.z;z<=relativeMax.z;z++){
                         if (!this.sparseCells[x][y][z]) {
                             var self = this;
-                             this.makeCellForLatticeType({index: (new THREE.Vector3(x, y, z)).add(cellsMin)}, function(cell){
-                                self.sparseCells[x][y][z] = cell;
-                                self.set("numCells", self.get("numCells")+1);
-                            });
+                             this.makeCellForLatticeType({
+                                     index: (new THREE.Vector3(x, y, z)).add(cellsMin),
+                                     materialName: materialName
+                                 }, function(cell){
+                                    self.sparseCells[x][y][z] = cell;
+                                    self.set("numCells", self.get("numCells")+1);
+                                 });
                         } else console.warn("already a cell there");
                     }
                 }
@@ -123,20 +127,23 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             three.render();
         },
 
-        addCellAtIndex: function(index, noRender, noCheck, material){//no render no check from fill/load
+        addCellAtIndex: function(index, noRender, noCheck){//no render no check from fill/load
 
             if (!noCheck || noCheck === undefined) this.checkForMatrixExpansion(this.sparseCells, index, index);
 
             var relIndex = (new THREE.Vector3()).subVectors(index, this.get("cellsMin") || index);
-            if (!this.sparseCells[relIndex.x][relIndex.y][relIndex.z]) {
-                var self = this;
-                if (!noRender || noRender === undefined) three.setRenderFlag();
-                this.makeCellForLatticeType({index:index, materialName:material}, function(cell){
-                    self.sparseCells[relIndex.x][relIndex.y][relIndex.z] = cell;
+            if (!noRender || noRender === undefined) three.setRenderFlag();
+            this.addCellWithJson({index: index}, relIndex);
+        },
+
+        addCellWithJson: function(json, index){
+            var self = this;
+            if (!this.sparseCells[index.x][index.y][index.z]) {
+                this.makeCellForLatticeType(json, function(cell){
+                    self.sparseCells[index.x][index.y][index.z] = cell;
                     self.set("numCells", self.get("numCells")+1);
                 });
             } else console.warn("already a cell there");
-
         },
 
         _indexForPosition: function(absPosition){
@@ -489,7 +496,10 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
         parseCellsJSON: function(sparseCells){
             var cellsMin = this.get("cellsMin");
             this._loopCells(sparseCells, function(cell, x, y, z, self){
-                if (cell) self.addCellAtIndex((new THREE.Vector3(x, y, z)).add(cellsMin), true, true, cell.materialName);
+                if (cell) {
+                    cell.index = (new THREE.Vector3(x, y, z)).add(cellsMin);
+                    self.addCellWithJson(cell, new THREE.Vector3(x, y, z));
+                }
             });
         },
 
diff --git a/js/main.js b/js/main.js
index 7a68e979d35c2e296b034ea4765672dce63d24f9..dc5028e242fe030b25eb2c04e1b5c3e3039470e5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -183,12 +183,10 @@ require.config({
 //};
 
 //init stuff
-require(['appState', 'lattice', 'menuWrapper', 'navbar', 'ribbon', 'threeModel', 'threeView', 'flatUI'],
-    function(appState, lattice, MenuWrapper, Navbar, Ribbon, three, ThreeView){
+require(['appState', 'lattice', 'navbar', 'threeModel', 'threeView', 'flatUI', 'ribbon', 'menuWrapper'],
+    function(appState, lattice, Navbar, three, ThreeView){
 
-    new MenuWrapper({model:appState});
     new Navbar({model:appState});
-    new Ribbon({model:appState});
 
     new ThreeView({model:three});
 
diff --git a/js/materials/DMAMaterials.js b/js/materials/DMAMaterials.js
index b55e9d06cafb50b515d37bb0e61d635d5d05b079..c77efd93978c552591255c38b3740b85c96acaff 100644
--- a/js/materials/DMAMaterials.js
+++ b/js/materials/DMAMaterials.js
@@ -29,6 +29,7 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
     loadMaterialClass();
 
     function loadMaterialClass(){
+        console.log(appState.get("materialClass"));
         var materialClass = appState.get("materialClass");
         var newDefaultType = _.keys(plist.allMaterials[materialClass])[0];
         if (!materials[newDefaultType]) _.extend(materials, parseClassFromDefinitions(plist.allMaterials[materialClass]));
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index b3ef87f20c2dacc52ffa15d1ddb243281f6e83ff..2ec39ea5b3095755aa8a599e6a62aed7d04087a5 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -3,9 +3,10 @@
  */
 
 
-define(['jquery', 'underscore', 'plist', 'backbone', 'lattice', 'text!menuWrapperTemplate'], function($, _, plist, Backbone, lattice, template){
+define(['jquery', 'underscore', 'plist', 'backbone', 'lattice', 'appState', 'text!menuWrapperTemplate'],
+    function($, _, plist, Backbone, lattice, appState, template){
 
-    return Backbone.View.extend({
+    var MenuWrapperView = Backbone.View.extend({
 
         el: "#menuWrapper",
 
@@ -265,4 +266,6 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice', 'text!menuWrappe
 
         template: _.template(template)
     });
+
+    return new MenuWrapperView({model:appState});
 });
\ No newline at end of file
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index 4426baccdb898fecc10d1aa979a6873710649788..f77421893084621ea9ff260dd0c215b12241a8cb 100644
--- a/js/menus/Ribbon.js
+++ b/js/menus/Ribbon.js
@@ -2,9 +2,9 @@
  * Created by fab on 3/18/15.
  */
 
-define(['jquery', 'underscore', 'backbone', 'plist', 'lattice', 'text!ribbonTemplate'], function($, _, Backbone, plist, lattice, template){
+define(['jquery', 'underscore', 'backbone', 'plist', 'lattice', 'appState', 'text!ribbonTemplate'], function($, _, Backbone, plist, lattice, appState, template){
 
-    return Backbone.View.extend({
+    var Ribbon = Backbone.View.extend({
 
         el: "#navRibbon",
 
@@ -60,6 +60,8 @@ define(['jquery', 'underscore', 'backbone', 'plist', 'lattice', 'text!ribbonTemp
 
         template: _.template(template)
     });
+
+    return new Ribbon({model:appState});
 });
 
 //<a class="btn btn-primary btn-ribbon highlightMode<% if (highlightMode){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/cursor-light.png"></a>\
diff --git a/js/models/FileSaver.js b/js/models/FileSaver.js
index 97a6ad8eb843f4e1e8809cf7688e15ac18543e68..ccc28fb8d59acfc6d06c1e0d746a775dbb2960c1 100644
--- a/js/models/FileSaver.js
+++ b/js/models/FileSaver.js
@@ -3,7 +3,7 @@
  */
 
 
-define(['underscore', 'fileSaverLib', 'lattice', 'materials'], function(_, saveAs, lattice, materials){
+define(['underscore', 'fileSaverLib', 'lattice', 'materials', 'ribbon', 'menuWrapper'], function(_, saveAs, lattice, materials, ribbon, menuWrapper){
 
     function _saveFile(data, name, extension){
         var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
@@ -55,10 +55,7 @@ define(['underscore', 'fileSaverLib', 'lattice', 'materials'], function(_, saveA
 
     function _getMaterialsDataToSave(){
         var data = {};
-        var compositeKeys = _.filter(_.keys(materials), function(key){
-            return key.substr(0,5) == "super";
-        });
-        _.each(compositeKeys, function(key){
+        _.each(_.keys(materials), function(key){
             data[key] = _.omit(materials[key], "threeMaterial");
         });
         return data;
@@ -66,7 +63,7 @@ define(['underscore', 'fileSaverLib', 'lattice', 'materials'], function(_, saveA
 
     function loadFile(data){//parsed json todo make this better - load composite
         if (!data.materials){
-            console.warn("no material definitions in this file")
+            console.warn("no material definitions in this file");
             return;
         }
         _.each(_.keys(data.materials), function(key){
@@ -78,23 +75,25 @@ define(['underscore', 'fileSaverLib', 'lattice', 'materials'], function(_, saveA
         }
         lattice.clearCells();
         var sparseCells = data.assembly.sparseCells;
-        _setData(lattice, _.omit(data.assembly, "sparseCells"), false);
+        _setData(lattice, _.omit(data.assembly, "sparseCells"));
         if (sparseCells) lattice._updateLatticeType(sparseCells);
+        ribbon.render();
+        menuWrapper.render();
     }
 
     function loadUser(data){
-        _setData(data, false);
+        _setData(data);
     }
 
-    function _setData(object, data, silent){
+    function _setData(object, data){
         _.each(_.keys(data), function(key){
             if (data[key] && data[key].x){//vector object
-                object.set(key, new THREE.Vector3(data[key].x, data[key].y, data[key].z));
+                object.set(key, new THREE.Vector3(data[key].x, data[key].y, data[key].z), {silent:true});
                 return;
             }
             object.set(key, data[key], {silent:true});
         });
-        if (!silent || silent === undefined) object.trigger("change");
+        object.trigger("change");
     }
 
     return {//return public methods