Skip to content

Commit ca8dc04

Browse files
emuellemuell
committed
fix missing mobx.actions
1 parent a363827 commit ca8dc04

5 files changed

Lines changed: 70 additions & 45 deletions

File tree

‎src/app-state.ts‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -61,23 +61,35 @@ class AppState {
6161
mobx.makeObservable(this);
6262
}
6363

64+
// change the currently selected file in the database
65+
@mobx.action
66+
setSelectedFilePath(path: string) {
67+
this.selectedFilePath = path;
68+
}
69+
6470
// open a new database
6571
@mobx.action
6672
async openDatabase(filename: string): Promise<void> {
6773
++this.isLoadingDatabase;
6874
try {
6975
this.selectedFilePath = "";
7076
await this._database.open(filename);
71-
this.databasePath = filename;
72-
this.databaseError = "";
77+
mobx.runInAction(() => {
78+
this.databasePath = filename;
79+
this.databaseError = "";
80+
});
7381
}
7482
catch (err) {
75-
this.databasePath = filename;
76-
this.databaseError = (err as any).message || String(err);
83+
mobx.runInAction(() => {
84+
this.databasePath = filename;
85+
this.databaseError = (err as any).message || String(err);
86+
})
7787
throw err;
7888
}
7989
finally {
80-
--this.isLoadingDatabase;
90+
mobx.runInAction(() => {
91+
--this.isLoadingDatabase;
92+
});
8193
}
8294
}
8395

@@ -91,22 +103,10 @@ class AppState {
91103
return this._database.categoryNames;
92104
}
93105

