Bugfix: position of gene info buttons

client/client/app/components/ngbFeatureInfoPanel/index.js

@@ -12,8 +12,9 @@ import ngbFeatureInfoPanelService from './ngbFeatureInfoPanel.service';
 // Import app modules
 import dataServices from '../../../dataServices/angular-module';
 import ngbFeatureInfo from './ngbFeatureInfo';
+import ngbFeatureInfoMainActions from './ngbFeatureInfo/ngbFeatureInfoMainActions';
 
-export default angular.module('ngbFeatureInfoPanel', [ dataServices, ngbFeatureInfo ])
+export default angular.module('ngbFeatureInfoPanel', [ dataServices, ngbFeatureInfo, ngbFeatureInfoMainActions ])
     .service('ngbFeatureInfoPanelService', ngbFeatureInfoPanelService.instance)
     .component('ngbFeatureInfoPanel', component)
     .controller(controller.UID, controller)

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js

@@ -8,7 +8,6 @@ export default class ngbFeatureInfoMainController {
     sequenceProgress = 0;
     isSequenceLoading = true;
     error = null;
-    _isGeneralInfoOpen = true;
 
     constructor($scope, dispatcher, genomeDataService, bamDataService, $anchorScroll, ngbFeatureInfoPanelService) {
         Object.assign(this, {$scope, dispatcher, genomeDataService, bamDataService, $anchorScroll, ngbFeatureInfoPanelService});
@@ -26,7 +25,20 @@ export default class ngbFeatureInfoMainController {
         else {
             this.isReadLoadingis = false;
         }
-        this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this));
+        const onClickEditBtn = () => this.onClickEditBtn();
+        const onClickCancelBtn = () => this.onClickCancelBtn();
+        const onClickSaveBtn = () => this.onClickSaveBtn();
+        const scrollTo = (id) => this.scrollTo(id);
+        this.dispatcher.on('feature:info:edit:click', onClickEditBtn);
+        this.dispatcher.on('feature:info:cancel:click', onClickCancelBtn);
+        this.dispatcher.on('feature:info:save:click', onClickSaveBtn);
+        this.dispatcher.on('feature:info:add:click', scrollTo);
+        $scope.$on('$destroy', () => {
+            dispatcher.removeListener('feature:info:edit:click', onClickEditBtn);
+            dispatcher.removeListener('feature:info:cancel:click', onClickCancelBtn);
+            dispatcher.removeListener('feature:info:save:click', onClickSaveBtn);
+            dispatcher.removeListener('feature:info:add:click', scrollTo);
+        });
     }
 
     loadSequence() {
@@ -102,43 +114,49 @@ export default class ngbFeatureInfoMainController {
         this.$anchorScroll(id);
     }
 
-    get editMode () {
+    get editMode() {
         return this.ngbFeatureInfoPanelService.editMode;
     }
-
-    get disableSave () {
-        return this.ngbFeatureInfoPanelService.disableSaveButton();
+    set editMode(value) {
+        this.ngbFeatureInfoPanelService.editMode = value;
     }
 
     get saveError () {
         return this.ngbFeatureInfoPanelService.saveError;
     }
-
-    get saveInProgress () {
-        return this.ngbFeatureInfoPanelService.saveInProgress;
+    set saveError (value) {
+        this.ngbFeatureInfoPanelService.saveError = value;
     }
 
     get isGeneralInfoOpen () {
-        return this._isGeneralInfoOpen;
+        return this.ngbFeatureInfoPanelService.isGeneralInfoOpen;
     }
 
     set isGeneralInfoOpen (value) {
-        this._isGeneralInfoOpen = value;
+        this.ngbFeatureInfoPanelService.isGeneralInfoOpen = value;
     }
 
-    onClickEditBtn (event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this.ngbFeatureInfoPanelService.editMode = true;
+    get saveInProgress() {
+        return this.ngbFeatureInfoPanelService.saveInProgress;
+    }
+    set saveInProgress(value) {
+        this.ngbFeatureInfoPanelService.saveInProgress = value;
+    }
+
+    onClickEditBtn () {
+        this.editMode = true;
         this.ngbFeatureInfoPanelService.newAttributes = this.properties;
     }
 
-    onClickSaveBtn (event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this.ngbFeatureInfoPanelService.saveInProgress = true;
+    onClickCancelBtn () {
+        this.editMode = false;
+        this.ngbFeatureInfoPanelService.newAttributes = null;
+        this.saveInProgress = false;
+        this.saveError = null;
+    }
+
+    onClickSaveBtn () {
+        this.saveInProgress = true;
         this.ngbFeatureInfoPanelService.saveNewAttributes();
         this.properties = [...this.ngbFeatureInfoPanelService.newAttributes
             .map(newAttribute => (
@@ -152,23 +170,13 @@ export default class ngbFeatureInfoMainController {
         this.feature = this.ngbFeatureInfoPanelService.updateFeatureInfo(this.feature);
         this.ngbFeatureInfoPanelService.sendNewGeneInfo(this.fileId, this.uuid, this.feature)
             .then((success) => {
-                this.ngbFeatureInfoPanelService.saveInProgress = false;
+                this.saveInProgress = false;
                 const data = { trackId: this.fileId };
                 if (success) {
-                    this.onClickCancelBtn();
+                    this.dispatcher.emitSimpleEvent('feature:info:changes:cancel');
                     this.dispatcher.emitSimpleEvent('feature:info:saved', data);
                 }
                 this.$scope.$apply();
             });
     }
-
-    onClickCancelBtn (event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this.ngbFeatureInfoPanelService.editMode = false;
-        this.ngbFeatureInfoPanelService.newAttributes = null;
-        this.ngbFeatureInfoPanelService.saveInProgress = false;
-        this.ngbFeatureInfoPanelService.saveError = null;
-    }
-}
+}

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.scss

@@ -43,14 +43,3 @@ ngb-feature-info-main{
 .sequence-loading-error {
   color: red;
 }
-
-.general-information-buttons {
-  margin: 0px;
-  font-size: 14px;
-  color: #6699ff;
-  float: right;
-}
-
-.cancel-button {
-  color: #494949;
-}

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html

@@ -1,27 +1,11 @@
 <div layout="column">
     <collapsible>
-        <collapsible-panel is-open="$ctrl.isGeneralInfoOpen" disabled="$ctrl.editMode">
+        <collapsible-panel
+            is-open="$ctrl.isGeneralInfoOpen"
+            disabled="$ctrl.editMode"
+            ng-disabled="$ctrl.editMode">
             <collapsible-panel-title>
                 General information
-                <md-button
-                    class="general-information-buttons"
-                    ng-if="$ctrl.uuid && !$ctrl.editMode && $ctrl.isGeneralInfoOpen"
-                    ng-click="$ctrl.onClickEditBtn($event)">
-                    Edit
-                </md-button>
-                <md-button
-                    class="general-information-buttons cancel-button"
-                    ng-if="$ctrl.editMode"
-                    ng-click="$ctrl.onClickCancelBtn($event)">
-                    Cancel
-                </md-button>
-                <md-button
-                    class="general-information-buttons"
-                    ng-if="$ctrl.editMode"
-                    ng-click="$ctrl.onClickSaveBtn($event)"
-                    ng-disabled="$ctrl.disableSave || $ctrl.saveInProgress">
-                    Save
-                </md-button>
             </collapsible-panel-title>
             <collapsible-panel-content>
                 <div ng-if="$ctrl.saveInProgress">
@@ -31,7 +15,8 @@
                     <md-progress-linear md-mode="query"></md-progress-linear>
                 </div>
                 <div ng-if="$ctrl.saveError" class="md-padding">
-                    <ngb-panel-error-list message-list="$ctrl.saveError"></ngb-panel-error-list>
+                    <ngb-panel-error-list message-list="$ctrl.saveError">
+                    </ngb-panel-error-list>
                 </div>
                 <ngb-info-rows properties="$ctrl.properties" editmode="$ctrl.editMode"></ngb-info-rows>
                 <div ng-hide="$ctrl.isReadLoadingis" >
@@ -58,7 +43,7 @@
 
     <collapsible ng-show="$ctrl.read === undefined">
         <collapsible-panel is-open="true">
-            <collapsible-panel-title>
+            <collapsible-panel-title id="sequencePanel">
                 Sequence
             </collapsible-panel-title>
             <collapsible-panel-content>

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+import './ngbFeatureInfoMainActions.scss';
+
+import controller from './ngbFeatureInfoMainActions.controller';
+import component from './ngbFeatureInfoMainActions.component';
+
+
+export default angular.module('ngbFeatureInfoMainActions', [])
+    .component('ngbFeatureInfoMainActions', component)
+    .controller(controller.UID, controller)
+    .name;

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.component.js

@@ -0,0 +1,6 @@
+import controller from './ngbFeatureInfoMainActions.controller';
+
+export default  {
+    controller: controller.UID,
+    template: require('./ngbFeatureInfoMainActions.tpl.html')
+};

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js

@@ -0,0 +1,43 @@
+export default class ngbFeatureInfoMainActionsController {
+
+    static get UID() {
+        return 'ngbFeatureInfoMainActionsController';
+    }
+
+    constructor($scope, dispatcher, ngbFeatureInfoPanelService) {
+        Object.assign(this, {$scope, dispatcher, ngbFeatureInfoPanelService});
+        const onClickCancelBtn = () => this.onClickCancelBtn();
+        this.dispatcher.on('feature:info:changes:cancel', onClickCancelBtn);
+        $scope.$on('$destroy', () => {
+            dispatcher.removeListener('feature:info:changes:cancel', onClickCancelBtn);
+        });
+    }
+
+    get editMode() {
+        return this.ngbFeatureInfoPanelService.editMode;
+    }
+
+    get disableSave () {
+        return this.ngbFeatureInfoPanelService.disableSaveButton();
+    }
+
+    get saveInProgress () {
+        return this.ngbFeatureInfoPanelService.saveInProgress;
+    }
+
+    onClickEditBtn () {
+        this.dispatcher.emitSimpleEvent('feature:info:edit:click');
+    }
+
+    onClickCancelBtn () {
+        this.dispatcher.emitSimpleEvent('feature:info:cancel:click');
+    }
+
+    onClickSaveBtn () {
+        this.dispatcher.emitSimpleEvent('feature:info:save:click');
+    }
+
+    onClickAddBtn () {
+        this.dispatcher.emitSimpleEvent('feature:info:add:click', 'sequencePanel');
+    }
+}

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.scss

@@ -0,0 +1,19 @@
+ngb-feature-info-main-actions {
+  width: 100%;
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.general-information-button {
+  margin: 0;
+  font-size: 14px;
+  color: #6699ff;
+  float: right;
+}
+
+.cancel-button {
+  color: #494949;
+}

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.tpl.html

@@ -0,0 +1,28 @@
+<div class="buttons-container">
+    <div>
+        <md-button ng-if="$ctrl.editMode"
+                   class="general-information-button add-button"
+                   ng-click="$ctrl.onClickAddBtn()"
+                   ng-disabled="$ctrl.disableAddButton">
+            Add
+        </md-button>
+    </div>
+    <div>
+        <md-button ng-if="!$ctrl.editMode"
+                   class="general-information-button"
+                   ng-click="$ctrl.onClickEditBtn()">
+            Edit
+        </md-button>
+        <md-button ng-if="$ctrl.editMode"
+                   class="general-information-button cancel-button"
+                   ng-click="$ctrl.onClickCancelBtn()">
+            Cancel
+        </md-button>
+        <md-button ng-if="$ctrl.editMode"
+                   class="general-information-button"
+                   ng-click="$ctrl.onClickSaveBtn()"
+                   ng-disabled="$ctrl.disableSave || $ctrl.saveInProgress">
+            Save
+        </md-button>
+    </div>
+</div>

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js

@@ -6,8 +6,13 @@ export default class ngbInfoRowsController {
 
     saveRequest = {};
 
-    constructor($scope, ngbFeatureInfoPanelService, $compile) {
-        Object.assign(this, {$scope, ngbFeatureInfoPanelService, $compile});
+    constructor($scope, dispatcher, ngbFeatureInfoPanelService, $compile) {
+        Object.assign(this, {$scope, dispatcher, ngbFeatureInfoPanelService, $compile});
+        const onClickAddBtn = () => this.onClickAddBtn();
+        this.dispatcher.on('feature:info:add:click', onClickAddBtn);
+        $scope.$on('$destroy', () => {
+            dispatcher.removeListener('feature:info:add:click', onClickAddBtn);
+        });
     }
 
     get attributes () {

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.scss

@@ -73,14 +73,6 @@ ngb-info-rows {
     }
   }
 
-  .add-button {
-    font-size: 14px;
-    color: #679edb;
-    margin: 0;
-    padding: 0;
-    margin-top: 5px;
-  }
-
   .property-name.editable {
     margin-left: 0;
     margin-right: 5px;

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.tpl.html

@@ -129,11 +129,4 @@
             </div>
         </div>
     </form>
-    <md-button
-        class="add-button"
-        ng-if="$ctrl.editmode"
-        ng-click="$ctrl.onClickAddBtn()"
-        ng-disabled="$ctrl.disableAddButton">
-        Add
-    </md-button>
 </div>

client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js

@@ -8,20 +8,28 @@ export default class ngbFeatureInfoPanelController {
         return this.$scope.$ctrl.geneId;
     }
 
+
     constructor($scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService) {
         Object.assign(this, {$scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService});
     }
 
     selectTab(db){
+        this.ngbFeatureInfoPanelService.isMainTabSelected = false;
         this.dispatcher.emitGlobalEvent(`feature:info:select:${db}`, {db, featureId: this.geneId});
     }
 
     get editMode() {
-        this.$scope.$parent.editMode = this.ngbFeatureInfoPanelService.editMode;
-        return this.ngbFeatureInfoPanelService.editMode;
+        const editMode = this.ngbFeatureInfoPanelService.editMode;
+        this.$scope.$parent.editMode = editMode;
+        return editMode;
+    }
+
+    selectMainTab() {
+        this.ngbFeatureInfoPanelService.isMainTabSelected = true;
     }
 
     selectHistoryTab () {
+        this.ngbFeatureInfoPanelService.isMainTabSelected = false;
         this.ngbFeatureInfoPanelService.getHistoryInProgress = true;
         this.ngbFeatureInfoPanelService.getGeneInfoHistory(this.fileId, this.uuid)
             .then((success) => {