added reset button + resizable handle css + fixed rendering bug

5 files changed, 157 insertions, 72 deletions

diff --git a/package-lock.json b/package-lock.json
index 48847f1fb..131a154c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2836,7 +2836,8 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2854,11 +2855,13 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2871,15 +2874,18 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -2982,7 +2988,8 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -2992,6 +2999,7 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -3004,17 +3012,20 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -3031,6 +3042,7 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -3086,7 +3098,8 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -3111,7 +3124,8 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -3121,6 +3135,7 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3189,7 +3204,8 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3219,6 +3235,7 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3236,6 +3253,7 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3274,11 +3292,13 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         }
                     }
                 }
@@ -9505,7 +9525,7 @@
                 },
                 "chownr": {
                     "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
                 },
                 "ci-info": {
@@ -9811,7 +9831,7 @@
                 },
                 "deep-extend": {
                     "version": "0.6.0",
-                    "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
                 },
                 "defaults": {
@@ -10310,7 +10330,7 @@
                 },
                 "glob": {
                     "version": "7.1.6",
-                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -10398,7 +10418,7 @@
                 },
                 "hosted-git-info": {
                     "version": "2.8.8",
-                    "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
                 },
                 "http-cache-semantics": {
@@ -10534,7 +10554,7 @@
                 },
                 "is-ci": {
                     "version": "1.2.1",
-                    "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
                     "requires": {
                         "ci-info": "^1.5.0"
@@ -10610,7 +10630,7 @@
                 },
                 "is-retry-allowed": {
                     "version": "1.2.0",
-                    "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
                 },
                 "is-stream": {
@@ -11119,7 +11139,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.4",
-                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
                     "requires": {
                         "minimist": "^1.2.5"
@@ -11127,7 +11147,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11179,7 +11199,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.0",
-                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -11293,7 +11313,7 @@
                 },
                 "npm-packlist": {
                     "version": "1.4.8",
-                    "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
                     "requires": {
                         "ignore-walk": "^3.0.1",
@@ -11313,7 +11333,7 @@
                 },
                 "npm-profile": {
                     "version": "4.0.4",
-                    "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==",
                     "requires": {
                         "aproba": "^1.1.2 || 2",
@@ -11323,7 +11343,7 @@
                 },
                 "npm-registry-fetch": {
                     "version": "4.0.3",
-                    "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==",
                     "requires": {
                         "JSONStream": "^1.3.4",
@@ -11758,7 +11778,7 @@
                 },
                 "rc": {
                     "version": "1.2.8",
-                    "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
                     "requires": {
                         "deep-extend": "^0.6.0",
@@ -11769,7 +11789,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11828,7 +11848,7 @@
                 },
                 "readable-stream": {
                     "version": "3.6.0",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
                     "requires": {
                         "inherits": "^2.0.3",
@@ -11849,7 +11869,7 @@
                 },
                 "registry-auth-token": {
                     "version": "3.4.0",
-                    "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
                     "requires": {
                         "rc": "^1.1.6",
@@ -11913,7 +11933,7 @@
                 },
                 "rimraf": {
                     "version": "2.7.1",
-                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
                     "requires": {
                         "glob": "^7.1.3"
@@ -12212,7 +12232,7 @@
                 },
                 "string_decoder": {
                     "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
                     "requires": {
                         "safe-buffer": "~5.2.0"
@@ -12220,7 +12240,7 @@
                     "dependencies": {
                         "safe-buffer": {
                             "version": "5.2.0",
-                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+                            "resolved": false,
                             "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
                         }
                     }
@@ -12532,7 +12552,7 @@
                 },
                 "widest-line": {
                     "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
                     "requires": {
                         "string-width": "^2.1.1"
@@ -14071,9 +14091,9 @@
             }
         },
         "react-draggable": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
-            "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+            "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
             "requires": {
                 "classnames": "^2.2.5",
                 "prop-types": "^15.6.0"
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index c824c2f33..7654c9d9e 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -688,7 +688,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
                 </span> */}
                 <span className="grid-control" style={{ width: "20%" }}>
-                    <input type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
+                    <input type="checkbox" style={{ marginRight: 5 }} onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
                     <label className="flexLabel">Collisions</label>
                 </span>
 
@@ -711,6 +711,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
                     <label className="flexLabel">Flexible</label>
                 </span>
+
+                <button onClick={() => this.props.CollectionView.props.Document.resetLayout = true}>Reset</button>
+
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 578dae966..8b19542f7 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -14,14 +14,22 @@
         display: flex;
         flex-direction: row;
 
-        .rowHeightSlider {
+        .react-grid-item>.react-resizable-handle {
+            z-index: 4; // doesn't work on prezi otherwise
+        }
+
+        .react-grid-item>.react-resizable-handle::after {
+            // grey so it can be seen on the audiobox
+            border-right: 2px solid slategrey;
+            border-bottom: 2px solid slategrey;
+        }
 
+        .rowHeightSlider {
             -webkit-appearance: none;
             appearance: none;
             width: 100%;
             height: 15px;
             background: #d3d3d3;
-            // border-radius: 5px;
 
             position: absolute;
             height: 3;
@@ -116,7 +124,6 @@
 
 }
 
-
 // .documentDecorations-container .documentDecorations-resizer {
 //     pointer-events: none;
 // }
@@ -128,7 +135,6 @@
 //     visibility: collapse;
 // }
 
-// .collectionGridView-contents
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index eab3fd79e..01ad44a2d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,15 +1,14 @@
-import { computed, observable, Lambda, action } from 'mobx';
+import { computed, observable, Lambda, action, autorun } from 'mobx';
 import * as React from "react";
 import { Doc, Opt } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { makeInterface } from '../../../../fields/Schema';
-import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, StrCast, ScriptCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
 import { CollectionSubView } from '../CollectionSubView';
 import { SubCollectionViewProps } from '../CollectionSubView';
-import { List } from '../../../../fields/List';
 import { returnZero, returnFalse } from '../../../../Utils';
 import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
@@ -29,8 +28,10 @@ const GridSchema = makeInterface(documentSchema);
 export class CollectionGridView extends CollectionSubView(GridSchema) {
     private containerRef: React.RefObject<HTMLDivElement>;
     @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll
-    private changeListenerDisposer: Opt<Lambda>;
-    private rowHeight: number = 0;
+    private changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
+    private rowHeight: number = 0; // temporary store of row height to make change undoable
+    private mounted: boolean = false; // hack to fix the issue of not rerendering when mounting
+    private resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.props.Document.numCols = NumCast(this.props.Document.numCols, 10);
         this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100);
 
-        // determines whether the grid is static/flexible i.e. can nodes be moved around and resized or not
+        // determines whether the grid is static/flexible i.e. whether can nodes be moved around and resized or not
         this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true);
 
         // determines whether nodes should remain in position, be bound to the top, or to the left
@@ -49,12 +50,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.setLayout = this.setLayout.bind(this);
         this.onSliderChange = this.onSliderChange.bind(this);
-        // this.deletePlaceholder = this.deletePlaceholder.bind(this);
+
         this.containerRef = React.createRef();
     }
 
     componentDidMount() {
 
+        console.log("mounting");
+        this.mounted = true;
+
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
 
             const layouts: Layout[] = this.parsedLayoutList;
@@ -71,7 +75,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
 
             if (!oldValue || newValue.length > oldValue.length) {
-                // for each document that was added, add a corresponding grid layout document
+                // for each document that was added, add a corresponding grid layout object
 
                 newValue.forEach(({ layout }, i) => {
                     const targetId = layout[Id];
@@ -87,7 +91,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     }
                 });
             } else {
-                // for each document that was removed, remove its corresponding grid layout document
+                // for each document that was removed, remove its corresponding grid layout object
                 oldValue.forEach(({ layout }) => {
                     const targetId = layout[Id];
                     if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
@@ -98,10 +102,34 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
             this.unStringifiedLayoutList = layouts;
         }, true);
+
+        // updates the layouts if the reset button has been clicked
+        this.resetListenerDisposer = autorun(() => {
+            if (this.props.Document.resetLayout) {
+                if (this.props.Document.flexGrid) {
+                    console.log("Resetting layout");
+                    const layouts: Layout[] = this.parsedLayoutList;
+
+                    this.setLayout(
+                        layouts.map(({ i }, index) => ({
+                            i: i,
+                            x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)),
+                            y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)),
+                            w: 2,
+                            h: 2,
+                        })));
+                }
+
+                this.props.Document.resetLayout = false;
+            }
+        });
     }
 
     componentWillUnmount() {
+        console.clear();
+        this.mounted = false;
         this.changeListenerDisposer && this.changeListenerDisposer();
+        this.resetListenerDisposer?.();
     }
 
     /**
@@ -109,6 +137,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     private lookupIndividualTransform = (layout: Layout) => {
 
+        console.log("lookup");
+
         const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i);
 
         // translations depend on whether the grid is flexible or static
@@ -117,6 +147,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
+    // is this needed? it seems to never be called
+    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
     @computed get colWidthPlusGap() { return (this.props.PanelWidth() - 10) / NumCast(this.props.Document.numCols); }
     @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + 10; }
@@ -124,12 +156,26 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     /**
      * @returns the layout list converted from JSON
      */
-    get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; }
+    get parsedLayoutList() {
+        console.log("parsedlayoutlist");
+        return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : [];
+    }
 
     /**
      * Stores the layout list on the Document as JSON
      */
-    set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); }
+    set unStringifiedLayoutList(layouts: Layout[]) {
+
+        // sometimes there are issues with rendering when you switch from a different view
+        // where the nodes are all squeezed together on the left hand side of the screen
+        // until you click on the screen or close the chrome or interact with it in some way
+        // this seems to fix that though it isn't very elegant
+
+        console.log("setting unstringified")
+        this.mounted && (this.props.Document.gridLayoutString = "");
+        this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        this.mounted = false;
+    }
 
 
     /**
@@ -183,6 +229,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             PanelWidth={width}
             PanelHeight={height}
             ScreenToLocalTransform={dxf}
+            onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
             display={"contents"}
@@ -199,20 +246,25 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     setLayout(layoutArray: Layout[]) {
         // for every child in the collection, check to see if there's a corresponding grid layout object and
         // updated layout object. If both exist, which they should, update the grid layout object from the updated object 
-        const layouts: Layout[] = this.parsedLayoutList;
-        this.childLayoutPairs.forEach(({ layout: doc }) => {
-            let update: Opt<Layout>;
-            const targetId = doc[Id];
-            const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
-            if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
-                gridLayout.x = update.x;
-                gridLayout.y = update.y;
-                gridLayout.w = update.w;
-                gridLayout.h = update.h;
-            }
-        });
 
-        this.unStringifiedLayoutList = layouts;
+        console.log("settinglayout");
+
+        if (this.props.Document.flexGrid) {
+            const layouts: Layout[] = this.parsedLayoutList;
+            this.childLayoutPairs.forEach(({ layout: doc }) => {
+                let update: Opt<Layout>;
+                const targetId = doc[Id];
+                const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
+                if (gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
+                    gridLayout.x = update.x;
+                    gridLayout.y = update.y;
+                    gridLayout.w = update.w;
+                    gridLayout.h = update.h;
+                }
+            });
+
+            this.unStringifiedLayoutList = layouts;
+        }
     }
 
     /**
@@ -221,6 +273,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     @computed
     private get contents(): JSX.Element[] {
+
+        console.log("getting contents");
+
         const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
         const layouts: Layout[] = this.parsedLayoutList;
@@ -251,17 +306,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns a list of `Layout` objects with attributes depending on whether the grid is flexible or static
      */
     get layoutList(): Layout[] {
+
+        console.log("getting layoutlist");
         const layouts: Layout[] = this.parsedLayoutList;
-        // this.unStringifiedLayoutList = layouts;
 
         return this.props.Document.flexGrid ?
-            layouts.map(({ i, x, y, w, h, static: stat }) => ({
+            layouts.map(({ i, x, y, w, h, static: staticVal }) => ({
                 i: i,
                 x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, // handles wrapping around of nodes when numCols decreases
                 y: y,
-                w: w,
+                w: w > NumCast(this.props.Document.numCols) ? NumCast(this.props.Document.numCols) : w, // reduces width if greater than numCols
                 h: h,
-                static: stat
+                static: staticVal // only needed if we implement freeze in place
             }))
             : layouts.map(({ i }, index) => ({
                 i: i,
@@ -277,9 +333,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * Handles the change in the value of the rowHeight slider.
      */
     onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber;
         this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
-
     }
 
     /**
@@ -305,6 +359,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     render() {
 
+        console.log("and render");
         // for the add text document EditableView
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 058002722..9192a38d7 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -30,6 +30,7 @@ interface GridProps {
 export default class Grid extends React.Component<GridProps> {
 
     render() {
+        console.log(this.props.transformScale);
         const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null;
         return (
             <GridLayout className="layout"
@@ -44,11 +45,11 @@ export default class Grid extends React.Component<GridProps> {
                 useCSSTransforms={true}
                 onLayoutChange={this.props.setLayout}
                 preventCollision={this.props.preventCollision}
-                transformScale={this.props.transformScale} // still doesn't work :(
+                transformScale={1 / this.props.transformScale} // still doesn't work :(
                 style={{ zIndex: 5 }}
             >
                 {this.props.nodeList}
-            </GridLayout >
+            </GridLayout>
         );
     }
 }