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/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 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/History/model/syncCurrentHistoryToGalaxy.js b/client/src/components/History/model/syncCurrentHistoryToGalaxy.js index be7ce846c14..7834bd84dec 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 { 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; -export function syncCurrentHistoryToGalaxy(galaxy$, store) { // prettier-ignore const historyId$ = galaxy$.pipe( pluck("currHistoryPanel"), @@ -14,15 +16,22 @@ export function syncCurrentHistoryToGalaxy(galaxy$, store) { map(() => panel.model.id) ); }), + 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") ); } 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); + } };