Sessions order and filters fix

src/pages/LogsPage.vue

@@ -63,22 +63,61 @@
             v-model="logViewerStore.logfileFilter"
             @update:model-value="computedLogFileList()"
             multiple
-            clearable
             :options="logViewerStore.encounterOptions"
             label="Filter encounters"
             style="width: 256px"
-          />
+          >
+            <template
+              v-if="logViewerStore.logfileFilter.length > 0"
+              v-slot:append
+            >
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  logViewerStore.logfileFilter = [];
+                  computedLogFileList();
+                "
+                class="cursor-pointer q-field__focusable-action"
+              />
+            </template>
+          </q-select>
 
           <q-select
             v-if="logViewerStore.viewerState === 'viewing-session'"
             filled
             v-model="logViewerStore.encounterFilter"
             @update:model-value="calculateEncounterRows()"
             multiple
-            clearable
             :options="logViewerStore.encounterOptions"
             label="Filter encounters"
             style="width: 256px"
+          >
+            <template
+              v-if="logViewerStore.encounterFilter.length > 0"
+              v-slot:append
+            >
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  logViewerStore.encounterFilter = [];
+                  calculateEncounterRows();
+                "
+                class="cursor-pointer q-field__focusable-action"
+              />
+            </template>
+          </q-select>
+
+          <q-select
+            v-if="logViewerStore.viewerState === 'viewing-session'"
+            filled
+            v-model="logViewerStore.sessionsOrder"
+            @update:model-value="reOrderSessions()"
+            :options="[
+              { label: 'Newest', value: 'desc' },
+              { label: 'Oldest', value: 'asc' },
+            ]"
+            label="Sessions Order"
+            style="width: 256px; margin-left: 10px"
           />
 
           <q-space />
@@ -165,8 +204,8 @@
             </q-timeline-entry>
 
             <q-timeline-entry
-              v-for="encounter in encounterRows"
-              :key="encounter.encounterName"
+              v-for="(encounter, index) in encounterRows"
+              :key="`${index}-${encounter}`"
               :title="
                 encounter.encounterName +
                 ' | ' +
@@ -442,9 +481,27 @@ function calculateEncounterRows() {
       return;
     }
   });
+
+  reOrderSessions();
 }
 /* End session table */
 
+function reOrderSessions() {
+  if (encounterRows.value.length === 1) return;
+
+  const firstEncounter = encounterRows.value.at(0);
+  const lastEncounter = encounterRows.value.at(-1);
+
+  if (!firstEncounter || !lastEncounter) return;
+
+  const currentOrientation =
+    firstEncounter.startingMs < lastEncounter.startingMs ? "asc" : "desc";
+
+  if (currentOrientation === logViewerStore.sessionsOrder.value) return;
+
+  encounterRows.value.reverse();
+}
+
 /* Start encounter table */
 const encounterRows: Ref<RowData[]> = ref([]);
 

src/stores/log-viewer.ts

@@ -33,6 +33,7 @@ type State = {
   encounterOptions: string[];
   encounterFilter: string[];
   logfileFilter: string[];
+  sessionsOrder: { label: "Newest" | "Oldest"; value: "desc" | "asc" };
 };
 
 export const useLogViewerStore = defineStore("log-viewer", {
@@ -45,6 +46,7 @@ export const useLogViewerStore = defineStore("log-viewer", {
     encounterOptions: [],
     encounterFilter: [],
     logfileFilter: [],
+    sessionsOrder: { label: "Newest", value: "desc" },
   }),
   actions: {
     resetState() {
@@ -56,6 +58,7 @@ export const useLogViewerStore = defineStore("log-viewer", {
       this.encounterOptions = [];
       this.encounterFilter = [];
       this.logfileFilter = [];
+      this.sessionsOrder = { label: "Newest", value: "desc" };
     },
   },
 });