wba/frontend/src/js/page/wb-image-viewer-page.js

//
// Copyright (C) Stanislaw Adaszewski, 2020
// Contact: s.adaszewski@gmail.com
// Website: https://adared.ch/wba
// License: GNU Affero General Public License, Version 3
//

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';

function downloadFile(arvHost, arvToken, file) {
  const blockRefs = file[0];

  let prom = makeArvadosRequest(arvHost, arvToken,
    '/arvados/v1/keep_services');

  let proxy;
  prom = prom.then(xhr => {
    const services = xhr.response['items'];
    const proxies = services.filter(svc => (svc.service_type === 'proxy'));
    const n = Math.floor(Math.random() * proxies.length);
    proxy = proxies[n];
  });

  const blocks = [];

  for (let i = 0; i < blockRefs.length; i++) {
    let locator, start, end;

    prom = prom.then(() => {
      [ locator, start, end ] = blockRefs[i];
      return makeArvadosRequest(
        proxy.service_host + ':' + proxy.service_port,
        arvToken, '/' + locator,
        { 'useSsl': proxy.service_ssl_flag,
          'responseType': 'arraybuffer' }
      );
    });

    prom = prom.then(xhr => blocks.push(xhr.response.slice(start, end)));
  }

  prom = prom.then(() => {
    const url = URL.createObjectURL(new Blob(blocks));
    const totalSize = blocks.reduce((a, b) => a.length + b.length);
    const big = new Uint8Array(totalSize);
    for (let i = 0, pos = 0; i < blocks.length; i++) {
      big.set(blocks[i], pos);
      pos += blocks[i].length;
    }
    // papayaContainers[0].startPapaya();
    const poll = () => {
      setTimeout(() => {
        console.log('Polling Papaya startup...')
        if (window.papaya && window.papaya.Container) { // window.papayaContainers && window.papayaContainers[0]) {
          console.log('Great, Papaya started!');
          papaya.Container.startPapaya();
          //papaya.Container.addImage(0, big.buffer);
          document.body.id = "bod";
          document.body.style.background = "#555";
          papaya.Container.addViewer("bod", {
            'binaryImages': [ big.buffer ],
            'noNewFiles': true,
          });
        } else
          poll();
      }, 1000);
    };
    //setTimeout(poll, 10000);
    poll();
  });
}

class WBImageViewerPage extends Component {
  componentDidMount() {
    const { blobUrl, app } = this.props;
    const { arvHost, arvToken } = app.state;

    let prom = new Promise((accept, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', blobUrl);
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;
        if (xhr.status !== 200) reject(xhr);
        else accept(xhr);
      };
      xhr.responseType = 'blob';
      xhr.send();
    });

    prom = prom.then(xhr => xhr.response.text());

    prom = prom.then(data => {
      data = JSON.parse(data);
      downloadFile(arvHost, arvToken, data.file);
    });
  }

  render() {
    return (
      <div>
        <script language="javascript" src="/js/papaya.js"></script>

        <div id="papaya" style="width: auto; height: 100%; margin: 0;"></div>
      </div>
    );
  }
}

export default WBImageViewerPage;