Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 59 additions & 60 deletions histomicsui/web_client/histomicsui.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { girder } from '@girder/core';
import {girder} from '@girder/core';

declare global {
interface Window {
Expand All @@ -12,40 +12,39 @@ interface StaticFilesSpec {
js: string[],
}


const initializeHistomicsApp = async (apiRoot: string, el: string | HTMLElement = 'body') => {
return new Promise((resolve, reject) => {
$(() => {
girder.rest.setApiRoot(apiRoot);
girder.router.enabled(false);
girder.events.trigger('g:appload.before');
girder.rest.restRequest({
url: 'system/setting/histomicsui',
method: 'GET',
}).done(async (resp: any) => {
// We use dynamic import because this app's code depends on other plugins'
// code having been loaded under `girder.plugins.xxx` at import time.
const App = (await import('./app') as any).default;
const app = new App({
el,
parentView: null,
brandName: resp['histomicsui.brand_name'],
brandColor: resp['histomicsui.brand_color'],
bannerColor: resp['histomicsui.banner_color'],
helpURL: resp['histomicsui.help_url'],
helpTooltip: resp['histomicsui.help_tooltip'],
helpText: resp['histomicsui.help_text'],
});
document.title = resp['histomicsui.brand_name'];
app.bindRoutes();
girder.events.trigger('g:appload.after', app);
resolve(app);
}).fail((resp: any) => {
girder.events.trigger('g:error', resp);
reject(new Error("Could not retrieve public settings from server."));
});
});
});
return new Promise((resolve, reject) => {
$(() => {
girder.rest.setApiRoot(apiRoot);
girder.router.enabled(false);
girder.events.trigger('g:appload.before');
girder.rest.restRequest({
url: 'system/setting/histomicsui',
method: 'GET'
}).done(async (resp: any) => {
// We use dynamic import because this app's code depends on other plugins'
// code having been loaded under `girder.plugins.xxx` at import time.
const App = (await import('./app') as any).default;
const app = new App({
el,
parentView: null,
brandName: resp['histomicsui.brand_name'],
brandColor: resp['histomicsui.brand_color'],
bannerColor: resp['histomicsui.banner_color'],
helpURL: resp['histomicsui.help_url'],
helpTooltip: resp['histomicsui.help_tooltip'],
helpText: resp['histomicsui.help_text']
});
document.title = resp['histomicsui.brand_name'];
app.bindRoutes();
girder.events.trigger('g:appload.after', app);
resolve(app);
}).fail((resp: any) => {
girder.events.trigger('g:error', resp);
reject(new Error('Could not retrieve public settings from server.'));
});
});
});
};

const appElement = document.getElementById('app');
Expand All @@ -56,33 +55,33 @@ if (!apiRoot.startsWith('/') && apiRoot.indexOf(':') < 0) {
}

(async () => {
let origin = apiRoot.startsWith('/') ? window.origin : new URL(apiRoot).origin;
origin += apiRoot.includes('/api/') ? apiRoot.substring(0, apiRoot.indexOf('/api/')) + '/' : '';
const staticFilesResp = await fetch(`${apiRoot}/system/plugin_static_files`);
const staticFiles: StaticFilesSpec = await staticFilesResp.json();
let origin = apiRoot.startsWith('/') ? window.origin : new URL(apiRoot).origin;
origin += apiRoot.includes('/api/') ? apiRoot.substring(0, apiRoot.indexOf('/api/')) + '/' : '';
const staticFilesResp = await fetch(`${apiRoot}/system/plugin_static_files`);
const staticFiles: StaticFilesSpec = await staticFilesResp.json();

staticFiles.css.forEach((href) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = new URL(href, origin).href;
document.head.appendChild(link);
});

// Because some plugin code depends on other plugin code at import time, we can't
// await these in parallel. For now load them serially until the server is smart enough to
// provides a DAG.
for (const href of staticFiles.js) {
await new Promise<void>((resolve) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = new URL(href, origin).href;
document.head.appendChild(script);
script.addEventListener('load', function() {
resolve();
});
staticFiles.css.forEach((href) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = new URL(href, origin).href;
document.head.appendChild(link);
});
};

await initializeHistomicsApp(apiRoot, document.getElementById('app'));
// Because some plugin code depends on other plugin code at import time, we can't
// await these in parallel. For now load them serially until the server is smart enough to
// provides a DAG.
for (const href of staticFiles.js) {
await new Promise<void>((resolve) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = new URL(href, origin).href;
document.head.appendChild(script);
script.addEventListener('load', function () {
resolve();
});
});
}

await initializeHistomicsApp(apiRoot, document.getElementById('app'));
})();
Loading