diff --git a/.eslintrc.js b/.eslintrc.js index dcbb581..75c2b93 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,8 +1,9 @@ /* eslint-env node */ module.exports = { - plugins: ['@typescript-eslint', 'svelte3'], + plugins: ['@typescript-eslint', 'svelte'], extends: [ 'eslint:recommended', + 'plugin:svelte/recommended', // 'plugin:@typescript-eslint/recommended', // 'plugin:@typescript-eslint/recommended-requiring-type-checking', ], @@ -22,14 +23,11 @@ module.exports = { }, overrides: [ { - // see https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/OTHER_PLUGINS.md files: ['*.svelte'], - processor: 'svelte3/svelte3', - rules: { - 'import/first': 'off', - 'import/no-duplicates': 'off', - 'import/no-mutable-exports': 'off', - 'import/no-unresolved': 'off', + parser: 'svelte-eslint-parser', + // Parse the `
- + { + if (e.key !== 'Enter' && e.key !== ' ') return; + e.preventDefault(); + if (e.target != null) { + e.target.click(); + } + }} + > {node.title} diff --git a/src/components/tree/TreeLeafNode.svelte b/src/components/tree/TreeLeafNode.svelte index 43e6466..4f11511 100644 --- a/src/components/tree/TreeLeafNode.svelte +++ b/src/components/tree/TreeLeafNode.svelte @@ -30,6 +30,15 @@ class="tv_node" class:selected on:click={toggleSelected} + role="button" + tabindex="0" + on:keydown={(e) => { + if (e.key !== 'Enter' && e.key !== ' ') return; + e.preventDefault(); + if (e.target != null) { + e.target.click(); + } + }} title="click to toggle the visibility of this dataset" uk-tooltip="pos: right" > diff --git a/src/data/DataSet.ts b/src/data/DataSet.ts index eab8ebc..eb97475 100644 --- a/src/data/DataSet.ts +++ b/src/data/DataSet.ts @@ -103,7 +103,10 @@ export default class DataSet { export class DataGroup { public parent?: DataGroup; - constructor(public readonly title: string, public readonly datasets: (DataSet | DataGroup)[]) {} + constructor( + public readonly title: string, + public readonly datasets: (DataSet | DataGroup)[], + ) {} flat(arr: DataSet[]): void { for (const child of this.datasets) { diff --git a/src/data/EpiDate.ts b/src/data/EpiDate.ts index 26cb05a..8059404 100644 --- a/src/data/EpiDate.ts +++ b/src/data/EpiDate.ts @@ -3,7 +3,11 @@ export default class EpiDate { private static CUMULATIVE_DAYS_PER_MONTH = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]; private static DAY_OF_WEEK_TABLE = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]; - constructor(private readonly year: number, private readonly month: number, private readonly day: number) { + constructor( + private readonly year: number, + private readonly month: number, + private readonly day: number, + ) { // constructor logic if ( year < 1 || diff --git a/src/data/EpiPoint.ts b/src/data/EpiPoint.ts index b7e04d8..59cb551 100644 --- a/src/data/EpiPoint.ts +++ b/src/data/EpiPoint.ts @@ -1,7 +1,10 @@ import type EpiDate from './EpiDate'; export default class EpiPoint { - constructor(private readonly date: EpiDate, private readonly value: number) {} + constructor( + private readonly date: EpiDate, + private readonly value: number, + ) {} getDate(): EpiDate { return this.date; } diff --git a/src/tour.ts b/src/tour.ts index dd3c708..2bfca2b 100644 --- a/src/tour.ts +++ b/src/tour.ts @@ -39,7 +39,7 @@ const nextCancel = [ tour.addStep({ attachTo: { element: '[data-tour=datatour]', - on: 'auto', + on: 'bottom', }, title: 'Welcome to EpiVis', text: `

EpiVis is an interactive tool for visualizing epidemiological time-series data. This tour will introduce its main features.

@@ -95,7 +95,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=top]', - on: 'auto', + on: 'bottom', }, title: 'Chart Menu', text: `The menu on top of the chart features several different options, such as changing colors or exporting the chart as an image.`, @@ -105,7 +105,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=navmode]', - on: 'auto', + on: 'bottom', }, title: 'Toggle between Navigation Modes', text: `EpiVis supports four navigation modes: Autofit (the default) ensures that all enabled datasets are fully displayed within the chart, while Pan, Crop, and Zoom can be used to manipulate the view.`, @@ -115,7 +115,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=random]', - on: 'auto', + on: 'bottom', }, title: 'Randomize Colors', text: `This action will recolor all visible datasets. Keyboard Shortcut: r`, @@ -125,7 +125,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=points]', - on: 'auto', + on: 'bottom', }, title: 'Toggle Point Rendering', text: `This action will change whether points should be rendered representing individual data points of the time series. Keyboard Shortcut: s`, @@ -135,7 +135,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=scale]', - on: 'auto', + on: 'bottom', }, title: 'Dataset Scaling', text: `The "Scale by 1/mean" action will bring all currently enabled signals within a more similar range, while "Reset Dataset Scaling" will reset them to their actual magnitudes.`, @@ -145,7 +145,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=screenshot]', - on: 'auto', + on: 'bottom', }, title: 'Download Screenshot', text: `This action will download the current view in PNG format.`, @@ -155,7 +155,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=link]', - on: 'auto', + on: 'bottom', }, title: 'Create Shareable Link', text: `This action will show a shareable link that can be used to reproduce the current view (if possible).`, @@ -180,7 +180,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=csv]', - on: 'auto', + on: 'bottom', }, title: 'Load CSV File', text: `EpiVis supports loading CSV files to explore custom datasets.`, @@ -190,7 +190,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=api]', - on: 'auto', + on: 'bottom', }, title: 'Load Data from EpiData API', text: `A more common option is to load existing time series from numerous data sources provided by the EpiData API.`, @@ -200,7 +200,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=manually]', - on: 'auto', + on: 'bottom', }, title: 'Draw a custom line (Advanced)', text: `Another more advanced option is to define a custom line that should be drawn in the chart.`, @@ -210,7 +210,7 @@ tour.addStep({ tour.addStep({ attachTo: { element: '[data-tour=kernel]', - on: 'auto', + on: 'bottom', }, title: 'Derive via a kernel function (Advanced)', text: `And another option is to derive one dataset by applying a kernel function to combine other datasets. For example, create a new dataset representing the average of two other datasets.`, diff --git a/tsconfig.json b/tsconfig.json index 6757b6f..88fa8fd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,6 @@ "compilerOptions": { "module": "ES2020", "lib": ["ES2019", "DOM"], - "importsNotUsedAsValues": "error", "sourceMap": true, "strict": true, "noImplicitThis": true, @@ -15,7 +14,8 @@ "strictFunctionTypes": true, "strictNullChecks": true, "strictPropertyInitialization": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "verbatimModuleSyntax": true }, "include": ["src/**/*", "types.d.ts"], "exclude": ["node_modules/*", "__sapper__/*", "public/*"]