ui fixes and run disable. cleanup

src/app/tabs/analysis-tab.js

@@ -42,7 +42,7 @@ class AnalysisTab extends ViewPlugin {
     })
     this.registry.put({api: this.staticanalysis, name: 'staticanalysis'})
 
-    return yo`<div class="p-3 pb-1" id="staticanalysisView">${this.staticanalysis.render()}</div>`
+    return yo`<div class="px-3 pb-1" id="staticanalysisView">${this.staticanalysis.render()}</div>`
   }
 
 }

src/app/tabs/staticanalysis/staticAnalysisView.js

@@ -32,6 +32,7 @@ function staticAnalysisView (localRegistry, analysisModule) {
     $('#staticanalysisresult').empty()
     if (languageVersion.indexOf('soljson') !== 0) return
     self.lastCompilationResult = data
+    if (self.view) self.view.querySelector('#staticAnalysisCurrentFile').innerText = file
     self.lastCompilationSource = source
     if (self.view.querySelector('#autorunstaticanalysis').checked) {
       self.run()
@@ -40,12 +41,15 @@ function staticAnalysisView (localRegistry, analysisModule) {
 }
 
 staticAnalysisView.prototype.render = function () {
-  var self = this
+  this.runBtn = yo`<button class="btn btn-sm btn-primary" onclick="${() => { this.run() }}" >Run</button>`
-  var view = yo`
+  const view = yo`
     <div class="${css.analysis}">
-      <div class="${css.buttons}">
+      <div class="mb-2 d-flex flex-column align-items-left">
-          <div class="${css.buttonsInner}">
+        <div class="mb-2 p-2 alert alert-info">
-            <button class="${css.buttonRun} btn btn-sm btn-primary" onclick="${function () { self.run() }}" >Run</button>
+          <span>For: <span id="staticAnalysisCurrentFile">No file compiled</span></span>
+        </div>
+        <div class="d-flex justify-content-between">
+          ${this.runBtn}
           <div class="${css.label}" for="autorunstaticanalysis">
             <input id="autorunstaticanalysis"
               type="checkbox"
@@ -59,7 +63,7 @@ staticAnalysisView.prototype.render = function () {
           <div class="${css.label}" for="checkAllEntries">
             <input id="checkAllEntries"
               type="checkbox"
-                onclick="${function (event) { self.checkAll(event) }}"
+              onclick="${(event) => { this.checkAll(event) }}"
               style="vertical-align:bottom"
               checked="true"
             >
@@ -73,12 +77,14 @@ staticAnalysisView.prototype.render = function () {
         ${this.modulesView}
       </div>
       <div class="${css.resultTitle} mx-2"><h6>Results:</h6></div>
-        <div class="${css.result} m-2" id='staticanalysisresult'></div>
+      <div class="${css.result} my-2" id='staticanalysisresult'></div>
     </div>
   `
+
   if (!this.view) {
     this.view = view
   }
+  this.correctRunBtnDisabled()
   return view
 }
 
@@ -86,7 +92,7 @@ staticAnalysisView.prototype.selectedModules = function () {
   if (!this.view) {
     return []
   }
-  var selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
+  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
   var toRun = []
   for (var i = 0; i < selected.length; i++) {
     toRun.push(selected[i].attributes['index'].value)
@@ -98,16 +104,17 @@ staticAnalysisView.prototype.run = function () {
   if (!this.view) {
     return
   }
-  var selected = this.selectedModules()
+  const selected = this.selectedModules()
-  var warningContainer = $('#staticanalysisresult')
+  const warningContainer = $('#staticanalysisresult')
   warningContainer.empty()
   var self = this
   if (this.lastCompilationResult && selected.length) {
-    var warningCount = 0
+    this.runBtn.removeAttribute('disabled')
+    let warningCount = 0
     this.runner.run(this.lastCompilationResult, selected, function (results) {
       results.map(function (result, i) {
         result.report.map(function (item, i) {
-          var location = ''
+          let location = ''
           if (item.location) {
             var split = item.location.split(':')
             var file = split[2]
@@ -122,45 +129,53 @@ staticAnalysisView.prototype.run = function () {
             location = Object.keys(self.lastCompilationResult.contracts)[file] + ':' + (location.start.line + 1) + ':' + (location.start.column + 1) + ':'
           }
           warningCount++
-          var msg = yo`<span>${location} ${item.warning} ${item.more ? yo`<span><br><a href="${item.more}" target="blank">more</a></span>` : yo`<span></span>`}</span>`
+          const msg = yo`<span>${location} ${item.warning} ${item.more ? yo`<span><br><a href="${item.more}" target="blank">more</a></span>` : yo`<span></span>`}</span>`
           self._components.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning alert alert-warning', useSpan: true})
         })
       })
       self.event.trigger('staticAnaysisWarning', [warningCount])
     })
   } else {
+    this.runBtn.setAttribute('disabled', 'disabled')
     if (selected.length) {
       warningContainer.html('No compiled AST available')
     }
     self.event.trigger('staticAnaysisWarning', [-1])
   }
 }
-
 staticAnalysisView.prototype.checkModule = function (event) {
-  let selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
+  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
-  let checkAll = this.view.querySelector('[id="checkAllEntries"]')
+  const checkAll = this.view.querySelector('[id="checkAllEntries"]')
+  this.correctRunBtnDisabled()
   if (event.target.checked) {
     checkAll.checked = true
   } else if (!selected.length) {
     checkAll.checked = false
   }
 }
-
+staticAnalysisView.prototype.correctRunBtnDisabled = function () {
+  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
+  if (this.lastCompilationResult && selected.length != 0) {
+    this.runBtn.removeAttribute('disabled')
+  } else {
+    this.runBtn.setAttribute('disabled', 'disabled')
+  }
+}
 staticAnalysisView.prototype.checkAll = function (event) {
   if (!this.view) {
     return
   }
   // checks/unchecks all
-  var checkBoxes = this.view.querySelectorAll('[name="staticanalysismodule"]')
+  const checkBoxes = this.view.querySelectorAll('[name="staticanalysismodule"]')
   checkBoxes.forEach((checkbox) => { checkbox.checked = event.target.checked })
+  this.correctRunBtnDisabled()
 }
 
 staticAnalysisView.prototype.renderModules = function () {
-  var self = this
+  const groupedModules = utils.groupBy(preProcessModules(this.runner.modules()), 'categoryId')
-  var groupedModules = utils.groupBy(preProcessModules(self.runner.modules()), 'categoryId')
   const moduleEntries = Object.keys(groupedModules).map((categoryId, i) => {
-    var category = groupedModules[categoryId]
+  const category = groupedModules[categoryId]
-    var entriesDom = category.map((item, i) => {
+  const entriesDom = category.map((item, i) => {
     return yo`
       <div class="form-check">
         <input id="staticanalysismodule_${categoryId}_${i}"
@@ -170,7 +185,7 @@ staticAnalysisView.prototype.renderModules = function () {
           index=${item._index}
           checked="true"
           style="vertical-align:bottom"
-            onclick="${function (event) { self.checkModule(event) }}"
+          onclick="${(event) => this.checkModule(event) }"
         >
         <label for="staticanalysismodule_${categoryId}_${i}" class="form-check-label mb-1">
           <p class="mb-0 font-weight-bold text-capitalize">${item.name}</p>
@@ -191,7 +206,7 @@ staticAnalysisView.prototype.renderModules = function () {
     </>
   `
   })
-  return yo`
+return yo`
   <div class="accordion" id="accordionModules">
     ${moduleEntries}
   </div>`

src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js

@@ -21,9 +21,6 @@ var css = csjs`
     align-items: center;
     justify-content: space-around;
   }
-  .buttonRun  {
-    margin-right: 1%;
-  }
   .label {
     display: flex;
     align-items: center;

src/app/tabs/styles/test-tab-styles.js

@@ -39,11 +39,6 @@ var css = csjs`
   }
   .testFailureSummary {
   }
-  .buttons {
-    margin: 5%;
-    display: flex;
-    align-items: center;
-  }
   .title {
     font-size: 1.1em;
     font-weight: bold;