From b7de280ef31a3f15c06d452bfaebd02197bff11b Mon Sep 17 00:00:00 2001 From: Mason Houtz Date: Mon, 18 Jan 2021 11:37:19 -0800 Subject: [PATCH 1/4] added retry catch to vuex current history panel syncer for pages with slow current history loads --- .../History/model/syncCurrentHistoryToGalaxy.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/components/History/model/syncCurrentHistoryToGalaxy.js b/client/src/components/History/model/syncCurrentHistoryToGalaxy.js index be7ce846c14..a161e981428 100644 --- a/client/src/components/History/model/syncCurrentHistoryToGalaxy.js +++ b/client/src/components/History/model/syncCurrentHistoryToGalaxy.js @@ -1,9 +1,11 @@ // Sync Galaxy store to legacy galaxy current history import { fromEvent } from "rxjs"; -import { map, filter, switchMap, pluck, distinctUntilChanged } from "rxjs/operators"; +import { map, filter, switchMap, pluck, distinctUntilChanged, retryWhen, take, delay } from "rxjs/operators"; + +export function syncCurrentHistoryToGalaxy(galaxy$, store, cfg = {}) { + const { retryPeriod = 500, retries = 20 } = cfg; -export function syncCurrentHistoryToGalaxy(galaxy$, store) { // prettier-ignore const historyId$ = galaxy$.pipe( pluck("currHistoryPanel"), @@ -14,6 +16,10 @@ export function syncCurrentHistoryToGalaxy(galaxy$, store) { map(() => panel.model.id) ); }), + retryWhen(err$ => err$.pipe( + delay(retryPeriod), + take(retries) + )), filter(Boolean), distinctUntilChanged() ); From 13ff4155a7461b5c3599634cf45ee39ecac0a0cc Mon Sep 17 00:00:00 2001 From: Mason Houtz Date: Mon, 18 Jan 2021 11:57:01 -0800 Subject: [PATCH 2/4] made success and error messages a little easier to consume --- .../model/syncCurrentHistoryToGalaxy.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/client/src/components/History/model/syncCurrentHistoryToGalaxy.js b/client/src/components/History/model/syncCurrentHistoryToGalaxy.js index a161e981428..7834bd84dec 100644 --- a/client/src/components/History/model/syncCurrentHistoryToGalaxy.js +++ b/client/src/components/History/model/syncCurrentHistoryToGalaxy.js @@ -1,7 +1,7 @@ // Sync Galaxy store to legacy galaxy current history -import { fromEvent } from "rxjs"; -import { map, filter, switchMap, pluck, distinctUntilChanged, retryWhen, take, delay } from "rxjs/operators"; +import { concat, fromEvent, throwError } from "rxjs"; +import { tap, map, filter, switchMap, pluck, distinctUntilChanged, retryWhen, take, delay } from "rxjs/operators"; export function syncCurrentHistoryToGalaxy(galaxy$, store, cfg = {}) { const { retryPeriod = 500, retries = 20 } = cfg; @@ -16,19 +16,22 @@ export function syncCurrentHistoryToGalaxy(galaxy$, store, cfg = {}) { map(() => panel.model.id) ); }), - retryWhen(err$ => err$.pipe( - delay(retryPeriod), - take(retries) - )), + retryWhen(err$ => { + const retries$ = err$.pipe( + delay(retryPeriod), + take(retries) + ); + const errMsg$ = throwError("Unable to sync to currHistoryPanel because it never appeared"); + return concat(retries$, errMsg$); + }), filter(Boolean), - distinctUntilChanged() + distinctUntilChanged(), + tap(() => console.log("Vuex is now tracking galaxy.currHistoryPanel")), ); return historyId$.subscribe( - (id) => { - store.commit("betaHistory/setCurrentHistoryId", id); - }, - (err) => console.log("syncCurrentHistoryToGalaxy error", err), + (id) => store.commit("betaHistory/setCurrentHistoryId", id), + (err) => console.warn("syncCurrentHistoryToGalaxy error", err), () => console.log("syncCurrentHistoryToGalaxy complete") ); } From 2eb15250980562b951abc26e9107df40a804b312 Mon Sep 17 00:00:00 2001 From: Mason Houtz Date: Thu, 14 Jan 2021 12:35:02 -0800 Subject: [PATCH 3/4] separated beta toggle features --- client/src/components/History/HistoryTopNav.vue | 8 +++----- .../src/components/History/adapters/betaToggle.js | 13 +++++++++++++ client/src/components/Upload/UploadModal.vue | 4 ++-- client/src/entry/analysis/index.js | 4 ++-- client/src/mvc/history/options-menu.js | 4 ++-- client/src/store/syncVuextoGalaxy.js | 7 +++++-- 6 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 client/src/components/History/adapters/betaToggle.js diff --git a/client/src/components/History/HistoryTopNav.vue b/client/src/components/History/HistoryTopNav.vue index aa40697e733..1f3006f91c5 100644 --- a/client/src/components/History/HistoryTopNav.vue +++ b/client/src/components/History/HistoryTopNav.vue @@ -35,7 +35,7 @@ key="use-legacy-history" title="Return to legacy history panel" icon="fas fa-exchange-alt" - @click="useLegacyHistoryPanel" + @click="switchToLegacyHistoryPanel" /> @@ -48,6 +48,7 @@ import HistorySelector from "./HistorySelector"; import { createNewHistory } from "./model/queries"; import { wipeDatabase, clearHistoryDateStore } from "./caching"; import { legacyNavigationMixin } from "components/plugins"; +import { switchToLegacyHistoryPanel } from "./adapters/betaToggle"; export default { mixins: [legacyNavigationMixin], @@ -72,10 +73,7 @@ export default { methods: { ...mapActions("betaHistory", ["storeHistory"]), - useLegacyHistoryPanel() { - sessionStorage.removeItem("useBetaHistory"); - location.reload(); - }, + switchToLegacyHistoryPanel, // create new server, store in vuex, switch to it async createHistory() { diff --git a/client/src/components/History/adapters/betaToggle.js b/client/src/components/History/adapters/betaToggle.js new file mode 100644 index 00000000000..0cf1fe6afd1 --- /dev/null +++ b/client/src/components/History/adapters/betaToggle.js @@ -0,0 +1,13 @@ +export const isBetaHistoryOpen = () => { + return sessionStorage.getItem("useBetaHistory"); +}; + +export const switchToLegacyHistoryPanel = () => { + sessionStorage.removeItem("useBetaHistory"); + location.reload(); +}; + +export const switchToBetaHistoryPanel = () => { + sessionStorage.setItem("useBetaHistory", 1); + location.reload(false); +}; diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue index e303d55cba0..6e2e6ef3630 100644 --- a/client/src/components/Upload/UploadModal.vue +++ b/client/src/components/Upload/UploadModal.vue @@ -46,6 +46,7 @@ import RulesInput from "./RulesInput"; import LoadingSpan from "components/LoadingSpan"; import { mapState } from "vuex"; import { BModal, BTabs, BTab } from "bootstrap-vue"; +import { isBetaHistoryOpen } from "components/History/adapters/betaToggle"; const UploadModal = { components: { @@ -336,8 +337,7 @@ const UploadModal = { }; // Beta history patch -const useBetaHistory = sessionStorage.getItem("useBetaHistory"); -if (useBetaHistory) { +if (isBetaHistoryOpen()) { UploadModal.computed.currentHistoryId = function () { return this.$store.getters["betaHistory/currentHistoryId"]; }; diff --git a/client/src/entry/analysis/index.js b/client/src/entry/analysis/index.js index aa54ee8244c..8898b967012 100644 --- a/client/src/entry/analysis/index.js +++ b/client/src/entry/analysis/index.js @@ -6,14 +6,14 @@ import Page from "layout/page"; // Vue adapter emulates current features of backbone history panel import { HistoryPanelProxy } from "components/History"; +import { isBetaHistoryOpen } from "components/History/adapters/betaToggle"; addInitialization((Galaxy, { options = {} }) => { console.log("Analysis custom page setup"); // Handle beta history panel // Need to mock Galaxy.currHistoryPanel - const useBeta = sessionStorage.getItem("useBetaHistory"); - const HistoryPanel = useBeta ? HistoryPanelProxy : MvcHistoryPanel; + const HistoryPanel = isBetaHistoryOpen() ? HistoryPanelProxy : MvcHistoryPanel; const pageOptions = Object.assign({}, options, { config: Object.assign({}, options.config, { diff --git a/client/src/mvc/history/options-menu.js b/client/src/mvc/history/options-menu.js index 3556ca5b8db..ff3d57f11c6 100644 --- a/client/src/mvc/history/options-menu.js +++ b/client/src/mvc/history/options-menu.js @@ -6,6 +6,7 @@ import _l from "utils/localization"; import PopupMenu from "mvc/ui/popup-menu"; import historyCopyDialog from "mvc/history/copy-dialog"; import Webhooks from "mvc/webhooks"; +import { switchToBetaHistoryPanel } from "../../components/History/adapters/betaToggle"; // ============================================================================ var menu = [ @@ -165,8 +166,7 @@ var menu = [ html: _l("Use Beta History Panel"), anon: false, func: function () { - sessionStorage.setItem("useBetaHistory", 1); - window.location.reload(false); + switchToBetaHistoryPanel(); }, }, ]; diff --git a/client/src/store/syncVuextoGalaxy.js b/client/src/store/syncVuextoGalaxy.js index 797a868b526..f2f99d1cc98 100644 --- a/client/src/store/syncVuextoGalaxy.js +++ b/client/src/store/syncVuextoGalaxy.js @@ -13,6 +13,7 @@ import { waitForInit } from "utils/observable/waitForInit"; import { syncUserToGalaxy } from "store/userStore/syncUserToGalaxy"; import { syncConfigToGalaxy } from "store/configStore/syncConfigToGalaxy"; import { syncCurrentHistoryToGalaxy } from "components/History/model/syncCurrentHistoryToGalaxy"; +import { isBetaHistoryOpen } from "components/History/adapters/betaToggle"; export const syncVuextoGalaxy = (store) => { const globalGalaxy$ = defer(() => { @@ -25,6 +26,8 @@ export const syncVuextoGalaxy = (store) => { // configuration syncConfigToGalaxy(globalGalaxy$, store); - // Current History object (from legacy history panel) - syncCurrentHistoryToGalaxy(globalGalaxy$, store); + // Update Vuex with legacy galaxy history changes only when beta panel is closed. + if (!isBetaHistoryOpen()) { + syncCurrentHistoryToGalaxy(globalGalaxy$, store); + } }; From 6de1c75774ccda09b3a482582a1d9eb72041f094 Mon Sep 17 00:00:00 2001 From: Mason Houtz Date: Mon, 18 Jan 2021 13:41:37 -0800 Subject: [PATCH 4/4] added store listener to update facade current history model --- .../components/History/adapters/HistoryPanelProxy.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js index 7f39ca6c802..6b4dc223122 100644 --- a/client/src/components/History/adapters/HistoryPanelProxy.js +++ b/client/src/components/History/adapters/HistoryPanelProxy.js @@ -15,6 +15,7 @@ import Backbone from "backbone"; import CurrentHistoryView from "mvc/history/history-view-edit-current"; import { History } from "mvc/history/history-model"; import "./HistoryPanelProxy.scss"; +import store from "store"; // bypass polling while using the beta panel, skips contents loading const FakeHistoryViewModel = CurrentHistoryView.CurrentHistoryView.extend({ @@ -37,6 +38,7 @@ export const HistoryPanelProxy = Backbone.View.extend({ // fake view of the current history this.historyView = new FakeHistoryViewModel({ + fakeHistoryViewModel: true, className: `fake ${CurrentHistoryView.CurrentHistoryView.prototype.className} middle`, purgeAllowed: this.allow_user_dataset_purge, linkTarget: "galaxy_main", @@ -59,6 +61,14 @@ export const HistoryPanelProxy = Backbone.View.extend({ url: `${Galaxy.user.urlRoot()}/${Galaxy.user.id || "current"}`, }); }); + + // Watch the store, change the fake history model when it changs + store.subscribe(({ type, payload: newId }) => { + if (type == "betaHistory/setCurrentHistoryId") { + console.log("setCurrentHistoryId", newId); + Galaxy.currHistoryPanel.setModel(new History({ id: newId })); + } + }); }, render() { // Hack: For now, remove unused "unified-panel" elements until we can