refactor: fix linting errors and warnings (#96)

* refactor: fix linting errors and warnings

* refactor: change config to resolve undefined var errors

.eslintrc.cjs

@@ -18,5 +18,8 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'semi': ['error', 'never'],
     'object-curly-spacing': ['error', 'always']
+  },
+  "env": {
+    "node": true
   }
 }

src/components/Workflows.vue

@@ -11,7 +11,7 @@
   import WorkflowsIntroSection from "@/components/workflows/WorkflowsIntroSection.vue"
   import filtersStore from "@/store/filters-store"
   import workflowsStore from "@/store/workflows-store"
-  import type { ReleaseInfo } from "@/types";
+  import type { ReleaseInfo } from "@/types"
 
   const { t } = useI18n()
 
@@ -70,7 +70,7 @@
       return acc
     }, {})
 
-    workflowsStore.releases = Object.keys(releasesObj).map(key => <ReleaseInfo>releasesObj[key])
+    workflowsStore.releases = Object.keys(releasesObj).map(key => releasesObj[key] as ReleaseInfo)
 
     setEvalColors(workflowsStore.runs)
 
@@ -85,7 +85,7 @@
     <div class="flex mb-6">
       <p class="text-amber-700 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
     </div>
-    <WorkflowsIntroSection :page="<'timeline'|'table'>selectedOption.value" class="mb-6"></WorkflowsIntroSection>
+    <WorkflowsIntroSection :page="selectedOption.value as ('timeline' | 'table')" class="mb-6"></WorkflowsIntroSection>
     <div class="flex mb-6">
       <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
       <Filters class="ml-auto"/>

src/components/workflows/TrendLegend.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   showTextColors?: boolean
 }>(), {
   showTextColors: true

src/components/workflows/WorkflowsIntroSection.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const props = defineProps<{
+defineProps<{
   page: "timeline" | "table"
 }>()
 </script>

src/components/workflows/WorkflowsTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, ref, onMounted, computed } from "vue"
+import { watch, ref, onMounted } from "vue"
 import { useI18n } from "vue-i18n"
 import { createReadableMetricValue, getEvalColor, mapGtId } from "@/helpers/utils"
 import type { EvalDefinitions, EvaluationResultsDocumentWide, EvaluationRun, GroupedTableData } from "@/types"

src/components/workflows/WorkflowsTimeline.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import TimelineItem from "@/components/workflows/timeline/TimelineItem.vue"
 import Dropdown from 'primevue/dropdown'
-import { computed, onMounted, ref, watch} from "vue"
-import { EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
+import { computed, onMounted, ref, watch } from "vue"
+import { EvaluationMetrics, getMaxValueByMetric } from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
-import TrendLegend from "@/components/workflows/TrendLegend.vue";
+import TrendLegend from "@/components/workflows/TrendLegend.vue"
 import TimelineFilters from "./timeline/TimelineFilters.vue"
 
 const { t } = useI18n()
 const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gtTimeline.findIndex(({ value }) => value === id) > -1))
 const workflows = ref<Workflow[]>([])
 const selectedMetric = ref<DropdownOption | null>(null)
 const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
-const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => <keyof EvaluationResultsDocumentWide>selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
+const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => selectedMetric.value?.value as keyof EvaluationResultsDocumentWide || EvaluationMetrics.CER_MEAN)
 
 onMounted(async () => {
   selectedMetric.value = metrics.value[0]

src/components/workflows/timeline/BaseTimelineDetailedChart.vue

@@ -213,7 +213,7 @@ function render([data, startDate, endDate, maxY]) {
       .attr('fill', colors.gray['600'])
       .style('cursor', 'pointer')
 
-    releaseGroup.on('mouseenter', function(e) {
+    releaseGroup.on('mouseenter', function() {
       this.parentElement.appendChild(this)
     })
   })

src/components/workflows/timeline/MetricAverageChart.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {computed, onMounted, ref, watch} from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useI18n } from 'vue-i18n'
 import OverlayPanel from "primevue/overlaypanel"
-import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint} from "@/types"
+import type { EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint } from "@/types"
 import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
 import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
 import BaseTimelineDetailedChart from "@/components/workflows/timeline/BaseTimelineDetailedChart.vue"
@@ -38,14 +38,14 @@ function init() {
 function getTimelineData(runs: EvaluationRun[], metric: string): TimelineChartDataPoint[] {
   const datesValues = runs.reduce((acc, cur) => {
     const date = new Date(new Date(cur.metadata.timestamp).setHours(0, 0, 0, 0)).toDateString()
-    const value = cur.evaluation_results.document_wide[<keyof EvaluationResultsDocumentWide>metric]
+    const value = cur.evaluation_results.document_wide[metric as keyof EvaluationResultsDocumentWide]
     if (!value || Array.isArray(value)) return acc
 
     if (!acc[date]) acc[date] = [value]
     else acc[date] = [...acc[date], value]
     return acc
   },
-  <{ [key: string]: number[] }>{})
+  {} as { [key: string]: number[] })
 
   return Object
     .keys(datesValues)

src/components/workflows/timeline/TimelineItem.vue

@@ -13,7 +13,7 @@ import TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMe
 import filtersStore from "@/store/filters-store"
 
 
-const props = defineProps<{
+defineProps<{
   gt: GroundTruth,
   metric: keyof EvaluationResultsDocumentWide
 }>()