Skip to content

Commit

Permalink
Save queries to indexeddb instead of local storage
Browse files Browse the repository at this point in the history
  • Loading branch information
milot-mirdita committed Jul 3, 2024
1 parent febac14 commit d1f441e
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 12 deletions.
17 changes: 11 additions & 6 deletions frontend/MultimerSearch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,11 @@ import { djb2, parseResultsList, checkMultimer } from './Utilities.js';
import { AxiosCompressRequest } from './lib/AxiosCompressRequest.js';
import ApiDialog from './ApiDialog.vue';
import { StorageWrapper, HistoryMixin } from './lib/HistoryMixin.js';
import { BlobDatabase } from './lib/BlobDatabase.js';
import Databases from './Databases.vue';
import QueryTextarea from "./QueryTextarea.vue";
const db = BlobDatabase();
const storage = new StorageWrapper("complex");
export default {
Expand Down Expand Up @@ -173,11 +175,14 @@ export default {
accessionLoading: false,
};
},
mounted() {
async mounted() {
if (this.preloadAccession.length > 0) {
this.query = "";
} else if (storage.getItem('query') && storage.getItem('query').length > 0) {
this.query = storage.getItem('query');
return;
}
let query = await db.getItem('multimer.query');
if (query && query.length > 0) {
this.query = query;
} else {
// FIXME: default query for single chain doesn't work
this.query = "";
Expand Down Expand Up @@ -207,7 +212,7 @@ export default {
storage.setItem('email', value);
},
query(value) {
storage.setItem('query', value);
db.setItem('multimer.query', value);
},
database(value) {
storage.setItem('database', JSON.stringify(value));
Expand Down Expand Up @@ -296,8 +301,8 @@ export default {
);
fr.readAsText(file)
},
goToMonomer() {
storage.baseStorage.setItem('query', this.query);
async goToMonomer() {
await db.setItem('query', this.query);
this.$router.push({ name: 'search'});
}
}
Expand Down
19 changes: 13 additions & 6 deletions frontend/Search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,12 @@ import { djb2, parseResultsList, checkMultimer } from './Utilities.js';
import { AxiosCompressRequest } from './lib/AxiosCompressRequest.js';
import ApiDialog from './ApiDialog.vue';
import { storage, HistoryMixin } from './lib/HistoryMixin.js';
import { BlobDatabase } from './lib/BlobDatabase.js';
import Databases from './Databases.vue';
import QueryTextarea from "./QueryTextarea.vue";
const db = BlobDatabase();
export default {
name: "search",
mixins: [ HistoryMixin ],
Expand Down Expand Up @@ -178,11 +181,15 @@ export default {
accessionLoading: false,
};
},
mounted() {
async mounted() {
if (this.preloadAccession.length > 0) {
this.query = "";
} else if (storage.getItem('query') && storage.getItem('query').length > 0) {
this.query = storage.getItem('query');
return;
}
let query = await db.getItem('query');
if (query && query.length > 0) {
this.query = query;
} else {
this.query = this.$STRINGS.QUERY_DEFAULT;
}
Expand Down Expand Up @@ -220,7 +227,7 @@ export default {
storage.setItem('email', value);
},
query(value) {
storage.setItem('query', value);
db.setItem('query', value);
},
database(value) {
storage.setItem('database', JSON.stringify(value));
Expand Down Expand Up @@ -316,8 +323,8 @@ export default {
);
fr.readAsText(file)
},
goToMultimer() {
storage.setItem('complex.query', this.query);
async goToMultimer() {
await db.setItem('multimer.query', this.query);
this.$router.push({ name: 'multimer'});
}
}
Expand Down
141 changes: 141 additions & 0 deletions frontend/lib/BlobDatabase.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
const indexedDBEnabled = typeof indexedDB !== 'undefined';

const Database = (() => {
let dbInstance = null;

async function openDatabase() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('BlobStorageDB', 1);

request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('blobs')) {
db.createObjectStore('blobs', { keyPath: 'key' });
}
};

request.onsuccess = (event) => {
resolve(event.target.result);
};

request.onerror = (event) => {
reject('Error opening database: ' + event.target.errorCode);
};
});
}

return {
getInstance: async () => {
if (!dbInstance) {
dbInstance = await openDatabase();
}
return dbInstance;
}
};
})();

const IndexedDBStorage = () => {
return {
async getItem(key) {
const db = await Database.getInstance();
return new Promise((resolve, reject) => {
const transaction = db.transaction(['blobs'], 'readonly');
const objectStore = transaction.objectStore('blobs');
const request = objectStore.get(key);

request.onsuccess = (event) => {
const result = event.target.result;
if (result) {
resolve(result.blob);
} else {
resolve(null);
}
};

request.onerror = (event) => {
reject('Error retrieving item: ' + event.target.errorCode);
};
});
},
async setItem(key, value) {
const db = await Database.getInstance();
return new Promise((resolve, reject) => {
const transaction = db.transaction(['blobs'], 'readwrite');
const objectStore = transaction.objectStore('blobs');
const request = objectStore.put({ key: key, blob: value });

request.onsuccess = () => {
resolve();
};

request.onerror = (event) => {
reject('Error setting item: ' + event.target.errorCode);
};
});
},
async removeItem(key) {
const db = await Database.getInstance();
return new Promise((resolve, reject) => {
const transaction = db.transaction(['blobs'], 'readwrite');
const objectStore = transaction.objectStore('blobs');
const request = objectStore.delete(key);

request.onsuccess = () => {
resolve();
};

request.onerror = (event) => {
reject('Error removing item: ' + event.target.errorCode);
};
});
},
async clear() {
const db = await Database.getInstance();
return new Promise((resolve, reject) => {
const transaction = db.transaction(['blobs'], 'readwrite');
const objectStore = transaction.objectStore('blobs');
const request = objectStore.clear();

request.onsuccess = () => {
resolve();
};

request.onerror = (event) => {
reject('Error clearing database: ' + event.target.errorCode);
};
});
}
};
};

const fakeAsyncStorage = (() => {
let store = {};
return {
async getItem(key) {
return new Promise((resolve, _) => {
resolve(store[key] || null);
});
},
async setItem(key, value) {
return new Promise((resolve, _) => {
store[key] = value.toString();
resolve();
});
},
async removeItem(key) {
return new Promise((resolve, _) => {
delete store[key];
resolve();
});
},
async clear() {
return new Promise((resolve, _) => {
store = {};
resolve();
});
}
};
})();

const BlobDatabase = indexedDBEnabled ? IndexedDBStorage : fakeAsyncStorage;
export { BlobDatabase };

0 comments on commit d1f441e

Please sign in to comment.