94-
// fetch files at \param rootPath
95-
@mobx.action
96-
async fetchFiles(rootPath: string): Promise<File[]> {
97-
++this.isLoadingFiles;
98-
try {
99-
return await this._database.fetchFiles(rootPath);
100-
}
101-
finally {
102-
--this.isLoadingFiles;
103-
}
104-
}
105-
106-
// create a normalized abs path of the given file path.
106+
// get a normalized abs path for the given file path.
107107
// When the file path is relative, prefix it with the DB path,
108108
// else return the path as it is, normalized.
109-
async fileAbsPath(filePath: string): Promise<string> {
109+
async databaseFilePath(filePath: string): Promise<string> {
110110
if (!filePath) {
111111
return "";
112112
}
@@ -118,21 +118,40 @@ class AppState {
118118
return absPath;
119119
}
120120

121+
// fetch files at \param rootPath
122+
@mobx.action
123+
async fetchFiles(rootPath: string): Promise<File[]> {
124+
++this.isLoadingFiles;
125+
try {
126+
return await this._database.fetchFiles(rootPath);
127+
}
128+
finally {
129+
mobx.runInAction(() => {
130+
--this.isLoadingFiles;
131+
});
132+
}
133+
}
134+
121135
// calculate a mono waveform for selected file
136+
@mobx.action
122137
async generateWaveform(width: number): Promise<WaveformPoint[]> {
123138
if (!this.databasePath || this.databaseError || !this.selectedFilePath) {
124139
return Promise.reject(new Error("No file selected"));
125140
}
126141

127142
++this.isGeneratingWaveform;
128143
try {
129-
let filePath = await this.fileAbsPath(this.selectedFilePath);
144+
let filePath = await this.databaseFilePath(this.selectedFilePath);
130145
let results = await generateWaveform(filePath, width);
131-
--this.isGeneratingWaveform;
146+
mobx.runInAction(() => {
147+
--this.isGeneratingWaveform;
148+
});
132149
return results;
133150

134151
} catch (err) {
135-
--this.isGeneratingWaveform;
152+
mobx.runInAction(() => {
153+
--this.isGeneratingWaveform;
154+
});
136155
throw err;
137156
}
138157
}
@@ -146,7 +165,9 @@ class AppState {
146165
return await createPlot(this.databasePath, this.mapPerplexity, this.mapTheta, this.mapEpochs);
147166
}
148167
finally {
149-
--this.isGeneratingMap;
168+
mobx.runInAction(() => {
169+
--this.isGeneratingMap;
170+
});
150171
}
151172
}
152173

‎src/components/file-list.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ import * as mobx from 'mobx'
55
import prettyBytes from 'pretty-bytes';
66

77
import {
8-
Grid, GridActiveItemChangedEvent, GridColumn, GridItemModel
8+
Grid, GridActiveItemChangedEvent, GridItemModel
99
} from '@vaadin/grid';
1010

11+
import {
12+
GridColumn
13+
} from '@vaadin/grid/vaadin-grid-column';
14+
1115
import { appState } from '../app-state';
1216
import { File } from '../models/file';
1317
import { playAudioFile } from '../controllers/backend/audio';
@@ -89,7 +93,7 @@ export class FileList extends MobxLitElement {
8993
}
9094

9195
private _playFile(file: File) {
92-
appState.fileAbsPath(file.filename)
96+
appState.databaseFilePath(file.filename)
9397
.then(playAudioFile)
9498
.catch(err => {
9599
console.warn("Audio playback error: %s", err.message || String(err))
@@ -129,7 +133,7 @@ export class FileList extends MobxLitElement {
129133
if (item) {
130134
this._suppressFileSelection = true;
131135
this._selectedFiles = [item];
132-
appState.selectedFilePath = item.filename;
136+
appState.setSelectedFilePath(item.filename);
133137
this._suppressFileSelection = false;
134138
if (appState.autoPlayFilesInList) {
135139
this._playFile(item);
@@ -326,9 +330,9 @@ export class FileList extends MobxLitElement {
326330
<vaadin-checkbox
327331
class="control"
328332
.checked=${appState.autoPlayFilesInList}
329-
@checked-changed=${(event: CustomEvent) => {
330-
appState.autoPlayFilesInList = Boolean(event.detail.value);
331-
}}
333+
@checked-changed=${mobx.action((event: CustomEvent) => {
334+
appState.autoPlayFilesInList = Boolean(event.detail.value);
335+
})}
332336
label="Auto-Play">
333337
</vaadin-checkbox>
334338
<vaadin-text-field
@@ -340,7 +344,7 @@ export class FileList extends MobxLitElement {
340344
.disabled=${appState.isLoadingFiles > 0}
341345
.hidden=${!appState.databasePath}
342346
@input=${mobx.action((event: CustomEvent) => {
343-
this._searchString = (event.target as HTMLInputElement).value;
347+
this._searchString = (event.target as HTMLInputElement).value;
344348
})}
345349
clear-button-visible
346350
>

‎src/components/file-map-plot.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class FileMapPlot extends LitElement {
104104
// Play the file
105105
if (appState.autoPlayFilesInGrid && this._playingPointIndex != closestPoint.index) {
106106
this._playingPointIndex = closestPoint.index;
107-
appState.fileAbsPath(closestPoint.filename)
107+
appState.databaseFilePath(closestPoint.filename)
108108
.then(playAudioFile)
109109
.catch((err) => {
110110
console.warn("Audio playback failed: %s", err)
@@ -131,7 +131,7 @@ export class FileMapPlot extends LitElement {
131131
// redraw all points
132132
this._drawPlotPoints(xScale, yScale, context, data);
133133
// play file
134-
appState.fileAbsPath(closestPoint.filename)
134+
appState.databaseFilePath(closestPoint.filename)
135135
.then(playAudioFile)
136136
.catch((err) => {
137137
console.warn("Audio playback failed: %s", err)

‎src/components/file-map.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ export class FileMap extends MobxLitElement {
114114
<vaadin-checkbox
115115
class="control"
116116
.checked=${appState.autoPlayFilesInGrid}
117-
@checked-changed=${(event: CustomEvent) => {
118-
appState.autoPlayFilesInGrid = Boolean(event.detail.value);
119-
}}
117+
@checked-changed=${mobx.action((event: CustomEvent) => {
118+
appState.autoPlayFilesInGrid = Boolean(event.detail.value);
119+
})}
120120
label="Auto-Play">
121121
</vaadin-checkbox>
122122
<div class="spacer"></div>
@@ -130,9 +130,9 @@ export class FileMap extends MobxLitElement {
130130
.step=${5}
131131
.value=${String(appState.mapPerplexity)}
132132
.disabled=${appState.isGeneratingMap > 0}
133-
@change=${(event: CustomEvent) => {
134-
appState.mapPerplexity = Number((event.target as HTMLInputElement).value);
135-
}}>
133+
@change=${mobx.action((event: CustomEvent) => {
134+
appState.mapPerplexity = Number((event.target as HTMLInputElement).value);
135+
})}>
136136
</vaadin-integer-field>
137137
<span class="label">Theta</span>
138138
<vaadin-number-field
@@ -144,9 +144,9 @@ export class FileMap extends MobxLitElement {
144144
.step=${0.1}
145145
.value=${String(appState.mapTheta)}
146146
.disabled=${appState.isGeneratingMap > 0}
147-
@change=${(event: CustomEvent) => {
148-
appState.mapTheta = Number((event.target as HTMLInputElement).value);
149-
}}>
147+
@change=${mobx.action((event: CustomEvent) => {
148+
appState.mapTheta = Number((event.target as HTMLInputElement).value);
149+
})}>
150150
</vaadin-number-field>
151151
<span class="label">Epochs</span>
152152
<vaadin-integer-field
@@ -158,9 +158,9 @@ export class FileMap extends MobxLitElement {
158158
.step=${100}
159159
.value=${String(appState.mapEpochs)}
160160
.disabled=${appState.isGeneratingMap > 0}
161-
@change=${(event: CustomEvent) => {
162-
appState.mapEpochs = Number((event.target as HTMLInputElement).value);
163-
}}>
161+
@change=${mobx.action((event: CustomEvent) => {
162+
appState.mapEpochs = Number((event.target as HTMLInputElement).value);
163+
})}>
164164
</vaadin-integer-field>
165165
</vaadin-horizontal-layout>
166166
`;

‎src/components/file-waveview-plot.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export class FileWaveViewPlot extends LitElement {
256256
const context = this._playbackCanvas.node()!.getContext('2d')!;
257257

258258
// listen to file playback position changes
259-
appState.fileAbsPath(appState.selectedFilePath)
259+
appState.databaseFilePath(appState.selectedFilePath)
260260
.then((absSelectedFilePath) => {
261261
this._removePlaybackPositionListener = addPlaybackPositionEventListener(async (event) => {
262262
try {

0 commit comments

Comments
 (0)