Screenshots for jbrowse2

[alpapan]

Good day

I was looking for a tool to screenshot jbrowse2 and noticed the currently available tools are out-of-date and not working.

I created the wee node js script for reviewing SNPs based on puppeteer below.
Doesn't have a user interface but just takes a 2 or 3 column region tab file reference, start, stop

Could anyone advise on what would be the best method to wait for the browser tracks to fully load?
in particular a bam track
I'm not a DOM expert and i can't figure it out....

const puppeteer = require('puppeteer');
const fs = require('fs');
const screenshotsDir = './screenshots';
if (!fs.existsSync(screenshotsDir)) {
  fs.mkdirSync(screenshotsDir, { recursive: true });
}
const path = require('path');
const fileName = process.argv[2] || 'locations.bed';
const baseUrl = 'https://example.com/2ph/?config=config.json&assembly=blah&tracks=blah1,blah2,blah3&loc=';
const keyValuePairs = fs.readFileSync(fileName, 'utf-8').trim().split('\n')
        .filter(line => line.trim() !== '')
        .filter(line => !line.startsWith('#'))
        .map(line => {
            const columns = line.split('\t');
            if (columns.length === 3) {
               return [columns[0], `${columns[1]}-${columns[2]}`];
            } else if (columns.length === 2) {
               return [columns[0], columns[1]];
            }
            return null;
        })
        .filter(pair => pair !== null);

(async () => {

  const browser = await puppeteer.launch();

  for (const [key, value] of keyValuePairs) {
    const screenshotPath = `${screenshotsDir}/${key}-${value}.jpg`;
    if (fs.existsSync(screenshotPath)){
        const stats = fs.statSync(screenshotPath);
        if (stats.size > 50000) {
         console.log(`Skipping, already exists: ${key}-${value} ${stats.size}`);
         continue; // Move to the next iteration in the loop
        }else{
         console.log(`Exists but too small, ${key}-${value} ${stats.size}`);
        }
    }else{
        console.log(`not Skipping, ${key}-${value}`);

    }
    const page = await browser.newPage();
    await page.setViewport({ width: 1280,height: 1600});
    await page.goto(`${baseUrl}${key}:${value}`,{waitUntil: ['domcontentloaded', 'networkidle0'],timeout: 30000});
    await page.waitForFunction(() => document.readyState === 'complete');
    await new Promise(resolve => setTimeout(resolve, 8000));
    await page.screenshot({ path: screenshotPath, fullPage: true,  type: 'jpeg', quality: 15  });
    await page.close();
  }

  await browser.close();

})();

[alpapan]

purely fwiw here is GPT making it paralleled and user interfaced...

// node jbrowse-screenshot.js --screenshotsDir=./customScreenshots --fileName=myLocations.bed --baseUrl=https://mycustomsite.com/path

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const yargs = require('yargs/yargs');
const { hideBin } = require('yargs/helpers');
const { version } = require('./package.json');

const argv = yargs(hideBin(process.argv))
  .version(version)
  .alias('v', 'version')
  .help()
  .alias('h', 'help')
  .option('screenshotsDir', {
    alias: 's',
    type: 'string',
    default: './screenshots',
    describe: 'Directory to save screenshots'
  })
  .option('fileName', {
    alias: 'f',
    type: 'string',
    default: 'locations.bed',
    describe: 'Input file as 2 or 3 column tab-delimited (regionID, start, stop)'
  })
  .option('baseUrl', {
    alias: 'b',
    type: 'string',
    default: 'https://example.com/2ph/?config=config.json&assembly=blah&tracks=blah1,blah2,blah3&loc=',
    describe: 'Base URL for JBrowse with appropriate tracks'
  })
  .parse();

const { screenshotsDir, fileName, baseUrl } = argv;


if (!fs.existsSync(screenshotsDir)) {
  fs.mkdirSync(screenshotsDir, { recursive: true });
}
const keyValuePairs = fs.readFileSync(fileName, 'utf-8').trim().split('\n')
  .filter(line => line.trim() !== '')
  .filter(line => !line.startsWith('#'))
  .map(line => {
    const columns = line.split('\t');
    return columns.length === 3 ? [columns[0], `${columns[1]}-${columns[2]}`] :
           columns.length === 2 ? [columns[0], columns[1]] : null;
  })
  .filter(pair => pair !== null);


async function processKeyValuePair(browser, key, value) {
  const screenshotPath = `${screenshotsDir}/${key}-${value}.jpg`;
  if (fs.existsSync(screenshotPath)) {
    const stats = fs.statSync(screenshotPath);
    if (stats.size > 30000) {
      console.log(`Skipping, already exists: ${key}-${value} ${stats.size}`);
      return;
    } else {
      console.log(`Exists but too small, ${key}-${value} ${stats.size}`);
    }
  } else {
    console.log(`Not skipping, ${key}-${value}`);
  }
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 1600 });
  await page.goto(`${baseUrl}${key}:${value}`, { waitUntil: ['domcontentloaded', 'networkidle0'], timeout: 30000 });
  await page.waitForFunction(() => document.readyState === 'complete');
  await new Promise(resolve => setTimeout(resolve, 8000));
  await page.screenshot({ path: screenshotPath, fullPage: true, type: 'jpeg', quality: 15 });
  await page.close();
}

function chunkArray(array, chunkSize) {
  const chunks = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    chunks.push(array.slice(i, i + chunkSize));
  }
  return chunks;
}

(async () => {
  const browser = await puppeteer.launch();
  const chunks = chunkArray(keyValuePairs, 10);

  for (const chunk of chunks) {
    await Promise.all(chunk.map(([key, value]) => processKeyValuePair(browser, key, value)));
  }

  await browser.close();
})();

[cmdcolin]

I haven't made an "officially prescribed" way of doing this yet but I can try to convert this into a feature request so we can track it

I did work with puppeteer in our performance profiling scripts, and so an example is here, but it is a bit hacky and only is tuned for a single track. it is challenging to determine when the page is 'finished loading' in jbrowse 2 (there is no particular thing to listen to currently) https://github.com/GMOD/jb2profile/blob/master/profile_jb2web.js

there is also our command line script @jbrowse/img. This is an interesting method that actually automates our "Export SVG" functionality, and can run without a browser engine like puppeteer https://www.npmjs.com/package/@jbrowse/img

[alpapan]

1. i think jbrowse-img is better for my research than using a web install. I can see benefits of a web install but i think img is better

2. yeah, i can understand why there is nothing to listen to when each track is loading independently.
   i wonder whether there is a signal that can be made when a track is loaded successfully (i assume not as it is on the client...?)