visualizer-on-tabs 1.0.1 → 2.0.0

package/README.md

@@ -16,6 +16,13 @@ Example: https://github.com/cheminfo/cheminfo-server-setup/blob/master/doc/on-ta
 const config = {
   // Title of the single page app
   title: 'My app',
+  // Roc login configuration. Don't set or set to false to disable login
+  rocLogin: {
+    // URL of the rest-on-couch server
+    url: 'https://demo.scipeaks.com/roc',
+    // Redirect after login
+    redirect: 'https://demo.scipeaks.com/',
+  },
   // List of default views to load
   possibleViews: {
     Home: {
@@ -42,15 +49,22 @@ const config = {
   // lead to layout issues. Especially in Firefox.
   // When false, only the selected tab is loaded.
   loadHidden: false,
-  // The visualizer configuration object that will be passed to each visualizer instance
-  visualizerConfig: undefined,
-  // The version of the visualizer to load. By default it 'auto', which uses
-  // the version stored in the loaded view.
-  visualizerVersion: 'auto',
-  // Options passed to `makeVisualizerPage`, see https://github.com/cheminfo/react-visualizer
-  // Respectively `fallbackVersion` and `cdn`.
-  visualizerFallbackVersion: undefined,
-  visualizerCDN: undefined,
+
+  // Options related to https://github.com/cheminfo/react-visualizer
+  visualizer: {
+    /**
+     * Options to generate the visualizer html page
+     */
+    loadversion: 'exact',
+    fallbackVersion: 'latest',
+    cdn: 'https://www.lactame.com/visualizer',
+
+    /*
+     * Props passed to the visualizer component
+     */
+    // Visualizer config.json
+    config: undefined,
+  },
 };
 ```
 

package/bin/build.js

@@ -5,12 +5,17 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-
-import minimist from 'minimist';
+import { parseArgs } from 'node:util';
 
 import build from '../main/index.js';
 
-const argv = minimist(process.argv.slice(2));
+const { values: argv } = parseArgs({
+  options: {
+    outDir: { type: 'string', short: 'o' },
+    dev: { type: 'boolean', short: 'D' },
+    config: { type: 'string', short: 'c' },
+  },
+});
 
 if (!argv.outDir) {
   console.log(`CLI args:

package/main/index.js

@@ -12,10 +12,6 @@ import iframeBridge from './iframe-bridge.js';
 
 const __dirname = import.meta.dirname;
 
-const defaultConfig = {
-  title: 'visualizer-on-tabs',
-};
-
 async function buildApp(options, outDir, cleanup) {
   const { promise, resolve, reject } = Promise.withResolvers();
   const entries = [{ file: 'app.js' }];
@@ -97,8 +93,6 @@ async function buildApp(options, outDir, cleanup) {
 }
 
 export default async (options) => {
-  Object.assign(options.config, defaultConfig);
-
   const outDir = path.resolve(options.outDir);
   await fs.mkdir(outDir, { recursive: true });
 
@@ -108,7 +102,7 @@ export default async (options) => {
   await copyBootstrap(options);
   await copyContent(options);
   await Promise.all([
-    fs.writeFile(confPath, JSON.stringify(options.config)),
+    fs.writeFile(confPath, JSON.stringify(options.config ?? {})),
     addIndex(options),
     addVisualizer(options),
   ]);
@@ -155,20 +149,23 @@ async function addIndex(options) {
   return fs.writeFile(
     path.join(options.outDir, 'index.html'),
     tpl({
-      title: options.config.title,
+      title: options.config.title || 'visualizer-on-tabs',
       uniqid: Date.now(),
     }),
   );
 }
 
 function addVisualizer(options) {
+  const customScripts = options.config.visualizer?.scripts || [];
   const page = visualizer.makeVisualizerPage({
-    cdn: options.config.visualizerCDN,
-    fallbackVersion: options.config.visualizerFallbackVersion,
+    // By default we choose the safest option
+    loadversion: 'exact',
+    ...options.config.visualizer,
     scripts: [
       {
         url: iframeBridge,
       },
+      ...customScripts,
     ],
   });
   return fs.writeFile(path.join(options.outDir, 'visualizer.html'), page);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualizer-on-tabs",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "visualizer-on-tabs webpack builder",
   "type": "module",
   "exports": {
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "build": "npx --no-install visualizer-on-tabs --config=./dev.json --outDir=./out",
-    "build:dev": "npx --no-install visualizer-on-tabs --dev=1 --config=./dev.json --outDir=./out",
+    "build:dev": "npx --no-install visualizer-on-tabs --dev --config=./dev.json --outDir=./out",
     "clean": "rimraf out",
     "eslint": "eslint bin main src",
     "prettier": "prettier --check ./",
@@ -28,26 +28,25 @@
     "test-only": "node --test"
   },
   "dependencies": {
-    "@babel/core": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
     "babel-loader": "^10.0.0",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.3.8",
     "iframe-bridge": "^3.0.2",
     "lockr": "^0.8.5",
-    "lodash": "^4.17.21",
-    "minimist": "^1.2.6",
+    "lodash": "^4.17.23",
     "react": "^18.3.1",
     "react-bootstrap": "^3.0.0-beta.3",
     "react-dom": "^18.3.1",
-    "react-visualizer": "^3.0.1",
-    "webpack": "^5.91.0"
+    "react-visualizer": "^5.0.0",
+    "webpack": "^5.105.2"
   },
   "devDependencies": {
-    "eslint": "^9.34.0",
-    "eslint-config-zakodium": "^16.0.0",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.0.1"
+    "eslint": "^9.39.2",
+    "eslint-config-zakodium": "^19.1.0",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3"
   },
   "volta": {
     "node": "24.7.0"

package/src/components/App.js

@@ -323,10 +323,7 @@ class App extends React.Component {
             <Visualizer
               url="visualizer.html"
               viewURL={view.rewrittenUrl || view.url}
-              version={
-                this.visualizerVersion || config.visualizerVersion || 'auto'
-              }
-              config={config.visualizerConfig}
+              config={config.visualizer.config}
               style={iframeStyle}
             />
           );

package/src/components/Login.js

@@ -14,13 +14,9 @@ class Login extends React.Component {
     this.logout = this.logout.bind(this);
     if (!config.rocLogin) return;
 
-    if (config.rocLogin.urlAbsolute) {
-      this.loginUrl = config.rocLogin.urlAbsolute;
-    } else {
-      this.loginUrl = `${config.rocLogin.url}/auth/login?continue=${
-        config.rocLogin.redirect || window.location.href
-      }`;
-    }
+    this.loginUrl = `${config.rocLogin.url}/auth/login?continue=${encodeURIComponent(
+      config.rocLogin.redirect || window.location.href,
+    )}`;
   }
 
   componentDidMount() {

package/src/config/config.js

@@ -1,7 +1,13 @@
-import defaultConfig from './default.js';
+import defaultVisualizerConfig from './visualizer.js';
 
 export function getConfig(customConfig) {
-  const config = { ...defaultConfig, ...customConfig };
+  const config = {
+    ...customConfig,
+    visualizer: {
+      ...defaultVisualizerConfig,
+      ...customConfig?.visualizer,
+    },
+  };
   if (config.rocLogin && config.rocLogin.url) {
     // Remove trailing slash
     config.rocLogin.url = config.rocLogin.url.replace(/\/$/, '');

package/src/config/{default.js → visualizer.js}

@@ -1,5 +1,5 @@
 export default {
-  visualizerConfig: {
+  config: {
     debugLevel: 0,
     filters: [],
     modules: {