fix alignment & code tidy

* Allow circular-dependency-plugin to work on Windows
* Tidy
* Fix typo
* e2e test: bring back necessary wait
* Try to fix graphiql e2e test flakiness
* Revert some unwanted changes from #861
* Fix tree/table view alignment issues
* Update changelog

Author: MetRonnie

CHANGES.md

@@ -32,6 +32,9 @@ for number of tasks per page.
 [#1177](https://github.com/cylc/cylc-ui/pull/1177) -
 New tabs now open on top.
 
+[#1178](https://github.com/cylc/cylc-ui/pull/1178) - Improve appearance of
+Table view.
+
 ### Fixes
 
 [#1164](https://github.com/cylc/cylc-ui/pull/1164) -

src/components/cylc/Job.vue

@@ -49,7 +49,7 @@ export default {
     const DEFAULT_XY = '10'
     const PREVIOUS_STATE_ITEMS_XY = '25'
     const width = !isEmpty(context.props.previousState) ? PREVIOUS_STATE_ITEMS_SIZE : DEFAULT_SIZE
-    const height = !isEmpty(context.props.previousState) ? PREVIOUS_STATE_ITEMS_SIZE : DEFAULT_SIZE
+    const height = width
     const jobStatusIcon = createElement('rect', {
       attrs: {
         class: context.props.status,
@@ -105,8 +105,7 @@ export default {
     //       https://github.com/vuejs/vue-loader/issues/1433
     const attrs = Object.assign(context.data, {
       attrs: {
-        class: 'c-job',
-        style: 'display:inline-block; vertical-align:middle'
+        class: 'c-job'
       }
     })
     return createElement(

src/components/cylc/cylcObject/Menu.vue

@@ -46,26 +46,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-card-subtitle>
           {{ typeAndStatusText }}
         </v-card-subtitle>
-        <v-divider v-if="primaryMutations.length || displayMutations.length" />
+        <v-divider v-if="primaryMutations.length || displayMutations.length"/>
         <v-skeleton-loader
           v-if="isLoadingMutations && primaryMutations.length"
           type="list-item-avatar-two-line@3"
           min-width="400"
-        >
-        </v-skeleton-loader>
+        />
         <v-list
           v-if="displayMutations.length"
           class="c-mutation-menu-list"
         >
           <v-list-item
             v-for="{ mutation, requiresInfo, authorised } in displayMutations"
             :key="mutation.name"
-            :disabled=!authorised
+            :disabled="!authorised"
             @click.stop="enact(mutation, requiresInfo)"
             class="c-mutation"
           >
             <v-list-item-avatar>
-              <v-icon :disabled=!authorised large>{{ mutation._icon }}</v-icon>
+              <v-icon :disabled="!authorised" large>
+                {{ mutation._icon }}
+              </v-icon>
             </v-list-item-avatar>
             <v-list-item-content>
               <v-list-item-title>{{ mutation._title }}</v-list-item-title>
@@ -79,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <v-list-item-action>
               <v-btn
                 icon
-                :disabled=!authorised
+                :disabled="!authorised"
                 x-large
                 class="float-right"
                 @click.stop="openDialog(mutation)"

src/components/cylc/gscan/GScan.vue

@@ -104,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- data -->
       <div
         v-if="!isLoading"
-        class="c-gscan-workflows flex-grow-1"
+        class="c-gscan-workflows flex-grow-1 pl-2"
       >
         <tree
           :filterable="false"

src/components/cylc/table/Table.vue

@@ -35,14 +35,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-row
       no-gutters
       class="flex-grow-1 position-relative"
-      >
+    >
       <v-col
         cols="12"
         class="mh-100 position-relative"
       >
         <v-container
           fluid
-          class="ma-0 pa-0 w-100 h-100 left-0 top-0 position-absolute"
+          class="ma-0 pa-0 w-100 h-100 left-0 top-0 position-absolute pt-2"
         >
           <v-data-table
             :headers="headers"
@@ -130,7 +130,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >
                 <td>
                   <div class="d-flex align-content-center flex-nowrap">
-                    <div class="mr-1">
+                    <div class="d-flex mr-1">
                       <Job
                         v-cylc-object="job"
                         :key="`${job.id}-summary-${index}`"

src/components/cylc/tree/Tree.vue

@@ -17,12 +17,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-container
-    fluid
-    class="c-table ma-0 pa-2 h-100 flex-column d-flex"
+    class="ma-0 pa-0"
   >
     <!-- Toolbar -->
     <v-row
-        class="d-flex flex-wrap table-option-bar no-gutters flex-grow-0"
+      no-gutters
+      class="d-flex flex-wrap"
     >
       <!-- Filters -->
       <v-col
@@ -70,7 +70,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-row>
     <v-row
       no-gutters
-      class="flex-grow-1 position-relative"
       >
       <v-col
         cols="12"

src/styles/cylc/_table.scss

@@ -16,7 +16,14 @@
  */
 
 .c-table {
+  th, td {
+    white-space: nowrap;
+  }
+
   .c-task, .c-job {
+    display: flex;
+    align-items: center;
+    height: 100%;
     font-size: 1.2em;
   }
 }

src/styles/cylc/_tree.scss

@@ -81,6 +81,8 @@ $visible-outputs: 5;
     }
 
     .c-task, .c-job {
+      display: flex;
+      align-items: center;
       font-size: 1.2em;
     }
   }

src/utils/aotf.js

@@ -163,26 +163,27 @@ export const cylcObjects = Object.freeze({
 /**
  * Most important mutations for each object type.
  */
-export const primaryMutations = {}
-primaryMutations[cylcObjects.Workflow] = [
-  'play',
-  'pause',
-  'stop',
-  'reload',
-  'clean'
-]
-primaryMutations[cylcObjects.CyclePoint] = [
-  'hold',
-  'release',
-  'trigger',
-  'kill'
-]
-primaryMutations[cylcObjects.Namespace] = [
-  'hold',
-  'release',
-  'trigger',
-  'kill'
-]
+export const primaryMutations = {
+  [cylcObjects.Workflow]: [
+    'play',
+    'pause',
+    'stop',
+    'reload',
+    'clean'
+  ],
+  [cylcObjects.CyclePoint]: [
+    'hold',
+    'release',
+    'trigger',
+    'kill'
+  ],
+  [cylcObjects.Namespace]: [
+    'hold',
+    'release',
+    'trigger',
+    'kill'
+  ]
+}
 // handle families the same as tasks
 primaryMutations.family = primaryMutations[cylcObjects.Namespace]
 
@@ -210,25 +211,26 @@ const identifierOrder = [
  *
  * object: [[typeName: String, impliesMultiple: Boolean]]
  */
-export const mutationMapping = {}
-mutationMapping[cylcObjects.User] = []
-mutationMapping[cylcObjects.Workflow] = [
-  ['WorkflowID', false]
-]
-mutationMapping[cylcObjects.CyclePoint] = [
-  ['CyclePoint', false],
-  ['CyclePointGlob', true]
-]
-mutationMapping[cylcObjects.Namespace] = [
-  ['NamespaceName', false],
-  ['NamespaceIDGlob', true]
-]
-// mutationMapping[cylcObjects.Task] = [
-//   ['TaskID', false]
-// ]
-mutationMapping[cylcObjects.Job] = [
-  ['JobID', false]
-]
+export const mutationMapping = {
+  [cylcObjects.User]: [],
+  [cylcObjects.Workflow]: [
+    ['WorkflowID', false]
+  ],
+  [cylcObjects.CyclePoint]: [
+    ['CyclePoint', false],
+    ['CyclePointGlob', true]
+  ],
+  [cylcObjects.Namespace]: [
+    ['NamespaceName', false],
+    ['NamespaceIDGlob', true]
+  ],
+  // [cylcObjects.Task]: [
+  //   ['TaskID', false]
+  // ],
+  [cylcObjects.Job]: [
+    ['JobID', false]
+  ]
+}
 
 /**
  * Mutation argument types which are derived from more than one token.
@@ -272,13 +274,13 @@ export const alternateFields = {
  *
  * Maps onto task status.
  */
-export const mutationStatus = {}
-mutationStatus[TaskState.WAITING] = TaskState.WAITING
-mutationStatus[TaskState.SUBMITTED] = TaskState.SUBMITTED
-mutationStatus[TaskState.SUCCEEDED] = TaskState.SUCCEEDED
-mutationStatus[TaskState.FAILED] = TaskState.FAILED
-mutationStatus[TaskState.SUBMIT_FAILED] = TaskState.SUBMIT_FAILED
-Object.freeze(mutationStatus)
+export const mutationStatus = Object.freeze({
+  [TaskState.WAITING]: TaskState.WAITING,
+  [TaskState.SUBMITTED]: TaskState.SUBMITTED,
+  [TaskState.SUCCEEDED]: TaskState.SUCCEEDED,
+  [TaskState.FAILED]: TaskState.FAILED,
+  [TaskState.SUBMIT_FAILED]: TaskState.SUBMIT_FAILED
+})
 
 /**
  * List of commands to add to the mutations from the schema.

src/views/Graph.vue

@@ -644,10 +644,7 @@ export default {
         `
       }
       // update edge paths
-      this.graphEdges.length = 0 // empty array
-      for (const edge of json.edges || []) {
-        this.graphEdges.push(posToPath(edge.pos))
-      }
+      this.graphEdges = json.edges?.map(edge => posToPath(edge.pos)) ?? []
 
       if (!this.panZoomWidget) {
         // mount the svgPanZoom widget on first load