2 files changed, 20 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index bcb94e10d..49cb86732 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -332,19 +332,19 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @undoBatch
-    addColumn = (key?: string, defaultVal?: any) => {
+    addColumn = (index: number = 0, key?: string, defaultVal?: any) => {
         if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal);
         
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
-        currWidths.splice(0, 0, newColWidth);
+        currWidths.splice(index, 0, newColWidth);
         const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
         const currKeys = this.columnKeys.slice();
         if (!key) key = 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString();
-        currKeys.splice(0, 0, key);
-        this.changeColumnKey(0, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
+        currKeys.splice(index, 0, key);
+        this.changeColumnKey(index, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
 
@@ -524,7 +524,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
             this.childDocs.forEach(doc => {
                 const cell = this._rowEles.get(doc).children[1].children[i];
-                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) {
+                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell)) && cell) {
                     cell.style.borderLeft = '';
                     cell.style.borderRight = '';
                     cell.style.borderBottom = '';
@@ -539,7 +539,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const rowCount: number = this._docs.length + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
-            const increment: number = 100/rowCount;
+            const increment: number = 110/rowCount;
             for (let i = 1; i <= rowCount; ++i){
                 const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
                 highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`);
@@ -601,8 +601,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     removeCellHighlights = () => {
         this._highlightedCellsInfo.forEach(info => {
             const doc = info[0];
-            const cell = this.getCellElement(doc, info[1]);
-            if (!this._selectedDocs.includes(doc)) cell.style.border = ''; 
+            const field = info[1];
+            const cell = this.getCellElement(doc, field);
+            if (!(this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field))) cell.style.border = ''; 
             cell.style.backgroundColor = '';});
         this._highlightedCellsInfo = [];
     }
@@ -625,7 +626,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.removeCellHighlights();
 
         const cellsToHighlight = this.findCellRefs(text);
-        console.log(cellsToHighlight);
         this._highlightedCellsInfo = [...cellsToHighlight];
 
         for (let i = 0; i < this._highlightedCellsInfo.length; ++i) {
@@ -865,7 +865,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (this.columnKeys.includes(key)) return;
     
         if (this._makeNewColumn) {
-            this.addColumn(key, defaultVal);
+            this.addColumn(this.columnKeys.indexOf(key), key, defaultVal);
             this._makeNewColumn = false;
         } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
 
@@ -1006,6 +1006,16 @@ export class CollectionSchemaView extends CollectionSubView() {
             icon: 'sort' 
         });
         cm.addItem({
+            description: 'Add column to left',
+            event: () => this.addColumn(index),
+            icon: 'plus',
+        });
+        cm.addItem({
+            description: 'Add column to right',
+            event: () => this.addColumn(index + 1),
+            icon: 'plus',
+        });
+        cm.addItem({
             description: 'Delete column',
             event: () => this.removeColumn(index),
             icon: 'trash',
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 382d7487b..70db3d1f5 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -66,7 +66,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     constructor(props: SchemaColumnHeaderProps){
         super(props);
         makeObservable(this);
-        this._props.schemaView.openColumnMenu(0, false)
     }
     
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));