Tidy

src/components/cylc/Drawer.vue

@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <v-list-item-title>Dashboard</v-list-item-title>
         </v-list-item>
 
-        <v-divider class="" />
+        <v-divider/>
 
         <v-list-item>
           <v-list-item-title>Workflows</v-list-item-title>

src/components/cylc/Header.vue

@@ -18,24 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="c-header d-flex flex-column align-center pt-3 pb-5">
     <div class="mb-2 px-6">
-      <svg version="1.1" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 655 260" xmlns="http://www.w3.org/2000/svg">
-        <g transform="translate(292.53,-49.505)">
-          <g>
-            <g>
-              <g>
-                <circle r="27.743086" cy="248.39331" cx="-135.70163" transform="scale(-1,1)" style="fill:#ff5966;fill-opacity:1;stroke:none;stroke-width:1.29467726;stroke-opacity:1"/>
-                <circle r="72.85714" cy="216.6479" cx="201.04846" style="fill:#0dc66e;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"/>
-                <circle r="37.37936" cy="136.32114" cx="167.3486" style="fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.18934333;stroke-opacity:1"/>
-                <circle r="49.79998" cy="121.63028" cx="292.31558" style="fill:#00b4fd;fill-opacity:1;stroke:none;stroke-width:0.91736811;stroke-opacity:1"/>
-                <path d="m -239.15268,150.44225 q 5.28,0 17.92,1.92 l 3.84,0.48 -0.48,9.76 q -12.8,-1.44 -18.88,-1.44 -13.6,0 -18.56,6.56 -4.8,6.4 -4.8,24 0,17.44 4.48,24.32 4.64,6.88 19.04,6.88 l 18.88,-1.44 0.48,9.92 q -14.88,2.24 -22.24,2.24 -18.72,0 -25.92,-9.6 -7.04,-9.6 -7.04,-32.32 0,-22.88 7.68,-32 7.68,-9.28 25.6,-9.28 z" style="fill:#ff5966;fill-opacity:1;stroke:none"/>
-                <path d="m -175.59268,152.04225 h 12 l 20,69.6 h 5.28 l 20.16,-69.6 h 12 l -33.28,115.52 h -12 l 10.4,-35.52 h -11.84 z" style="fill:#ffcc00;fill-opacity:1;stroke:none"/>
-                <path d="m -58.612682,232.04225 v -114.88 h 12 v 114.88 z" style="fill:#0dc66e;fill-opacity:1;stroke:none"/>
-                <path d="m 34.534818,150.44225 q 5.28,0 17.92,1.92 l 3.84,0.48 -0.48,9.76 q -12.8,-1.44 -18.88,-1.44 -13.6,0 -18.56,6.56 -4.8,6.4 -4.8,24 0,17.44 4.48,24.32 4.64,6.88 19.04,6.88 l 18.88,-1.44 0.48,9.92 q -14.88,2.24 -22.24,2.24 -18.72,0 -25.9199999,-9.6 -7.04,-9.6 -7.04,-32.32 0,-22.88 7.68,-32 7.6799999,-9.28 25.5999999,-9.28 z" style="fill:#00b4fd;fill-opacity:1;stroke:none"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </svg>
+      <img src="/img/logo.svg" style="max-width: 100%; width: 300px"/>
     </div>
     <div
       id="cylc-select-options"

src/components/cylc/TaskFilter.vue

@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="filter-id"
         clearable
         placeholder="Filter by ID"
-        v-model="localValue.id"
+        v-model="model.id"
         ref="filterIDInput"
       />
     </v-col>
@@ -38,45 +38,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="mb-2 mb-md-0"
     >
       <TaskFilterSelect
-        v-model="localValue.states"
+        v-model="model.states"
         type="task state"
-        :items="$options.allStates"
+        :items="TaskStateNames"
         data-cy="filter task state"
         placeholder="Filter by task state"
       />
     </v-col>
   </v-row>
 </template>
 
-<script>
+<script setup>
 import { TaskStateNames } from '@/model/TaskState.model'
 import TaskFilterSelect from '@/components/cylc/TaskFilterSelect.vue'
 
-export default {
-  name: 'TaskFilter',
+/** @type {import('vue').Ref<{ id: string?, states: string[]? }>} */
+const model = defineModel({
+  type: Object,
+  required: true,
+})
 
-  components: {
-    TaskFilterSelect
-  },
-
-  props: {
-    modelValue: {
-      type: Object,
-      required: true
-    } // { id, states }
-  },
-
-  computed: {
-    localValue: {
-      get () {
-        return this.modelValue
-      },
-      set (value) {
-        // Update 'modelValue' prop by notifying parent component's v-model for this component
-        this.$emit('update:modelValue', value)
-      }
-    }
-  },
-  allStates: TaskStateNames,
-}
 </script>

src/components/cylc/TaskFilterSelect.vue

@@ -3,14 +3,18 @@
     :items="items"
     clearable
     multiple
-    v-model="localValue"
+    v-model="model"
   >
     <template #prepend-item>
-      <v-list-item
-        @click="selectAll"
-      >
-        Select All
-      </v-list-item>
+      <v-select-actions>
+        <v-btn
+          @click="selectAll()"
+          data-cy="task-filter-select-all"
+        >
+          Select All
+        </v-btn>
+      </v-select-actions>
+      <v-divider/>
     </template>
 
     <template #item="{ item, props }">
@@ -33,7 +37,7 @@
       <v-chip
         v-if="index < maxVisibleStates"
         closable
-        @click:close="removeItem(item.raw)"
+        @click:close="removeItem(index)"
         size="small"
         :close-icon="mdiClose"
       >
@@ -55,24 +59,18 @@
         v-if="index === maxVisibleStates"
         class="text-grey text-caption"
       >
-        (+{{ localValue.length - maxVisibleStates }})
+        (+{{ model.length - maxVisibleStates }})
       </span>
     </template>
   </v-select>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import { mdiClose } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Workflowicon from '@/components/cylc/gscan/WorkflowIcon.vue'
 
 const props = defineProps({
-  /** Array of selected states */
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
   items: {
     type: Array,
     required: true,
@@ -83,24 +81,16 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const localValue = computed({
-  get () {
-    return props.modelValue
-  },
-  set (val) {
-    emit('update:modelValue', val)
-  }
-})
+/** Array of selected states */
+const model = defineModel({ type: Array })
 
 const maxVisibleStates = 4
 
-function removeItem (key) {
-  localValue.value = localValue.value.filter(item => item !== key)
+function removeItem (index) {
+  model.value.splice(index, 1)
 }
 
 function selectAll () {
-  localValue.value = props.items
+  model.value = props.items
 }
 </script>

src/components/cylc/analysis/TimeSeries.vue

@@ -33,14 +33,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         ref="selectTasks"
       >
         <template v-slot:prepend-item>
-          <v-card-actions class="mt-n2">
+          <v-select-actions>
             <v-btn @click="selectSearchResults">
               Select all
             </v-btn>
             <v-btn @click="deselectSearchResults">
               Deselect all
             </v-btn>
-          </v-card-actions>
+          </v-select-actions>
           <v-divider/>
         </template>
       </v-autocomplete>

src/components/cylc/common/sort.js

@@ -70,27 +70,26 @@ export const DEFAULT_COMPARATOR = (left, right) => {
  * @param {Object[]} array - list of string values, or of objects with string values
  * @param {Object} value - a value to be inserted in the list, or an object wrapping the value (see iteratee)
  * @param {SortedIndexByIteratee=} iteratee - an optional function used to return the value of the element of the list}
- * @param {SortedIndexByComparator=} comparator - function used to compare the newValue with otherValues in the list
+ * @param {{comparator: SortedIndexByComparator, reverse: boolean}=} options - an optional object with a comparator function and a reverse flag
  * @return {number} - sorted index
  */
-export function sortedIndexBy (array, value, iteratee, options = {}) {
-  // comparator, reverse = false) {
+export function sortedIndexBy (array, value, iteratee = (x) => x, options = {}) {
   if (array.length === 0) {
     return 0
   }
-  // If given a function, use it. Otherwise, simply use identity function.
-  const iterateeFunction = iteratee || ((value) => value)
   // If given a function, use it. Otherwise, simply use locale sort with numeric enabled
-  const comparatorFunction = options.comparator || ((leftObject, leftValue, rightObject, rightValue) => DEFAULT_COMPARATOR(leftValue, rightValue))
+  const comparator = options.comparator || (
+    (leftObject, leftValue, rightObject, rightValue) => DEFAULT_COMPARATOR(leftValue, rightValue)
+  )
   let low = 0
   let high = array.length
 
-  const newValue = iterateeFunction(value)
+  const newValue = iteratee(value)
 
   while (low < high) {
     const mid = Math.floor((low + high) / 2)
-    const midValue = iterateeFunction(array[mid])
-    let higher = comparatorFunction(value, newValue, array[mid], midValue)
+    const midValue = iteratee(array[mid])
+    let higher = comparator(value, newValue, array[mid], midValue)
     if (options.reverse) {
       higher = higher * -1
     }

src/plugins/vuetify.js

@@ -22,6 +22,7 @@ import { VCombobox } from 'vuetify/components/VCombobox'
 import { VSelect } from 'vuetify/components/VSelect'
 import { VTextarea } from 'vuetify/components/VTextarea'
 import { VTextField } from 'vuetify/components/VTextField'
+import { VCardActions } from 'vuetify/components/VCard'
 import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
@@ -75,11 +76,20 @@ export const vuetifyOptions = {
       mdi
     }
   },
+  aliases: {
+    VSelectActions: VCardActions,
+  },
   defaults: {
     VTooltip: {
       activator: 'parent',
       location: 'bottom',
     },
+    VList: {
+      slim: true,
+    },
+    VSelectActions: {
+      class: 'mt-n2'
+    },
     ...inputDefaults
   },
 }

src/store/workflows.module.js

@@ -124,7 +124,7 @@ function getIndex (state, id) {
   return state.cylcTree.$index[id]
 }
 
-/* Add a child node under a parent Node */
+/** Add a child node under a parent Node */
 function addChild (parentNode, childNode) {
   // determine which list to add this node to
   // console.log(`$t ++ ${childNode.id}`)
@@ -144,20 +144,12 @@ function addChild (parentNode, childNode) {
   }
 
   // insert the child preserving sort order
-  let comparator
-  if (['cycle', 'family'].includes(parentNode.type)) {
-    // sort by type, then name
-    // (this makes families sort before tasks in the graph)
-    comparator = (n) => `${n.type}-${n.name}`
-  } else {
-    // sort by name
-    comparator = (n) => n.name
-  }
+  const iteratee = (n) => `${n.type}-${n.name}` // (this makes families sort before tasks in the tree)
   const reverse = ['cycle', 'job'].includes(childNode.type)
   const index = sortedIndexBy(
     parentNode[key],
     childNode,
-    comparator,
+    iteratee,
     { reverse }
   )
   parentNode[key].splice(index, 0, childNode)

tests/e2e/specs/tree.cy.js

@@ -266,18 +266,14 @@ describe('Tree view', () => {
 
     it('Provides a select all functionality', () => {
       cy.visit('/#/tree/one')
-      cy
-        .get('[data-cy="filter task state"]')
+      cy.get('[data-cy="filter task state"]')
         .get('.v-list-item--active')
         .should('have.length', 0)
-      cy
-        .get('[data-cy="filter task state"]')
+      cy.get('[data-cy="filter task state"]')
         .click()
-        .get('.v-list-item')
-        .contains('Select All')
-        .click({ force: true })
-      cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy=task-filter-select-all]')
+        .click()
+      cy.get('[data-cy="filter task state"]')
         .get('.v-list-item--active')
         .should('have.length', 8)
     })

tests/unit/components/cylc/common/sort.spec.js

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { DEFAULT_COMPARATOR } from '@/components/cylc/common/sort'
+import { DEFAULT_COMPARATOR, sortedIndexBy } from '@/components/cylc/common/sort'
 
 describe('DEFAULT_COMPARATOR', () => {
   it.each([
@@ -31,3 +31,47 @@ describe('DEFAULT_COMPARATOR', () => {
     expect(DEFAULT_COMPARATOR(a, b)).toEqual(expected)
   })
 })
+
+describe('sortedIndexBy', () => {
+  it.each([
+    [['a', 'c', 'e'], 'a', 0],
+    [['a', 'c', 'e'], 'b', 1],
+    [['a', 'c', 'e'], 'c', 1],
+    [['a', 'c', 'e'], 'd', 2],
+    [['a', 'c', 'e'], 'x', 3],
+    [[], 'x', 0],
+  ])('sortedIndexBy(%o, %o) -> %i', (arr, value, expected) => {
+    expect(sortedIndexBy(arr, value)).toEqual(expected)
+  })
+
+  it('uses the iteratee function to determine the value for comparison', () => {
+    const arr = [{ key: 'a' }, { key: 'c' }, { key: 'e' }]
+    const value = { key: 'b' }
+    const iteratee = (x) => x.key
+    expect(sortedIndexBy(arr, value, iteratee)).toEqual(1)
+  })
+
+  it.each([
+    [[8], 0],
+    [[8, 8], 0],
+    [[8, 8, 8], 3],
+  ])('%#) uses a custom comparator if provided', (value, expected) => {
+    const arr = [[8, 8], [8, 8], [8, 8]]
+    const comparator = (leftObj, leftVal, rightObj, rightVal) => (
+      leftObj.length - rightObj.length
+    )
+    expect(sortedIndexBy(arr, value, (x) => x, { comparator })).toEqual(expected)
+  })
+
+  it('reverses the comparison if reverse option is true', () => {
+    const arr = ['e', 'c', 'a']
+    const value = 'd'
+    expect(sortedIndexBy(arr, value, (x) => x, { reverse: true })).toEqual(1)
+  })
+
+  it('handles numeric collation correctly by default', () => {
+    const arr = ['1', '2']
+    const value = '10'
+    expect(sortedIndexBy(arr, value)).toEqual(2)
+  })
+})