From 110b0b40141ad24775191add0ef8e4f5328c08ef Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 25 Jan 2020 17:54:08 +0100
Subject: [PATCH 001/170] Initial commit.

---
 .gitignore                |  3 +++
 wbadvanced/__main__.py    | 31 ++++++++++++++++++++++
 wbadvanced/collections.py | 56 +++++++++++++++++++++++++++++++++++++++
 wbadvanced/projects.py    | 50 ++++++++++++++++++++++++++++++++++
 wbadvanced/users.py       |  6 +++++
 5 files changed, 146 insertions(+)
 create mode 100644 .gitignore
 create mode 100755 wbadvanced/__main__.py
 create mode 100755 wbadvanced/collections.py
 create mode 100755 wbadvanced/projects.py
 create mode 100755 wbadvanced/users.py

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3901713
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+__pycache__
+*.pyc
+
diff --git a/wbadvanced/__main__.py b/wbadvanced/__main__.py
new file mode 100755
index 0000000..3613c18
--- /dev/null
+++ b/wbadvanced/__main__.py
@@ -0,0 +1,31 @@
+import dash
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+import socket
+import arvados
+import functools
+from .projects import list_projects_html
+from .collections import list_collections_html
+
+
+def main():
+    app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+    arv = arvados.api('v1')
+
+    user = arv.users().current().execute()
+
+    # nav_btns = [ dbc.Button(a['name']) for a in projects ]
+    projects_table = list_projects_html(arv, user['uuid'])
+    collections_table = list_collections_html(arv, user['uuid'])
+
+    app.layout = html.Div([
+        html.H5('Projects'),
+        projects_table,
+        html.H5('Collections'),
+        collections_table
+    ], style={ 'margin': '10px' })
+
+    app.run_server(host=socket.getfqdn(), debug=True)
+
+
+main()
diff --git a/wbadvanced/collections.py b/wbadvanced/collections.py
new file mode 100755
index 0000000..4303aac
--- /dev/null
+++ b/wbadvanced/collections.py
@@ -0,0 +1,56 @@
+import dash_html_components as html
+import dash_bootstrap_components as dbc
+import humanize
+from .users import get_user
+
+
+def list_collections(arv, owner_uuid):
+    res = arv.collections().list(where = {
+        'owner_uuid': owner_uuid
+    }).execute()
+    res = res['items']
+    #while res['items_available'] > len(res['items']):
+        #res = arv.collections().list(where = {})
+    return res
+
+
+def list_collections_html(arv, parent):
+    projects = list_collections(arv, parent)
+
+    header = html.Tr([
+        html.Th('Name'),
+        html.Th('Description'),
+        html.Th('Owner'),
+        html.Th('Size')
+    ])
+    header = [ html.Thead(header) ]
+
+    rows = []
+    for a in projects:
+        owner = get_user(arv, a['owner_uuid'])
+        rows.append(
+            html.Tr([
+                html.Td([
+                    html.Div(html.A(href='/projects/' + a['uuid'],
+                        children=a['name'])),
+                    html.Div(a['uuid'])
+                ]),
+
+                html.Td(a['description'] or 'Modified at ' + a['modified_at']),
+
+                html.Td([
+                    html.Div(html.A(href='mailto:' + owner['email'],
+                        children=owner['first_name'] + ' ' + owner['last_name'])),
+                    html.Div(a['owner_uuid'])
+                ]),
+
+                html.Td(humanize.naturalsize(a['file_size_total']))
+            ]))
+    rows = [ html.Tbody(rows) ]
+
+    res = dbc.Table(header + rows,
+        striped=True,
+        hover=True,
+        responsive=True)
+
+    return res
diff --git a/wbadvanced/projects.py b/wbadvanced/projects.py
new file mode 100755
index 0000000..8d9b636
--- /dev/null
+++ b/wbadvanced/projects.py
@@ -0,0 +1,50 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from .users import get_user
+
+
+def list_projects(arv, parent):
+    res = arv.groups().list(where={
+        'owner_uuid': parent,
+        'group_class': 'project'
+    }).execute()['items']
+    return res
+
+
+def list_projects_html(arv, parent):
+    projects = list_projects(arv, parent)
+
+    header = html.Tr([
+        html.Th('Name'),
+        html.Th('Description'),
+        html.Th('Owner')
+    ])
+    header = [ html.Thead(header) ]
+
+    rows = []
+    for a in projects:
+        owner = get_user(arv, a['owner_uuid'])
+        rows.append(
+            html.Tr([
+                html.Td([
+                    html.Div(html.A(href='/projects/' + a['uuid'],
+                        children=a['name'])),
+                    html.Div(a['uuid'])
+                ]),
+
+                html.Td(a['description'] or 'Project'),
+
+                html.Td([
+                    html.Div(html.A(href='mailto:' + owner['email'],
+                        children=owner['first_name'] + ' ' + owner['last_name'])),
+                    html.Div(a['owner_uuid'])
+                ])
+            ]))
+    rows = [ html.Tbody(rows) ]
+
+    res = dbc.Table(header + rows,
+        striped=True,
+        hover=True,
+        responsive=True)
+
+    return res
diff --git a/wbadvanced/users.py b/wbadvanced/users.py
new file mode 100755
index 0000000..e3679c1
--- /dev/null
+++ b/wbadvanced/users.py
@@ -0,0 +1,6 @@
+import functools
+
+@functools.lru_cache(maxsize=128)
+def get_user(arv, uuid):
+    res = arv.users().get(uuid=uuid).execute()
+    return res

From cb37bf41aa358a4febb6be60271117009381a0f2 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 28 Jan 2020 16:29:52 +0100
Subject: [PATCH 002/170] Decided to go for native frontend/backend instead of
 Dash.

---
 .gitignore                   |  4 ++-
 frontend/package.json        | 19 ++++++++++++++
 frontend/rollup.config.js    | 35 ++++++++++++++++++++++++++
 frontend/src/css/index.css   |  0
 frontend/src/html/index.html |  0
 frontend/src/js/index.js     |  0
 wbadvanced/__main__.py       | 40 +++++++++++++++++++++++------
 wbadvanced/collections.py    |  8 +++---
 wbadvanced/processes.py      | 49 ++++++++++++++++++++++++++++++++++++
 wbadvanced/projects.py       |  3 ++-
 10 files changed, 144 insertions(+), 14 deletions(-)
 create mode 100755 frontend/package.json
 create mode 100755 frontend/rollup.config.js
 create mode 100755 frontend/src/css/index.css
 create mode 100755 frontend/src/html/index.html
 create mode 100755 frontend/src/js/index.js
 create mode 100755 wbadvanced/processes.py

diff --git a/.gitignore b/.gitignore
index 3901713..3e653ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 __pycache__
 *.pyc
-
+node_modules
+package-lock.json
+/frontend/dist/
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100755
index 0000000..db9ad82
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "dependencies": {
+    "linkstate": "^1.1.1",
+    "preact": "^8.2.9",
+    "preact-router": "^2.6.1",
+    "rollup": "^0.62.0",
+    "rollup-plugin-buble": "^0.19.2",
+    "rollup-plugin-copy": "^0.2.3",
+    "rollup-plugin-includepaths": "^0.2.3",
+    "rollup-plugin-license": "^0.7.0",
+    "rollup-plugin-minify": "^1.0.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "watch": "^1.0.2"
+  },
+  "scripts": {
+    "rollup": "rollup -c",
+    "watch": "watch \"rollup -c\" src"
+  }
+}
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
new file mode 100755
index 0000000..8209599
--- /dev/null
+++ b/frontend/rollup.config.js
@@ -0,0 +1,35 @@
+import resolve from 'rollup-plugin-node-resolve'
+import buble from 'rollup-plugin-buble';
+import minify from 'rollup-plugin-minify';
+import copy from 'rollup-plugin-copy';
+import includePaths from 'rollup-plugin-includepaths';
+import license from 'rollup-plugin-license';
+
+export default {
+  //dest: 'dist/app.min.js',
+  input: 'src/js/index.js',
+  output: {
+    file: 'dist/js/app.min.js',
+    name: 'CHEMTOP',
+    format: 'umd',
+    sourceMap: true
+  },
+  plugins: [
+    includePaths({
+      paths: ['src/js', 'src/js/widget', 'src/js/misc']
+    }),
+    copy({
+      'src/html/index.html': 'dist/index.html',
+      'src/css/index.css': 'dist/css/index.css',
+      verbose: true
+    }),
+    buble({jsx: 'h'}),
+    resolve({}),
+    license({
+      banner: 'Copyright (C) F. Hoffmann-La Roche AG, 2020.\nAuthor: stanislaw.adaszewski@roche.com\nAll Rights Reserved.',
+    }) /* ,
+    minify({
+      iife: 'dist/app.min.js'
+    }) */
+  ]
+}
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
new file mode 100755
index 0000000..e69de29
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
new file mode 100755
index 0000000..e69de29
diff --git a/frontend/src/js/index.js b/frontend/src/js/index.js
new file mode 100755
index 0000000..e69de29
diff --git a/wbadvanced/__main__.py b/wbadvanced/__main__.py
index 3613c18..3e4f2cc 100755
--- a/wbadvanced/__main__.py
+++ b/wbadvanced/__main__.py
@@ -1,11 +1,18 @@
 import dash
 import dash_bootstrap_components as dbc
 import dash_html_components as html
+import dash_core_components as dcc
 import socket
 import arvados
 import functools
 from .projects import list_projects_html
 from .collections import list_collections_html
+from .processes import list_processes_html
+
+
+# list_projects_html = functools.lru_cache(maxsize=128)(list_projects_html)
+# list_collections_html = functools.lru_cache(maxsize=128)(list_collections_html)
+# list_processes_html = functools.lru_cache(maxsize=128)(list_processes_html)
 
 
 def main():
@@ -13,19 +20,36 @@ def main():
     arv = arvados.api('v1')
 
     user = arv.users().current().execute()
-
     # nav_btns = [ dbc.Button(a['name']) for a in projects ]
-    projects_table = list_projects_html(arv, user['uuid'])
-    collections_table = list_collections_html(arv, user['uuid'])
 
     app.layout = html.Div([
-        html.H5('Projects'),
-        projects_table,
-        html.H5('Collections'),
-        collections_table
+        dcc.Location(id='url', refresh=False),
+        html.Div(id='page-content')
     ], style={ 'margin': '10px' })
 
-    app.run_server(host=socket.getfqdn(), debug=True)
+    projects_table = list_projects_html(arv, user['uuid'])
+    collections_table = list_collections_html(arv, user['uuid'])
+    processes_table = list_processes_html(arv, user['uuid'])
+
+
+    @app.callback(dash.dependencies.Output('page-content', 'children'),
+        [ dash.dependencies.Input('url', 'pathname') ])
+    def display_page(pathname):
+        print('display_page(), pathname:', pathname)
+        return html.Div([
+            dbc.Tabs([
+                dbc.Tab(projects_table, label="Projects",
+                    label_style={ 'cursor': 'pointer' })
+            ], style={ 'borderBottom': 'none' }),
+            dbc.Tabs([
+                dbc.Tab(collections_table, label="Collections",
+                    label_style={ 'cursor': 'pointer' }),
+                dbc.Tab(processes_table, label="Processes",
+                    label_style={ 'cursor': 'pointer' })
+            ], style={ 'borderBottom': 'none' })
+        ])
+
+    app.run_server(host=socket.getfqdn(), debug=False)
 
 
 main()
diff --git a/wbadvanced/collections.py b/wbadvanced/collections.py
index 4303aac..5ba14f1 100755
--- a/wbadvanced/collections.py
+++ b/wbadvanced/collections.py
@@ -4,18 +4,18 @@ import humanize
 from .users import get_user
 
 
-def list_collections(arv, owner_uuid):
+def list_collections(arv, owner_uuid, limit=100):
     res = arv.collections().list(where = {
         'owner_uuid': owner_uuid
-    }).execute()
+    }, limit=limit).execute()
     res = res['items']
     #while res['items_available'] > len(res['items']):
         #res = arv.collections().list(where = {})
     return res
 
 
-def list_collections_html(arv, parent):
-    projects = list_collections(arv, parent)
+def list_collections_html(arv, parent, limit=100):
+    projects = list_collections(arv, parent, limit=limit)
 
     header = html.Tr([
         html.Th('Name'),
diff --git a/wbadvanced/processes.py b/wbadvanced/processes.py
new file mode 100755
index 0000000..7c1b71b
--- /dev/null
+++ b/wbadvanced/processes.py
@@ -0,0 +1,49 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from .users import get_user
+
+
+def list_processes(arv, parent, limit=100):
+    res = arv.container_requests().list(where={
+        'owner_uuid': parent
+    }, limit=100).execute()['items']
+    return res
+
+
+def list_processes_html(arv, parent, limit=100):
+    processes = list_processes(arv, parent, limit=limit)
+
+    header = html.Tr([
+        html.Th('Name'),
+        html.Th('Description'),
+        html.Th('Owner')
+    ])
+    header = [ html.Thead(header) ]
+
+    rows = []
+    for a in processes:
+        owner = get_user(arv, a['owner_uuid'])
+        rows.append(
+            html.Tr([
+                html.Td([
+                    html.Div(html.A(href='/processes/' + a['uuid'],
+                        children=a['name'])),
+                    html.Div(a['uuid'])
+                ]),
+
+                html.Td(a['description'] or 'Process'),
+
+                html.Td([
+                    html.Div(html.A(href='mailto:' + owner['email'],
+                        children=owner['first_name'] + ' ' + owner['last_name'])),
+                    html.Div(a['owner_uuid'])
+                ])
+            ]))
+    rows = [ html.Tbody(rows) ]
+
+    res = dbc.Table(header + rows,
+        striped=True,
+        hover=True,
+        responsive=True)
+
+    return res
diff --git a/wbadvanced/projects.py b/wbadvanced/projects.py
index 8d9b636..6adee71 100755
--- a/wbadvanced/projects.py
+++ b/wbadvanced/projects.py
@@ -1,5 +1,6 @@
 import dash_bootstrap_components as dbc
 import dash_html_components as html
+import dash_core_components as dcc
 from .users import get_user
 
 
@@ -27,7 +28,7 @@ def list_projects_html(arv, parent):
         rows.append(
             html.Tr([
                 html.Td([
-                    html.Div(html.A(href='/projects/' + a['uuid'],
+                    html.Div(dcc.Link(href='/projects/' + a['uuid'],
                         children=a['name'])),
                     html.Div(a['uuid'])
                 ]),

From 09de8983980ef1b977534b1cb1c20da04458dd48 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 13:06:54 +0100
Subject: [PATCH 003/170] Slowly slowly starting the implementation.

---
 .gitignore                          |  2 ++
 backend/srv.py                      |  7 +++++
 frontend/package.json               |  4 +++
 frontend/rollup.config.js           |  6 ++--
 frontend/src/html/index.html        | 10 +++++++
 frontend/src/js/component/wb-app.js | 45 +++++++++++++++++++++++++++++
 frontend/src/js/index.js            |  6 ++++
 frontend/src/js/widget/wb-tabs.js   | 33 +++++++++++++++++++++
 8 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 backend/srv.py
 create mode 100644 frontend/src/js/component/wb-app.js
 create mode 100644 frontend/src/js/widget/wb-tabs.js

diff --git a/.gitignore b/.gitignore
index 3e653ed..3ca30a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ __pycache__
 node_modules
 package-lock.json
 /frontend/dist/
+/backend/server.pem
+
diff --git a/backend/srv.py b/backend/srv.py
new file mode 100644
index 0000000..9972690
--- /dev/null
+++ b/backend/srv.py
@@ -0,0 +1,7 @@
+import BaseHTTPServer, SimpleHTTPServer
+import ssl
+
+httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
+httpd.socket = ssl.wrap_socket (httpd.socket, certfile='/pstore/home/adaszews/workspace/arvados-workbench-advanced/backend/server.pem', server_side=True)
+httpd.serve_forever()
+
diff --git a/frontend/package.json b/frontend/package.json
index db9ad82..1d4a9c9 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,8 +1,12 @@
 {
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "jquery": "^3.4.1",
     "linkstate": "^1.1.1",
+    "popper.js": "^1.16.1",
     "preact": "^8.2.9",
     "preact-router": "^2.6.1",
+    "random-bytes": "^1.0.0",
     "rollup": "^0.62.0",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-copy": "^0.2.3",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 8209599..db67adf 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -10,17 +10,19 @@ export default {
   input: 'src/js/index.js',
   output: {
     file: 'dist/js/app.min.js',
-    name: 'CHEMTOP',
+    name: 'WBADV',
     format: 'umd',
     sourceMap: true
   },
   plugins: [
     includePaths({
-      paths: ['src/js', 'src/js/widget', 'src/js/misc']
+      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component']
     }),
     copy({
       'src/html/index.html': 'dist/index.html',
       'src/css/index.css': 'dist/css/index.css',
+      'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
+      'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index e69de29..c48306f 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
+    <script language="javascript" src="/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <script language="javascript" src="/js/app.min.js"></script>
+  </body>
+</html>
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
new file mode 100644
index 0000000..8794e72
--- /dev/null
+++ b/frontend/src/js/component/wb-app.js
@@ -0,0 +1,45 @@
+import { h, Component } from 'preact';
+import WBTabs from 'wb-tabs';
+
+class WBApp extends Component {
+  render() {
+    return (
+      <div>
+        <h1>WBApp</h1>
+        <table class="table table-striped table-hover">
+          <thead class="thead-light">
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Size</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>Description</td>
+              <td>0 bytes</td>
+            </tr>
+            <tr>
+              <td>Name</td>
+              <td>Description</td>
+              <td>0 bytes</td>
+            </tr>
+            <tr>
+              <td>Name</td>
+              <td>Description</td>
+              <td>0 bytes</td>
+            </tr>
+          </tbody>
+        </table>
+        <WBTabs tabs={ [
+          { 'name': 'Ala', 'isActive': true },
+          "Ma",
+          { 'name': 'Kota', 'isDisabled': true }
+        ] } onTabChanged={ idx => alert(idx) } />
+      </div>
+    );
+  }
+}
+
+export default WBApp;
diff --git a/frontend/src/js/index.js b/frontend/src/js/index.js
index e69de29..a030442 100755
--- a/frontend/src/js/index.js
+++ b/frontend/src/js/index.js
@@ -0,0 +1,6 @@
+import { h, render } from 'preact';
+import WBApp from 'wb-app';
+
+render((
+  <WBApp />
+), document.body);
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
new file mode 100644
index 0000000..61c711b
--- /dev/null
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -0,0 +1,33 @@
+import { h, Component } from 'preact';
+
+class WBTabs extends Component {
+  render({ tabs, onTabChanged }) {
+    return (
+      <ul class="nav nav-tabs">
+        { tabs.map((t, idx) => {
+          let name, isActive, isDisabled;
+          if (typeof(t) === 'object') {
+            name = t.name;
+            isActive = t.isActive;
+            isDisabled = t.isDisabled;
+          } else if (typeof(t) === 'string') {
+            name = t;
+          }
+          let cls = ['nav-link'];
+          if (isActive)
+            cls.push('active');
+          if (isDisabled)
+            cls.push('disabled');
+          cls = cls.join(' ');
+          return (
+            <li class="nav-item">
+              <a class={ cls } href="#" onclick={ () => onTabChanged(idx) }>{ name }</a>
+            </li>
+          );
+        }) }
+      </ul>
+    );
+  }
+}
+
+export default WBTabs;

From 41e59baaa64468b81f16ec9616bdd85a9945efa5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 14:30:27 +0100
Subject: [PATCH 004/170] Trying to implement pagination.

---
 frontend/rollup.config.js                     |  1 +
 frontend/src/html/index.html                  |  1 +
 frontend/src/js/component/wb-app.js           | 39 ++++------
 .../src/js/component/wb-project-listing.js    | 20 +++++
 frontend/src/js/misc/make-arvados-request.js  | 27 +++++++
 frontend/src/js/widget/wb-pagination.js       | 73 +++++++++++++++++++
 frontend/src/js/widget/wb-table.js            | 26 +++++++
 7 files changed, 161 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/js/component/wb-project-listing.js
 create mode 100644 frontend/src/js/misc/make-arvados-request.js
 create mode 100644 frontend/src/js/widget/wb-pagination.js
 create mode 100644 frontend/src/js/widget/wb-table.js

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index db67adf..9fafe04 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -23,6 +23,7 @@ export default {
       'src/css/index.css': 'dist/css/index.css',
       'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
       'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
+      'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index c48306f..711a065 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -2,6 +2,7 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
+    <script language="javascript" src="/js/jquery.min.js"></script>
     <script language="javascript" src="/js/bootstrap.min.js"></script>
   </head>
   <body>
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index 8794e72..711b4e8 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -1,37 +1,24 @@
 import { h, Component } from 'preact';
 import WBTabs from 'wb-tabs';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
 
 class WBApp extends Component {
   render() {
     return (
       <div>
         <h1>WBApp</h1>
-        <table class="table table-striped table-hover">
-          <thead class="thead-light">
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-              <th>Size</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Name</td>
-              <td>Description</td>
-              <td>0 bytes</td>
-            </tr>
-            <tr>
-              <td>Name</td>
-              <td>Description</td>
-              <td>0 bytes</td>
-            </tr>
-            <tr>
-              <td>Name</td>
-              <td>Description</td>
-              <td>0 bytes</td>
-            </tr>
-          </tbody>
-        </table>
+        <WBPagination numPages={ 100 } activePage={ 0 }
+          onPageChanged={ idx => alert(idx) } />
+        <WBTable
+          columns={ [ 'Name', 'Description', 'Size' ] }
+          rows={ [
+            [ 'Name', 'Description', '0 bytes'],
+            [ 'Name', 'Description', '0 bytes'],
+            [ 'Name', 'Description', '0 bytes'],
+            [ 'Name', 'Description', '0 bytes'],
+            [ 'Name', 'Description', '0 bytes']
+          ] } />
         <WBTabs tabs={ [
           { 'name': 'Ala', 'isActive': true },
           "Ma",
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
new file mode 100644
index 0000000..1d32a9a
--- /dev/null
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -0,0 +1,20 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBProjectListing extends Component {
+
+  componentDidMount() {
+    let filters = [
+      [ 'group_class', '=', 'project' ],
+      [ 'owner_uuid', '=', this.props.ownerUuid ]
+    ];
+    let req = makeArvadosRequest(his.props.arvHost, this.props.arvToken,
+      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)))
+  }
+
+  render({ arvHost, arvToken, ownerUuid }) {
+    return (
+      <div>Project Listing</div>
+    );
+  }
+}
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
new file mode 100644
index 0000000..59cc31e
--- /dev/null
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -0,0 +1,27 @@
+
+makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
+  contentType='application/json;charset=utf-8', responseType='json') {
+
+  let xhr = new XMLHttpRequest();
+  xhr.open(method, 'https://' + arvHost + endpoint);
+  xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
+  if (data !== null)
+    xhr.setRequestHeader('Content-Type', contentType);
+  xhr.responseType = responseType;
+
+  let res = new Promise((accept, reject) => {
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState !== 4)
+        return;
+      if (xhr.status !== 200)
+        reject(xhr);
+      else
+        accept(xhr);
+    };
+    xhr.send(data);
+  });
+
+  return res;
+}
+
+export default makeArvadosRequest;
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
new file mode 100644
index 0000000..3a7c1e3
--- /dev/null
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -0,0 +1,73 @@
+import { h, Component } from 'preact';
+
+class WBPagination extends Component {
+  renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) {
+    let visible = {};
+
+    let begActChnk = activePage - Math.floor(chunkSize / 2);
+    let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
+    for (let i = begActChnk; i < endActChnk; i++)
+      visible[i] = true;
+
+    for (let i = 0; i < chunkSize; i++)
+      visible[i] = true;
+
+    for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
+      visible[i] = true;
+
+    visible = Object.keys(visible).map(n => Number(n));
+
+    let res = [];
+    let prev = 0;
+
+    res.push((
+      <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
+        <a class="page-link" href="#"
+          onclick={ () => onPageChanged(activePage - 1) }>Previous</a>
+      </li>
+    ));
+
+    for (let i in visible) {
+      if (i > prev + 1)
+        res.push((
+          <li class="page-item">
+            <a class="page-link" href="#"
+              onclick={ () => onPageChanged(i - 1) }>...</a>
+          </li>
+        ));
+      prev = i;
+
+      res.push((
+        <li class={ i === activePage ? "page-item active" : "page-item" }>
+          <a class="page-link" href="#"
+            onclick={ () => onPageChanged(i) }>{ i + 1 }</a>
+        </li>
+      ));
+    }
+
+    res.push((
+      <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
+        <a class="page-link" href="#"
+          onclick={ () => onPageChanged(activePage + 1) }>Next</a>
+      </li>
+    ));
+
+    return res;
+  }
+
+  render({ numPages, activePage, chunkSize, onPageChanged }) {
+    return (
+      <nav aria-label="Pagination">
+        <ul class="pagination">
+          { this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) }
+        </ul>
+      </nav>
+    );
+  }
+}
+
+WBPagination.defaultProps = {
+  'chunkSize': 5
+};
+
+export default WBPagination;
diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js
new file mode 100644
index 0000000..c698135
--- /dev/null
+++ b/frontend/src/js/widget/wb-table.js
@@ -0,0 +1,26 @@
+import { h, Component } from 'preact';
+
+class WBTable extends Component {
+  render({ columns, rows }) {
+    return (
+      <table class="table table-striped table-hover">
+        <thead class="thead-light">
+          <tr>
+            { columns.map(c => <th>{ c }</th>) }
+          </tr>
+        </thead>
+        <tbody>
+          { rows.map(r => (
+            <tr>
+              { columns.map((_, idx) => (
+                <td>{ r[idx] }</td>
+              )) }
+            </tr>
+          )) }
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default WBTable;

From 712d366579431cb2e837b27ac8436592a7680b44 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 15:03:18 +0100
Subject: [PATCH 005/170] Cool, can actually browse the projects already.

---
 frontend/src/js/component/wb-app.js           |  4 ++
 .../src/js/component/wb-project-listing.js    | 55 +++++++++++++++++--
 frontend/src/js/misc/make-arvados-request.js  |  2 +-
 frontend/src/js/widget/wb-pagination.js       |  8 ++-
 4 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index 711b4e8..25f4857 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -2,12 +2,16 @@ import { h, Component } from 'preact';
 import WBTabs from 'wb-tabs';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
+import WBProjectListing from 'wb-project-listing';
 
 class WBApp extends Component {
   render() {
     return (
       <div>
         <h1>WBApp</h1>
+        <WBProjectListing arvHost="api.arkau.roche.com"
+          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" />
+        <WBPagination numPages={ 0 } activePage={ 0 } />
         <WBPagination numPages={ 100 } activePage={ 0 }
           onPageChanged={ idx => alert(idx) } />
         <WBTable
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 1d32a9a..9b5c647 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -1,20 +1,63 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
 
 class WBProjectListing extends Component {
 
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+    this.state.activePage = 0;
+  }
+
   componentDidMount() {
+    this.setActivePage(0);
+  }
+
+  prepareRows(items) {
+    return items.map(item => [
+      item['name'],
+      item['description'],
+      item['owner_uuid']
+    ]);
+  }
+
+  setActivePage(i) {
+    this.state.activePage = i;
     let filters = [
-      [ 'group_class', '=', 'project' ],
-      [ 'owner_uuid', '=', this.props.ownerUuid ]
+      [ 'group_class', '=', 'project' ]
     ];
-    let req = makeArvadosRequest(his.props.arvHost, this.props.arvToken,
-      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)))
+    if (this.props.ownerUuid !== null)
+      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
+      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
+      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    prom = prom.then(xhr =>
+      this.setState({
+        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+        'rows': this.prepareRows(xhr.response['items'])
+      }));
   }
 
-  render({ arvHost, arvToken, ownerUuid }) {
+  render({ arvHost, arvToken, ownerUuid }, { rows, numPages, activePage }) {
     return (
-      <div>Project Listing</div>
+      <div>
+        <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
+          rows={ rows } />
+        <WBPagination numPages={ numPages }
+          activePage={ activePage }
+          onPageChanged={ i => this.setActivePage(i) } />
+      </div>
     );
   }
 }
+
+WBProjectListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBProjectListing;
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 59cc31e..dc12cc0 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -1,5 +1,5 @@
 
-makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
+function makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
   contentType='application/json;charset=utf-8', responseType='json') {
 
   let xhr = new XMLHttpRequest();
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
index 3a7c1e3..9c2d091 100644
--- a/frontend/src/js/widget/wb-pagination.js
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -6,16 +6,17 @@ class WBPagination extends Component {
 
     let begActChnk = activePage - Math.floor(chunkSize / 2);
     let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
-    for (let i = begActChnk; i < endActChnk; i++)
+    for (let i = Math.max(0, begActChnk); i < Math.min(numPages, endActChnk); i++)
       visible[i] = true;
 
-    for (let i = 0; i < chunkSize; i++)
+    for (let i = 0; i < Math.min(numPages, chunkSize); i++)
       visible[i] = true;
 
     for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
       visible[i] = true;
 
     visible = Object.keys(visible).map(n => Number(n));
+    visible.sort();
 
     let res = [];
     let prev = 0;
@@ -27,7 +28,8 @@ class WBPagination extends Component {
       </li>
     ));
 
-    for (let i in visible) {
+    for (let idx in visible) {
+      let i = visible[idx];
       if (i > prev + 1)
         res.push((
           <li class="page-item">

From 0d4b5780253731573cd9bb7014b9bdceb3592a82 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 15:40:48 +0100
Subject: [PATCH 006/170] Small fixes for pagination.

---
 frontend/src/js/component/wb-app.js     |  9 +++++----
 frontend/src/js/widget/wb-pagination.js | 10 +++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index 25f4857..c86691b 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -5,15 +5,16 @@ import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 
 class WBApp extends Component {
-  render() {
+  render({}, { activePage }) {
     return (
       <div>
         <h1>WBApp</h1>
         <WBProjectListing arvHost="api.arkau.roche.com"
-          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" />
+          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
+          itemsPerPage="5" />
         <WBPagination numPages={ 0 } activePage={ 0 } />
-        <WBPagination numPages={ 100 } activePage={ 0 }
-          onPageChanged={ idx => alert(idx) } />
+        <WBPagination numPages={ 100 } activePage={ activePage || 0 }
+          onPageChanged={ i => this.setState({ 'activePage': i }) } />
         <WBTable
           columns={ [ 'Name', 'Description', 'Size' ] }
           rows={ [
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
index 9c2d091..8e45602 100644
--- a/frontend/src/js/widget/wb-pagination.js
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -16,7 +16,7 @@ class WBPagination extends Component {
       visible[i] = true;
 
     visible = Object.keys(visible).map(n => Number(n));
-    visible.sort();
+    visible.sort((a, b) => (a - b));
 
     let res = [];
     let prev = 0;
@@ -24,7 +24,7 @@ class WBPagination extends Component {
     res.push((
       <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
         <a class="page-link" href="#"
-          onclick={ () => onPageChanged(activePage - 1) }>Previous</a>
+          onclick={ e => { e.preventDefault(); onPageChanged(activePage - 1); } }>Previous</a>
       </li>
     ));
 
@@ -34,7 +34,7 @@ class WBPagination extends Component {
         res.push((
           <li class="page-item">
             <a class="page-link" href="#"
-              onclick={ () => onPageChanged(i - 1) }>...</a>
+              onclick={ e => { e.preventDefault(); onPageChanged(i - 1); } }>...</a>
           </li>
         ));
       prev = i;
@@ -42,7 +42,7 @@ class WBPagination extends Component {
       res.push((
         <li class={ i === activePage ? "page-item active" : "page-item" }>
           <a class="page-link" href="#"
-            onclick={ () => onPageChanged(i) }>{ i + 1 }</a>
+            onclick={ e => { e.preventDefault(); onPageChanged(i); } }>{ i + 1 }</a>
         </li>
       ));
     }
@@ -50,7 +50,7 @@ class WBPagination extends Component {
     res.push((
       <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
         <a class="page-link" href="#"
-          onclick={ () => onPageChanged(activePage + 1) }>Next</a>
+          onclick={ e => { e.preventDefault(); onPageChanged(activePage + 1); } }>Next</a>
       </li>
     ));
 

From 1e2c7387ae9076936fcc35f4232b1ee62c723adb Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 16:33:01 +0100
Subject: [PATCH 007/170] Started working on navbar.

---
 frontend/package.json                  |  2 ++
 frontend/rollup.config.js              | 17 +++++++++
 frontend/src/html/index.html           |  2 ++
 frontend/src/js/component/wb-app.js    |  4 ++-
 frontend/src/js/component/wb-navbar.js | 49 ++++++++++++++++++++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-navbar.js

diff --git a/frontend/package.json b/frontend/package.json
index 1d4a9c9..30b05ca 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,8 @@
 {
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0",
     "bootstrap": "^4.4.1",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.4.1",
     "linkstate": "^1.1.1",
     "popper.js": "^1.16.1",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 9fafe04..2a9330a 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -24,6 +24,23 @@ export default {
       'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
       'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
       'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js',
+      'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js': 'dist/js/fontawesome.min.js',
+      'node_modules/@fortawesome/fontawesome-free/css/all.min.css': 'dist/css/all.min.css',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot': 'dist/webfonts/fa-regular-400.eot',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg': 'dist/webfonts/fa-regular-400.svg',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf': 'dist/webfonts/fa-regular-400.ttf',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff': 'dist/webfonts/fa-regular-400.woff',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2': 'dist/webfonts/fa-regular-400.woff2',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot': 'dist/webfonts/fa-solid-900.eot',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg': 'dist/webfonts/fa-solid-900.svg',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf': 'dist/webfonts/fa-solid-900.ttf',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff': 'dist/webfonts/fa-solid-900.woff',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2': 'dist/webfonts/fa-solid-900.woff2',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot': 'dist/webfonts/fa-brands-400.eot',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg': 'dist/webfonts/fa-brands-400.svg',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf': 'dist/webfonts/fa-brands-400.ttf',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff': 'dist/webfonts/fa-brands-400.woff',
+      'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 711a065..8f02e32 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -2,8 +2,10 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
+    <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
     <script language="javascript" src="/js/jquery.min.js"></script>
     <script language="javascript" src="/js/bootstrap.min.js"></script>
+    <script language="javascript" src="/js/fontawesome.min.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index c86691b..a449c5e 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -3,12 +3,14 @@ import WBTabs from 'wb-tabs';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
+import WBNavbar from 'wb-navbar';
 
 class WBApp extends Component {
   render({}, { activePage }) {
     return (
       <div>
-        <h1>WBApp</h1>
+        <h1>WBApp <i class="fab fa-adobe"></i></h1>
+        <WBNavbar />
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           itemsPerPage="5" />
diff --git a/frontend/src/js/component/wb-navbar.js b/frontend/src/js/component/wb-navbar.js
new file mode 100644
index 0000000..a11d733
--- /dev/null
+++ b/frontend/src/js/component/wb-navbar.js
@@ -0,0 +1,49 @@
+import { h, Component } from 'preact';
+
+class WBNavbar extends Component {
+  render() {
+    return (
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="#">Workbench Advanced</a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Dropdown
+              </a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled" href="#">Disabled</a>
+            </li>
+          </ul>
+          <form class="form-inline my-2 my-lg-0">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+          </form>
+        </div>
+      </nav>
+    );
+  }
+}
+
+export default WBNavbar;

From a5f2377b65479457ec723d1892ac3337263e88f9 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 30 Jan 2020 18:56:53 +0100
Subject: [PATCH 008/170] A basic navigation is in place.

---
 backend/srv.py                                | 10 ++++-
 frontend/package.json                         |  2 -
 frontend/rollup.config.js                     |  2 +-
 frontend/src/js/component/wb-app.js           | 37 +++++++------------
 .../src/js/component/wb-project-listing.js    |  2 +-
 frontend/src/js/page/wb-browse.js             | 19 ++++++++++
 6 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/js/page/wb-browse.js

diff --git a/backend/srv.py b/backend/srv.py
index 9972690..711e099 100644
--- a/backend/srv.py
+++ b/backend/srv.py
@@ -1,7 +1,15 @@
 import BaseHTTPServer, SimpleHTTPServer
 import ssl
 
-httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
+class RequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
+    def do_GET(self):
+        print(self.path)
+        if '.' not in self.path:
+	    self.path = '/'
+        SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+        # RequestHandler, self).do_GET()
+
+httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4443), RequestHandler)
 httpd.socket = ssl.wrap_socket (httpd.socket, certfile='/pstore/home/adaszews/workspace/arvados-workbench-advanced/backend/server.pem', server_side=True)
 httpd.serve_forever()
 
diff --git a/frontend/package.json b/frontend/package.json
index 30b05ca..86ac08b 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,13 +2,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "bootstrap": "^4.4.1",
-    "font-awesome": "^4.7.0",
     "jquery": "^3.4.1",
     "linkstate": "^1.1.1",
     "popper.js": "^1.16.1",
     "preact": "^8.2.9",
     "preact-router": "^2.6.1",
-    "random-bytes": "^1.0.0",
     "rollup": "^0.62.0",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-copy": "^0.2.3",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 2a9330a..b1c184b 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -16,7 +16,7 @@ export default {
   },
   plugins: [
     includePaths({
-      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component']
+      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component', 'src/js/page']
     }),
     copy({
       'src/html/index.html': 'dist/index.html',
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index a449c5e..8c7f7b6 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -1,37 +1,26 @@
 import { h, Component } from 'preact';
+import { Router, route } from 'preact-router';
 import WBTabs from 'wb-tabs';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 import WBNavbar from 'wb-navbar';
+import WBBrowse from 'wb-browse';
 
 class WBApp extends Component {
   render({}, { activePage }) {
     return (
-      <div>
-        <h1>WBApp <i class="fab fa-adobe"></i></h1>
-        <WBNavbar />
-        <WBProjectListing arvHost="api.arkau.roche.com"
-          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
-          itemsPerPage="5" />
-        <WBPagination numPages={ 0 } activePage={ 0 } />
-        <WBPagination numPages={ 100 } activePage={ activePage || 0 }
-          onPageChanged={ i => this.setState({ 'activePage': i }) } />
-        <WBTable
-          columns={ [ 'Name', 'Description', 'Size' ] }
-          rows={ [
-            [ 'Name', 'Description', '0 bytes'],
-            [ 'Name', 'Description', '0 bytes'],
-            [ 'Name', 'Description', '0 bytes'],
-            [ 'Name', 'Description', '0 bytes'],
-            [ 'Name', 'Description', '0 bytes']
-          ] } />
-        <WBTabs tabs={ [
-          { 'name': 'Ala', 'isActive': true },
-          "Ma",
-          { 'name': 'Kota', 'isDisabled': true }
-        ] } onTabChanged={ idx => alert(idx) } />
-      </div>
+      <Router>
+        <div path="/">
+          Hello, world!
+        </div>
+
+        <div path="/login">
+          <WBNavbar />
+        </div>
+
+        <WBBrowse path="/browse/:ownerUuid?" />
+      </Router>
     );
   }
 }
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 9b5c647..6b43f03 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -29,7 +29,7 @@ class WBProjectListing extends Component {
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
-    if (this.props.ownerUuid !== null)
+    if (this.props.ownerUuid)
       filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
     let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
       '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
new file mode 100644
index 0000000..30eed7a
--- /dev/null
+++ b/frontend/src/js/page/wb-browse.js
@@ -0,0 +1,19 @@
+import { h, Component } from 'preact';
+import WBNavbar from 'wb-navbar';
+import WBProjectListing from 'wb-project-listing';
+
+class WBBrowse extends Component {
+  render({ ownerUuid }) {
+    return (
+      <div>
+        <WBNavbar />
+        <WBProjectListing arvHost="api.arkau.roche.com"
+          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
+          ownerUuid={ ownerUuid }
+          itemsPerPage="5" />
+      </div>
+    );
+  }
+}
+
+export default WBBrowse;

From 0bb1ec1259bce439b3dd830b28ccd8ff7872f218 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 09:23:22 +0100
Subject: [PATCH 009/170] Display UUID in project listing.

---
 frontend/src/js/component/wb-project-listing.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 6b43f03..0f6013d 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -18,7 +18,10 @@ class WBProjectListing extends Component {
 
   prepareRows(items) {
     return items.map(item => [
-      item['name'],
+      (<div>
+        <div>{ item['name'] }</div>
+        <div>{ item['uuid'] }</div>
+      </div>),
       item['description'],
       item['owner_uuid']
     ]);

From f3b6e9794ca6f564eec0a23b08f427ba53651ef7 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 10:30:10 +0100
Subject: [PATCH 010/170] Making the navbar more configurable.

---
 frontend/src/js/component/wb-inline-search.js | 14 +++
 frontend/src/js/component/wb-navbar.js        | 49 -----------
 frontend/src/js/{component => page}/wb-app.js |  5 +-
 frontend/src/js/page/wb-browse.js             |  8 +-
 frontend/src/js/page/wb-sign-in.js            | 31 +++++++
 frontend/src/js/widget/wb-navbar.js           | 87 +++++++++++++++++++
 6 files changed, 141 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/js/component/wb-inline-search.js
 delete mode 100644 frontend/src/js/component/wb-navbar.js
 rename frontend/src/js/{component => page}/wb-app.js (85%)
 create mode 100644 frontend/src/js/page/wb-sign-in.js
 create mode 100644 frontend/src/js/widget/wb-navbar.js

diff --git a/frontend/src/js/component/wb-inline-search.js b/frontend/src/js/component/wb-inline-search.js
new file mode 100644
index 0000000..7f7b685
--- /dev/null
+++ b/frontend/src/js/component/wb-inline-search.js
@@ -0,0 +1,14 @@
+import { h, Component } from 'preact';
+
+class WBInlineSearch extends Component {
+  render() {
+    return (
+      <form class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    );
+  }
+}
+
+export default WBInlineSearch;
diff --git a/frontend/src/js/component/wb-navbar.js b/frontend/src/js/component/wb-navbar.js
deleted file mode 100644
index a11d733..0000000
--- a/frontend/src/js/component/wb-navbar.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { h, Component } from 'preact';
-
-class WBNavbar extends Component {
-  render() {
-    return (
-      <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#">Workbench Advanced</a>
-
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Link</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </a>
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Something else here</a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link disabled" href="#">Disabled</a>
-            </li>
-          </ul>
-          <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
-        </div>
-      </nav>
-    );
-  }
-}
-
-export default WBNavbar;
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/page/wb-app.js
similarity index 85%
rename from frontend/src/js/component/wb-app.js
rename to frontend/src/js/page/wb-app.js
index 8c7f7b6..6afce09 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -6,6 +6,7 @@ import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 import WBNavbar from 'wb-navbar';
 import WBBrowse from 'wb-browse';
+import WBSignIn from 'wb-sign-in';
 
 class WBApp extends Component {
   render({}, { activePage }) {
@@ -15,9 +16,7 @@ class WBApp extends Component {
           Hello, world!
         </div>
 
-        <div path="/login">
-          <WBNavbar />
-        </div>
+        <WBSignIn path="/sign-in" />
 
         <WBBrowse path="/browse/:ownerUuid?" />
       </Router>
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 30eed7a..be0cdb3 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,12 +1,18 @@
 import { h, Component } from 'preact';
 import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
+import WBInlineSearch from 'wb-inline-search';
 
 class WBBrowse extends Component {
   render({ ownerUuid }) {
     return (
       <div>
-        <WBNavbar />
+        <WBNavbar items={ [
+          { 'name': 'Browse', 'active': true },
+          { 'name': 'User', 'dropdown': [ 'Sign Off' ]}
+        ] } rhs={ (
+          <WBInlineSearch />
+        ) } />
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           ownerUuid={ ownerUuid }
diff --git a/frontend/src/js/page/wb-sign-in.js b/frontend/src/js/page/wb-sign-in.js
new file mode 100644
index 0000000..dc1706d
--- /dev/null
+++ b/frontend/src/js/page/wb-sign-in.js
@@ -0,0 +1,31 @@
+import { h, Component } from 'preact';
+import WBNavbar from 'wb-navbar';
+
+class WBLogin extends Component {
+  render() {
+    return (
+      <div>
+        <div class="container">
+          <div class="row justify-content-center">
+            <div class="col-6">
+              <h1>Sign In</h1>
+              <form>
+                <div class="form-group">
+                  <label for="arvHost">Arvados API Host</label>
+                  <input type="text" class="form-control" id="arvHost" placeholder="Enter Arvados API Host" />
+                </div>
+                <div class="form-group">
+                  <label for="arvToken">Token</label>
+                  <input type="text" class="form-control" id="arvToken" placeholder="Enter Arvados API Token" />
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBLogin;
diff --git a/frontend/src/js/widget/wb-navbar.js b/frontend/src/js/widget/wb-navbar.js
new file mode 100644
index 0000000..2ab453c
--- /dev/null
+++ b/frontend/src/js/widget/wb-navbar.js
@@ -0,0 +1,87 @@
+import { h, Component } from 'preact';
+
+class WBNavbar extends Component {
+  render({ title, items, rhs, onItemClicked }) {
+    return (
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="#">{ title }</a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav mr-auto">
+
+            { items.map(i => {
+              if (typeof(i) === 'string')
+                return (
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">{ i }</a>
+                  </li>
+                );
+
+              else if (typeof(i) === 'object')
+                var li_cls = ['nav-item'];
+                if (i['active'])
+                  li_cls.push('active');
+                var a_cls = ['nav-link'];
+                if (i['disabled'])
+                  a_cls.push('disabled');
+
+                if ('dropdown' in i) {
+                  li_cls.push('dropdown');
+                  a_cls.push('dropdown-toggle');
+
+                  li_cls = li_cls.join(' ');
+                  a_cls = a_cls.join(' ');
+
+                  return (
+                    <li class={ li_cls }>
+                      <a class={ a_cls } href="#" id={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }
+                        role="button" data-toggle="dropdown" aria-haspopup="true"
+                        aria-expanded="false">{ i['name'] }</a>
+                      <div class="dropdown-menu" aria-labelledby={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }>
+                        { i['dropdown'].map(d => {
+                          if (typeof(d) === 'string')
+                            return (
+                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
+                            );
+
+                          else if (typeof(d) === 'object' && d['divider'])
+                            return (
+                              <div class="dropdown-divider" />
+                            );
+                        }) }
+                      </div>
+                    </li>
+                  );
+                } else {
+                  li_cls = li_cls.join(' ');
+                  a_cls = a_cls.join(' ');
+
+                  return (
+                    <li class={ li_cls }>
+                      <a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
+                    </li>
+                  );
+                }
+
+            }) }
+          </ul>
+
+          { rhs }
+        </div>
+      </nav>
+    );
+  }
+}
+
+WBNavbar.defaultProps = {
+  'title': 'Workbench Advanced',
+  'items': [],
+  'form': null,
+  'onItemClicked': () => {}
+}
+
+export default WBNavbar;

From 5c30ed4766ca1b3d4a84045fef29d9459739dcf5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 12:21:45 +0100
Subject: [PATCH 011/170] Sign in/out seems to work.

---
 frontend/src/js/misc/make-arvados-request.js |  3 ++
 frontend/src/js/page/wb-app.js               | 32 +++++++++++-----
 frontend/src/js/page/wb-browse.js            |  7 ++--
 frontend/src/js/page/wb-landing-page.js      | 20 ++++++++++
 frontend/src/js/page/wb-sign-in.js           | 39 ++++++++++++++++----
 frontend/src/js/widget/wb-navbar.js          | 12 ++++--
 6 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/js/page/wb-landing-page.js

diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index dc12cc0..b9b1e74 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -2,6 +2,9 @@
 function makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
   contentType='application/json;charset=utf-8', responseType='json') {
 
+  if (!arvHost || !arvToken)
+    return new Promise((accept, reject) => reject());
+
   let xhr = new XMLHttpRequest();
   xhr.open(method, 'https://' + arvHost + endpoint);
   xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 6afce09..c0674b8 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -1,24 +1,36 @@
 import { h, Component } from 'preact';
 import { Router, route } from 'preact-router';
-import WBTabs from 'wb-tabs';
-import WBTable from 'wb-table';
-import WBPagination from 'wb-pagination';
-import WBProjectListing from 'wb-project-listing';
-import WBNavbar from 'wb-navbar';
 import WBBrowse from 'wb-browse';
 import WBSignIn from 'wb-sign-in';
+import WBLandingPage from 'wb-landing-page';
 
 class WBApp extends Component {
-  render({}, { activePage }) {
+  constructor(...args) {
+    super(...args);
+    this.state.arvHost = window.localStorage['arvHost'];
+    this.state.arvToken = window.localStorage['arvToken'];
+    this.appCallbacks = {
+      'navbarItemClicked': this.navbarItemClicked
+    };
+  }
+
+  navbarItemClicked(item) {
+    if (item['id'] === 'sign-out') {
+      delete window.localStorage['arvHost'];
+      delete window.localStorage['arvToken'];
+      delete window.localStorage['currentUser'];
+      route('/sign-in');
+    }
+  }
+
+  render({}, { activePage, arvHost, arvToken }) {
     return (
       <Router>
-        <div path="/">
-          Hello, world!
-        </div>
+        <WBLandingPage path="/" />
 
         <WBSignIn path="/sign-in" />
 
-        <WBBrowse path="/browse/:ownerUuid?" />
+        <WBBrowse path="/browse/:ownerUuid?" appCallbacks={ this.appCallbacks } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index be0cdb3..3ad52c7 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -4,15 +4,16 @@ import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 
 class WBBrowse extends Component {
-  render({ ownerUuid }) {
+  render({ ownerUuid, appCallbacks }) {
     return (
       <div>
         <WBNavbar items={ [
           { 'name': 'Browse', 'active': true },
-          { 'name': 'User', 'dropdown': [ 'Sign Off' ]}
+          { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
         ] } rhs={ (
           <WBInlineSearch />
-        ) } />
+        ) } onItemClicked={ appCallbacks.navbarItemClicked } />
+
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           ownerUuid={ ownerUuid }
diff --git a/frontend/src/js/page/wb-landing-page.js b/frontend/src/js/page/wb-landing-page.js
new file mode 100644
index 0000000..ac78ef3
--- /dev/null
+++ b/frontend/src/js/page/wb-landing-page.js
@@ -0,0 +1,20 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import { route } from 'preact-router';
+
+class WBLandingPage extends Component {
+  componentDidMount() {
+    let { arvHost, arvToken } = window.localStorage;
+    let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/users/current');
+    prom = prom.then(xhr => route('/browse/' + xhr.response['uuid']));
+    prom = prom.catch(() => route('/sign-in'));
+  }
+
+  render() {
+    return (
+      <div>Please wait...</div>
+    );
+  }
+}
+
+export default WBLandingPage;
diff --git a/frontend/src/js/page/wb-sign-in.js b/frontend/src/js/page/wb-sign-in.js
index dc1706d..a9ea513 100644
--- a/frontend/src/js/page/wb-sign-in.js
+++ b/frontend/src/js/page/wb-sign-in.js
@@ -1,24 +1,49 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
+import linkState from 'linkstate';
+import makeArvadosRequest from 'make-arvados-request';
 
-class WBLogin extends Component {
-  render() {
+class WBSignIn extends Component {
+  onSubmit() {
+    let { arvHost, arvToken } = this.state;
+    window.localStorage['arvHost'] = arvHost;
+    window.localStorage['arvToken'] = arvToken;
+    let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/users/current');
+    prom = prom.then(xhr => {
+      window.localStorage['currentUser'] = JSON.stringify(xhr.response);
+      route('/browse/' + xhr.response['uuid']);
+    });
+    prom = prom.catch(() => {
+      alert('Sign in unsuccessful. Verify your input and try again.')
+    });
+  }
+
+  render({}, { arvHost, arvToken }) {
     return (
       <div>
-        <div class="container">
+        <WBNavbar />
+        <div class="container my-3">
           <div class="row justify-content-center">
             <div class="col-6">
               <h1>Sign In</h1>
               <form>
                 <div class="form-group">
                   <label for="arvHost">Arvados API Host</label>
-                  <input type="text" class="form-control" id="arvHost" placeholder="Enter Arvados API Host" />
+                  <input type="text" class="form-control" id="arvHost"
+                    placeholder="Enter Arvados API Host"
+                    value={ arvHost }
+                    onInput={ linkState(this, 'arvHost') } />
                 </div>
                 <div class="form-group">
                   <label for="arvToken">Token</label>
-                  <input type="text" class="form-control" id="arvToken" placeholder="Enter Arvados API Token" />
+                  <input type="text" class="form-control" id="arvToken"
+                    placeholder="Enter Arvados API Token"
+                    value={ arvToken }
+                    onInput={ linkState(this, 'arvToken') } />
                 </div>
-                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="submit" class="btn btn-primary"
+                  onclick={ e => { e.preventDefault(); this.onSubmit(); } }>Submit</button>
               </form>
             </div>
           </div>
@@ -28,4 +53,4 @@ class WBLogin extends Component {
   }
 }
 
-export default WBLogin;
+export default WBSignIn;
diff --git a/frontend/src/js/widget/wb-navbar.js b/frontend/src/js/widget/wb-navbar.js
index 2ab453c..c5bbef5 100644
--- a/frontend/src/js/widget/wb-navbar.js
+++ b/frontend/src/js/widget/wb-navbar.js
@@ -1,10 +1,10 @@
 import { h, Component } from 'preact';
 
 class WBNavbar extends Component {
-  render({ title, items, rhs, onItemClicked }) {
+  render({ title, items, rhs, onItemClicked, onTitleClicked }) {
     return (
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#">{ title }</a>
+        <a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ title }</a>
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -52,6 +52,11 @@ class WBNavbar extends Component {
                             return (
                               <div class="dropdown-divider" />
                             );
+
+                          else if (typeof(d) === 'object' && d['name'])
+                            return (
+                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d['name'] }</a>
+                            );
                         }) }
                       </div>
                     </li>
@@ -81,7 +86,8 @@ WBNavbar.defaultProps = {
   'title': 'Workbench Advanced',
   'items': [],
   'form': null,
-  'onItemClicked': () => {}
+  'onItemClicked': () => {},
+  'onTitleClicked': () => {}
 }
 
 export default WBNavbar;

From 5e10d1cfbdb286f78bb1c9eb839dd80ec4be717c Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 12:59:11 +0100
Subject: [PATCH 012/170] Incorporated projects page into URL routing.

---
 .../src/js/component/wb-project-listing.js    | 23 +++++++++++++------
 frontend/src/js/page/wb-app.js                |  2 +-
 frontend/src/js/page/wb-browse.js             |  7 ++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 0f6013d..cb107d1 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
@@ -9,17 +10,19 @@ class WBProjectListing extends Component {
     super(...args);
     this.state.rows = [];
     this.state.numPages = 0;
-    this.state.activePage = 0;
   }
 
   componentDidMount() {
-    this.setActivePage(0);
+    this.fetchItems();
   }
 
   prepareRows(items) {
     return items.map(item => [
       (<div>
-        <div>{ item['name'] }</div>
+        <div>
+          <a href="#"
+            onclick={ e => { e.preventDefault(); route('/browse/' + item['uuid']) }}>{ item['name'] }</a>
+        </div>
         <div>{ item['uuid'] }</div>
       </div>),
       item['description'],
@@ -27,8 +30,8 @@ class WBProjectListing extends Component {
     ]);
   }
 
-  setActivePage(i) {
-    this.state.activePage = i;
+  fetchItems() {
+    let i = this.props.activePage;
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
@@ -45,14 +48,20 @@ class WBProjectListing extends Component {
       }));
   }
 
-  render({ arvHost, arvToken, ownerUuid }, { rows, numPages, activePage }) {
+  componentWillReceiveProps(nextProps, nextState) {
+    // this.setState({ 'rows': [] }); // .rows = [];
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ arvHost, arvToken, ownerUuid, activePage, onPageChanged }, { rows, numPages }) {
     return (
       <div>
         <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
           rows={ rows } />
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => this.setActivePage(i) } />
+          onPageChanged={ i => onPageChanged(i) } />
       </div>
     );
   }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index c0674b8..54f305e 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -30,7 +30,7 @@ class WBApp extends Component {
 
         <WBSignIn path="/sign-in" />
 
-        <WBBrowse path="/browse/:ownerUuid?" appCallbacks={ this.appCallbacks } />
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?" appCallbacks={ this.appCallbacks } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 3ad52c7..f14e59b 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,10 +1,11 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 
 class WBBrowse extends Component {
-  render({ ownerUuid, appCallbacks }) {
+  render({ ownerUuid, activePage, appCallbacks }) {
     return (
       <div>
         <WBNavbar items={ [
@@ -17,7 +18,9 @@ class WBBrowse extends Component {
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           ownerUuid={ ownerUuid }
-          itemsPerPage="5" />
+          itemsPerPage="5"
+          activePage={ Number(activePage || 0) }
+          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
       </div>
     );
   }

From 6a306e6183075b7935fdc6919eab7bea231f11bb Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 14:07:13 +0100
Subject: [PATCH 013/170] Added breadcrumbs.

---
 .../src/js/component/wb-project-crumbs.js     | 34 +++++++++++++++
 frontend/src/js/misc/fetch-project-parents.js | 43 +++++++++++++++++++
 frontend/src/js/page/wb-app.js                | 10 ++++-
 frontend/src/js/page/wb-browse.js             | 10 +++--
 frontend/src/js/widget/wb-breadcrumbs.js      | 31 +++++++++++++
 5 files changed, 123 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/js/component/wb-project-crumbs.js
 create mode 100644 frontend/src/js/misc/fetch-project-parents.js
 create mode 100644 frontend/src/js/widget/wb-breadcrumbs.js

diff --git a/frontend/src/js/component/wb-project-crumbs.js b/frontend/src/js/component/wb-project-crumbs.js
new file mode 100644
index 0000000..41a74e1
--- /dev/null
+++ b/frontend/src/js/component/wb-project-crumbs.js
@@ -0,0 +1,34 @@
+import { h, Component } from 'preact';
+import WBBreadcrumbs from 'wb-breadcrumbs';
+import fetchProjectParents from 'fetch-project-parents';
+
+class WBProjectCrumbs extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.items = [];
+  }
+
+  fetchCrumbs() {
+    let { arvHost, arvToken } = this.props.appState;
+    let prom = fetchProjectParents(arvHost, arvToken, this.props.uuid);
+    prom = prom.then(parents => this.setState({ 'items': parents }));
+  }
+
+  componentDidMount() {
+    this.fetchCrumbs();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchCrumbs();
+  }
+
+  render({ onItemClicked }, { items }) {
+    return (
+      <WBBreadcrumbs items={ items }
+        onItemClicked={ onItemClicked } />
+    );
+  }
+}
+
+export default WBProjectCrumbs;
diff --git a/frontend/src/js/misc/fetch-project-parents.js b/frontend/src/js/misc/fetch-project-parents.js
new file mode 100644
index 0000000..57127bd
--- /dev/null
+++ b/frontend/src/js/misc/fetch-project-parents.js
@@ -0,0 +1,43 @@
+import makeArvadosRequest from 'make-arvados-request';
+
+function fetchProjectParents(arvHost, arvToken, uuid) {
+  let parents = [];
+
+  let cb = xhr => {
+    let objectType = xhr.response['uuid'].split('-')[1];
+
+    if (objectType === 'tpzed') {
+      let name = xhr.response['first_name'] + ' ' + xhr.response['last_name'];
+      parents.push({ 'name': name, 'uuid': xhr.response['uuid'] });
+    } else {
+      parents.push({ 'name': xhr.response['name'],
+        'uuid': xhr.response['uuid'] });
+    }
+
+    if (!xhr.response['owner_uuid'] ||
+      xhr.response['owner_uuid'].endsWith('-tpzed-000000000000000')) {
+
+      return parents.reverse();
+    }
+
+    objectType = xhr.response['owner_uuid'].split('-')[1];
+
+    if (objectType === 'tpzed') {
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/users/' + xhr.response['owner_uuid']).then(cb);
+
+    } else {
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/groups/' + xhr.response['owner_uuid']).then(cb);
+    }
+  };
+
+  let objectType = uuid.split('-')[1];
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + (objectType === 'tpzed' ? 'users' : 'groups') + '/' + uuid);
+  prom = prom.then(cb);
+
+  return prom;
+}
+
+export default fetchProjectParents;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 54f305e..2a95d2e 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -12,6 +12,10 @@ class WBApp extends Component {
     this.appCallbacks = {
       'navbarItemClicked': this.navbarItemClicked
     };
+    this.appState = {
+      'arvHost': this.state.arvHost,
+      'arvToken': this.state.arvToken
+    };
   }
 
   navbarItemClicked(item) {
@@ -23,14 +27,16 @@ class WBApp extends Component {
     }
   }
 
-  render({}, { activePage, arvHost, arvToken }) {
+  render() {
     return (
       <Router>
         <WBLandingPage path="/" />
 
         <WBSignIn path="/sign-in" />
 
-        <WBBrowse path="/browse/:ownerUuid?/:activePage?" appCallbacks={ this.appCallbacks } />
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?"
+          appCallbacks={ this.appCallbacks }
+          appState={ this.appState } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index f14e59b..a9f754f 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -3,9 +3,10 @@ import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
+import WBProjectCrumbs from 'wb-project-crumbs';
 
 class WBBrowse extends Component {
-  render({ ownerUuid, activePage, appCallbacks }) {
+  render({ ownerUuid, activePage, appCallbacks, appState }) {
     return (
       <div>
         <WBNavbar items={ [
@@ -15,8 +16,11 @@ class WBBrowse extends Component {
           <WBInlineSearch />
         ) } onItemClicked={ appCallbacks.navbarItemClicked } />
 
-        <WBProjectListing arvHost="api.arkau.roche.com"
-          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
+        <WBProjectCrumbs uuid={ ownerUuid } appState={ appState }
+          onItemClicked={ item => route('/browse/' + item['uuid']) } />
+
+        <WBProjectListing arvHost={ appState.arvHost }
+          arvToken={ appState.arvToken }
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
diff --git a/frontend/src/js/widget/wb-breadcrumbs.js b/frontend/src/js/widget/wb-breadcrumbs.js
new file mode 100644
index 0000000..a1b6af5
--- /dev/null
+++ b/frontend/src/js/widget/wb-breadcrumbs.js
@@ -0,0 +1,31 @@
+import { h, Component } from 'preact';
+
+class WBBreadcrumbs extends Component {
+  render({ items, onItemClicked }) {
+    return (
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          { items.map((item, idx) => (
+            <li class={ 'breadcrumb-item' +
+              (idx == items.length - 1 ? ' active' : '') }>
+              {
+                (idx < items.length - 1) ? (
+                  <a href="#" onclick={ e => { e.preventDefault();
+                    onItemClicked(item); } }>{ typeof(item) === 'string' ? item : item['name'] }</a>
+                ) : (
+                  typeof(item) === 'string' ? item : item['name']
+                )
+              }
+            </li>
+          )) }
+        </ol>
+      </nav>
+    );
+  }
+}
+
+WBBreadcrumbs.defaultProps = {
+  'onItemClicked': () => {}
+}
+
+export default WBBreadcrumbs;

From a7c041799bba1f4e7a2156f65514516b643c0e41 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 14:24:01 +0100
Subject: [PATCH 014/170] Some improvements to navigation.

---
 frontend/src/js/component/wb-project-crumbs.js |  7 ++++++-
 frontend/src/js/page/wb-app.js                 | 15 ++++++++++++---
 frontend/src/js/page/wb-browse.js              |  3 ++-
 frontend/src/js/page/wb-sign-in.js             |  8 ++++++--
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/js/component/wb-project-crumbs.js b/frontend/src/js/component/wb-project-crumbs.js
index 41a74e1..d1c4652 100644
--- a/frontend/src/js/component/wb-project-crumbs.js
+++ b/frontend/src/js/component/wb-project-crumbs.js
@@ -5,10 +5,15 @@ import fetchProjectParents from 'fetch-project-parents';
 class WBProjectCrumbs extends Component {
   constructor(...args) {
     super(...args);
-    this.state.items = [];
+    this.state.items = [ { 'name': 'All Projects' } ];
   }
 
   fetchCrumbs() {
+    if (!this.props.uuid) {
+      this.setState({ 'items': [ { 'name': 'All Projects' } ] });
+      return;
+    }
+
     let { arvHost, arvToken } = this.props.appState;
     let prom = fetchProjectParents(arvHost, arvToken, this.props.uuid);
     prom = prom.then(parents => this.setState({ 'items': parents }));
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 2a95d2e..85c1138 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -9,12 +9,14 @@ class WBApp extends Component {
     super(...args);
     this.state.arvHost = window.localStorage['arvHost'];
     this.state.arvToken = window.localStorage['arvToken'];
+    this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
     this.appCallbacks = {
-      'navbarItemClicked': this.navbarItemClicked
+      'navbarItemClicked': item => this.navbarItemClicked(item)
     };
     this.appState = {
       'arvHost': this.state.arvHost,
-      'arvToken': this.state.arvToken
+      'arvToken': this.state.arvToken,
+      'currentUser': this.state.currentUser
     };
   }
 
@@ -24,6 +26,13 @@ class WBApp extends Component {
       delete window.localStorage['arvToken'];
       delete window.localStorage['currentUser'];
       route('/sign-in');
+
+    } else if (item['id'] === 'home') {
+      route('/browse/' + this.appState.currentUser.uuid);
+
+    } else if (item['id'] === 'all-projects') {
+      route('/browse');
+
     }
   }
 
@@ -32,7 +41,7 @@ class WBApp extends Component {
       <Router>
         <WBLandingPage path="/" />
 
-        <WBSignIn path="/sign-in" />
+        <WBSignIn path="/sign-in" appState={ this.appState } />
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?"
           appCallbacks={ this.appCallbacks }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index a9f754f..1360613 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -10,7 +10,8 @@ class WBBrowse extends Component {
     return (
       <div>
         <WBNavbar items={ [
-          { 'name': 'Browse', 'active': true },
+          { 'name': 'Home', 'id': 'home', 'active': (ownerUuid === appState.currentUser.uuid) },
+          { 'name': 'All Projects', 'id': 'all-projects', 'active': (!ownerUuid) },
           { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
         ] } rhs={ (
           <WBInlineSearch />
diff --git a/frontend/src/js/page/wb-sign-in.js b/frontend/src/js/page/wb-sign-in.js
index a9ea513..cacc7f4 100644
--- a/frontend/src/js/page/wb-sign-in.js
+++ b/frontend/src/js/page/wb-sign-in.js
@@ -6,12 +6,16 @@ import makeArvadosRequest from 'make-arvados-request';
 
 class WBSignIn extends Component {
   onSubmit() {
+    let { appState } = this.props;
     let { arvHost, arvToken } = this.state;
-    window.localStorage['arvHost'] = arvHost;
-    window.localStorage['arvToken'] = arvToken;
     let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/users/current');
     prom = prom.then(xhr => {
+      window.localStorage['arvHost'] = arvHost;
+      window.localStorage['arvToken'] = arvToken;
       window.localStorage['currentUser'] = JSON.stringify(xhr.response);
+      appState.arvHost = arvHost;
+      appState.arvToken = arvToken;
+      appState.currentUser = xhr.response;
       route('/browse/' + xhr.response['uuid']);
     });
     prom = prom.catch(() => {

From d879964fdcff2c9283197906bb2e24bc5f5ed386 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 16:21:06 +0100
Subject: [PATCH 015/170] Object type tabs mockup.

---
 frontend/src/js/page/wb-browse.js | 5 +++++
 frontend/src/js/widget/wb-tabs.js | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 1360613..9d010b7 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -4,6 +4,7 @@ import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 import WBProjectCrumbs from 'wb-project-crumbs';
+import WBTabs from 'wb-tabs';
 
 class WBBrowse extends Component {
   render({ ownerUuid, activePage, appCallbacks, appState }) {
@@ -20,12 +21,16 @@ class WBBrowse extends Component {
         <WBProjectCrumbs uuid={ ownerUuid } appState={ appState }
           onItemClicked={ item => route('/browse/' + item['uuid']) } />
 
+        <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />
+
         <WBProjectListing arvHost={ appState.arvHost }
           arvToken={ appState.arvToken }
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
           onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
+
+        <WBTabs tabs={ [ { 'name': 'Collections', 'isActive': true }, 'Processes', 'Workflows' ] } />
       </div>
     );
   }
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 61c711b..140b6b7 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -30,4 +30,8 @@ class WBTabs extends Component {
   }
 }
 
+WBTabs.defaultProps = {
+  'onTabChanged': () => {}
+};
+
 export default WBTabs;

From 5e94a2581618f69be2c2279ef0b27828e4ec76f8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 18:10:54 +0100
Subject: [PATCH 016/170] Filtering by container_request state.

---
 .../src/js/component/wb-process-listing.js    | 97 +++++++++++++++++++
 frontend/src/js/page/wb-app.js                |  5 +-
 frontend/src/js/page/wb-browse.js             | 35 ++++++-
 frontend/src/js/widget/wb-checkboxes.js       | 30 ++++++
 frontend/src/js/widget/wb-tabs.js             |  2 +-
 5 files changed, 164 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/js/component/wb-process-listing.js
 create mode 100644 frontend/src/js/widget/wb-checkboxes.js

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
new file mode 100644
index 0000000..2d1021c
--- /dev/null
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+import { route } from 'preact-router';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import WBCheckboxes from 'wb-checkboxes';
+
+class WBProcessListing extends Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+    this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
+    this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
+    this.state.reqStateMask = [ true, true, true ];
+    this.state.contStateMask = [ true, true, true, true, true ];
+  }
+
+  componentDidMount() {
+    this.fetchItems();
+  }
+
+  prepareRows(items) {
+    return items.map(item => [
+      (<div>
+        <div>
+          <a href="#"
+            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>{ item['name'] }</a>
+        </div>
+        <div>{ item['uuid'] }</div>
+      </div>),
+      item['state'],
+      item['owner_uuid'],
+      item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
+      item['output_uuid'],
+      (<div>
+        <button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
+      </div>)
+    ]);
+  }
+
+  fetchItems() {
+    let { arvHost, arvToken } = this.props.appState;
+    let i = this.props.activePage;
+    let filters = [
+      [ 'state', 'in', this.state.requestStates.filter((_, idx) => this.state.reqStateMask[idx]) ]
+    ];
+    if (this.props.ownerUuid)
+      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
+      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    prom = prom.then(xhr =>
+      this.setState({
+        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+        'rows': this.prepareRows(xhr.response['items'])
+      }));
+  }
+
+  componentWillReceiveProps(nextProps, nextState) {
+    // this.setState({ 'rows': [] }); // .rows = [];
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ appState, ownerUuid, activePage, onPageChanged },
+    { rows, numPages, requestStates, containerStates,
+      reqStateMask, contStateMask }) {
+
+    return (
+      <div>
+        <WBCheckboxes items={ requestStates } checked={ reqStateMask }
+          cssClass="float-left mx-2 my-2" title="Request State: "
+          onChange={ () => this.fetchItems() } />
+        <WBCheckboxes items={ containerStates } checked={ contStateMask }
+          cssClass="float-left mx-2 my-2" title="Container State: "
+          onChange={ () => this.fetchItems() } />
+
+        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At (UTC)', 'Output', 'Actions' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages }
+          activePage={ activePage }
+          onPageChanged={ i => onPageChanged(i) } />
+      </div>
+    );
+  }
+}
+
+WBProcessListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBProcessListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 85c1138..6ebb0b6 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -9,7 +9,8 @@ class WBApp extends Component {
     super(...args);
     this.state.arvHost = window.localStorage['arvHost'];
     this.state.arvToken = window.localStorage['arvToken'];
-    this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
+    if ('currentUser' in window.localStorage)
+      this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
     this.appCallbacks = {
       'navbarItemClicked': item => this.navbarItemClicked(item)
     };
@@ -43,7 +44,7 @@ class WBApp extends Component {
 
         <WBSignIn path="/sign-in" appState={ this.appState } />
 
-        <WBBrowse path="/browse/:ownerUuid?/:activePage?"
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
           appCallbacks={ this.appCallbacks }
           appState={ this.appState } />
       </Router>
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 9d010b7..6e78c35 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -5,9 +5,22 @@ import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 import WBProjectCrumbs from 'wb-project-crumbs';
 import WBTabs from 'wb-tabs';
+import WBProcessListing from 'wb-process-listing';
 
 class WBBrowse extends Component {
-  render({ ownerUuid, activePage, appCallbacks, appState }) {
+  route(params) {
+    route('/browse/' +
+      ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
+      ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
+      ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
+      ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
+      ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
+      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')));
+  }
+
+  render({ ownerUuid, activePage, appCallbacks, appState,
+    objTypeTab, collectionPage, processPage, workflowPage }) {
+
     return (
       <div>
         <WBNavbar items={ [
@@ -30,7 +43,25 @@ class WBBrowse extends Component {
           activePage={ Number(activePage || 0) }
           onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
 
-        <WBTabs tabs={ [ { 'name': 'Collections', 'isActive': true }, 'Processes', 'Workflows' ] } />
+        <WBTabs tabs={ [
+          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
+          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
+          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
+          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+
+        {
+          (!objTypeTab || objTypeTab === 'collection') ? (
+            null
+          ) : (objTypeTab === 'process' ? (
+            <WBProcessListing appState={ appState }
+              ownerUuid={ ownerUuid }
+              itemsPerPage="20"
+              activePage={ Number(processPage || 0) }
+              onPageChanged={ i => this.route({ 'processPage': i }) } />
+          ) : (objTypeTab === 'workflow' ? (
+            null
+          ) : null))
+        }
       </div>
     );
   }
diff --git a/frontend/src/js/widget/wb-checkboxes.js b/frontend/src/js/widget/wb-checkboxes.js
new file mode 100644
index 0000000..48792ab
--- /dev/null
+++ b/frontend/src/js/widget/wb-checkboxes.js
@@ -0,0 +1,30 @@
+import { h, Component } from 'preact';
+
+class WBCheckboxes extends Component {
+  render({ items, checked, onChange, cssClass, title }) {
+    return (
+      <div class={ 'btn-group-toggle' + (cssClass ? ' ' + cssClass : '') } data-toggle="buttons">
+        { title }
+        {
+          items.map((name, idx) => (
+            <label class={ 'btn btn-outline-primary' + (checked[idx] ? ' active' : '') }
+              onclick={ e => { e.preventDefault();
+                checked[idx] = !checked[idx];
+                this.setState({});
+                onChange(); } }>
+              <input type="checkbox" checked={ checked[idx] ? 'checked' : null }
+                autocomplete="off" /> { name }
+            </label>
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+WBCheckboxes.defaultProps = {
+  'checked': [],
+  'onChange': () => {}
+}
+
+export default WBCheckboxes;
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 140b6b7..4427df6 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -21,7 +21,7 @@ class WBTabs extends Component {
           cls = cls.join(' ');
           return (
             <li class="nav-item">
-              <a class={ cls } href="#" onclick={ () => onTabChanged(idx) }>{ name }</a>
+              <a class={ cls } href="#" onclick={ e => { e.preventDefault(); onTabChanged(t); } }>{ name }</a>
             </li>
           );
         }) }

From a369d1e02e6d23f8abd2cd4b0fa5410621b3e7bd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 1 Feb 2020 14:51:04 +0100
Subject: [PATCH 017/170] Started implementing process view.

---
 .../src/js/component/wb-arvados-crumbs.js     | 39 +++++++++++++++
 frontend/src/js/component/wb-navbar-common.js | 24 +++++++++
 frontend/src/js/misc/arvados-type-name.js     | 13 +++++
 frontend/src/js/misc/fetch-object-parents.js  | 49 +++++++++++++++++++
 frontend/src/js/page/wb-app.js                | 14 ++++++
 frontend/src/js/page/wb-process-view.js       | 19 +++++++
 frontend/src/js/widget/wb-navbar.js           |  7 +--
 7 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/js/component/wb-arvados-crumbs.js
 create mode 100644 frontend/src/js/component/wb-navbar-common.js
 create mode 100644 frontend/src/js/misc/arvados-type-name.js
 create mode 100644 frontend/src/js/misc/fetch-object-parents.js
 create mode 100644 frontend/src/js/page/wb-process-view.js

diff --git a/frontend/src/js/component/wb-arvados-crumbs.js b/frontend/src/js/component/wb-arvados-crumbs.js
new file mode 100644
index 0000000..f4612f1
--- /dev/null
+++ b/frontend/src/js/component/wb-arvados-crumbs.js
@@ -0,0 +1,39 @@
+import { h, Component } from 'preact';
+import WBBreadcrumbs from 'wb-breadcrumbs';
+import fetchObjectParents from 'fetch-object-parents';
+
+class WBArvadosCrumbs extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.items = [ { 'name': 'All Projects' } ];
+  }
+
+  fetchCrumbs() {
+    if (!this.props.uuid) {
+      this.setState({ 'items': [ { 'name': 'All Projects' } ] });
+      return;
+    }
+
+    let { arvHost, arvToken } = this.props.app.state;
+    let prom = fetchObjectParents(arvHost, arvToken, this.props.uuid);
+    prom = prom.then(parents => this.setState({ 'items': parents }));
+  }
+
+  componentDidMount() {
+    this.fetchCrumbs();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchCrumbs();
+  }
+
+  render({ app }, { items }) {
+    return (
+      <WBBreadcrumbs items={ items }
+        onItemClicked={ item => app.breadcrumbClicked(item) } />
+    );
+  }
+}
+
+export default WBArvadosCrumbs;
diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
new file mode 100644
index 0000000..f07610d
--- /dev/null
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -0,0 +1,24 @@
+import { h, Component } from 'preact';
+import WBNavbar from 'wb-navbar';
+import WBInlineSearch from 'wb-inline-search';
+
+class WBNavbarCommon extends Component {
+  render({ app, items, activeItem }) {
+    return (
+      <WBNavbar items={ [
+        { 'name': 'Home', 'id': 'home' },
+        { 'name': 'All Projects', 'id': 'all-projects' },
+        { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+      ].concat(items) } rhs={ (
+        <WBInlineSearch />
+      ) } onItemClicked={ item => app.navbarItemClicked(item) }
+      activeItem={ activeItem } />
+    );
+  }
+}
+
+WBNavbarCommon.defaultProps = {
+  'items': []
+};
+
+export default WBNavbarCommon;
diff --git a/frontend/src/js/misc/arvados-type-name.js b/frontend/src/js/misc/arvados-type-name.js
new file mode 100644
index 0000000..59c486c
--- /dev/null
+++ b/frontend/src/js/misc/arvados-type-name.js
@@ -0,0 +1,13 @@
+const typeIdToName = {
+  'tpzed': 'user',
+  'j7d0g': 'group',
+  'xvhdp': 'container_request',
+  'dz642': 'container',
+  '7fd4e': 'workflow'
+};
+
+function arvadosTypeName(id) {
+  return typeIdToName[id];
+}
+
+export default arvadosTypeName;
diff --git a/frontend/src/js/misc/fetch-object-parents.js b/frontend/src/js/misc/fetch-object-parents.js
new file mode 100644
index 0000000..65a06fe
--- /dev/null
+++ b/frontend/src/js/misc/fetch-object-parents.js
@@ -0,0 +1,49 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function fetchObjectParents(arvHost, arvToken, uuid) {
+  let parents = [];
+
+  let cb = xhr => {
+    let objectType = arvadosTypeName(xhr.response['uuid'].split('-')[1]);
+
+    let item = {
+      'uuid': xhr.response['uuid']
+    };
+
+    if (objectType === 'user') {
+      item['name'] = xhr.response['first_name'] + ' ' + xhr.response['last_name'];
+
+    } else {
+      item['name'] = xhr.response['name'];
+    }
+
+    if (objectType === 'group') {
+      item['group_class'] = xhr.response['group_class'];
+    }
+
+    parents.push(item);
+
+    if (!xhr.response['owner_uuid'] ||
+      xhr.response['owner_uuid'].endsWith('-tpzed-000000000000000')) {
+
+      return parents.reverse();
+    }
+
+    objectType = arvadosTypeName(xhr.response['owner_uuid'].split('-')[1]);
+
+    return makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + objectType + 's' +
+      '/' + xhr.response['owner_uuid']).then(cb);
+  };
+
+  let objectType = arvadosTypeName(uuid.split('-')[1]);
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + objectType + 's' +
+    '/' + uuid);
+  prom = prom.then(cb);
+
+  return prom;
+}
+
+export default fetchObjectParents;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 6ebb0b6..e4a71e7 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -3,6 +3,8 @@ import { Router, route } from 'preact-router';
 import WBBrowse from 'wb-browse';
 import WBSignIn from 'wb-sign-in';
 import WBLandingPage from 'wb-landing-page';
+import WBProcessView from 'wb-process-view';
+import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
   constructor(...args) {
@@ -37,6 +39,16 @@ class WBApp extends Component {
     }
   }
 
+  breadcrumbClicked(item) {
+    let objectType = arvadosTypeName(item.uuid.split('-')[1]);
+    if (objectType === 'user')
+      route('/browse/' + item.uuid)
+    else if (objectType === 'group' && item.group_class === 'project')
+      route('/browse/' + item.uuid);
+    else if (objectType === 'container_request')
+      route('/process/' + item.uuid)
+  }
+
   render() {
     return (
       <Router>
@@ -47,6 +59,8 @@ class WBApp extends Component {
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
           appCallbacks={ this.appCallbacks }
           appState={ this.appState } />
+
+        <WBProcessView path="/process/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
new file mode 100644
index 0000000..655b11e
--- /dev/null
+++ b/frontend/src/js/page/wb-process-view.js
@@ -0,0 +1,19 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+
+class WBProcessView extends Component {
+  render({ app, uuid }) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">This is the process view for { uuid }</div>
+      </div>
+    );
+  }
+}
+
+export default WBProcessView;
diff --git a/frontend/src/js/widget/wb-navbar.js b/frontend/src/js/widget/wb-navbar.js
index c5bbef5..b44686f 100644
--- a/frontend/src/js/widget/wb-navbar.js
+++ b/frontend/src/js/widget/wb-navbar.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 class WBNavbar extends Component {
-  render({ title, items, rhs, onItemClicked, onTitleClicked }) {
+  render({ title, items, rhs, onItemClicked, onTitleClicked, activeItem }) {
     return (
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ title }</a>
@@ -23,7 +23,7 @@ class WBNavbar extends Component {
 
               else if (typeof(i) === 'object')
                 var li_cls = ['nav-item'];
-                if (i['active'])
+                if (i['active'] || activeItem === i['id'])
                   li_cls.push('active');
                 var a_cls = ['nav-link'];
                 if (i['disabled'])
@@ -87,7 +87,8 @@ WBNavbar.defaultProps = {
   'items': [],
   'form': null,
   'onItemClicked': () => {},
-  'onTitleClicked': () => {}
+  'onTitleClicked': () => {},
+  'activeItem': null
 }
 
 export default WBNavbar;

From 429223bb67a95006d829a9b3f5f5125370dc71b4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 1 Feb 2020 17:33:43 +0100
Subject: [PATCH 018/170] Added UUID detection.

---
 frontend/src/js/misc/arvados-type-name.js |  4 +-
 frontend/src/js/misc/detect-uuids.js      | 27 +++++++++
 frontend/src/js/misc/url-for-object.js    | 19 +++++++
 frontend/src/js/page/wb-process-view.js   | 69 ++++++++++++++++++++++-
 4 files changed, 116 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/js/misc/detect-uuids.js
 create mode 100644 frontend/src/js/misc/url-for-object.js

diff --git a/frontend/src/js/misc/arvados-type-name.js b/frontend/src/js/misc/arvados-type-name.js
index 59c486c..e30f741 100644
--- a/frontend/src/js/misc/arvados-type-name.js
+++ b/frontend/src/js/misc/arvados-type-name.js
@@ -3,7 +3,9 @@ const typeIdToName = {
   'j7d0g': 'group',
   'xvhdp': 'container_request',
   'dz642': 'container',
-  '7fd4e': 'workflow'
+  '7fd4e': 'workflow',
+  'ozdt8': 'api_client',
+  '4zz18': 'collection'
 };
 
 function arvadosTypeName(id) {
diff --git a/frontend/src/js/misc/detect-uuids.js b/frontend/src/js/misc/detect-uuids.js
new file mode 100644
index 0000000..3b72248
--- /dev/null
+++ b/frontend/src/js/misc/detect-uuids.js
@@ -0,0 +1,27 @@
+function detectUuids(obj) {
+  let Q = [ obj ];
+  let matches = {};
+
+  while (Q.length > 0) {
+    let item = Q.pop();
+
+    if (!item)
+      continue;
+      
+    if (typeof(item) === 'string') {
+      // use regexes
+      let rx = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/g;
+      for (let m = rx.exec(item); m; m = rx.exec(item))
+        matches[m[0]] = true;
+
+    } else if (typeof(item) === 'object') {
+      Object.keys(item).map(k => Q.push(item[k]));
+    }
+  }
+
+  matches = Object.keys(matches);
+
+  return matches;
+}
+
+export default detectUuids;
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
new file mode 100644
index 0000000..b2258e7
--- /dev/null
+++ b/frontend/src/js/misc/url-for-object.js
@@ -0,0 +1,19 @@
+import arvadosTypeName from 'arvados-type-name';
+
+function urlForObject(item) {
+  let objectType = arvadosTypeName(item.uuid.split('-')[1]);
+  if (objectType === 'user')
+    return ('/browse/' + item.uuid);
+  else if (objectType === 'group' && item.group_class === 'project')
+    return ('/browse/' + item.uuid);
+  else if (objectType === 'container_request')
+    return ('/process/' + item.uuid);
+  else if (objectType === 'workflow')
+    return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
+  else if (objectType === 'collection')
+    return ('https://wb.arkau.roche.com/collections/' + item.uuid);
+  else if (objectType === 'container')
+    return ('https://wb.arkau.roche.com/containers/' + item.uuid);
+}
+
+export default urlForObject;
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 655b11e..8e05b3c 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -1,16 +1,81 @@
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import makeArvadosRequest from 'make-arvados-request';
+import detectUuids from 'detect-uuids';
+import arvadosTypeName from 'arvados-type-name';
+import urlForObject from 'url-for-object';
 
 class WBProcessView extends Component {
-  render({ app, uuid }) {
+  constructor(...args) {
+    super(...args);
+    this.state.objectUrls = [];
+  }
+
+  componentDidMount() {
+    let { arvHost, arvToken } = this.props.app.state;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests/' + this.props.uuid);
+    let req;
+    let cont;
+    prom = prom.then(xhr => {
+      req = xhr.response;
+      if (req.container_uuid) {
+        let prom_1 = makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/containers/' + req.container_uuid);
+        prom_1 = prom_1.then(xhr => (cont = xhr.response));
+        return prom_1;
+      }
+    });
+    //prom = prom.then(xhr => (cont = xhr.response));
+    prom = prom.then(() => {
+      let uuids = detectUuids([ req, cont ]);
+      let objectTypes = uuids.map(u => arvadosTypeName(u.split('-')[1]) + 's');
+      let objQueries = {};
+      objectTypes.map(t => (objQueries[t] = []));
+      uuids.map((u, idx) => (objQueries[objectTypes[idx]].push(u)));
+      let prom_1 = new Promise(accept => accept());
+      let objects = [];
+      // delete objQueries['users'];
+      delete objQueries['api_clients'];
+      for (let k in objQueries) {
+        let filters = [
+          ['uuid', 'in', objQueries[k]]
+        ];
+        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/' + k + '?filters=' +
+          encodeURIComponent(JSON.stringify(filters))));
+        prom_1 = prom_1.then(xhr => (objects = objects.concat(xhr.response['items'])));
+      }
+      prom_1 = prom_1.then(() => objects);
+      return prom_1;
+    });
+    prom = prom.then(objects => {
+      let objDict = {};
+      objects.map(o => (objDict[o['uuid']] = o));
+      let urls = objects.map(o => urlForObject(o));
+      this.setState({ 'objectUrls': urls });
+    });
+  }
+
+  render({ app, uuid }, { objectUrls }) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
 
         <WBArvadosCrumbs app={ app } uuid={ uuid } />
 
-        <div class="my-2">This is the process view for { uuid }</div>
+        <div class="my-2">
+          This is the process view for { uuid }
+        </div>
+        <div>
+          <a href="/browse">Click here</a>
+        </div>
+        <ul>
+          { objectUrls.map(url => (
+            <li><a href={ url }>{ url }</a></li>
+          )) }
+        </ul>
       </div>
     );
   }

From 9f18e6035877c5123a414e9248de7a67e7fa25c0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 1 Feb 2020 17:59:49 +0100
Subject: [PATCH 019/170] Added portable data hash detection.

---
 frontend/src/js/misc/detect-hashes.js   | 27 +++++++++++++++++++++++++
 frontend/src/js/page/wb-process-view.js | 18 +++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 frontend/src/js/misc/detect-hashes.js

diff --git a/frontend/src/js/misc/detect-hashes.js b/frontend/src/js/misc/detect-hashes.js
new file mode 100644
index 0000000..cffce2e
--- /dev/null
+++ b/frontend/src/js/misc/detect-hashes.js
@@ -0,0 +1,27 @@
+function detectHashes(obj) {
+  let Q = [ obj ];
+  let matches = {};
+
+  while (Q.length > 0) {
+    let item = Q.pop();
+
+    if (!item)
+      continue;
+
+    if (typeof(item) === 'string') {
+      // use regexes
+      let rx = /[a-f0-9]{32}\+[0-9]+/g;
+      for (let m = rx.exec(item); m; m = rx.exec(item))
+        matches[m[0]] = true;
+
+    } else if (typeof(item) === 'object') {
+      Object.keys(item).map(k => Q.push(item[k]));
+    }
+  }
+
+  matches = Object.keys(matches);
+
+  return matches;
+}
+
+export default detectHashes;
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 8e05b3c..456f722 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -5,6 +5,7 @@ import makeArvadosRequest from 'make-arvados-request';
 import detectUuids from 'detect-uuids';
 import arvadosTypeName from 'arvados-type-name';
 import urlForObject from 'url-for-object';
+import detectHashes from 'detect-hashes';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -29,7 +30,24 @@ class WBProcessView extends Component {
     });
     //prom = prom.then(xhr => (cont = xhr.response));
     prom = prom.then(() => {
+      let hashes = detectHashes([ req, cont ]);
+      let filters = [
+        [ 'portable_data_hash', 'in', hashes ]
+      ];
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/collections?filters=' +
+        encodeURIComponent(JSON.stringify(filters)));
+    });
+    prom = prom.then(xhr => {
+      let colUuids = xhr.response['items'].map(item => item.uuid);
       let uuids = detectUuids([ req, cont ]);
+      let dict = {};
+      colUuids.map(u => (dict[u] = true));
+      uuids.map(u => (dict[u] = true));
+      return Object.keys(dict);
+    });
+    prom = prom.then(uuids => {
+      // let uuids = detectUuids([ req, cont ]);
       let objectTypes = uuids.map(u => arvadosTypeName(u.split('-')[1]) + 's');
       let objQueries = {};
       objectTypes.map(t => (objQueries[t] = []));

From 0b1afd95de9a6deaea68abc4c0adb02283512d72 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 11:11:43 +0100
Subject: [PATCH 020/170] Added WBCommonFields.

---
 frontend/src/js/component/wb-common-fields.js | 92 +++++++++++++++++++
 frontend/src/js/misc/arvados-object-name.js   | 11 +++
 frontend/src/js/misc/arvados-type-name.js     |  5 +-
 frontend/src/js/misc/wb-format-date.js        |  6 ++
 frontend/src/js/page/wb-process-view.js       |  4 +
 5 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-common-fields.js
 create mode 100644 frontend/src/js/misc/arvados-object-name.js
 create mode 100644 frontend/src/js/misc/wb-format-date.js

diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
new file mode 100644
index 0000000..2fd1223
--- /dev/null
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -0,0 +1,92 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+
+class WBCommonFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    // this.setState({ 'rows': null });
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let owner;
+    let modifiedByUser;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + arvadosTypeName(uuid) +
+      's/' + uuid);
+
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + arvadosTypeName(item.owner_uuid) +
+      's/' + item.owner_uuid));
+
+    prom = prom.then(xhr => (owner = xhr.response));
+
+    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users/' + item.modified_by_user_uuid));
+
+    prom = prom.then(xhr => (modifiedByUser = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'UUID', item.uuid ],
+        [ 'Kind', item.kind ],
+        [ 'Owner', (
+          <div>
+            <div>
+              <a href={ urlForObject(owner) }>{ arvadosObjectName(owner) }</a>
+            </div>
+            <div>
+              { item.owner_uuid }
+            </div>
+          </div>
+        ) ],
+        [ 'Created at', wbFormatDate(item.created_at) ],
+        [ 'Modified at', wbFormatDate(item.modified_at) ],
+        [ 'Modified by User', (
+          <div>
+            <div>
+              <a href={ urlForObject(modifiedByUser) }>{ arvadosObjectName(modifiedByUser) }</a>
+            </div>
+            <div>
+              { item.modified_by_user_uuid }
+            </div>
+          </div>
+        ) ],
+        [ 'Modified by Client', item.modified_by_client_uuid ],
+        [ 'API Url', 'https://' + app.state.arvHost + '/arvados/v1' + item.href ],
+        [ 'ETag', item.etag ]
+      ];
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      <div>
+        <h1>Common Fields</h1>
+        { rows ? (
+          <WBTable columns={ [ "Name", "Value" ] }
+            rows={ rows } />
+        ) : <div>Loading...</div> }
+      </div>
+    );
+  }
+}
+
+export default WBCommonFields;
diff --git a/frontend/src/js/misc/arvados-object-name.js b/frontend/src/js/misc/arvados-object-name.js
new file mode 100644
index 0000000..ba670ec
--- /dev/null
+++ b/frontend/src/js/misc/arvados-object-name.js
@@ -0,0 +1,11 @@
+import arvadosTypeName from 'arvados-type-name';
+
+function arvadosObjectName(item) {
+  let typeName = arvadosTypeName(item['uuid']);
+  if (typeName === 'user')
+    return (item.first_name + ' ' + item.last_name);
+  else
+    return item.name;
+}
+
+export default arvadosObjectName;
diff --git a/frontend/src/js/misc/arvados-type-name.js b/frontend/src/js/misc/arvados-type-name.js
index e30f741..af77515 100644
--- a/frontend/src/js/misc/arvados-type-name.js
+++ b/frontend/src/js/misc/arvados-type-name.js
@@ -9,7 +9,10 @@ const typeIdToName = {
 };
 
 function arvadosTypeName(id) {
-  return typeIdToName[id];
+  if (id.length === 5)
+    return typeIdToName[id];
+  else
+    return typeIdToName[id.split('-')[1]];
 }
 
 export default arvadosTypeName;
diff --git a/frontend/src/js/misc/wb-format-date.js b/frontend/src/js/misc/wb-format-date.js
new file mode 100644
index 0000000..5ef86a9
--- /dev/null
+++ b/frontend/src/js/misc/wb-format-date.js
@@ -0,0 +1,6 @@
+function wbFormatDate(dateStr) {
+  let date = new Date(dateStr);
+  return date.toLocaleString();
+}
+
+export default wbFormatDate;
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 456f722..1c65a80 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -6,6 +6,7 @@ import detectUuids from 'detect-uuids';
 import arvadosTypeName from 'arvados-type-name';
 import urlForObject from 'url-for-object';
 import detectHashes from 'detect-hashes';
+import WBCommonFields from 'wb-common-fields';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -86,6 +87,9 @@ class WBProcessView extends Component {
         <div class="my-2">
           This is the process view for { uuid }
         </div>
+
+        <WBCommonFields app={ app } uuid={ uuid } />
+
         <div>
           <a href="/browse">Click here</a>
         </div>

From c8051471747e8c8e73384d6cfffd91f845906b38 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 13:58:05 +0100
Subject: [PATCH 021/170] Added WBContainerRequestFields.

---
 frontend/package.json                         |   1 +
 frontend/rollup.config.js                     |   1 +
 frontend/src/css/index.css                    |   7 +
 frontend/src/html/index.html                  |   2 +
 frontend/src/js/component/wb-common-fields.js |  19 +--
 .../component/wb-container-request-fields.js  | 124 ++++++++++++++++++
 frontend/src/js/component/wb-name-and-uuid.js |  78 +++++++++++
 frontend/src/js/misc/arvados-object-name.js   |   2 +
 frontend/src/js/misc/arvados-type-name.js     |   3 +
 frontend/src/js/page/wb-process-view.js       |   5 +
 frontend/src/js/widget/wb-accordion.js        |  40 ++++++
 frontend/src/js/widget/wb-table.js            |   8 +-
 12 files changed, 280 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/js/component/wb-container-request-fields.js
 create mode 100644 frontend/src/js/component/wb-name-and-uuid.js
 create mode 100644 frontend/src/js/widget/wb-accordion.js

diff --git a/frontend/package.json b/frontend/package.json
index 86ac08b..4abf4ac 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,7 @@
     "@fortawesome/fontawesome-free": "^5.12.0",
     "bootstrap": "^4.4.1",
     "jquery": "^3.4.1",
+    "js-uuid": "0.0.6",
     "linkstate": "^1.1.1",
     "popper.js": "^1.16.1",
     "preact": "^8.2.9",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index b1c184b..b250a14 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -41,6 +41,7 @@ export default {
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf': 'dist/webfonts/fa-brands-400.ttf',
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff': 'dist/webfonts/fa-brands-400.woff',
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2',
+      'node_modules/js-uuid/js-uuid.js': 'dist/js/js-uuid.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index e69de29..f0cac02 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -0,0 +1,7 @@
+pre.word-wrap {
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 8f02e32..79f83d9 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -3,9 +3,11 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
+    <link rel="stylesheet" type="text/css" href="/css/index.css" />
     <script language="javascript" src="/js/jquery.min.js"></script>
     <script language="javascript" src="/js/bootstrap.min.js"></script>
     <script language="javascript" src="/js/fontawesome.min.js"></script>
+    <script language="javascript" src="/js/js-uuid.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index 2fd1223..54a6486 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -69,7 +69,11 @@ class WBCommonFields extends Component {
           </div>
         ) ],
         [ 'Modified by Client', item.modified_by_client_uuid ],
-        [ 'API Url', 'https://' + app.state.arvHost + '/arvados/v1' + item.href ],
+        [ 'API Url', (
+          <a href={ 'https://' + app.state.arvHost + '/arvados/v1' + item.href }>
+            { 'https://' + app.state.arvHost + '/arvados/v1' + item.href }
+          </a>
+        ) ],
         [ 'ETag', item.etag ]
       ];
       this.setState({ 'rows': rows });
@@ -78,13 +82,12 @@ class WBCommonFields extends Component {
 
   render({}, { rows }) {
     return (
-      <div>
-        <h1>Common Fields</h1>
-        { rows ? (
-          <WBTable columns={ [ "Name", "Value" ] }
-            rows={ rows } />
-        ) : <div>Loading...</div> }
-      </div>
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          rows={ rows } />
+      ) : (
+        <div>Loading...</div>
+      )
     );
   }
 }
diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
new file mode 100644
index 0000000..d2b500b
--- /dev/null
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -0,0 +1,124 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBAccordion from 'wb-accordion';
+
+class WBContainerRequestFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests/' + uuid);
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'Name', item.name ],
+        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+        [ 'Properties', (
+          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'State', item.state ],
+        [ 'Requesting Container', (
+          <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
+        ) ],
+        [ 'Container', (
+          <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
+        ) ],
+        [ 'Container Count Max', item.container_count_max ],
+        [ 'Mounts', (
+          <WBAccordion names={ Object.keys(item.mounts) }
+            cardHeaderClass="card-header-sm">
+            { Object.keys(item.mounts).map(k => (
+              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+            )) }
+          </WBAccordion>
+        ) ],
+        [ 'Runtime Constraints', (
+          <WBAccordion names={ ['Runtime Constraints'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Scheduling Parameters', (
+          <WBAccordion names={ ['Scheduling Parameters'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Container Image', (
+          <WBNameAndUuid app={ app } uuid={ item.container_image } />
+        ) ],
+        [ 'Environment', (
+          <WBAccordion names={ ['Environment'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Working Directory', item.cwd ],
+        [ 'Command', (
+          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+        ) ],
+        [ 'Output Path', item.output_path ],
+        [ 'Output Name', item.output_name ],
+        [ 'Output TTL', item.output_ttl ],
+        [ 'Priority', item.priority ],
+        [ 'Expires At', wbFormatDate(item.expires_at) ],
+        [ 'Use Existing', String(item.use_existing) ],
+        [ 'Log', (
+          <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
+        ) ],
+        [ 'Output', (
+          <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
+        ) ],
+        [ 'Filters', (
+          item.filters ? (<pre class="word-wrap">{ item.filters }</pre>) : (<i>{ String(item.filters) }</i>)
+        ) ],
+        [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
+        [ 'Runtime User', (
+          <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
+        ) ],
+        [ 'Runtime Auth Scopes', (
+          item.runtime_auth_scopes ? (
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_auth_scopes, null, 2) }</pre>
+          ) : (
+            <i>{ String(item.runtime_auth_scopes) }</i>
+          )
+        ) ]
+      ];
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBContainerRequestFields;
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
new file mode 100644
index 0000000..d3d414d
--- /dev/null
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -0,0 +1,78 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import urlForObject from 'url-for-object';
+import arvadosObjectName from 'arvados-object-name';
+import arvadosTypeName from 'arvados-type-name';
+
+class WBNameAndUuid extends Component {
+  componentDidMount() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    if (!uuid)
+      return;
+
+    let prom = new Promise(accept => accept());
+
+    if (/[0-9a-f]{32}\+[0-9]+/g.exec(uuid)) {
+      let filters = [
+        ['portable_data_hash', '=', uuid]
+      ];
+      prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/collections?filters=' +
+        encodeURIComponent(JSON.stringify(filters))));
+      prom = prom.then(xhr => {
+        if (xhr.response.items.length === 0) {
+          this.setState({
+            'item': {
+              'uuid': uuid,
+              'name': 'Collection with portable data hash ' + uuid
+            }
+          });
+          return;
+        }
+        let item = xhr.response.items[0];
+        if (xhr.response.items.length > 1)
+          item.name += ' +' + (xhr.response.items.length - 1) + ' others';
+        this.setState({ item });
+      });
+
+    } else if (/[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(uuid)) {
+      let typeName = arvadosTypeName(uuid);
+      let prom = makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/' + typeName + 's/' + uuid );
+      prom = prom.then(xhr => this.setState({
+        'item': xhr.response
+      }));
+
+    } else {
+      this.setState({
+        'item': {
+          'uuid': uuid
+        }
+      });
+    }
+  }
+
+  render({ uuid }, { item }) {
+    if (!uuid)
+      return (
+        <div><i>{ String(uuid) }</i></div>
+      );
+
+    return (
+      <div>
+        <div>
+          { item ? (
+            <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
+          ) : 'Loading...' }
+        </div>
+        <div>
+          { uuid }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBNameAndUuid;
diff --git a/frontend/src/js/misc/arvados-object-name.js b/frontend/src/js/misc/arvados-object-name.js
index ba670ec..7aad7fd 100644
--- a/frontend/src/js/misc/arvados-object-name.js
+++ b/frontend/src/js/misc/arvados-object-name.js
@@ -4,6 +4,8 @@ function arvadosObjectName(item) {
   let typeName = arvadosTypeName(item['uuid']);
   if (typeName === 'user')
     return (item.first_name + ' ' + item.last_name);
+  else if (typeName === 'container')
+    return ('Container running image ' + item.container_image);
   else
     return item.name;
 }
diff --git a/frontend/src/js/misc/arvados-type-name.js b/frontend/src/js/misc/arvados-type-name.js
index af77515..f547dc1 100644
--- a/frontend/src/js/misc/arvados-type-name.js
+++ b/frontend/src/js/misc/arvados-type-name.js
@@ -9,6 +9,9 @@ const typeIdToName = {
 };
 
 function arvadosTypeName(id) {
+  if (!id)
+    return;
+
   if (id.length === 5)
     return typeIdToName[id];
   else
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 1c65a80..254635f 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -7,6 +7,7 @@ import arvadosTypeName from 'arvados-type-name';
 import urlForObject from 'url-for-object';
 import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
+import WBContainerRequestFields from 'wb-container-request-fields';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -88,8 +89,12 @@ class WBProcessView extends Component {
           This is the process view for { uuid }
         </div>
 
+        <h2>Common Fields</h2>
         <WBCommonFields app={ app } uuid={ uuid } />
 
+        <h2>Container Request Fields</h2>
+        <WBContainerRequestFields app={ app } uuid={ uuid } />
+
         <div>
           <a href="/browse">Click here</a>
         </div>
diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
new file mode 100644
index 0000000..ca44a0b
--- /dev/null
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -0,0 +1,40 @@
+import { h, Component } from 'preact';
+
+class WBAccordion extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.domId = 'accordion-' + uuid.v4();
+    this.state.headerDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
+    this.state.collapseDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
+  }
+
+  render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds }) {
+    return (
+      <div class="accordion" id={ domId }>
+        { children.map((_, i) => (
+          <div class="card">
+            <div class={ cardHeaderClass} id={ headerDomIds[i] }>
+              <h2 class="mb-0">
+                <button class="btn btn-link" type="button" data-toggle="collapse" data-target={ '#' + collapseDomIds[i] } aria-expanded="false" aria-controls={ collapseDomIds[i] }>
+                  { names[i] }
+                </button>
+              </h2>
+            </div>
+
+            <div id={ collapseDomIds[i] } class="collapse" aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
+              <div class="card-body">
+                { children[i] }
+              </div>
+            </div>
+          </div>
+        )) }
+      </div>
+    );
+  }
+};
+
+WBAccordion.defaultProps = {
+  'cardHeaderClass': 'card-header'
+};
+
+export default WBAccordion;
diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js
index c698135..fda9bcf 100644
--- a/frontend/src/js/widget/wb-table.js
+++ b/frontend/src/js/widget/wb-table.js
@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
 
 class WBTable extends Component {
-  render({ columns, rows }) {
+  render({ columns, rows, headerClasses }) {
     return (
       <table class="table table-striped table-hover">
         <thead class="thead-light">
           <tr>
-            { columns.map(c => <th>{ c }</th>) }
+            { columns.map((c, i) => <th class={ headerClasses[i] }>{ c }</th>) }
           </tr>
         </thead>
         <tbody>
@@ -23,4 +23,8 @@ class WBTable extends Component {
   }
 }
 
+WBTable.defaultProps = {
+  'headerClasses': []
+};
+
 export default WBTable;

From 7b317f169dbc58d05c0fce7eca7cfd53d833e7e7 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 15:44:43 +0100
Subject: [PATCH 022/170] Improvements to field tables.

---
 frontend/src/js/component/wb-common-fields.js            | 2 ++
 frontend/src/js/component/wb-container-request-fields.js | 3 ++-
 frontend/src/js/component/wb-name-and-uuid.js            | 9 ++++++---
 frontend/src/js/widget/wb-table.js                       | 8 ++++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index 54a6486..10e2b70 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -84,6 +84,8 @@ class WBCommonFields extends Component {
     return (
       rows ? (
         <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          verticalHeader={ true }
           rows={ rows } />
       ) : (
         <div>Loading...</div>
diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index d2b500b..51f4826 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -113,7 +113,8 @@ class WBContainerRequestFields extends Component {
       rows ? (
         <WBTable columns={ [ "Name", "Value" ] }
           headerClasses={ [ "col-sm-2", "col-sm-4" ] }
-          rows={ rows } />
+          rows={ rows }
+          verticalHeader={ true } />
       ) : (
         <div>Loading...</div>
       )
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index d3d414d..fe0abad 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -44,6 +44,9 @@ class WBNameAndUuid extends Component {
       prom = prom.then(xhr => this.setState({
         'item': xhr.response
       }));
+      prom = prom.catch(xhr => this.setState({
+        'error': 'Unable to retrieve: ' + xhr.status + ' (' + xhr.statusText + ')'
+      }));
 
     } else {
       this.setState({
@@ -54,7 +57,7 @@ class WBNameAndUuid extends Component {
     }
   }
 
-  render({ uuid }, { item }) {
+  render({ uuid }, { error, item }) {
     if (!uuid)
       return (
         <div><i>{ String(uuid) }</i></div>
@@ -63,9 +66,9 @@ class WBNameAndUuid extends Component {
     return (
       <div>
         <div>
-          { item ? (
+          { error ? error : (item ? (
             <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
-          ) : 'Loading...' }
+          ) : 'Loading...') }
         </div>
         <div>
           { uuid }
diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js
index fda9bcf..f590278 100644
--- a/frontend/src/js/widget/wb-table.js
+++ b/frontend/src/js/widget/wb-table.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 class WBTable extends Component {
-  render({ columns, rows, headerClasses }) {
+  render({ columns, rows, headerClasses, verticalHeader }) {
     return (
       <table class="table table-striped table-hover">
         <thead class="thead-light">
@@ -13,7 +13,11 @@ class WBTable extends Component {
           { rows.map(r => (
             <tr>
               { columns.map((_, idx) => (
-                <td>{ r[idx] }</td>
+                (idx == 0 && verticalHeader) ? (
+                  <th scope="row">{ r[idx] }</th>
+                ) : (
+                  <td>{ r[idx] }</td>
+                )
               )) }
             </tr>
           )) }

From 7ffca1b48cbfe9a6f1235f94f902f43d0a300347 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 17:10:05 +0100
Subject: [PATCH 023/170] Added WBCollectionListing, started implementing
 WBArvadosCollection.

---
 frontend/package.json                         |   1 +
 frontend/rollup.config.js                     |   1 +
 frontend/src/html/index.html                  |   1 +
 .../src/js/component/wb-collection-listing.js | 128 ++++++++++++++++++
 frontend/src/js/misc/wb-arvados-collection.js |  50 +++++++
 frontend/src/js/page/wb-app.js                |   3 +-
 frontend/src/js/page/wb-browse.js             |  23 +++-
 frontend/src/js/widget/wb-pagination.js       |  32 +++--
 8 files changed, 221 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/js/component/wb-collection-listing.js
 create mode 100644 frontend/src/js/misc/wb-arvados-collection.js

diff --git a/frontend/package.json b/frontend/package.json
index 4abf4ac..199ef17 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "bootstrap": "^4.4.1",
+    "filesize": "^6.0.1",
     "jquery": "^3.4.1",
     "js-uuid": "0.0.6",
     "linkstate": "^1.1.1",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index b250a14..e98dca8 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -42,6 +42,7 @@ export default {
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff': 'dist/webfonts/fa-brands-400.woff',
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2',
       'node_modules/js-uuid/js-uuid.js': 'dist/js/js-uuid.js',
+      'node_modules/filesize/lib/filesize.js': 'dist/js/filesize.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 79f83d9..114c934 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -8,6 +8,7 @@
     <script language="javascript" src="/js/bootstrap.min.js"></script>
     <script language="javascript" src="/js/fontawesome.min.js"></script>
     <script language="javascript" src="/js/js-uuid.js"></script>
+    <script language="javascript" src="/js/filesize.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
new file mode 100644
index 0000000..993839c
--- /dev/null
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -0,0 +1,128 @@
+import { h, Component } from 'preact';
+import { route } from 'preact-router';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import urlForObject from 'url-for-object';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+
+class WBCollectionListing extends Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+  }
+
+  componentDidMount() {
+    this.fetchItems();
+  }
+
+  prepareRows(items, ownerLookup) {
+    return items.map(item => [
+      (<div>
+        <div>
+          <a href={ urlForObject(item) }>{ item['name'] }</a>
+        </div>
+        <div>{ item['uuid'] }</div>
+      </div>),
+      item['description'],
+      (<div>
+        <div>
+          { ownerLookup[item.owner_uuid] ? (
+            <a href={ urlForObject(ownerLookup[item.owner_uuid]) }>
+              { arvadosObjectName(ownerLookup[item.owner_uuid]) }
+            </a>
+          ) : 'Not Found' }
+        </div>
+        <div>{ item.owner_uuid }</div>
+      </div>),
+      item['file_count'],
+      filesize(item['file_size_total'])
+    ]);
+  }
+
+  fetchItems() {
+    let { arvHost, arvToken } = this.props.app.state;
+
+    let { activePage, itemsPerPage, ownerUuid } = this.props;
+
+    let filters = [];
+
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + encodeURIComponent(itemsPerPage) +
+      '&offset=' + encodeURIComponent(itemsPerPage * activePage));
+
+    let collections;
+    let numPages
+
+    prom = prom.then(xhr => {
+      collections = xhr.response['items'];
+      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);
+
+      let owners = {};
+      collections.map(c => {
+        let typeName = arvadosTypeName(c.owner_uuid);
+        if (!(typeName in owners))
+          owners[typeName] = [];
+        owners[typeName].push(c.owner_uuid);
+      });
+
+      let lookup = {};
+      let prom_1 = new Promise(accept => accept());
+      for (let typeName in owners) {
+        let filters_1 = [
+          ['uuid', 'in', owners[typeName]]
+        ];
+        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/' + typeName + 's?filters=' +
+          encodeURIComponent(JSON.stringify(filters_1))));
+        prom_1 = prom_1.then(xhr => xhr.response.items.map(item => (
+          lookup[item.uuid] = item)));
+      }
+
+      prom_1 = prom_1.then(() => lookup);
+
+      return prom_1;
+    });
+
+    //let ownerLookup = {};
+    //prom = prom.then(lookup => (ownerLookup = lookup));
+
+    prom = prom.then(ownerLookup =>
+      this.setState({
+        'numPages': numPages,
+        'rows': this.prepareRows(collections, ownerLookup)
+      }));
+  }
+
+  componentWillReceiveProps(nextProps, nextState) {
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
+    return (
+      <div>
+        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages }
+          activePage={ activePage }
+          getPageUrl={ getPageUrl } />
+      </div>
+    );
+  }
+}
+
+WBCollectionListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBCollectionListing;
diff --git a/frontend/src/js/misc/wb-arvados-collection.js b/frontend/src/js/misc/wb-arvados-collection.js
new file mode 100644
index 0000000..751a19a
--- /dev/null
+++ b/frontend/src/js/misc/wb-arvados-collection.js
@@ -0,0 +1,50 @@
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBArvadosCollection {
+  constructor(arvHost, arvToken, uuid) {
+    this.arvHost = arvHost;
+    this.arvToken = arvToken;
+    this.uuid = uuid;
+    this.meta = null;
+  }
+
+  fetchMeta() {
+    let prom = makeArvadosRequest(this.arvHost, this.arvToken,
+      '/arvados/v1/collections/' + this.uuid);
+    prom = prom.then(xhr => {
+      this.meta = xhr.response;
+    });
+    return prom;
+  }
+
+  parseManifest() {
+    if (this.meta === null)
+      throw Error('You must call fetchMeta() first and wait for the returned Promise.');
+
+    let manifest = this.meta.manifest_text;
+    let streams = manifest.split('\n');
+    this.content = streams.map(s => {
+      let tokens = s.split(' ');
+      let streamName = tokens[0];
+      let rx = /^[a-f0-9]{32}\+[0-9]+/;
+      let n = tokens.map(t => rx.exec(t));
+      n = n.indexOf(null);
+      let locators = tokens.slice(1, n)
+      let fileTokens = tokens.slice(n);
+      let fileNames = fileTokens.map(t => t.split(':')[2]);
+      let fileSizes = {};
+      fileTokens.map(t => {
+        let [ start, end, name ] = t.split(':');
+        if (!(name in fileSizes))
+          fileSizes[name] = 0;
+        fileSizes[name] += Number(end) - Number(start);
+      });
+      fileSizes = fileNames.map(n => fileSizes[n]);
+      return [ streamName, fileNames, fileSizes ];
+    });
+    
+    return this.content;
+  }
+}
+
+export WBArvadosCollection;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index e4a71e7..47d3311 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -58,7 +58,8 @@ class WBApp extends Component {
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
           appCallbacks={ this.appCallbacks }
-          appState={ this.appState } />
+          appState={ this.appState }
+          app={ this } />
 
         <WBProcessView path="/process/:uuid" app={ this } />
       </Router>
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 6e78c35..9efb555 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -6,19 +6,26 @@ import WBInlineSearch from 'wb-inline-search';
 import WBProjectCrumbs from 'wb-project-crumbs';
 import WBTabs from 'wb-tabs';
 import WBProcessListing from 'wb-process-listing';
+import WBCollectionListing from 'wb-collection-listing';
 
 class WBBrowse extends Component {
-  route(params) {
-    route('/browse/' +
+  getUrl(params) {
+    let res = '/browse/' +
       ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
       ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
       ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
       ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
       ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
-      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')));
+      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || ''));
+
+    return res;
+  }
+
+  route(params) {
+    route(this.getUrl(params));
   }
 
-  render({ ownerUuid, activePage, appCallbacks, appState,
+  render({ ownerUuid, activePage, appCallbacks, appState, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
     return (
@@ -51,13 +58,19 @@ class WBBrowse extends Component {
 
         {
           (!objTypeTab || objTypeTab === 'collection') ? (
-            null
+            <WBCollectionListing app={ app }
+              ownerUuid={ ownerUuid }
+              itemsPerPage="20"
+              activePage={ Number(collectionPage || 0) }
+              getPageUrl={ i => this.getUrl({ 'collectionPage': i }) } />
+
           ) : (objTypeTab === 'process' ? (
             <WBProcessListing appState={ appState }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) } />
+
           ) : (objTypeTab === 'workflow' ? (
             null
           ) : null))
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
index 8e45602..5d0ff89 100644
--- a/frontend/src/js/widget/wb-pagination.js
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 class WBPagination extends Component {
-  renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) {
+  renderVisiblePages(numPages, activePage, chunkSize, onPageChanged, getPageUrl) {
     let visible = {};
 
     let begActChnk = activePage - Math.floor(chunkSize / 2);
@@ -23,8 +23,8 @@ class WBPagination extends Component {
 
     res.push((
       <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
-        <a class="page-link" href="#"
-          onclick={ e => { e.preventDefault(); onPageChanged(activePage - 1); } }>Previous</a>
+        <a class="page-link" href={ getPageUrl(activePage - 1) }
+          onclick={ e => this.changePage(e, activePage - 1) }>Previous</a>
       </li>
     ));
 
@@ -33,35 +33,42 @@ class WBPagination extends Component {
       if (i > prev + 1)
         res.push((
           <li class="page-item">
-            <a class="page-link" href="#"
-              onclick={ e => { e.preventDefault(); onPageChanged(i - 1); } }>...</a>
+            <a class="page-link" href={ getPageUrl(i - 1) }
+              onclick={ e => this.changePage(e, i - 1) }>...</a>
           </li>
         ));
       prev = i;
 
       res.push((
         <li class={ i === activePage ? "page-item active" : "page-item" }>
-          <a class="page-link" href="#"
-            onclick={ e => { e.preventDefault(); onPageChanged(i); } }>{ i + 1 }</a>
+          <a class="page-link" href={ getPageUrl(i) }
+            onclick={ e => this.changePage(e, i) }>{ i + 1 }</a>
         </li>
       ));
     }
 
     res.push((
       <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
-        <a class="page-link" href="#"
-          onclick={ e => { e.preventDefault(); onPageChanged(activePage + 1); } }>Next</a>
+        <a class="page-link" href={ getPageUrl(activePage + 1) }
+          onclick={ e => this.changePage(e, activePage + 1) }>Next</a>
       </li>
     ));
 
     return res;
   }
 
-  render({ numPages, activePage, chunkSize, onPageChanged }) {
+  changePage(e, pageIdx) {
+    if (this.props.onPageChanged) {
+      e.preventDefault();
+      this.props.onPageChanged(pageIdx);
+    }
+  }
+
+  render({ numPages, activePage, chunkSize, onPageChanged, getPageUrl }) {
     return (
       <nav aria-label="Pagination">
         <ul class="pagination">
-          { this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) }
+          { this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged, getPageUrl) }
         </ul>
       </nav>
     );
@@ -69,7 +76,8 @@ class WBPagination extends Component {
 }
 
 WBPagination.defaultProps = {
-  'chunkSize': 5
+  'chunkSize': 5,
+  'getPageUrl': () => ('#')
 };
 
 export default WBPagination;

From 7a13ab582c658dca155620f1f4f421910d7ecf1d Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 19:53:07 +0100
Subject: [PATCH 024/170] Added WBCollectionView, started using WBNameAndUuid
 in WBCommonFields.

---
 .../src/js/component/wb-collection-fields.js  | 76 +++++++++++++++++++
 frontend/src/js/component/wb-common-fields.js | 34 ++-------
 frontend/src/js/misc/url-for-object.js        |  2 +-
 frontend/src/js/misc/wb-format-date.js        |  6 ++
 frontend/src/js/page/wb-app.js                |  3 +
 frontend/src/js/page/wb-collection-view.js    | 29 +++++++
 6 files changed, 121 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/js/component/wb-collection-fields.js
 create mode 100644 frontend/src/js/page/wb-collection-view.js

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
new file mode 100644
index 0000000..7f2d93a
--- /dev/null
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -0,0 +1,76 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBAccordion from 'wb-accordion';
+
+class WBCollectionFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + uuid);
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'Name', item.name ],
+        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+        [ 'Properties', (
+          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Portable Data Hash', item.portable_data_hash ],
+        [ 'Replication Desired', item.replication_desired ? item.replication_desired : (
+          <i>{ String(item.replication_desired) }</i>
+        ) ],
+        [ 'Replication Confirmed', item.replication_confirmed ? item.replication_confirmed : (
+          <i>{ String(item.replication_confirmed) }</i>
+        ) ],
+        [ 'Replication Confirmed At', wbFormatDate(item.replication_confirmed_at) ],
+        [ 'Trash At', wbFormatDate(item.trash_at) ],
+        [ 'Delete At', wbFormatDate(item.delete_at) ],
+        [ 'Is Trashed', String(item.is_trashed) ],
+        [ 'Current Version UUID', (
+          <WBNameAndUuid app={ app } uuid={ item.current_version_uuid } />
+        ) ],
+        [ 'Version', item.version ],
+        [ 'Preserve Version', String(item.preserve_version) ],
+        [ 'File Count', item.file_count ],
+        [ 'Total Size', filesize(item.file_size_total) ]
+      ];
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows }
+          verticalHeader={ true } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBCollectionFields;
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index 10e2b70..65bf0ce 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -5,6 +5,7 @@ import arvadosTypeName from 'arvados-type-name';
 import arvadosObjectName from 'arvados-object-name';
 import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
 
 class WBCommonFields extends Component {
   componentDidMount() {
@@ -31,44 +32,21 @@ class WBCommonFields extends Component {
 
     prom = prom.then(xhr => (item = xhr.response));
 
-    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/' + arvadosTypeName(item.owner_uuid) +
-      's/' + item.owner_uuid));
-
-    prom = prom.then(xhr => (owner = xhr.response));
-
-    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/users/' + item.modified_by_user_uuid));
-
-    prom = prom.then(xhr => (modifiedByUser = xhr.response));
-
     prom = prom.then(() => {
       let rows = [
         [ 'UUID', item.uuid ],
         [ 'Kind', item.kind ],
         [ 'Owner', (
-          <div>
-            <div>
-              <a href={ urlForObject(owner) }>{ arvadosObjectName(owner) }</a>
-            </div>
-            <div>
-              { item.owner_uuid }
-            </div>
-          </div>
+          <WBNameAndUuid app={ app } uuid={ item.owner_uuid } />
         ) ],
         [ 'Created at', wbFormatDate(item.created_at) ],
         [ 'Modified at', wbFormatDate(item.modified_at) ],
         [ 'Modified by User', (
-          <div>
-            <div>
-              <a href={ urlForObject(modifiedByUser) }>{ arvadosObjectName(modifiedByUser) }</a>
-            </div>
-            <div>
-              { item.modified_by_user_uuid }
-            </div>
-          </div>
+          <WBNameAndUuid app={ app } uuid={ item.modified_by_user_uuid } />
+        ) ],
+        [ 'Modified by Client', (
+          <WBNameAndUuid app={ app } uuid={ item.modified_by_client_uuid } />
         ) ],
-        [ 'Modified by Client', item.modified_by_client_uuid ],
         [ 'API Url', (
           <a href={ 'https://' + app.state.arvHost + '/arvados/v1' + item.href }>
             { 'https://' + app.state.arvHost + '/arvados/v1' + item.href }
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index b2258e7..eaba75c 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -11,7 +11,7 @@ function urlForObject(item) {
   else if (objectType === 'workflow')
     return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
   else if (objectType === 'collection')
-    return ('https://wb.arkau.roche.com/collections/' + item.uuid);
+    return ('/collection/' + item.uuid);
   else if (objectType === 'container')
     return ('https://wb.arkau.roche.com/containers/' + item.uuid);
 }
diff --git a/frontend/src/js/misc/wb-format-date.js b/frontend/src/js/misc/wb-format-date.js
index 5ef86a9..467b571 100644
--- a/frontend/src/js/misc/wb-format-date.js
+++ b/frontend/src/js/misc/wb-format-date.js
@@ -1,4 +1,10 @@
+import { h } from 'preact';
+
 function wbFormatDate(dateStr) {
+  if (!dateStr)
+    return (
+      <i>{ String(dateStr) }</i>
+    );
   let date = new Date(dateStr);
   return date.toLocaleString();
 }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 47d3311..75fda85 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -4,6 +4,7 @@ import WBBrowse from 'wb-browse';
 import WBSignIn from 'wb-sign-in';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
+import WBCollectionView from 'wb-collection-view';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -62,6 +63,8 @@ class WBApp extends Component {
           app={ this } />
 
         <WBProcessView path="/process/:uuid" app={ this } />
+
+        <WBCollectionView path="/collection/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-collection-view.js b/frontend/src/js/page/wb-collection-view.js
new file mode 100644
index 0000000..deedd14
--- /dev/null
+++ b/frontend/src/js/page/wb-collection-view.js
@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBCollectionFields from 'wb-collection-fields';
+
+class WBCollectionView extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the collection view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Collection Fields</h2>
+        <WBCollectionFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBCollectionView;

From edf6882767e28b6c66709454faa412f7d48d876a Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 2 Feb 2020 20:02:07 +0100
Subject: [PATCH 025/170] Small fix

---
 frontend/src/js/component/wb-container-request-fields.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index 51f4826..a7d1b05 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -104,6 +104,7 @@ class WBContainerRequestFields extends Component {
           )
         ) ]
       ];
+      rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
       this.setState({ 'rows': rows });
     });
   }

From 1aa0e39e73f1ce08f72011ef05e5c330b390fa9e Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 3 Feb 2020 07:24:36 +0100
Subject: [PATCH 026/170] Started implementing WBCollectionBrowse.

---
 .../src/js/component/wb-collection-content.js |  45 +++++++
 frontend/src/js/misc/wb-arvados-collection.js |   2 +-
 .../src/js/misc/wb-collection-manifest.js     | 114 ++++++++++++++++++
 frontend/src/js/page/wb-app.js                |   3 +
 frontend/src/js/page/wb-collection-browse.js  |  24 ++++
 5 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-collection-content.js
 create mode 100644 frontend/src/js/misc/wb-collection-manifest.js
 create mode 100644 frontend/src/js/page/wb-collection-browse.js

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
new file mode 100644
index 0000000..31f5816
--- /dev/null
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -0,0 +1,45 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import WBBreadcrumbs from 'wb-breadcrumbs';
+import { WBManifestReader } from 'wb-collection-manifest';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBCollectionContent extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.path = '.';
+    this.state.rows = [];
+    this.state.manifestReader = null;
+  }
+
+  componentDidMount() {
+    let { arvHost, arvToken } = this.props.app.state;
+    let { uuid } = this.props;
+
+    let select = [ 'manifest_text' ];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + uuid +
+      '?select=' + encodeURIComponent(JSON.stringify(select)));
+    prom = prom.then(xhr => {
+      this.state.manifestReader = new WBManifestReader(xhr.response.manifest_text);
+      this.prepareRows();
+    });
+  }
+
+  prepareRows() {
+    this.setState({});
+  }
+
+  render({}, { rows }) {
+    return (
+      <div>
+        <WBBreadcrumbs items={ [ 'a', 'b', 'c' ] } />
+
+        <WBTable columns={ [ 'Name', 'Size', 'Actions' ] }
+          rows={ rows } />
+      </div>
+    );
+  }
+}
+
+export default WBCollectionContent;
diff --git a/frontend/src/js/misc/wb-arvados-collection.js b/frontend/src/js/misc/wb-arvados-collection.js
index 751a19a..430376c 100644
--- a/frontend/src/js/misc/wb-arvados-collection.js
+++ b/frontend/src/js/misc/wb-arvados-collection.js
@@ -42,7 +42,7 @@ class WBArvadosCollection {
       fileSizes = fileNames.map(n => fileSizes[n]);
       return [ streamName, fileNames, fileSizes ];
     });
-    
+
     return this.content;
   }
 }
diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
new file mode 100644
index 0000000..704cc9d
--- /dev/null
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -0,0 +1,114 @@
+class CMDirectory {
+  constructor() {
+    this.directories = {};
+    this.files = {};
+  }
+}
+
+class CMFile {
+  constructor() {
+    this.blockRefs = [];
+    this.size = 0;
+  }
+
+  append(locators, position, size) {
+    if (size === 0)
+      return;
+
+    let cum = 0;
+    let locHashes = locators.map(loc => loc[0]);
+    let locSizes = locators.map(loc => loc[1]);
+    let locPositions = locators.map(loc => {
+      let res = cum;
+      cum += loc[1];
+      return res;
+    });
+
+    let used = locators.map((_, i) => (locPositions[i] + locSizes[i] > position &&
+      locPositions[i] < position + size));
+
+    let startBlock = used.indexOf(true);
+    let endBlock = used.lastIndexOf(true) + 1;
+
+    console.log('startBlock: ' + startBlock + ', endBlock: ' + endBlock);
+
+    if (startBlock === -1)
+      return;
+
+    let blockRefs = [];
+    let runPos = position;
+    let runSize = size;
+
+    for (let i = startBlock; i < endBlock; i++) {
+      let blockPos = runPos - locPositions[i];
+      let blockSize = Math.min(runSize, locSizes[i] - blockPos);
+      blockRefs.push([ locHashes[i], blockPos, blockSize ]);
+      runPos += blockSize;
+      runSize -= blockSize;
+    }
+
+    this.blockRefs = this.blockRefs.concat(blockRefs);
+    this.size += size;
+  }
+}
+
+class WBManifestReader {
+  constructor(manifest_text) {
+    this.rootDir = new CMDirectory();
+
+    if (!manifest_text)
+      return;
+
+    this.parse(manifest_text);
+  }
+
+  makeDir(parent, name) {
+    if (!(name in parent.directories))
+      parent.directories[name] = new CMDirectory();
+    return parent.directories[name];
+  }
+
+  makePath(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+    let dir = this.rootDir;
+    for (let i = 1; i < path.length; i++)
+      dir = this.makeDir(dir, path[i]);
+    return dir;
+  }
+
+  appendFile(streamName, locators, position, size, fileName) {
+    let path = streamName + '/' + fileName;
+    path = path.split('/');
+    let dir = this.makePath(path.slice(0, path.length - 1));
+    if (!(fileName in dir.files))
+      dir.files[fileName] = new CMFile();
+    dir.files[fileName].append(locators, position, size);
+  }
+
+  parse(manifest_text) {
+    let rx = /^[a-f0-9]{32}\+[0-9]+/;
+
+    let streams = manifest_text.split('\n');
+
+    streams.map(s => {
+      let tokens = s.split(' ');
+      let streamName = tokens[0];
+
+      let n = tokens.map(t => rx.exec(t));
+      n = n.indexOf(null, 1);
+
+      let locators = tokens.slice(1, n);
+      locators = locators.map(loc => [ loc, Number(loc.split('+')[1]) ]);
+
+      let fileTokens = tokens.slice(n);
+      fileTokens.map(t => {
+        let [ position, size, fileName ] = t.split(':');
+        this.appendFile(streamName, locators,
+          Number(position), Number(size), fileName);
+      });
+    });
+  }
+}
+
+export { WBManifestReader };
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 75fda85..ea554fb 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -5,6 +5,7 @@ import WBSignIn from 'wb-sign-in';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
 import WBCollectionView from 'wb-collection-view';
+import WBCollectionBrowse from 'wb-collection-browse';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -65,6 +66,8 @@ class WBApp extends Component {
         <WBProcessView path="/process/:uuid" app={ this } />
 
         <WBCollectionView path="/collection/:uuid" app={ this } />
+
+        <WBCollectionBrowse path='/collection-browse/:uuid' app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-collection-browse.js b/frontend/src/js/page/wb-collection-browse.js
new file mode 100644
index 0000000..e238702
--- /dev/null
+++ b/frontend/src/js/page/wb-collection-browse.js
@@ -0,0 +1,24 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCollectionContent from 'wb-collection-content';
+
+class WBCollectionBrowse extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the collection browser for { uuid }
+        </div>
+
+        <WBCollectionContent app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBCollectionBrowse;

From a5cd564375891f947752f97fc8c3a49658b3cda2 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 3 Feb 2020 18:18:57 +0100
Subject: [PATCH 027/170] WBCollectionBrowse starting to work...

---
 .../src/js/component/wb-collection-content.js |  49 +++++-
 .../src/js/misc/wb-collection-manifest.js     | 150 ++++++++++++------
 frontend/src/js/page/wb-app.js                |   2 +-
 frontend/src/js/page/wb-collection-browse.js  |   5 +-
 4 files changed, 149 insertions(+), 57 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 31f5816..49c876a 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -7,11 +7,18 @@ import makeArvadosRequest from 'make-arvados-request';
 class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
-    this.state.path = '.';
     this.state.rows = [];
     this.state.manifestReader = null;
   }
 
+  getUrl(params) {
+    let res = '/collection-browse/' +
+      (params.uuid || this.props.uuid) + '/' +
+      encodeURIComponent(params.collectionPath || this.props.collectionPath) + '/' +
+      (params.page || this.props.page);
+    return res;
+  }
+
   componentDidMount() {
     let { arvHost, arvToken } = this.props.app.state;
     let { uuid } = this.props;
@@ -26,20 +33,52 @@ class WBCollectionContent extends Component {
     });
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
   prepareRows() {
-    this.setState({});
+    let { manifestReader } = this.state;
+    let { collectionPath } = this.props;
+
+    //path = path.split('/');
+    //path = [ '.' ].concat(path);
+
+    let listing = manifestReader.listDirectory('.' + collectionPath);
+
+    this.setState({
+      'rows': listing.map(item => (
+        (item[0] === 'd') ? [
+          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1] }) }>{ item[1] }/</a>),
+          'Directory',
+          null,
+          (<div></div>)
+        ] : [
+          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1] }) }>{ item[1] }</a>),
+          'File',
+          filesize(item[2]),
+          (<div></div>)
+        ]
+      ))
+    });
   }
 
-  render({}, { rows }) {
+  render({ collectionPath }, { rows }) {
     return (
       <div>
-        <WBBreadcrumbs items={ [ 'a', 'b', 'c' ] } />
+        <WBBreadcrumbs items={ ('.' + collectionPath).split('/') } />
 
-        <WBTable columns={ [ 'Name', 'Size', 'Actions' ] }
+        <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
           rows={ rows } />
       </div>
     );
   }
 }
 
+WBCollectionContent.defaultProps = {
+  'collectionPath': '',
+  'page': 0
+};
+
 export default WBCollectionContent;
diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
index 704cc9d..904984f 100644
--- a/frontend/src/js/misc/wb-collection-manifest.js
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -1,17 +1,52 @@
-class CMDirectory {
-  constructor() {
-    this.directories = {};
-    this.files = {};
+//
+// Directory: Hash[string, [Directory, File]]
+// File = [blockRefs, size]
+// blockRefs: Array[blockRef]
+// blockRef: [locator, position, size]
+// locator: String
+// position: Number
+// size: Number
+//
+
+class WBManifestReader {
+  constructor(manifest_text) {
+    this.rootDir = {};
+
+    if (!manifest_text)
+      return;
+
+    this.parse(manifest_text);
+  }
+
+  makeDir(parent, name) {
+    if (!(name in parent))
+      parent[name] = {};
+    if (parent[name] instanceof Array)
+      throw Error('Conflict trying to create a directory - a file with the same name already exists: ' + name);
+    return parent[name];
+  }
+
+  makePath(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+    let dir = this.rootDir;
+    for (let i = 1; i < path.length; i++)
+      dir = this.makeDir(dir, path[i]);
+    return dir;
   }
-}
 
-class CMFile {
-  constructor() {
-    this.blockRefs = [];
-    this.size = 0;
+  appendFile(streamName, locators, position, size, fileName) {
+    let path = streamName + '/' + fileName;
+    path = path.split('/');
+    let dir = this.makePath(path.slice(0, path.length - 1));
+    if (!(fileName in dir))
+      dir[fileName] = [[], 0];
+    if (!(dir[fileName] instanceof Array))
+      throw Error('Conflict trying to create a file - a directory with the same name already exists: ' + fileName);
+    this.appendReferences(dir[fileName], locators, position, size);
   }
 
-  append(locators, position, size) {
+  appendReferences(file, locators, position, size) {
     if (size === 0)
       return;
 
@@ -30,7 +65,7 @@ class CMFile {
     let startBlock = used.indexOf(true);
     let endBlock = used.lastIndexOf(true) + 1;
 
-    console.log('startBlock: ' + startBlock + ', endBlock: ' + endBlock);
+    // console.log('startBlock: ' + startBlock + ', endBlock: ' + endBlock);
 
     if (startBlock === -1)
       return;
@@ -47,53 +82,20 @@ class CMFile {
       runSize -= blockSize;
     }
 
-    this.blockRefs = this.blockRefs.concat(blockRefs);
-    this.size += size;
-  }
-}
-
-class WBManifestReader {
-  constructor(manifest_text) {
-    this.rootDir = new CMDirectory();
-
-    if (!manifest_text)
-      return;
-
-    this.parse(manifest_text);
-  }
-
-  makeDir(parent, name) {
-    if (!(name in parent.directories))
-      parent.directories[name] = new CMDirectory();
-    return parent.directories[name];
-  }
-
-  makePath(path) {
-    if (typeof(path) === 'string')
-      path = path.split('/');
-    let dir = this.rootDir;
-    for (let i = 1; i < path.length; i++)
-      dir = this.makeDir(dir, path[i]);
-    return dir;
-  }
-
-  appendFile(streamName, locators, position, size, fileName) {
-    let path = streamName + '/' + fileName;
-    path = path.split('/');
-    let dir = this.makePath(path.slice(0, path.length - 1));
-    if (!(fileName in dir.files))
-      dir.files[fileName] = new CMFile();
-    dir.files[fileName].append(locators, position, size);
+    file[0] = file[0].concat(blockRefs);
+    file[1] += size;
   }
 
   parse(manifest_text) {
     let rx = /^[a-f0-9]{32}\+[0-9]+/;
 
     let streams = manifest_text.split('\n');
+    if (!streams[streams.length - 1])
+      streams = streams.slice(0, streams.length - 1);
 
     streams.map(s => {
       let tokens = s.split(' ');
-      let streamName = tokens[0];
+      let streamName = this.unescapeName(tokens[0]);
 
       let n = tokens.map(t => rx.exec(t));
       n = n.indexOf(null, 1);
@@ -104,11 +106,61 @@ class WBManifestReader {
       let fileTokens = tokens.slice(n);
       fileTokens.map(t => {
         let [ position, size, fileName ] = t.split(':');
+        fileName = this.unescapeName(fileName);
         this.appendFile(streamName, locators,
           Number(position), Number(size), fileName);
       });
     });
   }
+
+  findDir(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+    if (path[0] !== '.')
+      throw Error('Path must begin with a dot component');
+    let dir = this.rootDir;
+    for (let i = 1; i < path.length; i++) {
+      if (!(path[i] in dir))
+        throw Error('Directory not found');
+      if (dir[path[i]] instanceof Array)
+        throw Error('Path is a file not directory');
+      dir = dir[path[i]];
+    }
+    return dir;
+  }
+
+  listDirectory(path) {
+    let dir = this.findDir(path);
+    let keys = Object.keys(dir);
+    keys.sort();
+    let subdirs = keys.filter(k => !(dir[k] instanceof Array));
+    let files = keys.filter(k => (dir[k] instanceof Array));
+    let res = subdirs.map(k => [ 'd', k, null ]);
+    res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
+    return res;
+  }
+
+  unescapeName(name) {
+    return name.replace(/(\\\\|\\040)/g, (_, $1) => ($1 === '\\\\' ? '\\' : ' '));
+  }
+
+  escapeName(name) {
+    return name.replace(/ /g, '\\040');
+  }
+  /*  let ids = { '\\': 1, '0': 2, '4': 3 };
+    let transitions = [
+      [ [0, 0], [1, ''], [0, 0], [0, 0] ],
+      [ [0, 0], [0, '\\'], [2, ''], [0, 0] ],
+    ];
+    let mode = 0;
+    for (let i = 0; i < name.length; i++) {
+      let b = name[i];
+      let tokenId = Number(ids[b]);
+      [ mode, out ] = transitions[mode][tokenId];
+      if (out === 0)
+        out = b;
+    }
+  }*/
 }
 
 export { WBManifestReader };
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index ea554fb..4718dca 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -67,7 +67,7 @@ class WBApp extends Component {
 
         <WBCollectionView path="/collection/:uuid" app={ this } />
 
-        <WBCollectionBrowse path='/collection-browse/:uuid' app={ this } />
+        <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-collection-browse.js b/frontend/src/js/page/wb-collection-browse.js
index e238702..d92cd86 100644
--- a/frontend/src/js/page/wb-collection-browse.js
+++ b/frontend/src/js/page/wb-collection-browse.js
@@ -4,7 +4,7 @@ import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBCollectionContent from 'wb-collection-content';
 
 class WBCollectionBrowse extends Component {
-  render({ app, uuid }, {}) {
+  render({ app, uuid, collectionPath }, {}) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -15,7 +15,8 @@ class WBCollectionBrowse extends Component {
           This is the collection browser for { uuid }
         </div>
 
-        <WBCollectionContent app={ app } uuid={ uuid } />
+        <WBCollectionContent app={ app } uuid={ uuid }
+          collectionPath={ collectionPath }/>
       </div>
     );
   }

From 694d8d5a52a2e68c5418231657552dd155cec7bb Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 4 Feb 2020 12:39:59 +0100
Subject: [PATCH 028/170] Implemented file download but held back by CORS
 issues.

---
 frontend/package.json                         |  1 +
 frontend/rollup.config.js                     |  2 +
 frontend/src/html/index.html                  |  2 +
 .../src/js/component/wb-collection-content.js | 11 +++-
 frontend/src/js/misc/make-arvados-request.js  | 22 +++++--
 .../src/js/misc/wb-collection-manifest.js     | 13 ++++
 frontend/src/js/misc/wb-download-file.js      | 65 +++++++++++++++++++
 7 files changed, 110 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-download-file.js

diff --git a/frontend/package.json b/frontend/package.json
index 199ef17..3707664 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "bootstrap": "^4.4.1",
+    "crypto-js": "^3.1.9-1",
     "filesize": "^6.0.1",
     "jquery": "^3.4.1",
     "js-uuid": "0.0.6",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index e98dca8..7032717 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -43,6 +43,8 @@ export default {
       'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2': 'dist/webfonts/fa-brands-400.woff2',
       'node_modules/js-uuid/js-uuid.js': 'dist/js/js-uuid.js',
       'node_modules/filesize/lib/filesize.js': 'dist/js/filesize.js',
+      'node_modules/crypto-js/core.js': 'dist/js/crypto-js/core.js',
+      'node_modules/crypto-js/md5.js': 'dist/js/crypto-js/md5.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 114c934..e22169d 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -9,6 +9,8 @@
     <script language="javascript" src="/js/fontawesome.min.js"></script>
     <script language="javascript" src="/js/js-uuid.js"></script>
     <script language="javascript" src="/js/filesize.js"></script>
+    <script language="javascript" src="/js/crypto-js/core.js"></script>
+    <script language="javascript" src="/js/crypto-js/md5.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 49c876a..0da5890 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -3,6 +3,7 @@ import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import { WBManifestReader } from 'wb-collection-manifest';
 import makeArvadosRequest from 'make-arvados-request';
+import wbDownloadFile from 'wb-download-file';
 
 class WBCollectionContent extends Component {
   constructor(...args) {
@@ -41,6 +42,7 @@ class WBCollectionContent extends Component {
   prepareRows() {
     let { manifestReader } = this.state;
     let { collectionPath } = this.props;
+    let { arvHost, arvToken } = this.props.app.state;
 
     //path = path.split('/');
     //path = [ '.' ].concat(path);
@@ -58,7 +60,14 @@ class WBCollectionContent extends Component {
           (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1] }) }>{ item[1] }</a>),
           'File',
           filesize(item[2]),
-          (<div></div>)
+          (<div>
+            <button class="btn btn-outline-primary mx-1" title="Download"
+              onclick={ () => wbDownloadFile(arvHost, arvToken, manifestReader,
+                '.' + collectionPath + '/' + item[1]) }><i class="fas fa-download"></i></button>
+            <button class="btn btn-outline-primary mx-1" title="View"
+              onclick={ () => wbDownloadFile(arvHost, arvToken, manifestReader,
+                '.' + collectionPath + '/' + item[1]) }><i class="far fa-eye"></i></button>
+          </div>)
         ]
       ))
     });
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index b9b1e74..7783872 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -1,13 +1,25 @@
 
-function makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
-  contentType='application/json;charset=utf-8', responseType='json') {
+function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
+  const defaultParams = {
+    'method': 'GET',
+    'data': null,
+    'contentType': 'application/json;charset=utf-8',
+    'responseType': 'json',
+    'useSsl': true,
+    'requireToken': true
+  };
 
-  if (!arvHost || !arvToken)
+  Object.keys(defaultParams).map(k => (params[k] =
+    (k in params ? params[k] : defaultParams[k])));
+  let { method, data, contentType, responseType, useSsl, requireToken } = params;
+
+  if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());
 
   let xhr = new XMLHttpRequest();
-  xhr.open(method, 'https://' + arvHost + endpoint);
-  xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
+  xhr.open(method, (useSsl ? 'https://' : 'http://') + arvHost + endpoint);
+  if (arvToken)
+    xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
   if (data !== null)
     xhr.setRequestHeader('Content-Type', contentType);
   xhr.responseType = responseType;
diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
index 904984f..68fb05e 100644
--- a/frontend/src/js/misc/wb-collection-manifest.js
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -161,6 +161,19 @@ class WBManifestReader {
         out = b;
     }
   }*/
+  getFile(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+    if (path.length < 2)
+      throw Error('Invalid file path');
+    let name = path[path.length - 1];
+    let dir = this.findDir(path.slice(0, path.length - 1));
+    if (!(name in dir))
+      throw Error('File not found');
+    if (!(dir[name] instanceof Array))
+      throw Error('Path points to a directory not a file');
+    return dir[name];
+  }
 }
 
 export { WBManifestReader };
diff --git a/frontend/src/js/misc/wb-download-file.js b/frontend/src/js/misc/wb-download-file.js
new file mode 100644
index 0000000..c64cfca
--- /dev/null
+++ b/frontend/src/js/misc/wb-download-file.js
@@ -0,0 +1,65 @@
+import makeArvadosRequest from 'make-arvados-request';
+
+function rdvHash(serviceId, locator) {
+  let blockHash = /^[0-9a-f]{32}/.exec(locator);
+  if (!blockHash)
+    throw Error('Invalid locator');
+  if (typeof(serviceId) !== 'string')
+    throw Error('Invalid service ID');
+  let res = CryptoJS.MD5(serviceId + blockHash).toString();
+  return res;
+}
+
+function wbDownloadFile(arvHost, arvToken,
+  manifestReader, path) {
+
+  const file = manifestReader.getFile(path);
+  const name = path.split('/').reverse()[0];
+  const blockRefs = file[0];
+  let services;
+
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/keep_services/accessible');
+  prom = prom.then(xhr => (services = xhr.response['items']));
+
+  const blocks = [];
+  for (let i = 0; i < blockRefs.length; i++) {
+    prom = prom.then(() => {
+      const [ locator, position, size ] = blockRefs[i];
+      const weights = services.map(s => rdvHash(s['uuid'], locator));
+      const order = Object.keys(services).sort((a, b) => weights[b].localeCompare(weights[a]));
+      const orderedServices = order.map(i => services[i]);
+
+      let k = 0;
+      const cb = () => {
+        if (k >= orderedServices.length)
+          throw Error('Block not found');
+
+        const svc = orderedServices[k];
+        k++;
+
+        let prom_1 = makeArvadosRequest(svc.service_host +
+          ':' + svc.service_port, arvToken,
+          '/' + locator, { 'useSsl': svc.service_ssl_flag,
+          'responseType': 'arraybuffer' });
+        //prom_1 = prom_1.then(xhr => xhr.response);
+        prom_1 = prom_1.catch(cb);
+
+        return prom_1;
+      };
+
+      return cb().then(xhr => (blocks.append(xhr.response.slice(position, size))));
+    });
+  }
+
+  prom = prom.then(() => {
+    const blob = new Blob(blocks);
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+
+  });
+}
+
+export default wbDownloadFile;

From d2081a08a3cf6c3be2522d885319a8dd56c52e0f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 4 Feb 2020 13:47:38 +0100
Subject: [PATCH 029/170] Added user listing view.

---
 frontend/src/js/component/wb-navbar-common.js |  3 +-
 frontend/src/js/component/wb-user-listing.js  | 63 +++++++++++++++++++
 frontend/src/js/page/wb-app.js                |  6 ++
 frontend/src/js/page/wb-users-page.js         | 22 +++++++
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-user-listing.js
 create mode 100644 frontend/src/js/page/wb-users-page.js

diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index f07610d..c4b4cf3 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -8,7 +8,8 @@ class WBNavbarCommon extends Component {
       <WBNavbar items={ [
         { 'name': 'Home', 'id': 'home' },
         { 'name': 'All Projects', 'id': 'all-projects' },
-        { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+        { 'name': 'All Users', 'id': 'all-users' },
+        { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
       ].concat(items) } rhs={ (
         <WBInlineSearch />
       ) } onItemClicked={ item => app.navbarItemClicked(item) }
diff --git a/frontend/src/js/component/wb-user-listing.js b/frontend/src/js/component/wb-user-listing.js
new file mode 100644
index 0000000..88e7970
--- /dev/null
+++ b/frontend/src/js/component/wb-user-listing.js
@@ -0,0 +1,63 @@
+import { h, Component } from 'preact';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
+import urlForObject from 'url-for-object';
+
+class WBUserListing extends Component {
+  componentDidMount() {
+    this.preparePage();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.preparePage();
+  }
+
+  preparePage() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { itemsPerPage, page } = this.props;
+
+    const order = ['last_name asc'];
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users?order=' + encodeURIComponent(JSON.stringify(order)) +
+      '&limit=' + itemsPerPage + '&offset=' + (itemsPerPage * page));
+    prom = prom.then(xhr => {
+      this.setState({
+        'items': xhr.response['items'],
+        'numPages': Math.ceil(xhr.response['items_available'] / itemsPerPage)
+      });
+    });
+  }
+
+  render({ app, page, getPageUrl }, { items, numPages }) {
+    return (
+      <div class="container-fluid">
+        <h1>Users</h1>
+        <div class="d-flex flex-wrap">
+          { items ? items.map(it => (
+            <div class="card mx-2 my-2">
+              <h5 class="card-header">
+                <a href={ urlForObject(it) }>{ it.last_name + ', ' + it.first_name }</a>
+              </h5>
+              <div class="card-body">
+                <div><a href={ 'mailto:' + it.email }>{ it.email }</a></div>
+                <div>{ it.uuid }</div>
+              </div>
+            </div>
+          )) : 'Loading...' }
+        </div>
+
+        <WBPagination activePage={ page } numPages={ numPages }
+          getPageUrl={ getPageUrl } />
+      </div>
+    );
+  }
+}
+
+WBUserListing.defaultProps = {
+  'itemsPerPage': 20,
+  'page': 0
+};
+
+export default WBUserListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 4718dca..f229443 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -6,6 +6,7 @@ import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
 import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
+import WBUsersPage from 'wb-users-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -38,6 +39,9 @@ class WBApp extends Component {
     } else if (item['id'] === 'all-projects') {
       route('/browse');
 
+    } else if (item['id'] === 'all-users') {
+      route('/users');
+      
     }
   }
 
@@ -68,6 +72,8 @@ class WBApp extends Component {
         <WBCollectionView path="/collection/:uuid" app={ this } />
 
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
+
+        <WBUsersPage path='/users/:page?' app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js
new file mode 100644
index 0000000..5e79335
--- /dev/null
+++ b/frontend/src/js/page/wb-users-page.js
@@ -0,0 +1,22 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBUserListing from 'wb-user-listing';
+
+class WBUsersPage extends Component {
+  getUrl(page) {
+    return ('/users/' + page);
+  }
+
+  render({ app, page }) {
+    return (
+      <div>
+        <WBNavbarCommon />
+
+        <WBUserListing app={ app } page={ Number(page || 0) }
+          getPageUrl={ page => this.getUrl(page) } />
+      </div>
+    );
+  }
+};
+
+export default WBUsersPage;

From d104d5702745d1f709712eb62ec6e2f427a1f4a0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 4 Feb 2020 15:07:48 +0100
Subject: [PATCH 030/170] Adapted WBNavbar to handle URLs in addition to
 onclick callbacks.

---
 frontend/src/js/component/wb-navbar-common.js | 22 ++++++-----
 frontend/src/js/page/wb-app.js                | 14 +++----
 frontend/src/js/widget/wb-navbar.js           | 37 +++++++++++++++----
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index c4b4cf3..3b6a09b 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -5,15 +5,19 @@ import WBInlineSearch from 'wb-inline-search';
 class WBNavbarCommon extends Component {
   render({ app, items, activeItem }) {
     return (
-      <WBNavbar items={ [
-        { 'name': 'Home', 'id': 'home' },
-        { 'name': 'All Projects', 'id': 'all-projects' },
-        { 'name': 'All Users', 'id': 'all-users' },
-        { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
-      ].concat(items) } rhs={ (
-        <WBInlineSearch />
-      ) } onItemClicked={ item => app.navbarItemClicked(item) }
-      activeItem={ activeItem } />
+      <WBNavbar
+        items={ [
+          { 'name': 'Home', 'id': 'home' },
+          { 'name': 'All Projects', 'id': 'all-projects' },
+          { 'name': 'All Users', 'id': 'all-users' },
+          { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+        ].concat(items) }
+        rhs={ (
+          <WBInlineSearch />
+        ) }
+        titleUrl = { '/browse/' + app.state.currentUser.uuid }
+        getItemUrl={ item => app.navbarItemUrl(item) }
+        activeItem={ activeItem } />
     );
   }
 }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index f229443..a24eb7f 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -26,22 +26,18 @@ class WBApp extends Component {
     };
   }
 
-  navbarItemClicked(item) {
+  navbarItemUrl(item) {
     if (item['id'] === 'sign-out') {
       delete window.localStorage['arvHost'];
       delete window.localStorage['arvToken'];
       delete window.localStorage['currentUser'];
-      route('/sign-in');
-
+      return ('/sign-in');
     } else if (item['id'] === 'home') {
-      route('/browse/' + this.appState.currentUser.uuid);
-
+      return ('/browse/' + this.appState.currentUser.uuid);
     } else if (item['id'] === 'all-projects') {
-      route('/browse');
-
+      return ('/browse');
     } else if (item['id'] === 'all-users') {
-      route('/users');
-      
+      return ('/users');
     }
   }
 
diff --git a/frontend/src/js/widget/wb-navbar.js b/frontend/src/js/widget/wb-navbar.js
index b44686f..cbdef5c 100644
--- a/frontend/src/js/widget/wb-navbar.js
+++ b/frontend/src/js/widget/wb-navbar.js
@@ -1,10 +1,12 @@
 import { h, Component } from 'preact';
 
 class WBNavbar extends Component {
-  render({ title, items, rhs, onItemClicked, onTitleClicked, activeItem }) {
+  render({ title, items, rhs, onItemClicked, onTitleClicked,
+    activeItem, titleUrl, getItemUrl }) {
+
     return (
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ title }</a>
+        <a class="navbar-brand" href={ titleUrl } onclick={ e => this.titleClicked(e) }>{ title }</a>
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -45,7 +47,8 @@ class WBNavbar extends Component {
                         { i['dropdown'].map(d => {
                           if (typeof(d) === 'string')
                             return (
-                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
+                              <a class="dropdown-item" href={ getItemUrl(d) }
+                                onclick={ e => this.itemClicked(e, d) }>{ d }</a>
                             );
 
                           else if (typeof(d) === 'object' && d['divider'])
@@ -55,7 +58,8 @@ class WBNavbar extends Component {
 
                           else if (typeof(d) === 'object' && d['name'])
                             return (
-                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d['name'] }</a>
+                              <a class="dropdown-item" href={ getItemUrl(d) }
+                                onclick={ e => this.itemClicked(e, d) }>{ d['name'] }</a>
                             );
                         }) }
                       </div>
@@ -67,7 +71,8 @@ class WBNavbar extends Component {
 
                   return (
                     <li class={ li_cls }>
-                      <a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
+                      <a class={ a_cls } href={ getItemUrl(i) }
+                        onclick={ e => this.itemClicked(e, i) }>{ i['name'] }</a>
                     </li>
                   );
                 }
@@ -80,15 +85,31 @@ class WBNavbar extends Component {
       </nav>
     );
   }
+
+  titleClicked(e) {
+    let { onTitleClicked } = this.props;
+    if (!onTitleClicked)
+      return;
+    e.preventDefault();
+    onTitleClicked();
+  }
+
+  itemClicked(e, i) {
+    let { onItemClicked } = this.props;
+    if (!onItemClicked)
+      return;
+    e.preventDefault();
+    onItemClicked(i);
+  }
 }
 
 WBNavbar.defaultProps = {
   'title': 'Workbench Advanced',
   'items': [],
   'form': null,
-  'onItemClicked': () => {},
-  'onTitleClicked': () => {},
-  'activeItem': null
+  'activeItem': null,
+  'titleUrl': '#',
+  'getItemUrl': () => ('#')
 }
 
 export default WBNavbar;

From 1f9d923958db129cae29fb6ee14ccb7b28212115 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 4 Feb 2020 15:31:57 +0100
Subject: [PATCH 031/170] Transitioning to WBNavbarCommon and fixing
 regressions on the way.

---
 frontend/src/js/page/wb-app.js        | 23 +++++++----------------
 frontend/src/js/page/wb-browse.js     | 13 ++++---------
 frontend/src/js/page/wb-sign-out.js   | 19 +++++++++++++++++++
 frontend/src/js/page/wb-users-page.js |  2 +-
 4 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/js/page/wb-sign-out.js

diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index a24eb7f..91e5c5c 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import { Router, route } from 'preact-router';
 import WBBrowse from 'wb-browse';
 import WBSignIn from 'wb-sign-in';
+import WBSignOut from 'wb-sign-out';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
 import WBCollectionView from 'wb-collection-view';
@@ -16,24 +17,13 @@ class WBApp extends Component {
     this.state.arvToken = window.localStorage['arvToken'];
     if ('currentUser' in window.localStorage)
       this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
-    this.appCallbacks = {
-      'navbarItemClicked': item => this.navbarItemClicked(item)
-    };
-    this.appState = {
-      'arvHost': this.state.arvHost,
-      'arvToken': this.state.arvToken,
-      'currentUser': this.state.currentUser
-    };
   }
 
   navbarItemUrl(item) {
     if (item['id'] === 'sign-out') {
-      delete window.localStorage['arvHost'];
-      delete window.localStorage['arvToken'];
-      delete window.localStorage['currentUser'];
-      return ('/sign-in');
+      return ('/sign-out');
     } else if (item['id'] === 'home') {
-      return ('/browse/' + this.appState.currentUser.uuid);
+      return ('/browse/' + this.state.currentUser.uuid);
     } else if (item['id'] === 'all-projects') {
       return ('/browse');
     } else if (item['id'] === 'all-users') {
@@ -56,11 +46,12 @@ class WBApp extends Component {
       <Router>
         <WBLandingPage path="/" />
 
-        <WBSignIn path="/sign-in" appState={ this.appState } />
+        <WBSignIn path="/sign-in" appState={ this.state } />
+
+        <WBSignOut path='/sign-out' />
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
-          appCallbacks={ this.appCallbacks }
-          appState={ this.appState }
+          appState={ this.state }
           app={ this } />
 
         <WBProcessView path="/process/:uuid" app={ this } />
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 9efb555..c67af04 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
-import WBNavbar from 'wb-navbar';
+import WBNavbarCommon from 'wb-navbar-common';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 import WBProjectCrumbs from 'wb-project-crumbs';
@@ -25,18 +25,13 @@ class WBBrowse extends Component {
     route(this.getUrl(params));
   }
 
-  render({ ownerUuid, activePage, appCallbacks, appState, app,
+  render({ ownerUuid, activePage, appState, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
     return (
       <div>
-        <WBNavbar items={ [
-          { 'name': 'Home', 'id': 'home', 'active': (ownerUuid === appState.currentUser.uuid) },
-          { 'name': 'All Projects', 'id': 'all-projects', 'active': (!ownerUuid) },
-          { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
-        ] } rhs={ (
-          <WBInlineSearch />
-        ) } onItemClicked={ appCallbacks.navbarItemClicked } />
+        <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
+          (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
 
         <WBProjectCrumbs uuid={ ownerUuid } appState={ appState }
           onItemClicked={ item => route('/browse/' + item['uuid']) } />
diff --git a/frontend/src/js/page/wb-sign-out.js b/frontend/src/js/page/wb-sign-out.js
new file mode 100644
index 0000000..04e98c8
--- /dev/null
+++ b/frontend/src/js/page/wb-sign-out.js
@@ -0,0 +1,19 @@
+import { h, Component } from 'preact';
+import { route } from 'preact-router';
+
+class WBSignOut extends Component {
+  componentDidMount() {
+    delete window.localStorage['arvHost'];
+    delete window.localStorage['arvToken'];
+    delete window.localStorage['currentUser'];
+    route('/sign-in');
+  }
+
+  render() {
+    return (
+      <div>Signing out...</div>
+    );
+  }
+}
+
+export default WBSignOut;
diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js
index 5e79335..5388a0f 100644
--- a/frontend/src/js/page/wb-users-page.js
+++ b/frontend/src/js/page/wb-users-page.js
@@ -10,7 +10,7 @@ class WBUsersPage extends Component {
   render({ app, page }) {
     return (
       <div>
-        <WBNavbarCommon />
+        <WBNavbarCommon app={ app } activeItem="all-users" />
 
         <WBUserListing app={ app } page={ Number(page || 0) }
           getPageUrl={ page => this.getUrl(page) } />

From d682eea9ac81d0c418c02b744554a1268f6a0a6c Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 4 Feb 2020 15:41:00 +0100
Subject: [PATCH 032/170] Better sign out.

---
 frontend/src/js/page/wb-app.js      | 2 +-
 frontend/src/js/page/wb-sign-out.js | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 91e5c5c..c2993fc 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -48,7 +48,7 @@ class WBApp extends Component {
 
         <WBSignIn path="/sign-in" appState={ this.state } />
 
-        <WBSignOut path='/sign-out' />
+        <WBSignOut path='/sign-out' app={ this } />
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
           appState={ this.state }
diff --git a/frontend/src/js/page/wb-sign-out.js b/frontend/src/js/page/wb-sign-out.js
index 04e98c8..0ecae35 100644
--- a/frontend/src/js/page/wb-sign-out.js
+++ b/frontend/src/js/page/wb-sign-out.js
@@ -3,9 +3,12 @@ import { route } from 'preact-router';
 
 class WBSignOut extends Component {
   componentDidMount() {
-    delete window.localStorage['arvHost'];
-    delete window.localStorage['arvToken'];
-    delete window.localStorage['currentUser'];
+    const { app } = this.props;
+    const keys = ['arvHost', 'arvToken', 'currentUser'];
+    for (let i = 0; i < keys.length; i++) {
+      delete app.state[keys[i]];
+      delete window.localStorage[keys[i]];
+    }
     route('/sign-in');
   }
 

From 5e3404231297fa68fcc22664b28a3503d2814b2b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 5 Feb 2020 17:59:14 +0100
Subject: [PATCH 033/170] Added WBWorkflowListing.

---
 frontend/src/js/component/wb-name-and-uuid.js | 10 ++-
 .../src/js/component/wb-workflow-listing.js   | 84 +++++++++++++++++++
 frontend/src/js/misc/wb-fetch-objects.js      | 33 ++++++++
 frontend/src/js/page/wb-browse.js             |  8 +-
 4 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/js/component/wb-workflow-listing.js
 create mode 100644 frontend/src/js/misc/wb-fetch-objects.js

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index fe0abad..9f8aefc 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -6,12 +6,18 @@ import arvadosTypeName from 'arvados-type-name';
 
 class WBNameAndUuid extends Component {
   componentDidMount() {
-    let { uuid, app } = this.props;
-    let { arvHost, arvToken } = app.state;
+    const { uuid, app, lookup } = this.props;
 
     if (!uuid)
       return;
 
+    if (uuid in lookup) {
+      this.setState({ 'item': lookup[uuid]});
+      return;
+    }
+
+    const { arvHost, arvToken } = app.state;
+
     let prom = new Promise(accept => accept());
 
     if (/[0-9a-f]{32}\+[0-9]+/g.exec(uuid)) {
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
new file mode 100644
index 0000000..6329cd1
--- /dev/null
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -0,0 +1,84 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import wbFetchObjects from 'wb-fetch-objects';
+import wbFormatDate from 'wb-format-date';
+
+class WBWorkflowListing extends Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+  }
+
+  componentDidMount() {
+    this.fetchItems();
+  }
+
+  prepareRows(items, ownerLookup) {
+    return items.map(item => [
+      ( <WBNameAndUuid uuid={ item.uuid } lookup={ { [item.uuid]: item } } /> ),
+      item.description,
+      ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
+      wbFormatDate(item.created_at),
+      (<div>
+        <button class="btn btn-outline-success mx-1 my-1" title="Run"><i class="fas fa-running"></i></button>
+        <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
+        <button class="btn btn-outline-danger mx-1 my-1" title="Delete"><i class="fas fa-trash"></i></button>
+      </div>)
+    ]);
+  }
+
+  fetchItems() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { page, itemsPerPage, ownerUuid } = this.props;
+    const filters = [];
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    const select = ['uuid', 'name', 'description', 'owner_uuid', 'created_at'];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/workflows?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&select=' + encodeURIComponent(JSON.stringify(select)) +
+      '&limit=' + encodeURIComponent(itemsPerPage) +
+      '&offset=' + encodeURIComponent(itemsPerPage * page));
+    let workflowResp;
+    prom = prom.then(xhr => (workflowResp = xhr.response));
+    prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
+      workflowResp.items.map(it => it.owner_uuid)));
+    let ownerLookup;
+    prom = prom.then(lookup => (ownerLookup = lookup));
+    prom = prom.then(() =>
+      this.setState({
+        'numPages': Math.ceil(workflowResp['items_available'] / workflowResp['limit']),
+        'rows': this.prepareRows(workflowResp.items, ownerLookup)
+      }));
+  }
+
+  componentWillReceiveProps(nextProps, nextState) {
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
+    return (
+      <div>
+        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages }
+          activePage={ page }
+          getPageUrl={ getPageUrl } />
+      </div>
+    );
+  }
+}
+
+WBWorkflowListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBWorkflowListing;
diff --git a/frontend/src/js/misc/wb-fetch-objects.js b/frontend/src/js/misc/wb-fetch-objects.js
new file mode 100644
index 0000000..bcc47e2
--- /dev/null
+++ b/frontend/src/js/misc/wb-fetch-objects.js
@@ -0,0 +1,33 @@
+import arvadosTypeName from 'arvados-type-name';
+import makeArvadosRequest from 'make-arvados-request';
+
+function wbFetchObjects(arvHost, arvToken, uuids) {
+  const unique = {};
+  uuids.map(u => (unique[u] = true));
+  uuids = {};
+  Object.keys(unique).map(u => {
+    let typeName = arvadosTypeName(u);
+    if (!(typeName in uuids))
+      uuids[typeName] = [];
+    uuids[typeName].push(u);
+  });
+
+  const lookup = {};
+  let prom = new Promise(accept => accept());
+  for (let typeName in uuids) {
+    let filters = [
+      ['uuid', 'in', uuids[typeName]]
+    ];
+    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + typeName + 's?filters=' +
+      encodeURIComponent(JSON.stringify(filters))));
+    prom = prom.then(xhr => xhr.response.items.map(it => (
+      lookup[it.uuid] = it)));
+  }
+
+  prom = prom.then(() => lookup);
+
+  return prom;
+}
+
+export default wbFetchObjects;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index c67af04..a552abe 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -7,6 +7,7 @@ import WBProjectCrumbs from 'wb-project-crumbs';
 import WBTabs from 'wb-tabs';
 import WBProcessListing from 'wb-process-listing';
 import WBCollectionListing from 'wb-collection-listing';
+import WBWorkflowListing from 'wb-workflow-listing';
 
 class WBBrowse extends Component {
   getUrl(params) {
@@ -67,7 +68,12 @@ class WBBrowse extends Component {
               onPageChanged={ i => this.route({ 'processPage': i }) } />
 
           ) : (objTypeTab === 'workflow' ? (
-            null
+            <WBWorkflowListing app={ app }
+              ownerUuid={ ownerUuid }
+              itemsPerPage="20"
+              page={ Number(workflowPage || 0) }
+              getPageUrl={ i => this.getUrl({ 'workflowPage': i }) } />
+              
           ) : null))
         }
       </div>

From dc1c6c282f5ce2dd2cefbd30fcd357dfc8ffb9ea Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 5 Feb 2020 18:13:50 +0100
Subject: [PATCH 034/170] Changed default collection url to content browser,
 added properties as optional action in the listing.

---
 frontend/src/js/component/wb-collection-listing.js | 13 +++++++++++--
 frontend/src/js/component/wb-name-and-uuid.js      |  2 +-
 frontend/src/js/misc/url-for-object.js             | 11 +++++++----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 993839c..90caaf1 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -39,7 +39,16 @@ class WBCollectionListing extends Component {
         <div>{ item.owner_uuid }</div>
       </div>),
       item['file_count'],
-      filesize(item['file_size_total'])
+      filesize(item['file_size_total']),
+      (<div>
+        <a class="btn btn-outline-primary m-1" title="Properties"
+          href={ urlForObject(item, 'properties') }>
+          <i class="fas fa-list-ul"></i>
+        </a>
+        <button class="btn btn-outline-danger m-1" title="Delete">
+          <i class="fas fa-trash"></i>
+        </button>
+      </div>)
     ]);
   }
 
@@ -109,7 +118,7 @@ class WBCollectionListing extends Component {
   render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size' ] }
+        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 9f8aefc..4f1eaf8 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -11,7 +11,7 @@ class WBNameAndUuid extends Component {
     if (!uuid)
       return;
 
-    if (uuid in lookup) {
+    if (lookup && (uuid in lookup)) {
       this.setState({ 'item': lookup[uuid]});
       return;
     }
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index eaba75c..31c17e1 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -1,6 +1,6 @@
 import arvadosTypeName from 'arvados-type-name';
 
-function urlForObject(item) {
+function urlForObject(item, mode='primary') {
   let objectType = arvadosTypeName(item.uuid.split('-')[1]);
   if (objectType === 'user')
     return ('/browse/' + item.uuid);
@@ -10,9 +10,12 @@ function urlForObject(item) {
     return ('/process/' + item.uuid);
   else if (objectType === 'workflow')
     return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
-  else if (objectType === 'collection')
-    return ('/collection/' + item.uuid);
-  else if (objectType === 'container')
+  else if (objectType === 'collection') {
+    if (mode === 'primary' || mode === 'browse')
+      return ('/collection-browse/' + item.uuid);
+    else
+      return ('/collection/' + item.uuid);
+  } else if (objectType === 'container')
     return ('https://wb.arkau.roche.com/containers/' + item.uuid);
 }
 

From e6df9e0eb335a5740162e372a30a6fbeef215812 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 5 Feb 2020 18:43:06 +0100
Subject: [PATCH 035/170] Started implementing request ordering.

---
 .../src/js/component/wb-collection-listing.js  | 18 +++++++++++++++---
 frontend/src/js/misc/make-arvados-request.js   | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 90caaf1..a008878 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -13,6 +13,7 @@ class WBCollectionListing extends Component {
     super(...args);
     this.state.rows = [];
     this.state.numPages = 0;
+    this.state.orderStream = uuid.v4();
   }
 
   componentDidMount() {
@@ -65,7 +66,8 @@ class WBCollectionListing extends Component {
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + encodeURIComponent(itemsPerPage) +
-      '&offset=' + encodeURIComponent(itemsPerPage * activePage));
+      '&offset=' + encodeURIComponent(itemsPerPage * activePage),
+      { 'orderStream': this.state.orderStream });
 
     let collections;
     let numPages
@@ -106,8 +108,14 @@ class WBCollectionListing extends Component {
     prom = prom.then(ownerLookup =>
       this.setState({
         'numPages': numPages,
-        'rows': this.prepareRows(collections, ownerLookup)
+        'rows': this.prepareRows(collections, ownerLookup),
+        'error': null
       }));
+
+    prom = prom.catch(() => this.setState({
+      'error': 'An error occured querying the Arvados API',
+      'rows': []
+    }));
   }
 
   componentWillReceiveProps(nextProps, nextState) {
@@ -115,9 +123,13 @@ class WBCollectionListing extends Component {
     this.fetchItems();
   }
 
-  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
+  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error }) {
     return (
       <div>
+        { error ? (<div class="alert alert-danger" role="alert">
+          { error }
+        </div>) : null }
+
         <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
           rows={ rows } />
 
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 7783872..a285f08 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -1,3 +1,4 @@
+const requestOrdering = {};
 
 function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
   const defaultParams = {
@@ -6,12 +7,22 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     'contentType': 'application/json;charset=utf-8',
     'responseType': 'json',
     'useSsl': true,
-    'requireToken': true
+    'requireToken': true,
+    'orderStream': null
   };
 
   Object.keys(defaultParams).map(k => (params[k] =
     (k in params ? params[k] : defaultParams[k])));
-  let { method, data, contentType, responseType, useSsl, requireToken } = params;
+  let { method, data, contentType, responseType, useSsl, requireToken, orderStream } = params;
+
+  let orderId;
+  if (orderStream) {
+    if (!(orderStream in requestOrdering))
+      requestOrdering[orderStream] = { 'counter': 0, 'started': [], 'completed': [] };
+    requestOrdering[orderStream].counter += 1;
+    orderId = requestOrdering[orderStream].counter;
+    requestOrdering[orderStream].started.push(orderId);
+  }
 
   if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());

From d955e5b1ee5cf93858d95160f9ee473193459df6 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 07:37:23 +0100
Subject: [PATCH 036/170] Request ordering implemented and seems to be working
 but decreases responsiveness, perhaps better to manage ordering within
 components.

---
 .../src/js/component/wb-collection-listing.js |  3 +-
 frontend/src/js/misc/make-arvados-request.js  | 22 ++-----
 .../src/js/misc/wb-apply-request-ordering.js  | 66 +++++++++++++++++++
 3 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-apply-request-ordering.js

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index a008878..0eeb5e6 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -66,8 +66,7 @@ class WBCollectionListing extends Component {
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + encodeURIComponent(itemsPerPage) +
-      '&offset=' + encodeURIComponent(itemsPerPage * activePage),
-      { 'orderStream': this.state.orderStream });
+      '&offset=' + encodeURIComponent(itemsPerPage * activePage));
 
     let collections;
     let numPages
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index a285f08..0ce66a0 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -1,4 +1,4 @@
-const requestOrdering = {};
+import wbApplyRequestOrdering from 'wb-apply-request-ordering';
 
 function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
   const defaultParams = {
@@ -7,22 +7,12 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     'contentType': 'application/json;charset=utf-8',
     'responseType': 'json',
     'useSsl': true,
-    'requireToken': true,
-    'orderStream': null
+    'requireToken': true
   };
 
   Object.keys(defaultParams).map(k => (params[k] =
     (k in params ? params[k] : defaultParams[k])));
-  let { method, data, contentType, responseType, useSsl, requireToken, orderStream } = params;
-
-  let orderId;
-  if (orderStream) {
-    if (!(orderStream in requestOrdering))
-      requestOrdering[orderStream] = { 'counter': 0, 'started': [], 'completed': [] };
-    requestOrdering[orderStream].counter += 1;
-    orderId = requestOrdering[orderStream].counter;
-    requestOrdering[orderStream].started.push(orderId);
-  }
+  let { method, data, contentType, responseType, useSsl, requireToken } = params;
 
   if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());
@@ -35,7 +25,7 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.setRequestHeader('Content-Type', contentType);
   xhr.responseType = responseType;
 
-  let res = new Promise((accept, reject) => {
+  let prom = new Promise((accept, reject) => {
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4)
         return;
@@ -47,7 +37,9 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.send(data);
   });
 
-  return res;
+  // prom = wbApplyRequestOrdering(prom);
+
+  return prom;
 }
 
 export default makeArvadosRequest;
diff --git a/frontend/src/js/misc/wb-apply-request-ordering.js b/frontend/src/js/misc/wb-apply-request-ordering.js
new file mode 100644
index 0000000..860fd77
--- /dev/null
+++ b/frontend/src/js/misc/wb-apply-request-ordering.js
@@ -0,0 +1,66 @@
+const defaultOrderRegistry = {};
+
+function wbApplyRequestOrdering(prom, orderRegistry) {
+  let orderId;
+
+  if (!orderRegistry)
+    orderRegistry = defaultOrderRegistry;
+
+  if (Object.keys(orderRegistry).length === 0) {
+    orderRegistry.started = 0;
+    orderRegistry.pendingCompletion = {};
+    orderRegistry.completed = { 0: true };
+  }
+
+  orderRegistry.started += 1;
+  orderId = orderRegistry.started;
+  // console.log('New orderId: ' + orderId);
+
+  const orderCallback = ((isCatch, payload) => {
+    // console.log('orderId: ' + orderId +
+    //  ', pendingCompletion: ' + Object.keys(orderRegistry.pendingCompletion) +
+    //  ', completed: ' + Object.keys(orderRegistry.completed));
+
+    if ((orderId - 1) in orderRegistry.completed) {
+      // console.log('Running: ' + orderId);
+      orderRegistry.completed[orderId] = true;
+      delete orderRegistry.pendingCompletion[orderId];
+
+      const keys = Object.keys(orderRegistry.pendingCompletion);
+      keys.sort((a, b) => (a - b));
+      keys.map(k => {
+        if ((k - 1) in orderRegistry.completed) {
+          // console.log('Running: ' + k);
+          orderRegistry.pendingCompletion[k]();
+          orderRegistry.completed[k] = true;
+          delete orderRegistry.pendingCompletion[k];
+        }
+      });
+
+      if (orderRegistry.started in orderRegistry.completed) {
+        // console.log('Garbage collect');
+        orderRegistry.started = 0;
+        orderRegistry.completed = { 0: true };
+      }
+
+      if (isCatch)
+        throw payload;
+      else
+        return payload;
+    }
+
+    const prom_1 = new Promise((accept, reject) => {
+      orderRegistry.pendingCompletion[orderId] = (() =>
+        (isCatch ? reject(payload) : accept(payload)));
+    });
+
+    return prom_1;
+  });
+
+  prom = prom.then(xhr => orderCallback(false, xhr));
+  prom = prom.catch(e => orderCallback(true, e));
+
+  return prom;
+}
+
+export default wbApplyRequestOrdering;

From e19c17708ad766c9da48413f6eb07febca4b3432 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 08:01:22 +0100
Subject: [PATCH 037/170] Renamed wbApplyRequestOrdering to more universal
 wpApplyPromiseOrdering.

---
 frontend/src/js/component/wb-arvados-crumbs.js              | 4 +++-
 frontend/src/js/misc/make-arvados-request.js                | 6 ++++--
 ...ply-request-ordering.js => wb-apply-promise-ordering.js} | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)
 rename frontend/src/js/misc/{wb-apply-request-ordering.js => wb-apply-promise-ordering.js} (91%)

diff --git a/frontend/src/js/component/wb-arvados-crumbs.js b/frontend/src/js/component/wb-arvados-crumbs.js
index f4612f1..233be8e 100644
--- a/frontend/src/js/component/wb-arvados-crumbs.js
+++ b/frontend/src/js/component/wb-arvados-crumbs.js
@@ -16,7 +16,9 @@ class WBArvadosCrumbs extends Component {
 
     let { arvHost, arvToken } = this.props.app.state;
     let prom = fetchObjectParents(arvHost, arvToken, this.props.uuid);
-    prom = prom.then(parents => this.setState({ 'items': parents }));
+    prom = prom.then(parents => {
+      this.setState({ 'items': parents });
+    });
   }
 
   componentDidMount() {
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 0ce66a0..7ed69a5 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -1,4 +1,6 @@
-import wbApplyRequestOrdering from 'wb-apply-request-ordering';
+import wbApplyPromiseOrdering from 'wb-apply-promise-ordering';
+
+const requestPromiseOrdering = {};
 
 function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
   const defaultParams = {
@@ -37,7 +39,7 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.send(data);
   });
 
-  // prom = wbApplyRequestOrdering(prom);
+  prom = wbApplyPromiseOrdering(prom, requestPromiseOrdering);
 
   return prom;
 }
diff --git a/frontend/src/js/misc/wb-apply-request-ordering.js b/frontend/src/js/misc/wb-apply-promise-ordering.js
similarity index 91%
rename from frontend/src/js/misc/wb-apply-request-ordering.js
rename to frontend/src/js/misc/wb-apply-promise-ordering.js
index 860fd77..161b0db 100644
--- a/frontend/src/js/misc/wb-apply-request-ordering.js
+++ b/frontend/src/js/misc/wb-apply-promise-ordering.js
@@ -1,6 +1,6 @@
 const defaultOrderRegistry = {};
 
-function wbApplyRequestOrdering(prom, orderRegistry) {
+function wbApplyPromiseOrdering(prom, orderRegistry) {
   let orderId;
 
   if (!orderRegistry)
@@ -63,4 +63,4 @@ function wbApplyRequestOrdering(prom, orderRegistry) {
   return prom;
 }
 
-export default wbApplyRequestOrdering;
+export default wbApplyPromiseOrdering;

From cacfe20b80eecdb0b995743bf57b101459b2f61c Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 08:03:39 +0100
Subject: [PATCH 038/170] Fix for colon parsing in manifests.

---
 frontend/src/js/misc/wb-collection-manifest.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
index 68fb05e..1f455ad 100644
--- a/frontend/src/js/misc/wb-collection-manifest.js
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -105,7 +105,8 @@ class WBManifestReader {
 
       let fileTokens = tokens.slice(n);
       fileTokens.map(t => {
-        let [ position, size, fileName ] = t.split(':');
+        let [ position, size, ...fileName ] = t.split(':');
+        fileName = fileName.join(':');
         fileName = this.unescapeName(fileName);
         this.appendFile(streamName, locators,
           Number(position), Number(size), fileName);

From e92f70b6ad488be1d0f754669a7bf606a718fe67 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 08:55:24 +0100
Subject: [PATCH 039/170] Added WBWorkflowView.

---
 .../src/js/component/wb-workflow-fields.js    | 99 +++++++++++++++++++
 frontend/src/js/misc/url-for-object.js        |  2 +-
 frontend/src/js/page/wb-app.js                |  3 +
 frontend/src/js/page/wb-workflow-view.js      | 29 ++++++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-workflow-fields.js
 create mode 100644 frontend/src/js/page/wb-workflow-view.js

diff --git a/frontend/src/js/component/wb-workflow-fields.js b/frontend/src/js/component/wb-workflow-fields.js
new file mode 100644
index 0000000..b84f786
--- /dev/null
+++ b/frontend/src/js/component/wb-workflow-fields.js
@@ -0,0 +1,99 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import WBAccordion from 'wb-accordion';
+
+class WBWorkflowFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/workflows/' + uuid);
+
+    prom = prom.then(xhr => {
+      const item = xhr.response;
+      const definition = JSON.parse(item.definition);
+      const graph = definition['$graph'];
+
+      let rows = [
+        [ 'Name', item.name ],
+        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+        [ 'CWL Version', definition.cwlVersion ],
+      ];
+
+      let keys = graph.map(it => it.id);
+      keys.sort();
+      keys = keys.splice(keys.indexOf('#main'), 1).concat(keys);
+
+      keys.map(k => {
+        const it = graph.find(it => (it.id === k));
+        rows.push([
+          it.id, (
+            <div>
+              <div>Class: { it['class'] }</div>
+              { it.label ? <div>Label: { it.label }</div> : null }
+              { it.doc ? <div>Doc: { it.doc }</div> : null }
+              <WBAccordion names={ [ 'Inputs', 'Outputs', 'Rest' ] }
+                cardHeaderClass="card-header-sm">
+
+                <pre class="word-wrap">{ JSON.stringify(it.inputs, null, 2) }</pre>
+
+                <pre class="word-wrap">{ JSON.stringify(it.outputs, null, 2) }</pre>
+
+                { (() => {
+                  delete it['inputs'];
+                  delete it['outputs'];
+                  delete it['class'];
+                  delete it['label'];
+                  delete it['doc'];
+                  delete it['id'];
+                  return (
+                    <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+                  );
+                })() }
+
+              </WBAccordion>
+            </div>
+          )]);
+      });
+
+      /*  [ 'Graph', (
+          <WBAccordion names={ graph.map(it => it.id) }
+            cardHeaderClass="card-header-sm">
+
+            { graph.map(it => (
+              <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+            )) }
+
+          </WBAccordion>
+        ) ]
+      ];*/
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows }
+          verticalHeader={ true } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBWorkflowFields;
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index 31c17e1..9212278 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -9,7 +9,7 @@ function urlForObject(item, mode='primary') {
   else if (objectType === 'container_request')
     return ('/process/' + item.uuid);
   else if (objectType === 'workflow')
-    return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
+    return ('/workflow/' + item.uuid);
   else if (objectType === 'collection') {
     if (mode === 'primary' || mode === 'browse')
       return ('/collection-browse/' + item.uuid);
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index c2993fc..c2e214b 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -8,6 +8,7 @@ import WBProcessView from 'wb-process-view';
 import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
+import WBWorkflowView from 'wb-workflow-view';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -61,6 +62,8 @@ class WBApp extends Component {
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
 
         <WBUsersPage path='/users/:page?' app={ this } />
+
+        <WBWorkflowView path="/workflow/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-workflow-view.js b/frontend/src/js/page/wb-workflow-view.js
new file mode 100644
index 0000000..a3a4aab
--- /dev/null
+++ b/frontend/src/js/page/wb-workflow-view.js
@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBWorkflowFields from 'wb-workflow-fields';
+
+class WBWorkflowView extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the workflow view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Workflow Fields</h2>
+        <WBWorkflowFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBWorkflowView;

From 7a49cdce1e086270bd6f7dda1a9e27e4c2cde2af Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 10:11:06 +0100
Subject: [PATCH 040/170] Fixes not to fetch manifest_text when not needed.

---
 .../src/js/component/wb-collection-fields.js  | 13 +++++--
 frontend/src/js/component/wb-common-fields.js | 15 +++----
 frontend/src/js/component/wb-name-and-uuid.js | 26 +++++++++----
 .../fetch-project-parents.js                  |  0
 .../wb-project-crumbs.js                      |  0
 frontend/src/js/misc/fetch-object-parents.js  | 39 ++++++++-----------
 frontend/src/js/page/wb-browse.js             |  7 ++--
 7 files changed, 56 insertions(+), 44 deletions(-)
 rename frontend/src/js/{misc => deprecated}/fetch-project-parents.js (100%)
 rename frontend/src/js/{component => deprecated}/wb-project-crumbs.js (100%)

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index 7f2d93a..e660eb5 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -22,12 +22,17 @@ class WBCollectionFields extends Component {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
-    let item;
+    const filters = [
+      ['uuid', '=', uuid]
+    ];
+    
     let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/collections/' + uuid);
-    prom = prom.then(xhr => (item = xhr.response));
+      '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
 
-    prom = prom.then(() => {
+    prom = prom.then(xhr => {
+      const item = xhr.response.items[0];
+      if (!item)
+        throw Error('Item not found');
       let rows = [
         [ 'Name', item.name ],
         [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index 65bf0ce..d895bdc 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -22,17 +22,18 @@ class WBCommonFields extends Component {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
-    let item;
-    let owner;
-    let modifiedByUser;
+    const filters = [
+      ['uuid', '=', uuid]
+    ];
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/' + arvadosTypeName(uuid) +
-      's/' + uuid);
+      's?filters=' + encodeURIComponent(JSON.stringify(filters)));
 
-    prom = prom.then(xhr => (item = xhr.response));
-
-    prom = prom.then(() => {
+    prom = prom.then(xhr => {
+      const item = xhr.response.items[0];
+      if (!item)
+        throw Error('Item not found');
       let rows = [
         [ 'UUID', item.uuid ],
         [ 'Kind', item.kind ],
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 4f1eaf8..4d02be5 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -45,14 +45,26 @@ class WBNameAndUuid extends Component {
 
     } else if (/[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(uuid)) {
       let typeName = arvadosTypeName(uuid);
+      const filters = [
+        ['uuid', '=', uuid]
+      ];
       let prom = makeArvadosRequest(arvHost, arvToken,
-        '/arvados/v1/' + typeName + 's/' + uuid );
-      prom = prom.then(xhr => this.setState({
-        'item': xhr.response
-      }));
-      prom = prom.catch(xhr => this.setState({
-        'error': 'Unable to retrieve: ' + xhr.status + ' (' + xhr.statusText + ')'
-      }));
+        '/arvados/v1/' + typeName +
+        's?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      prom = prom.then(xhr => {
+        const item = xhr.response.items[0];
+        if (!item)
+          this.setState({ 'error': 'Item not found' });
+        else
+          this.setState({
+            'item': item
+          });
+      });
+      prom = prom.catch(xhr => {
+        this.setState({
+          'error': 'Unable to retrieve: ' + xhr.status + ' (' + xhr.statusText + ')'
+        });
+      });
 
     } else {
       this.setState({
diff --git a/frontend/src/js/misc/fetch-project-parents.js b/frontend/src/js/deprecated/fetch-project-parents.js
similarity index 100%
rename from frontend/src/js/misc/fetch-project-parents.js
rename to frontend/src/js/deprecated/fetch-project-parents.js
diff --git a/frontend/src/js/component/wb-project-crumbs.js b/frontend/src/js/deprecated/wb-project-crumbs.js
similarity index 100%
rename from frontend/src/js/component/wb-project-crumbs.js
rename to frontend/src/js/deprecated/wb-project-crumbs.js
diff --git a/frontend/src/js/misc/fetch-object-parents.js b/frontend/src/js/misc/fetch-object-parents.js
index 65a06fe..ea1d1c9 100644
--- a/frontend/src/js/misc/fetch-object-parents.js
+++ b/frontend/src/js/misc/fetch-object-parents.js
@@ -1,46 +1,41 @@
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
 
 function fetchObjectParents(arvHost, arvToken, uuid) {
   let parents = [];
 
   let cb = xhr => {
-    let objectType = arvadosTypeName(xhr.response['uuid'].split('-')[1]);
-
-    let item = {
-      'uuid': xhr.response['uuid']
-    };
-
-    if (objectType === 'user') {
-      item['name'] = xhr.response['first_name'] + ' ' + xhr.response['last_name'];
-
-    } else {
-      item['name'] = xhr.response['name'];
-    }
-
-    if (objectType === 'group') {
-      item['group_class'] = xhr.response['group_class'];
-    }
+    const item = xhr.response.items[0];
+    if (!item)
+      return parents.reverse();
 
+    item.name = arvadosObjectName(item);
     parents.push(item);
 
-    if (!xhr.response['owner_uuid'] ||
-      xhr.response['owner_uuid'].endsWith('-tpzed-000000000000000')) {
+    if (!item.owner_uuid ||
+      item.owner_uuid.endsWith('-tpzed-000000000000000')) {
 
       return parents.reverse();
     }
 
-    objectType = arvadosTypeName(xhr.response['owner_uuid'].split('-')[1]);
+    const objectType = arvadosTypeName(item.owner_uuid);
+    const filters = [
+      ['uuid', '=', item.owner_uuid]
+    ];
 
     return makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/' + objectType + 's' +
-      '/' + xhr.response['owner_uuid']).then(cb);
+      '?filters=' + encodeURIComponent(JSON.stringify(filters))).then(cb);
   };
 
-  let objectType = arvadosTypeName(uuid.split('-')[1]);
+  const objectType = arvadosTypeName(uuid);
+  const filters = [
+    ['uuid', '=', uuid]
+  ];
   let prom = makeArvadosRequest(arvHost, arvToken,
     '/arvados/v1/' + objectType + 's' +
-    '/' + uuid);
+    '?filters=' + encodeURIComponent(JSON.stringify(filters)));
   prom = prom.then(cb);
 
   return prom;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index a552abe..4a8506c 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -3,7 +3,7 @@ import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
-import WBProjectCrumbs from 'wb-project-crumbs';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBTabs from 'wb-tabs';
 import WBProcessListing from 'wb-process-listing';
 import WBCollectionListing from 'wb-collection-listing';
@@ -34,8 +34,7 @@ class WBBrowse extends Component {
         <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
           (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
 
-        <WBProjectCrumbs uuid={ ownerUuid } appState={ appState }
-          onItemClicked={ item => route('/browse/' + item['uuid']) } />
+        <WBArvadosCrumbs uuid={ ownerUuid } app={ app } />
 
         <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />
 
@@ -73,7 +72,7 @@ class WBBrowse extends Component {
               itemsPerPage="20"
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) } />
-              
+
           ) : null))
         }
       </div>

From 56c58b325db80c66fe4b9b7822f6889661863f5b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 6 Feb 2020 14:27:43 +0100
Subject: [PATCH 041/170] Working on workflow launcher

---
 frontend/src/js/page/wb-app.js                |  3 +
 .../src/js/page/wb-launch-workflow-page.js    | 97 +++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 frontend/src/js/page/wb-launch-workflow-page.js

diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index c2e214b..5ec264b 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -9,6 +9,7 @@ import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
 import WBWorkflowView from 'wb-workflow-view';
+import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -64,6 +65,8 @@ class WBApp extends Component {
         <WBUsersPage path='/users/:page?' app={ this } />
 
         <WBWorkflowView path="/workflow/:uuid" app={ this } />
+
+        <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid/:projectUuid?" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
new file mode 100644
index 0000000..db2ca9e
--- /dev/null
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import makeArvadosRequest from 'make-arvados-request';
+import linkState from 'linkstate';
+
+function createInputsTemplate(workflow) {
+  const g = JSON.parse(workflow.definition)['$graph'];
+  const main = g.find(it => (it.id === '#main'));
+  /* let res = '';
+  main.inputs.map(it => {
+    let id = it.id.split('/');
+    id = id[id.length - 1];
+    if (it.label) res += '  // ' + it.label + '\n';
+    if (it.doc) res += ' //' + it.doc + '\n';
+    res += '  ' + it.type
+    res += '\'' + it.id + '\': null'
+  }); */
+  let res = main.inputs.map(it => { it.value = null; return it; });
+  res = JSON.stringify(res, null, 2);
+  res = res.split('\n');
+  res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
+  res = res.join('\n');
+  return res;
+}
+
+class WBLaunchWorkflowPage extends Component {
+  componentDidMount() {
+    let { app, workflowUuid } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/workflows/' + workflowUuid);
+    prom = prom.then(xhr => this.setState({
+      'workflow': xhr.response,
+      'processName': xhr.response.name,
+      'processDescription': xhr.response.description,
+      'inputsFunctionText': '(() => {\n  return ' +
+        createInputsTemplate(xhr.response) +
+        ';\n})()'
+    }));
+  }
+
+  render({ app, projectUuid, workflowUuid },
+    { workflow, processName, processDescription,
+    inputsFunctionText }) {
+
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        { workflow ?
+          (<form class="container-fluid">
+            <h1>Launch Workflow</h1>
+
+            <div class="form-group">
+              <label>Workflow</label>
+              <WBArvadosCrumbs app={ app } uuid={ workflowUuid } />
+            </div>
+
+            <div class="form-group">
+              <label for="projectUuid">Project UUID</label>
+              <input type="email" class="form-control" id="projectUuid" placeholder="Enter project uuid" />
+            </div>
+
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="createSubproject" />
+              <label class="form-check-label" for="createSubproject">Create subproject</label>
+            </div>
+
+            <div class="form-group">
+              <label for="processName">Process Name</label>
+              <input type="text" class="form-control" id="processName"
+                placeholder="Enter process name" value={ processName }
+                onChange={ linkState(this, 'processName') }/>
+            </div>
+
+            <div class="form-group">
+              <label for="processDescription">Process Description</label>
+              <input type="text" class="form-control" id="processDescription"
+                placeholder="Enter process name" value={ processDescription }
+                onChange={ linkState(this, 'processDescription') } />
+            </div>
+
+            <div class="form-group">
+              <label for="inputs">Inputs</label>
+              <textarea class="form-control" id="inputs"
+                style="font-family: monospace;" rows="20"
+                value={ inputsFunctionText }></textarea>
+            </div>
+          </form>) : <div>Loading...</div> }
+      </div>
+    );
+  }
+}
+
+export default WBLaunchWorkflowPage;

From 236dc12fcad0d48c46750204b274896c5a58d054 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 12:40:39 +0100
Subject: [PATCH 042/170] Continuing work on workflow launcher

---
 .gitignore                                    |  2 +-
 frontend/rollup.config.js                     |  2 +-
 .../src/js/component/wb-collection-listing.js |  8 ++
 .../src/js/component/wb-project-listing.js    | 13 +++-
 .../src/js/component/wb-workflow-listing.js   |  4 +-
 .../src/js/deprecated/wb-browse-dialog.js     | 35 +++++++++
 frontend/src/js/dialog/wb-toolbox-dialog.js   | 77 +++++++++++++++++++
 frontend/src/js/misc/url-for-object.js        |  9 ++-
 frontend/src/js/page/wb-app.js                |  8 ++
 frontend/src/js/page/wb-browse.js             |  3 +-
 .../src/js/page/wb-launch-workflow-page.js    | 12 ++-
 11 files changed, 163 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/js/deprecated/wb-browse-dialog.js
 create mode 100644 frontend/src/js/dialog/wb-toolbox-dialog.js

diff --git a/.gitignore b/.gitignore
index 3ca30a8..f8d63e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,4 @@ node_modules
 package-lock.json
 /frontend/dist/
 /backend/server.pem
-
+/testdata/
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 7032717..1b9adb6 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -16,7 +16,7 @@ export default {
   },
   plugins: [
     includePaths({
-      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component', 'src/js/page']
+      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component', 'src/js/page', 'src/js/dialog']
     }),
     copy({
       'src/html/index.html': 'dist/index.html',
diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 0eeb5e6..9523399 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -21,6 +21,8 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
+    let { app } = this.props;
+    
     return items.map(item => [
       (<div>
         <div>
@@ -42,10 +44,16 @@ class WBCollectionListing extends Component {
       item['file_count'],
       filesize(item['file_size_total']),
       (<div>
+        <button class="btn btn-outline-warning m-1" title="Add to Toolbox"
+          onclick={ () => (app.addToToolbox(item.uuid)) }>
+          <i class="fas fa-toolbox"></i>
+        </button>
+
         <a class="btn btn-outline-primary m-1" title="Properties"
           href={ urlForObject(item, 'properties') }>
           <i class="fas fa-list-ul"></i>
         </a>
+
         <button class="btn btn-outline-danger m-1" title="Delete">
           <i class="fas fa-trash"></i>
         </button>
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index cb107d1..9d37885 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -17,6 +17,8 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
+    let { app } = this.props;
+    
     return items.map(item => [
       (<div>
         <div>
@@ -26,7 +28,13 @@ class WBProjectListing extends Component {
         <div>{ item['uuid'] }</div>
       </div>),
       item['description'],
-      item['owner_uuid']
+      item['owner_uuid'],
+      (<div>
+        <button class="btn btn-outline-warning m-1" title="Add to Toolbox"
+          onclick={ () => (app.addToToolbox(item.uuid)) }>
+          <i class="fas fa-toolbox"></i>
+        </button>
+      </div>)
     ]);
   }
 
@@ -57,8 +65,9 @@ class WBProjectListing extends Component {
   render({ arvHost, arvToken, ownerUuid, activePage, onPageChanged }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
+        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
           rows={ rows } />
+
         <WBPagination numPages={ numPages }
           activePage={ activePage }
           onPageChanged={ i => onPageChanged(i) } />
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 6329cd1..f7bb05b 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -5,6 +5,7 @@ import WBPagination from 'wb-pagination';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import wbFetchObjects from 'wb-fetch-objects';
 import wbFormatDate from 'wb-format-date';
+import urlForObject from 'url-for-object';
 
 class WBWorkflowListing extends Component {
 
@@ -25,7 +26,8 @@ class WBWorkflowListing extends Component {
       ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
       wbFormatDate(item.created_at),
       (<div>
-        <button class="btn btn-outline-success mx-1 my-1" title="Run"><i class="fas fa-running"></i></button>
+        <a class="btn btn-outline-success mx-1 my-1" title="Launch"
+          href={ urlForObject(item, 'launch') }><i class="fas fa-running"></i></a>
         <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
         <button class="btn btn-outline-danger mx-1 my-1" title="Delete"><i class="fas fa-trash"></i></button>
       </div>)
diff --git a/frontend/src/js/deprecated/wb-browse-dialog.js b/frontend/src/js/deprecated/wb-browse-dialog.js
new file mode 100644
index 0000000..7e97ce6
--- /dev/null
+++ b/frontend/src/js/deprecated/wb-browse-dialog.js
@@ -0,0 +1,35 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialog extends Component {
+  constructor(...args) {
+    super(...args);
+  }
+
+  render({ id }) {
+    return (
+      <div class="modal" id={ id } tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Browse</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+
+            <div class="modal-body m-0 p-0">
+              <iframe style="width: 100%;" src="/browse" />
+            </div>
+
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary">Accept</button>
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBBrowseDialog;
diff --git a/frontend/src/js/dialog/wb-toolbox-dialog.js b/frontend/src/js/dialog/wb-toolbox-dialog.js
new file mode 100644
index 0000000..4db2a06
--- /dev/null
+++ b/frontend/src/js/dialog/wb-toolbox-dialog.js
@@ -0,0 +1,77 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import wbFetchObjects from 'wb-fetch-objects';
+import wbFormatDate from 'wb-format-date';
+
+class WBToolboxDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    this.fetchRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchRows();
+  }
+
+  fetchRows() {
+    const { items } = this.props;
+    const { arvHost, arvToken } = this.props.app.state;
+    let prom = wbFetchObjects(arvHost, arvToken,
+      items);
+    let lookup;
+    prom = prom.then(lkup => (lookup = lkup));
+    prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
+      items.map(uuid => lookup[uuid].owner_uuid)));
+    let ownerLookup;
+    prom = prom.then(lkup => (ownerLookup = lkup));
+    prom = prom.then(() => {
+      const rows = items.map(uuid => {
+        const it = lookup[uuid];
+        const ow = ownerLookup[it.owner_uuid];
+        return [
+          ( <div><input type="checkbox" /></div> ),
+          ( <WBNameAndUuid uuid={ uuid } lookup={ lookup } /> ),
+          it.kind,
+          wbFormatDate(it.created_at),
+          ( <WBNameAndUuid uuid={ it.owner_uuid } lookup={ ownerLookup } /> )
+        ];
+      });
+      this.setState({ rows });
+    });
+  }
+
+  render({ id }, { rows }) {
+    return (
+      <div class="modal" id={ id } tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Browse Toolbox</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <WBTable columns={ [ '', 'Name', 'Kind', 'Created At', 'Owner' ] }
+                rows={ rows } />
+            </div>
+
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary">Accept</button>
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBToolboxDialog;
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index 9212278..b18e941 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -8,9 +8,12 @@ function urlForObject(item, mode='primary') {
     return ('/browse/' + item.uuid);
   else if (objectType === 'container_request')
     return ('/process/' + item.uuid);
-  else if (objectType === 'workflow')
-    return ('/workflow/' + item.uuid);
-  else if (objectType === 'collection') {
+  else if (objectType === 'workflow') {
+    if (mode === 'launch')
+      return ('/workflow-launch/' + item.uuid)
+    else
+      return ('/workflow/' + item.uuid);
+  } else if (objectType === 'collection') {
     if (mode === 'primary' || mode === 'browse')
       return ('/collection-browse/' + item.uuid);
     else
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 5ec264b..d3c842c 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -19,6 +19,8 @@ class WBApp extends Component {
     this.state.arvToken = window.localStorage['arvToken'];
     if ('currentUser' in window.localStorage)
       this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
+    this.state.toolboxItems = ('toolboxItems' in window.localStorage) ?
+      JSON.parse(window.localStorage['toolboxItems']) : [];
   }
 
   navbarItemUrl(item) {
@@ -43,6 +45,12 @@ class WBApp extends Component {
       route('/process/' + item.uuid)
   }
 
+  addToToolbox(uuid) {
+    this.state.toolboxItems.push(uuid);
+    window.localStorage['toolboxItems'] =
+      JSON.stringify(this.state.toolboxItems);
+  }
+
   render() {
     return (
       <Router>
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 4a8506c..c61bc83 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -38,7 +38,8 @@ class WBBrowse extends Component {
 
         <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />
 
-        <WBProjectListing arvHost={ appState.arvHost }
+        <WBProjectListing app={ app }
+          arvHost={ appState.arvHost }
           arvToken={ appState.arvToken }
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index db2ca9e..7c64e86 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBToolboxDialog from 'wb-toolbox-dialog';
 import makeArvadosRequest from 'make-arvados-request';
 import linkState from 'linkstate';
 
@@ -25,6 +26,11 @@ function createInputsTemplate(workflow) {
 }
 
 class WBLaunchWorkflowPage extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.toolboxDialogId = uuid.v4();
+  }
+
   componentDidMount() {
     let { app, workflowUuid } = this.props;
     let { arvHost, arvToken } = app.state;
@@ -43,12 +49,15 @@ class WBLaunchWorkflowPage extends Component {
 
   render({ app, projectUuid, workflowUuid },
     { workflow, processName, processDescription,
-    inputsFunctionText }) {
+    inputsFunctionText, toolboxDialogId }) {
 
     return (
       <div>
         <WBNavbarCommon app={ app } />
 
+        <WBToolboxDialog app={ app } id={ toolboxDialogId }
+          items={ app.state.toolboxItems } />
+
         { workflow ?
           (<form class="container-fluid">
             <h1>Launch Workflow</h1>
@@ -61,6 +70,7 @@ class WBLaunchWorkflowPage extends Component {
             <div class="form-group">
               <label for="projectUuid">Project UUID</label>
               <input type="email" class="form-control" id="projectUuid" placeholder="Enter project uuid" />
+              <button class="btn btn-primary" onclick={ e => { e.preventDefault(); $('#' + toolboxDialogId).modal(); } }>Browse</button>
             </div>
 
             <div class="form-check">

From 82c7cf70310ef406c4fc6b8e04b9842c00b8ceba Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 15:42:43 +0100
Subject: [PATCH 043/170] Still working on launching

---
 frontend/src/js/component/wb-name-and-uuid.js |   4 +-
 frontend/src/js/dialog/wb-toolbox-dialog.js   |  88 ++++++++--
 frontend/src/js/page/wb-app.js                |  15 +-
 .../src/js/page/wb-launch-workflow-page.js    | 151 +++++++++++++++---
 4 files changed, 218 insertions(+), 40 deletions(-)

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 4d02be5..5927681 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -75,7 +75,7 @@ class WBNameAndUuid extends Component {
     }
   }
 
-  render({ uuid }, { error, item }) {
+  render({ uuid, onLinkClicked }, { error, item }) {
     if (!uuid)
       return (
         <div><i>{ String(uuid) }</i></div>
@@ -85,7 +85,7 @@ class WBNameAndUuid extends Component {
       <div>
         <div>
           { error ? error : (item ? (
-            <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
+            <a href={ urlForObject(item) } onclick={ onLinkClicked }>{ arvadosObjectName(item) }</a>
           ) : 'Loading...') }
         </div>
         <div>
diff --git a/frontend/src/js/dialog/wb-toolbox-dialog.js b/frontend/src/js/dialog/wb-toolbox-dialog.js
index 4db2a06..d5f4527 100644
--- a/frontend/src/js/dialog/wb-toolbox-dialog.js
+++ b/frontend/src/js/dialog/wb-toolbox-dialog.js
@@ -8,6 +8,7 @@ class WBToolboxDialog extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
+    this.state.selectedValues = {};
   }
 
   componentDidMount() {
@@ -20,8 +21,9 @@ class WBToolboxDialog extends Component {
   }
 
   fetchRows() {
-    const { items } = this.props;
+    const { items, id, selectMany, onAccepted } = this.props;
     const { arvHost, arvToken } = this.props.app.state;
+    const { selectedValues } = this.state;
     let prom = wbFetchObjects(arvHost, arvToken,
       items);
     let lookup;
@@ -31,22 +33,46 @@ class WBToolboxDialog extends Component {
     let ownerLookup;
     prom = prom.then(lkup => (ownerLookup = lkup));
     prom = prom.then(() => {
-      const rows = items.map(uuid => {
+      const rows = items.map((uuid, idx) => {
         const it = lookup[uuid];
         const ow = ownerLookup[it.owner_uuid];
-        return [
-          ( <div><input type="checkbox" /></div> ),
-          ( <WBNameAndUuid uuid={ uuid } lookup={ lookup } /> ),
+        let r = [];
+        if (selectMany)
+          r.push();
+        r = r.concat([
+          selectMany ? (
+            <div>
+              <input type="checkbox" checked={ (uuid in selectedValues) }
+                onChange={ e => {
+                if (e.target.value === 'on')
+                  selectedValues[uuid] = true;
+                else
+                  delete selectedValues[uuid];
+              } } /> { '\u00A0' }
+            </div>
+          ) : (
+            <button class="btn btn-outline-primary" title="Use"
+              onclick={ () => {
+                $('#' + id).modal('hide');
+                onAccepted(uuid);
+              } }>
+              <i class="fas fa-hand-pointer"></i>
+            </button>
+          ),
+          ( <WBNameAndUuid uuid={ uuid } lookup={ lookup }
+              onLinkClicked={ () => $('#' + id).modal('hide') } /> ),
           it.kind,
           wbFormatDate(it.created_at),
-          ( <WBNameAndUuid uuid={ it.owner_uuid } lookup={ ownerLookup } /> )
-        ];
+          ( <WBNameAndUuid uuid={ it.owner_uuid } lookup={ ownerLookup }
+              onLinkClicked={ () => $('#' + id).modal('hide') } /> )
+        ]);
+        return r;
       });
       this.setState({ rows });
     });
   }
 
-  render({ id }, { rows }) {
+  render({ id, selectMany, onAccepted, items, app }, { rows, selectedValues }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -59,12 +85,52 @@ class WBToolboxDialog extends Component {
             </div>
 
             <div class="modal-body">
+              <div class="mb-2">
+                { selectMany ? (
+                  <button class="btn btn-outline-primary mr-2" onclick={ () => {
+                    items.map(uuid => (selectedValues[uuid] = true));
+                    this.fetchRows();
+                  } }>
+                    Select All
+                  </button>
+                ) : null }
+                { selectMany ? (
+                  <button class="btn btn-outline-primary mr-2" onclick={ () => {
+                    this.setState({ 'selectedValues' : {} });
+                    this.fetchRows();
+                  } }>
+                    Select None
+                  </button>
+                ) : null }
+                <button class="btn btn-outline-primary mr-2" onclick={ () => {
+                  app.clearToolbox();
+                  this.props.items = [];
+                  this.fetchRows();
+                } } >
+                  Clear Toolbox
+                </button>
+                <button class="btn btn-outline-primary mr-2" onclick={ () => {
+                  app.loadToolbox();
+                  this.props.items = app.state.toolboxItems;
+                  this.fetchRows();
+                } } >
+                  Refresh Toolbox
+                </button>
+              </div>
+
               <WBTable columns={ [ '', 'Name', 'Kind', 'Created At', 'Owner' ] }
                 rows={ rows } />
             </div>
 
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary">Accept</button>
+              { selectMany ? (
+                <button type="button" class="btn btn-primary" onclick={
+                  () => {
+                    $('#' + id).modal('hide');
+                    onAccepted(items.filter(uuid => (uuid in selectedValues)));
+                  }
+                }>Accept</button>
+              ) : null }
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
             </div>
           </div>
@@ -74,4 +140,8 @@ class WBToolboxDialog extends Component {
   }
 }
 
+WBToolboxDialog.defaultProps = {
+  'onAccepted': () => {}
+};
+
 export default WBToolboxDialog;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index d3c842c..eccf52b 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -19,8 +19,7 @@ class WBApp extends Component {
     this.state.arvToken = window.localStorage['arvToken'];
     if ('currentUser' in window.localStorage)
       this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
-    this.state.toolboxItems = ('toolboxItems' in window.localStorage) ?
-      JSON.parse(window.localStorage['toolboxItems']) : [];
+    this.loadToolbox();
   }
 
   navbarItemUrl(item) {
@@ -51,6 +50,16 @@ class WBApp extends Component {
       JSON.stringify(this.state.toolboxItems);
   }
 
+  clearToolbox() {
+    this.state.toolboxItems = [];
+    delete window.localStorage['toolboxItems'];
+  }
+
+  loadToolbox() {
+    this.state.toolboxItems = ('toolboxItems' in window.localStorage) ?
+      JSON.parse(window.localStorage['toolboxItems']) : [];
+  }
+
   render() {
     return (
       <Router>
@@ -74,7 +83,7 @@ class WBApp extends Component {
 
         <WBWorkflowView path="/workflow/:uuid" app={ this } />
 
-        <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid/:projectUuid?" app={ this } />
+        <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 7c64e86..fdc9713 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBToolboxDialog from 'wb-toolbox-dialog';
@@ -8,27 +8,57 @@ import linkState from 'linkstate';
 function createInputsTemplate(workflow) {
   const g = JSON.parse(workflow.definition)['$graph'];
   const main = g.find(it => (it.id === '#main'));
-  /* let res = '';
+  let res = '';
   main.inputs.map(it => {
     let id = it.id.split('/');
     id = id[id.length - 1];
-    if (it.label) res += '  // ' + it.label + '\n';
-    if (it.doc) res += ' //' + it.doc + '\n';
-    res += '  ' + it.type
-    res += '\'' + it.id + '\': null'
-  }); */
-  let res = main.inputs.map(it => { it.value = null; return it; });
+    if (it.label) res += '    // ' + it.label + '\n';
+    if (it.doc) res += '    // ' + it.doc + '\n';
+    res += '    // Type: ' + ((typeof(it.type) === 'string') ?
+      it.type : JSON.stringify(it.type)) + '\n\n';
+    res += '    \'' + id + '\': \'\',\n\n';
+    //res += '    // ' + ' '.repeat(id.length) + '^^^^\n\n';
+  });
+  /* let res = main.inputs.map(it => { it.value = null; return it; });
   res = JSON.stringify(res, null, 2);
   res = res.split('\n');
   res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
-  res = res.join('\n');
+  res = res.join('\n'); */
   return res;
 }
 
+function uuidsToCwlObjects(spec) {
+  if (typeof(spec) === 'string') {
+    if (/^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(spec)) {
+      return {
+        'class': 'Directory',
+        'location': 'keep:' + spec
+      };
+    } else if (/^[a-f0-9]{32}\+[0-9]+/.exec(spec)) {
+      return {
+        'class': 'Directory',
+        'location': 'keep:' + spec
+      };
+    } else {
+      return spec;
+    }
+  } else if (typeof(spec) === 'object') {
+    const res = (spec instanceof Array) ? [] : {};
+    Object.keys(spec).map(k => (res[k] = uuidsToCwlObjects(spec[k])));
+    return res;
+
+  } else {
+    return spec;
+  }
+}
+
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
     super(...args);
-    this.state.toolboxDialogId = uuid.v4();
+    this.state.browseDialogId = uuid.v4();
+    this.state.insertDialogId = uuid.v4();
+    this.state.insertManyDialogId = uuid.v4();
+    this.inputsTextArea = createRef();
   }
 
   componentDidMount() {
@@ -39,24 +69,44 @@ class WBLaunchWorkflowPage extends Component {
       '/arvados/v1/workflows/' + workflowUuid);
     prom = prom.then(xhr => this.setState({
       'workflow': xhr.response,
-      'processName': xhr.response.name,
-      'processDescription': xhr.response.description,
-      'inputsFunctionText': '(() => {\n  return ' +
+      'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
+      'defaultProcessDescription': xhr.response.description,
+      'inputsFunctionText': '(() => {\n  return {\n' +
         createInputsTemplate(xhr.response) +
-        ';\n})()'
+        '  };\n})()'
     }));
   }
 
-  render({ app, projectUuid, workflowUuid },
-    { workflow, processName, processDescription,
-    inputsFunctionText, toolboxDialogId }) {
+  render({ app, workflowUuid },
+    { workflow, projectUuid, processName, processDescription,
+    defaultProcessName, defaultProcessDescription,
+    inputsFunctionText, browseDialogId,
+    insertDialogId, insertManyDialogId,
+    inputsPreview }) {
 
     return (
       <div>
         <WBNavbarCommon app={ app } />
 
-        <WBToolboxDialog app={ app } id={ toolboxDialogId }
-          items={ app.state.toolboxItems } />
+        <WBToolboxDialog app={ app } id={ browseDialogId }
+          items={ app.state.toolboxItems } onAccepted={ value =>
+            this.setState({ 'projectUuid': value }) } />
+
+        <WBToolboxDialog app={ app } id={ insertDialogId }
+          items={ app.state.toolboxItems }
+          onAccepted={ value => {
+            const t = this.inputsTextArea.current;
+            const start = t.selectionStart;
+            const end = t.selectionEnd;
+            this.setState({
+              'inputsFunctionText': t.value.substr(0, start) + value +
+                t.value.substr(end)
+            });
+          } } />
+
+        <WBToolboxDialog app={ app } id={ insertManyDialogId }
+          items={ app.state.toolboxItems } selectMany={ true }
+          onAccepted={ values => alert(values) } />
 
         { workflow ?
           (<form class="container-fluid">
@@ -69,8 +119,24 @@ class WBLaunchWorkflowPage extends Component {
 
             <div class="form-group">
               <label for="projectUuid">Project UUID</label>
-              <input type="email" class="form-control" id="projectUuid" placeholder="Enter project uuid" />
-              <button class="btn btn-primary" onclick={ e => { e.preventDefault(); $('#' + toolboxDialogId).modal(); } }>Browse</button>
+
+              <div>
+                { projectUuid ? (
+                  <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
+                ) : null }
+
+                <div class="input-group mb-3">
+                  <input type="text" class="form-control" id="projectUuid"
+                    placeholder="Enter Project UUID" aria-label="Project UUID"
+                    aria-describedby="button-addon2" value={ projectUuid }
+                    onChange={ linkState(this, 'projectUuid') } />
+                  <div class="input-group-append">
+                    <button class="btn btn-primary" type="button"
+                      id="button-addon2" onclick={ e => { e.preventDefault();
+                        $('#' + browseDialogId).modal(); } }>Browse</button>
+                  </div>
+                </div>
+              </div>
             </div>
 
             <div class="form-check">
@@ -81,22 +147,55 @@ class WBLaunchWorkflowPage extends Component {
             <div class="form-group">
               <label for="processName">Process Name</label>
               <input type="text" class="form-control" id="processName"
-                placeholder="Enter process name" value={ processName }
+                placeholder={ defaultProcessName } value={ processName }
                 onChange={ linkState(this, 'processName') }/>
             </div>
 
             <div class="form-group">
               <label for="processDescription">Process Description</label>
               <input type="text" class="form-control" id="processDescription"
-                placeholder="Enter process name" value={ processDescription }
+                placeholder={ defaultProcessDescription } value={ processDescription }
                 onChange={ linkState(this, 'processDescription') } />
             </div>
 
             <div class="form-group">
               <label for="inputs">Inputs</label>
-              <textarea class="form-control" id="inputs"
-                style="font-family: monospace;" rows="20"
-                value={ inputsFunctionText }></textarea>
+              <div>
+                <div class="mb-2">
+                  <button class="btn btn-primary mr-2" onclick={ e => {
+                    e.preventDefault();
+                    $('#' + insertDialogId).modal();
+                  } }>Insert</button>
+
+                  <button class="btn btn-primary mr-2" onclick={ e => {
+                    e.preventDefault();
+                    $('#' + insertManyDialogId).modal();
+                  } }>Insert Many</button>
+                </div>
+
+                <textarea class="form-control" ref={ this.inputsTextArea } id="inputs"
+                  style="font-family: monospace;" rows="20"
+                  value={ inputsFunctionText }
+                  onChange={ linkState(this, 'inputsFunctionText') }></textarea>
+
+                <div class="my-2">
+                  <button class="btn btn-primary" onclick={ e => {
+                    e.preventDefault();
+                    try {
+                      let inputsVal = eval(inputsFunctionText);
+                      inputsVal = uuidsToCwlObjects(inputsVal);
+                      this.setState({ 'inputsPreview': JSON.stringify(inputsVal, null, 2) });
+                    } catch (exc) {
+                      this.setState({ 'inputsPreview': exc });
+                    }
+                  } }>Preview</button>
+                </div>
+
+                <textarea class="form-control" readonly="readonly"
+                  style="font-family: monospace;" rows="10"
+                  value={ inputsPreview }></textarea>
+              </div>
+
             </div>
           </form>) : <div>Loading...</div> }
       </div>

From 9a712cbb95ae76b7649e53ae49a8aae59eaa56ca Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 15:56:04 +0100
Subject: [PATCH 044/170] Made manifest unescapeName take care of all \NNN
 codes.

---
 frontend/src/js/misc/wb-collection-manifest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
index 1f455ad..5454d54 100644
--- a/frontend/src/js/misc/wb-collection-manifest.js
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -142,7 +142,7 @@ class WBManifestReader {
   }
 
   unescapeName(name) {
-    return name.replace(/(\\\\|\\040)/g, (_, $1) => ($1 === '\\\\' ? '\\' : ' '));
+    return name.replace(/(\\\\|\\[0-9]{3})/g, (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
   }
 
   escapeName(name) {

From c66df4da40549da5f3e251cc0ecfdc59ebd08d65 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 16:58:46 +0100
Subject: [PATCH 045/170] Pagination for collection content.

---
 .../src/js/component/wb-collection-content.js | 45 ++++++++++++++-----
 frontend/src/js/misc/make-arvados-request.js  |  8 +++-
 frontend/src/js/page/wb-collection-browse.js  |  4 +-
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 0da5890..8bd1b10 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import { WBManifestReader } from 'wb-collection-manifest';
+import WBPagination from 'wb-pagination';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
 
@@ -10,13 +11,15 @@ class WBCollectionContent extends Component {
     super(...args);
     this.state.rows = [];
     this.state.manifestReader = null;
+    this.state.loaded = 0;
+    this.state.total = 0;
   }
 
   getUrl(params) {
     let res = '/collection-browse/' +
-      (params.uuid || this.props.uuid) + '/' +
-      encodeURIComponent(params.collectionPath || this.props.collectionPath) + '/' +
-      (params.page || this.props.page);
+      ('uuid' in params ? params.uuid : this.props.uuid) + '/' +
+      encodeURIComponent('collectionPath' in params ? params.collectionPath : this.props.collectionPath) + '/' +
+      ('page' in params ? params.page : this.props.page);
     return res;
   }
 
@@ -27,7 +30,10 @@ class WBCollectionContent extends Component {
     let select = [ 'manifest_text' ];
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections/' + uuid +
-      '?select=' + encodeURIComponent(JSON.stringify(select)));
+      '?select=' + encodeURIComponent(JSON.stringify(select)),
+      { 'onProgress': e => {
+        this.setState({ 'loaded': e.loaded, 'total': e.total });
+      } });
     prom = prom.then(xhr => {
       this.state.manifestReader = new WBManifestReader(xhr.response.manifest_text);
       this.prepareRows();
@@ -41,23 +47,27 @@ class WBCollectionContent extends Component {
 
   prepareRows() {
     let { manifestReader } = this.state;
-    let { collectionPath } = this.props;
+    let { collectionPath, page, itemsPerPage } = this.props;
     let { arvHost, arvToken } = this.props.app.state;
 
     //path = path.split('/');
     //path = [ '.' ].concat(path);
 
-    let listing = manifestReader.listDirectory('.' + collectionPath);
+    let listing = manifestReader.listDirectory('.' + collectionPath)
+    const numPages = Math.ceil(listing.length / itemsPerPage);
+    listing = listing.slice(page * itemsPerPage,
+      page * itemsPerPage + itemsPerPage);
 
     this.setState({
+      'numPages': numPages,
       'rows': listing.map(item => (
         (item[0] === 'd') ? [
-          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1] }) }>{ item[1] }/</a>),
+          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1], 'page': 0 }) }>{ item[1] }/</a>),
           'Directory',
           null,
           (<div></div>)
         ] : [
-          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1] }) }>{ item[1] }</a>),
+          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1], 'page': 0 }) }>{ item[1] }</a>),
           'File',
           filesize(item[2]),
           (<div>
@@ -73,13 +83,23 @@ class WBCollectionContent extends Component {
     });
   }
 
-  render({ collectionPath }, { rows }) {
+  render({ collectionPath, page }, { manifestReader, rows, numPages, loaded, total }) {
     return (
       <div>
         <WBBreadcrumbs items={ ('.' + collectionPath).split('/') } />
 
-        <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
-          rows={ rows } />
+        { manifestReader ? (
+          <div>
+            <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
+              rows={ rows } />
+
+            <WBPagination activePage={ page } numPages={ numPages }
+              getPageUrl={ page => this.getUrl({ 'page': page }) } />
+          </div>
+        ) : (
+          <div>Downloading manifest: { filesize(loaded) }</div>
+        ) }
+
       </div>
     );
   }
@@ -87,7 +107,8 @@ class WBCollectionContent extends Component {
 
 WBCollectionContent.defaultProps = {
   'collectionPath': '',
-  'page': 0
+  'page': 0,
+  'itemsPerPage': 20
 };
 
 export default WBCollectionContent;
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 7ed69a5..8799ed5 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -9,12 +9,14 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     'contentType': 'application/json;charset=utf-8',
     'responseType': 'json',
     'useSsl': true,
-    'requireToken': true
+    'requireToken': true,
+    'onProgress': () => {}
   };
 
   Object.keys(defaultParams).map(k => (params[k] =
     (k in params ? params[k] : defaultParams[k])));
-  let { method, data, contentType, responseType, useSsl, requireToken } = params;
+  let { method, data, contentType, responseType,
+    useSsl, requireToken, onProgress } = params;
 
   if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());
@@ -27,6 +29,8 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.setRequestHeader('Content-Type', contentType);
   xhr.responseType = responseType;
 
+  xhr.onprogress = onProgress;
+
   let prom = new Promise((accept, reject) => {
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4)
diff --git a/frontend/src/js/page/wb-collection-browse.js b/frontend/src/js/page/wb-collection-browse.js
index d92cd86..0d1f386 100644
--- a/frontend/src/js/page/wb-collection-browse.js
+++ b/frontend/src/js/page/wb-collection-browse.js
@@ -4,7 +4,7 @@ import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBCollectionContent from 'wb-collection-content';
 
 class WBCollectionBrowse extends Component {
-  render({ app, uuid, collectionPath }, {}) {
+  render({ app, uuid, collectionPath, page }, {}) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -16,7 +16,7 @@ class WBCollectionBrowse extends Component {
         </div>
 
         <WBCollectionContent app={ app } uuid={ uuid }
-          collectionPath={ collectionPath }/>
+          collectionPath={ collectionPath } page={ Number(page || 0) } />
       </div>
     );
   }

From b6dcdf751a6e83042eea3fc0ef74b35a968c5f0d Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 18:01:01 +0100
Subject: [PATCH 046/170] Switched to using keepproxy for file downloads.

---
 .../src/js/component/wb-collection-content.js | 24 +++++--
 .../src/js/deprecated/wb-download-file.js     | 65 ++++++++++++++++++
 frontend/src/js/misc/wb-download-file.js      | 67 +++++++------------
 3 files changed, 111 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/js/deprecated/wb-download-file.js

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 8bd1b10..cc14d5c 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -72,11 +72,27 @@ class WBCollectionContent extends Component {
           filesize(item[2]),
           (<div>
             <button class="btn btn-outline-primary mx-1" title="Download"
-              onclick={ () => wbDownloadFile(arvHost, arvToken, manifestReader,
-                '.' + collectionPath + '/' + item[1]) }><i class="fas fa-download"></i></button>
+              onclick={ () => {
+                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
+                  '.' + collectionPath + '/' + item[1]);
+                prom = prom.then(blocks => {
+                  const blob = new Blob(blocks);
+                  const a = document.createElement('a');
+                  a.name = item[1];
+                  a.href = window.URL.createObjectURL(blob);
+                  a.click();
+                });
+              } }><i class="fas fa-download"></i></button>
+
             <button class="btn btn-outline-primary mx-1" title="View"
-              onclick={ () => wbDownloadFile(arvHost, arvToken, manifestReader,
-                '.' + collectionPath + '/' + item[1]) }><i class="far fa-eye"></i></button>
+              onclick={ () => {
+                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
+                  '.' + collectionPath + '/' + item[1]);
+                prom = prom.then(blocks => {
+                  const blob = new Blob(blocks);
+                  window.open(window.URL.createObjectURL(blob));
+                });
+              } }><i class="far fa-eye"></i></button>
           </div>)
         ]
       ))
diff --git a/frontend/src/js/deprecated/wb-download-file.js b/frontend/src/js/deprecated/wb-download-file.js
new file mode 100644
index 0000000..c64cfca
--- /dev/null
+++ b/frontend/src/js/deprecated/wb-download-file.js
@@ -0,0 +1,65 @@
+import makeArvadosRequest from 'make-arvados-request';
+
+function rdvHash(serviceId, locator) {
+  let blockHash = /^[0-9a-f]{32}/.exec(locator);
+  if (!blockHash)
+    throw Error('Invalid locator');
+  if (typeof(serviceId) !== 'string')
+    throw Error('Invalid service ID');
+  let res = CryptoJS.MD5(serviceId + blockHash).toString();
+  return res;
+}
+
+function wbDownloadFile(arvHost, arvToken,
+  manifestReader, path) {
+
+  const file = manifestReader.getFile(path);
+  const name = path.split('/').reverse()[0];
+  const blockRefs = file[0];
+  let services;
+
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/keep_services/accessible');
+  prom = prom.then(xhr => (services = xhr.response['items']));
+
+  const blocks = [];
+  for (let i = 0; i < blockRefs.length; i++) {
+    prom = prom.then(() => {
+      const [ locator, position, size ] = blockRefs[i];
+      const weights = services.map(s => rdvHash(s['uuid'], locator));
+      const order = Object.keys(services).sort((a, b) => weights[b].localeCompare(weights[a]));
+      const orderedServices = order.map(i => services[i]);
+
+      let k = 0;
+      const cb = () => {
+        if (k >= orderedServices.length)
+          throw Error('Block not found');
+
+        const svc = orderedServices[k];
+        k++;
+
+        let prom_1 = makeArvadosRequest(svc.service_host +
+          ':' + svc.service_port, arvToken,
+          '/' + locator, { 'useSsl': svc.service_ssl_flag,
+          'responseType': 'arraybuffer' });
+        //prom_1 = prom_1.then(xhr => xhr.response);
+        prom_1 = prom_1.catch(cb);
+
+        return prom_1;
+      };
+
+      return cb().then(xhr => (blocks.append(xhr.response.slice(position, size))));
+    });
+  }
+
+  prom = prom.then(() => {
+    const blob = new Blob(blocks);
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+
+  });
+}
+
+export default wbDownloadFile;
diff --git a/frontend/src/js/misc/wb-download-file.js b/frontend/src/js/misc/wb-download-file.js
index c64cfca..d479f81 100644
--- a/frontend/src/js/misc/wb-download-file.js
+++ b/frontend/src/js/misc/wb-download-file.js
@@ -1,65 +1,50 @@
 import makeArvadosRequest from 'make-arvados-request';
 
-function rdvHash(serviceId, locator) {
-  let blockHash = /^[0-9a-f]{32}/.exec(locator);
-  if (!blockHash)
-    throw Error('Invalid locator');
-  if (typeof(serviceId) !== 'string')
-    throw Error('Invalid service ID');
-  let res = CryptoJS.MD5(serviceId + blockHash).toString();
-  return res;
-}
-
 function wbDownloadFile(arvHost, arvToken,
   manifestReader, path) {
 
   const file = manifestReader.getFile(path);
   const name = path.split('/').reverse()[0];
   const blockRefs = file[0];
-  let services;
+  let proxy;
 
   let prom = makeArvadosRequest(arvHost, arvToken,
-    '/arvados/v1/keep_services/accessible');
-  prom = prom.then(xhr => (services = xhr.response['items']));
+    '/arvados/v1/keep_services');
+  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++) {
-    prom = prom.then(() => {
-      const [ locator, position, size ] = blockRefs[i];
-      const weights = services.map(s => rdvHash(s['uuid'], locator));
-      const order = Object.keys(services).sort((a, b) => weights[b].localeCompare(weights[a]));
-      const orderedServices = order.map(i => services[i]);
-
-      let k = 0;
-      const cb = () => {
-        if (k >= orderedServices.length)
-          throw Error('Block not found');
-
-        const svc = orderedServices[k];
-        k++;
-
-        let prom_1 = makeArvadosRequest(svc.service_host +
-          ':' + svc.service_port, arvToken,
-          '/' + locator, { 'useSsl': svc.service_ssl_flag,
-          'responseType': 'arraybuffer' });
-        //prom_1 = prom_1.then(xhr => xhr.response);
-        prom_1 = prom_1.catch(cb);
-
-        return prom_1;
-      };
-
-      return cb().then(xhr => (blocks.append(xhr.response.slice(position, size))));
-    });
+    const [ locator, position, size ] = blockRefs[i];
+
+    prom = prom.then(() => 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(position,
+      position + size))));
   }
 
-  prom = prom.then(() => {
+  prom = prom.then(() => blocks);
+
+  /* prom = prom.then(() => {
     const blob = new Blob(blocks);
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
     a.download = name;
+    a.click();
+  }); */
 
-  });
+  return prom;
 }
 
 export default wbDownloadFile;

From b9795a480214232b99ec2b4ac81bb3129a5b2042 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 7 Feb 2020 18:18:06 +0100
Subject: [PATCH 047/170] Downloading all blocks in parallel for better
 performance.

---
 .../src/js/component/wb-collection-content.js |  2 +-
 frontend/src/js/misc/wb-download-file.js      | 41 +++++++++++--------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index cc14d5c..b71cbb1 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -67,7 +67,7 @@ class WBCollectionContent extends Component {
           null,
           (<div></div>)
         ] : [
-          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1], 'page': 0 }) }>{ item[1] }</a>),
+          item[1],
           'File',
           filesize(item[2]),
           (<div>
diff --git a/frontend/src/js/misc/wb-download-file.js b/frontend/src/js/misc/wb-download-file.js
index d479f81..6010736 100644
--- a/frontend/src/js/misc/wb-download-file.js
+++ b/frontend/src/js/misc/wb-download-file.js
@@ -6,7 +6,6 @@ function wbDownloadFile(arvHost, arvToken,
   const file = manifestReader.getFile(path);
   const name = path.split('/').reverse()[0];
   const blockRefs = file[0];
-  let proxy;
 
   let prom = makeArvadosRequest(arvHost, arvToken,
     '/arvados/v1/keep_services');
@@ -14,26 +13,34 @@ function wbDownloadFile(arvHost, arvToken,
     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 proxy = proxies[n];
+    const blocks = [];
+
+    let prom_2 = new Promise(accept => accept());
+
+    for (let i = 0; i < blockRefs.length; i++) {
+      const [ locator, position, size ] = blockRefs[i];
+
+      const prom_1 = makeArvadosRequest(
+        proxy.service_host + ':' + proxy.service_port,
+        arvToken,
+        '/' + locator,
+        { 'useSsl': proxy.service_ssl_flag,
+          'responseType': 'arraybuffer' }
+      );
 
-  const blocks = [];
-  for (let i = 0; i < blockRefs.length; i++) {
-    const [ locator, position, size ] = blockRefs[i];
+      prom_2 = prom_2.then(() => prom_1);
 
-    prom = prom.then(() => makeArvadosRequest(
-      proxy.service_host + ':' + proxy.service_port,
-      arvToken,
-      '/' + locator,
-      { 'useSsl': proxy.service_ssl_flag,
-        'responseType': 'arraybuffer' }
-    ));
+      prom_2 = prom_2.then(xhr => (blocks.push(xhr.response.slice(position,
+        position + size))));
+    }
+
+    prom_2 = prom_2.then(() => blocks);
+
+    return prom_2;
+  });
 
-    prom = prom.then(xhr => (blocks.push(xhr.response.slice(position,
-      position + size))));
-  }
 
-  prom = prom.then(() => blocks);
 
   /* prom = prom.then(() => {
     const blob = new Blob(blocks);

From e938d9f93ce49be8ee7696dcb2ebdc9ea2cb8f67 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 9 Feb 2020 18:18:07 +0100
Subject: [PATCH 048/170] Working on a more efficient manifest reader.

---
 .../src/js/component/wb-collection-content.js |   1 +
 frontend/src/js/misc/wb-manifest-reader.js    | 127 ++++++++++++++++++
 2 files changed, 128 insertions(+)
 create mode 100644 frontend/src/js/misc/wb-manifest-reader.js

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index b71cbb1..715c413 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import { WBManifestReader } from 'wb-collection-manifest';
+// import WBManifestReader from 'wb-manifest-reader';
 import WBPagination from 'wb-pagination';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
diff --git a/frontend/src/js/misc/wb-manifest-reader.js b/frontend/src/js/misc/wb-manifest-reader.js
new file mode 100644
index 0000000..7b41720
--- /dev/null
+++ b/frontend/src/js/misc/wb-manifest-reader.js
@@ -0,0 +1,127 @@
+function mkdir(parent, name) {
+  if (name in parent && (parent[name] instanceof Array))
+    throw Error('File with the same name already exists');
+  if (name in parent)
+    return parent[name];
+  const dir = {};
+  parent[name] = dir;
+  return dir;
+}
+
+function mkpath(parent, path) {
+  if (typeof(path) === 'string')
+    path = path.split('/');
+  let dir = parent;
+  for (let i = 1; i < path.length; i++) {
+    dir = mkdir(dir, path[i]);
+  }
+  return dir;
+}
+
+function appendFile(dir, name, sidx, seg) {
+  if (name in dir && (!(dir[name] instanceof Array)))
+    throw Error('Directory with the same name already exists');
+  if (!(name in dir))
+    dir[name] = [];
+  const f = dir[name];
+  f.push([ sidx, seg[0], seg[1] ]);
+  return f;
+}
+
+function process(streams) {
+  const rootDir = {};
+
+  streams.map((s, sidx) => {
+    const [ streamName, locators, segments ] = s;
+    const streamDir = mkpath(rootDir, streamName);
+    segments.map((seg, segidx) => {
+      let name = seg[2].split('/');
+      const dir = (name.length === 1 ? streamDir :
+        mkpath(streamDir, ['.'].concat(name.slice(0, name.length - 1))));
+      name = name[name.length - 1];
+      appendFile(dir, name, sidx, seg);
+    });
+  });
+
+  return rootDir;
+}
+
+function parse(manifestText) {
+  const M_STREAM_NAME = 0;
+  const M_LOCATORS = 1;
+  const M_FILE_SEGMENTS = 2;
+
+  let mode = M_STREAM_NAME;
+
+  const streams = [];
+  let locators = [];
+  let segments = [];
+
+  let streamName;
+  let accum = '';
+  let tokenStart = 0;
+
+  for (let i = 0; i < manifestText.length; i++) {
+    const c = manifestText[i];
+
+    if (mode === M_STREAM_NAME) {
+      if (c === ' ') {
+        mode = M_LOCATORS;
+        streamName = accum;
+        accum = '';
+        tokenStart = i + 1;
+      } else {
+        accum += c;
+      }
+
+    } else if (mode === M_LOCATORS) {
+      if (c === ':') {
+        mode = M_FILE_SEGMENTS;
+        accum = '';
+        i = tokenStart - 1;
+        let pos = 0;
+        locators = locators.map(loc => {
+          const r = loc.concat([ pos, pos + loc[1] ]);
+          pos += loc[1];
+          return r;
+        });
+      } else if (c === ' ') {
+        const sz = Number(accum.split('+')[1]);
+        locators.push([accum, sz]);
+        accum = '';
+        tokenStart = i + 1;
+      } else {
+        accum += c;
+      }
+
+    } else if (mode === M_FILE_SEGMENTS) {
+      if (c === ' ' || c === '\n') {
+        let seg = accum.split(':');
+        seg = [Number(seg[0]), Number(seg[1]), seg[2]];
+        segments.push(seg);
+        accum = '';
+        tokenStart = i + 1;
+        if (c === '\n') {
+          streams.push([streamName, locators, segments]);
+          locators = [];
+          segments = [];
+          mode = M_STREAM_NAME;
+        }
+      } else {
+        accum += c;
+      }
+
+    }
+  }
+
+  return streams;
+}
+
+class WBManifestReader {
+  constructor(manifestText) {
+    this.streams = parse(manifestText);
+    this.rootDir = process(this.streams);
+  }
+}
+
+export default WBManifestReader;

From 3731fa54f0c932501271b587cd0da70bd8aa0999 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sun, 9 Feb 2020 19:44:38 +0100
Subject: [PATCH 049/170] Starting to work on manifest worker.

---
 .../src/js/component/wb-collection-content.js |   2 +-
 .../src/js/misc/wb-collection-manifest.js     |   2 +-
 frontend/src/js/misc/wb-manifest-reader.js    |  86 +++++++--
 frontend/src/js/misc/wb-manifest-worker.js    | 181 ++++++++++++++++++
 4 files changed, 253 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-manifest-worker.js

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 715c413..4aa8cdb 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import { WBManifestReader } from 'wb-collection-manifest';
-// import WBManifestReader from 'wb-manifest-reader';
+//import WBManifestReader from 'wb-manifest-reader';
 import WBPagination from 'wb-pagination';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/misc/wb-collection-manifest.js
index 5454d54..6734995 100644
--- a/frontend/src/js/misc/wb-collection-manifest.js
+++ b/frontend/src/js/misc/wb-collection-manifest.js
@@ -43,7 +43,7 @@ class WBManifestReader {
       dir[fileName] = [[], 0];
     if (!(dir[fileName] instanceof Array))
       throw Error('Conflict trying to create a file - a directory with the same name already exists: ' + fileName);
-    this.appendReferences(dir[fileName], locators, position, size);
+    //this.appendReferences(dir[fileName], locators, position, size);
   }
 
   appendReferences(file, locators, position, size) {
diff --git a/frontend/src/js/misc/wb-manifest-reader.js b/frontend/src/js/misc/wb-manifest-reader.js
index 7b41720..cc7fbd7 100644
--- a/frontend/src/js/misc/wb-manifest-reader.js
+++ b/frontend/src/js/misc/wb-manifest-reader.js
@@ -18,16 +18,28 @@ function mkpath(parent, path) {
   return dir;
 }
 
-function appendFile(dir, name, sidx, seg) {
-  if (name in dir && (!(dir[name] instanceof Array)))
-    throw Error('Directory with the same name already exists');
-  if (!(name in dir))
-    dir[name] = [];
-  const f = dir[name];
-  f.push([ sidx, seg[0], seg[1] ]);
+function makeFile(dir, name) {
+  if (name in dir) {
+    if (!(dir[name] instanceof Array))
+      throw Error('Directory with the same name already exists');
+    return dir[name];
+  }
+  const f = [[], 0];
+  dir[name] = f;
   return f;
 }
 
+function appendFile(f, sidx, seg) {
+  f[0].push([ sidx, seg[0], seg[1] ]);
+  //f[1] += seg[1];
+  return f;
+}
+
+function unescapeName(name) {
+  return name.replace(/(\\\\|\\[0-9]{3})/g,
+    (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
+}
+
 function process(streams) {
   const rootDir = {};
 
@@ -55,19 +67,22 @@ function parse(manifestText) {
 
   const streams = [];
   let locators = [];
-  let segments = [];
 
   let streamName;
   let accum = '';
   let tokenStart = 0;
 
+  let lastFile = null;
+  let lastPath = null;
+  const rootDir = {};
+
   for (let i = 0; i < manifestText.length; i++) {
     const c = manifestText[i];
 
     if (mode === M_STREAM_NAME) {
       if (c === ' ') {
         mode = M_LOCATORS;
-        streamName = accum;
+        streamName = unescapeName(accum);
         accum = '';
         tokenStart = i + 1;
       } else {
@@ -97,14 +112,26 @@ function parse(manifestText) {
     } else if (mode === M_FILE_SEGMENTS) {
       if (c === ' ' || c === '\n') {
         let seg = accum.split(':');
-        seg = [Number(seg[0]), Number(seg[1]), seg[2]];
-        segments.push(seg);
+        seg = [Number(seg[0]), Number(seg[1]), seg.slice(2).join(':')];
+        const path = streamName + '/' + unescapeName(seg[2]);
+        let f;
+        if (path !== lastPath) {
+          let dirName = path.split('/');
+          const fileName = dirName[dirName.length - 1];
+          dirName = dirName.slice(0, dirName.length - 1);
+          const dir = mkpath(rootDir, dirName);
+          f = makeFile(dir, fileName);
+          lastPath = path;
+          lastFile = f;
+        } else {
+          f = lastFile;
+        }
+        appendFile(f, streams.length, seg);
         accum = '';
         tokenStart = i + 1;
         if (c === '\n') {
-          streams.push([streamName, locators, segments]);
+          streams.push([ streamName, locators ]);
           locators = [];
-          segments = [];
           mode = M_STREAM_NAME;
         }
       } else {
@@ -114,13 +141,40 @@ function parse(manifestText) {
     }
   }
 
-  return streams;
+  return { rootDir, streams };
+}
+
+function findDir(parent, path) {
+  if (typeof(path) === 'string')
+    path = path.split('/');
+  if (path[0] !== '.')
+    throw Error('Path must start with a dot (.)');
+  let dir = parent;
+  for (let i = 1; i < path.length; i++) {
+    if (!(path[i] in dir))
+      throw Error('Directory not found');
+    dir = dir[path[i]];
+  }
+  return dir;
 }
 
 class WBManifestReader {
   constructor(manifestText) {
-    this.streams = parse(manifestText);
-    this.rootDir = process(this.streams);
+    const {rootDir, streams} = parse(manifestText);
+    this.rootDir = rootDir;
+    this.streams = streams;
+    //this.rootDir = process(this.streams);
+  }
+
+  listDirectory(path) {
+    let dir = findDir(this.rootDir, path);
+    let keys = Object.keys(dir);
+    keys.sort();
+    let subdirs = keys.filter(k => !(dir[k] instanceof Array));
+    let files = keys.filter(k => (dir[k] instanceof Array));
+    let res = subdirs.map(k => [ 'd', k, null ]);
+    res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
+    return res;
   }
 }
 
diff --git a/frontend/src/js/misc/wb-manifest-worker.js b/frontend/src/js/misc/wb-manifest-worker.js
new file mode 100644
index 0000000..cc7fbd7
--- /dev/null
+++ b/frontend/src/js/misc/wb-manifest-worker.js
@@ -0,0 +1,181 @@
+function mkdir(parent, name) {
+  if (name in parent && (parent[name] instanceof Array))
+    throw Error('File with the same name already exists');
+  if (name in parent)
+    return parent[name];
+  const dir = {};
+  parent[name] = dir;
+  return dir;
+}
+
+function mkpath(parent, path) {
+  if (typeof(path) === 'string')
+    path = path.split('/');
+  let dir = parent;
+  for (let i = 1; i < path.length; i++) {
+    dir = mkdir(dir, path[i]);
+  }
+  return dir;
+}
+
+function makeFile(dir, name) {
+  if (name in dir) {
+    if (!(dir[name] instanceof Array))
+      throw Error('Directory with the same name already exists');
+    return dir[name];
+  }
+  const f = [[], 0];
+  dir[name] = f;
+  return f;
+}
+
+function appendFile(f, sidx, seg) {
+  f[0].push([ sidx, seg[0], seg[1] ]);
+  //f[1] += seg[1];
+  return f;
+}
+
+function unescapeName(name) {
+  return name.replace(/(\\\\|\\[0-9]{3})/g,
+    (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
+}
+
+function process(streams) {
+  const rootDir = {};
+
+  streams.map((s, sidx) => {
+    const [ streamName, locators, segments ] = s;
+    const streamDir = mkpath(rootDir, streamName);
+    segments.map((seg, segidx) => {
+      let name = seg[2].split('/');
+      const dir = (name.length === 1 ? streamDir :
+        mkpath(streamDir, ['.'].concat(name.slice(0, name.length - 1))));
+      name = name[name.length - 1];
+      appendFile(dir, name, sidx, seg);
+    });
+  });
+
+  return rootDir;
+}
+
+function parse(manifestText) {
+  const M_STREAM_NAME = 0;
+  const M_LOCATORS = 1;
+  const M_FILE_SEGMENTS = 2;
+
+  let mode = M_STREAM_NAME;
+
+  const streams = [];
+  let locators = [];
+
+  let streamName;
+  let accum = '';
+  let tokenStart = 0;
+
+  let lastFile = null;
+  let lastPath = null;
+  const rootDir = {};
+
+  for (let i = 0; i < manifestText.length; i++) {
+    const c = manifestText[i];
+
+    if (mode === M_STREAM_NAME) {
+      if (c === ' ') {
+        mode = M_LOCATORS;
+        streamName = unescapeName(accum);
+        accum = '';
+        tokenStart = i + 1;
+      } else {
+        accum += c;
+      }
+
+    } else if (mode === M_LOCATORS) {
+      if (c === ':') {
+        mode = M_FILE_SEGMENTS;
+        accum = '';
+        i = tokenStart - 1;
+        let pos = 0;
+        locators = locators.map(loc => {
+          const r = loc.concat([ pos, pos + loc[1] ]);
+          pos += loc[1];
+          return r;
+        });
+      } else if (c === ' ') {
+        const sz = Number(accum.split('+')[1]);
+        locators.push([accum, sz]);
+        accum = '';
+        tokenStart = i + 1;
+      } else {
+        accum += c;
+      }
+
+    } else if (mode === M_FILE_SEGMENTS) {
+      if (c === ' ' || c === '\n') {
+        let seg = accum.split(':');
+        seg = [Number(seg[0]), Number(seg[1]), seg.slice(2).join(':')];
+        const path = streamName + '/' + unescapeName(seg[2]);
+        let f;
+        if (path !== lastPath) {
+          let dirName = path.split('/');
+          const fileName = dirName[dirName.length - 1];
+          dirName = dirName.slice(0, dirName.length - 1);
+          const dir = mkpath(rootDir, dirName);
+          f = makeFile(dir, fileName);
+          lastPath = path;
+          lastFile = f;
+        } else {
+          f = lastFile;
+        }
+        appendFile(f, streams.length, seg);
+        accum = '';
+        tokenStart = i + 1;
+        if (c === '\n') {
+          streams.push([ streamName, locators ]);
+          locators = [];
+          mode = M_STREAM_NAME;
+        }
+      } else {
+        accum += c;
+      }
+
+    }
+  }
+
+  return { rootDir, streams };
+}
+
+function findDir(parent, path) {
+  if (typeof(path) === 'string')
+    path = path.split('/');
+  if (path[0] !== '.')
+    throw Error('Path must start with a dot (.)');
+  let dir = parent;
+  for (let i = 1; i < path.length; i++) {
+    if (!(path[i] in dir))
+      throw Error('Directory not found');
+    dir = dir[path[i]];
+  }
+  return dir;
+}
+
+class WBManifestReader {
+  constructor(manifestText) {
+    const {rootDir, streams} = parse(manifestText);
+    this.rootDir = rootDir;
+    this.streams = streams;
+    //this.rootDir = process(this.streams);
+  }
+
+  listDirectory(path) {
+    let dir = findDir(this.rootDir, path);
+    let keys = Object.keys(dir);
+    keys.sort();
+    let subdirs = keys.filter(k => !(dir[k] instanceof Array));
+    let files = keys.filter(k => (dir[k] instanceof Array));
+    let res = subdirs.map(k => [ 'd', k, null ]);
+    res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
+    return res;
+  }
+}
+
+export default WBManifestReader;

From 86dd8e6b53f110968f592523afd1efdb9bc5b5f0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 10 Feb 2020 12:51:29 +0100
Subject: [PATCH 050/170] Manifest parsing in a web worker seems to work well.

---
 frontend/package.json                         |   4 +-
 frontend/rollup.config.js                     |   1 +
 .../src/js/component/wb-collection-content.js | 190 ++++++++++++----
 frontend/src/js/misc/wb-manifest-worker.js    | 215 +++++++-----------
 4 files changed, 234 insertions(+), 176 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 3707664..afc78ce 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,9 @@
     "rollup-plugin-license": "^0.7.0",
     "rollup-plugin-minify": "^1.0.3",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "watch": "^1.0.2"
+    "streamsaver": "^2.0.3",
+    "watch": "^1.0.2",
+    "web-streams-polyfill": "^2.0.6"
   },
   "scripts": {
     "rollup": "rollup -c",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 1b9adb6..84d35a6 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -45,6 +45,7 @@ export default {
       'node_modules/filesize/lib/filesize.js': 'dist/js/filesize.js',
       'node_modules/crypto-js/core.js': 'dist/js/crypto-js/core.js',
       'node_modules/crypto-js/md5.js': 'dist/js/crypto-js/md5.js',
+      'src/js/misc/wb-manifest-worker.js': 'dist/js/wb-manifest-worker.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 4aa8cdb..3cb7a74 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -1,19 +1,28 @@
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
-import { WBManifestReader } from 'wb-collection-manifest';
-//import WBManifestReader from 'wb-manifest-reader';
+// import { WBManifestReader } from 'wb-collection-manifest';
+// import WBManifestReader from 'wb-manifest-reader';
 import WBPagination from 'wb-pagination';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
 
+function unescapeName(name) {
+  return name.replace(/(\\\\|\\[0-9]{3})/g,
+    (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
+}
+
 class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
-    this.state.manifestReader = null;
+    this.state.manifestWorker = new Worker('/js/wb-manifest-worker.js');
+    this.state.manifestWorker.onerror = (e => console.log(e));
     this.state.loaded = 0;
     this.state.total = 0;
+    this.state.mode = 'manifestDownload';
+    this.state.parsedStreams = 0;
+    this.state.totalStreams = 1;
   }
 
   getUrl(params) {
@@ -26,7 +35,8 @@ class WBCollectionContent extends Component {
 
   componentDidMount() {
     let { arvHost, arvToken } = this.props.app.state;
-    let { uuid } = this.props;
+    let { uuid, collectionPath } = this.props;
+    let { manifestWorker } = this.state;
 
     let select = [ 'manifest_text' ];
     let prom = makeArvadosRequest(arvHost, arvToken,
@@ -36,25 +46,90 @@ class WBCollectionContent extends Component {
         this.setState({ 'loaded': e.loaded, 'total': e.total });
       } });
     prom = prom.then(xhr => {
-      this.state.manifestReader = new WBManifestReader(xhr.response.manifest_text);
-      this.prepareRows();
+      const streams = xhr.response.manifest_text.split('\n');
+      const paths = streams.filter(s => s).map(s => {
+        const n = s.indexOf(' ');
+        return unescapeName(s.substr(0, n));
+      });
+
+      let prom_1 = new Promise(accept => accept());
+
+      prom_1 = prom_1.then(() => {
+        const prom_2 = new Promise(accept => {
+          manifestWorker.onmessage = () => accept();
+          manifestWorker.postMessage([ 'precreatePaths', paths ]);
+          this.setState({
+            'totalStreams': streams.length,
+            'parsedStreams': 0,
+            'mode': 'manifestParse'
+          })
+        })
+        return prom_2;
+      });
+
+      for (let i = 0; i < streams.length; i++) {
+
+        prom_1 = prom_1.then(() => {
+          const prom_2 = new Promise(accept => {
+            manifestWorker.onmessage = () => accept();
+            manifestWorker.postMessage([ 'parseStream', streams[i] ]);
+          });
+
+          return prom_2;
+        });
+
+        prom_1 = prom_1.then(() => {
+          const prom_2 = new Promise(accept => {
+            manifestWorker.onmessage = (e) => accept(e);
+            manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]);
+            if (i % 1000 === 0)
+              console.log(i + '/' + streams.length);
+          });
+          return prom_2;
+        });
+
+        prom_1 = prom_1.then(e => {
+          this.prepareRows(e.data[1]);
+          this.setState({ 'parsedStreams': (i + 1) });
+        });
+      }
+
+      prom_1 = prom_1.then(() => this.setState({
+        'mode': 'browsingReady'
+      }));
+
+      return prom_1;
     });
   }
 
   componentWillReceiveProps(nextProps) {
+    const { manifestWorker, mode } = this.state;
+    const { collectionPath } = nextProps;
+    if (mode === 'browsingReady') {
+      this.state.mode = 'waitForListing';
+      let prom = new Promise(accept => {
+        manifestWorker.onmessage = (e) => accept(e);
+        manifestWorker.postMessage([ 'listDirectory', '.' + collectionPath ]);
+      });
+
+      prom = prom.then(e => {
+        this.state.mode = 'browsingReady';
+        this.prepareRows(e.data[1]);
+      });
+    }
     this.props = nextProps;
-    this.prepareRows();
+    // this.prepareRows();
   }
 
-  prepareRows() {
-    let { manifestReader } = this.state;
+  prepareRows(listing) {
+    let { manifestReader, mode } = this.state;
     let { collectionPath, page, itemsPerPage } = this.props;
     let { arvHost, arvToken } = this.props.app.state;
 
     //path = path.split('/');
     //path = [ '.' ].concat(path);
 
-    let listing = manifestReader.listDirectory('.' + collectionPath)
+    //let listing = manifestReader.listDirectory('.' + collectionPath)
     const numPages = Math.ceil(listing.length / itemsPerPage);
     listing = listing.slice(page * itemsPerPage,
       page * itemsPerPage + itemsPerPage);
@@ -71,52 +146,73 @@ class WBCollectionContent extends Component {
           item[1],
           'File',
           filesize(item[2]),
-          (<div>
-            <button class="btn btn-outline-primary mx-1" title="Download"
-              onclick={ () => {
-                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
-                  '.' + collectionPath + '/' + item[1]);
-                prom = prom.then(blocks => {
-                  const blob = new Blob(blocks);
-                  const a = document.createElement('a');
-                  a.name = item[1];
-                  a.href = window.URL.createObjectURL(blob);
-                  a.click();
-                });
-              } }><i class="fas fa-download"></i></button>
-
-            <button class="btn btn-outline-primary mx-1" title="View"
-              onclick={ () => {
-                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
-                  '.' + collectionPath + '/' + item[1]);
-                prom = prom.then(blocks => {
-                  const blob = new Blob(blocks);
-                  window.open(window.URL.createObjectURL(blob));
-                });
-              } }><i class="far fa-eye"></i></button>
-          </div>)
+          ( (mode === 'browsingReady') ? (
+            <div>
+              <button class="btn btn-outline-primary mx-1" title="Download"
+                onclick={ () => {
+                  let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
+                    '.' + collectionPath + '/' + item[1]);
+                  prom = prom.then(blocks => {
+                    const blob = new Blob(blocks);
+                    const a = document.createElement('a');
+                    a.name = item[1];
+                    a.href = window.URL.createObjectURL(blob);
+                    a.click();
+                  });
+                } }><i class="fas fa-download"></i></button>
+
+              <button class="btn btn-outline-primary mx-1" title="View"
+                onclick={ () => {
+                  let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
+                    '.' + collectionPath + '/' + item[1]);
+                  prom = prom.then(blocks => {
+                    const blob = new Blob(blocks);
+                    window.open(window.URL.createObjectURL(blob));
+                  });
+                } }><i class="far fa-eye"></i></button>
+            </div>
+          ) : null)
         ]
       ))
     });
   }
 
-  render({ collectionPath, page }, { manifestReader, rows, numPages, loaded, total }) {
+  render({ collectionPath, page }, { manifestReader, rows,
+    numPages, loaded, total, mode, parsedStreams, totalStreams }) {
+
     return (
       <div>
         <WBBreadcrumbs items={ ('.' + collectionPath).split('/') } />
 
-        { manifestReader ? (
-          <div>
-            <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
-              rows={ rows } />
-
-            <WBPagination activePage={ page } numPages={ numPages }
-              getPageUrl={ page => this.getUrl({ 'page': page }) } />
-          </div>
-        ) : (
-          <div>Downloading manifest: { filesize(loaded) }</div>
-        ) }
-
+        { (mode === 'manifestDownload') ?
+          (
+            <div class="container-fluid">
+              <div>Downloading manifest: { filesize(loaded) }</div>
+              <div class="progress">
+                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+                  aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+              </div>
+            </div>
+
+          ) : (
+            <div>
+              { mode === 'manifestParse' ? (
+                <div class="container-fluid mb-2">
+                  <div>Parsing manifest: { parsedStreams }/{ totalStreams }</div>
+                  <div class="progress">
+                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
+                      aria-valuenow={ totalStreams } aria-valuemin="0" aria-valuemax={ parsedStreams } style={ 'width: ' + Math.round(parsedStreams * 100 / totalStreams) + '%' }></div>
+                  </div>
+                </div>
+              ) : null }
+
+              <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
+                rows={ rows } />
+
+              <WBPagination activePage={ page } numPages={ numPages }
+                getPageUrl={ page => this.getUrl({ 'page': page }) } />
+            </div>
+          ) }
       </div>
     );
   }
diff --git a/frontend/src/js/misc/wb-manifest-worker.js b/frontend/src/js/misc/wb-manifest-worker.js
index cc7fbd7..e54e8f2 100644
--- a/frontend/src/js/misc/wb-manifest-worker.js
+++ b/frontend/src/js/misc/wb-manifest-worker.js
@@ -1,3 +1,73 @@
+const rx = /^[a-f0-9]{32}\+[0-9]+/;
+const rootDir = {};
+const streams = [];
+
+onmessage = function(e) {
+  switch (e.data[0]) {
+  case 'precreatePaths':
+    precreatePaths(e.data[1]);
+    postMessage([ 'precreatePathsResult' ]);
+    break;
+  case 'parseStream':
+    parseStream(e.data[1]);
+    postMessage([ 'parseStreamResult' ]);
+    break;
+  case 'listDirectory': {
+    const lst = listDirectory(rootDir, e.data[1], e.data[2]);
+    postMessage([ 'listDirectoryResult', lst ])
+    break; }
+  default:
+    throw Error('Unknown verb: ' + e.data[0]);
+  }
+}
+
+function precreatePaths(paths) {
+  for (let i = 0; i < paths.length; i++) {
+    mkpath(rootDir, paths[i]);
+  }
+}
+
+function parseStream(s) {
+  if (!s) return;
+
+  const tokens = s.split(' ');
+  const streamName = unescapeName(tokens[0]);
+
+  let n = tokens.map(t => rx.exec(t));
+  n = n.indexOf(null, 1);
+
+  let locators = tokens.slice(1, n);
+  let pos = 0;
+  locators = locators.map(loc => {
+    const sz = parseInt(loc.split('+')[1], 10);
+    return [ loc, pos, pos += sz ];
+  });
+
+  let fileTokens = tokens.slice(n);
+  let lastFile = null;
+  let lastPath = null;
+  fileTokens.map(t => {
+    let seg = t.split(':');
+    seg = [ parseInt(seg[0], 10), parseInt(seg[1], 10),
+      unescapeName(seg.slice(2).join(':')) ]
+    const path = streamName + '/' + seg[2];
+    let f;
+    if (path === lastPath) {
+      f = lastFile;
+    } else {
+      let dirName = path.split('/');
+      const name = dirName[dirName.length - 1];
+      dirName = dirName.slice(0, dirName.length - 1);
+      const d = mkpath(rootDir, dirName);
+      lastFile = f = makeFile(d, name);
+      lastPath = path;
+    }
+    appendFile(f, streams.length, seg);
+  });
+
+  streams.push(locators);
+}
+
 function mkdir(parent, name) {
   if (name in parent && (parent[name] instanceof Array))
     throw Error('File with the same name already exists');
@@ -31,7 +101,7 @@ function makeFile(dir, name) {
 
 function appendFile(f, sidx, seg) {
   f[0].push([ sidx, seg[0], seg[1] ]);
-  //f[1] += seg[1];
+  f[1] += seg[1];
   return f;
 }
 
@@ -40,142 +110,31 @@ function unescapeName(name) {
     (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
 }
 
-function process(streams) {
-  const rootDir = {};
-
-  streams.map((s, sidx) => {
-    const [ streamName, locators, segments ] = s;
-    const streamDir = mkpath(rootDir, streamName);
-    segments.map((seg, segidx) => {
-      let name = seg[2].split('/');
-      const dir = (name.length === 1 ? streamDir :
-        mkpath(streamDir, ['.'].concat(name.slice(0, name.length - 1))));
-      name = name[name.length - 1];
-      appendFile(dir, name, sidx, seg);
-    });
-  });
-
-  return rootDir;
-}
-
-function parse(manifestText) {
-  const M_STREAM_NAME = 0;
-  const M_LOCATORS = 1;
-  const M_FILE_SEGMENTS = 2;
-
-  let mode = M_STREAM_NAME;
-
-  const streams = [];
-  let locators = [];
-
-  let streamName;
-  let accum = '';
-  let tokenStart = 0;
-
-  let lastFile = null;
-  let lastPath = null;
-  const rootDir = {};
-
-  for (let i = 0; i < manifestText.length; i++) {
-    const c = manifestText[i];
-
-    if (mode === M_STREAM_NAME) {
-      if (c === ' ') {
-        mode = M_LOCATORS;
-        streamName = unescapeName(accum);
-        accum = '';
-        tokenStart = i + 1;
-      } else {
-        accum += c;
-      }
-
-    } else if (mode === M_LOCATORS) {
-      if (c === ':') {
-        mode = M_FILE_SEGMENTS;
-        accum = '';
-        i = tokenStart - 1;
-        let pos = 0;
-        locators = locators.map(loc => {
-          const r = loc.concat([ pos, pos + loc[1] ]);
-          pos += loc[1];
-          return r;
-        });
-      } else if (c === ' ') {
-        const sz = Number(accum.split('+')[1]);
-        locators.push([accum, sz]);
-        accum = '';
-        tokenStart = i + 1;
-      } else {
-        accum += c;
-      }
-
-    } else if (mode === M_FILE_SEGMENTS) {
-      if (c === ' ' || c === '\n') {
-        let seg = accum.split(':');
-        seg = [Number(seg[0]), Number(seg[1]), seg.slice(2).join(':')];
-        const path = streamName + '/' + unescapeName(seg[2]);
-        let f;
-        if (path !== lastPath) {
-          let dirName = path.split('/');
-          const fileName = dirName[dirName.length - 1];
-          dirName = dirName.slice(0, dirName.length - 1);
-          const dir = mkpath(rootDir, dirName);
-          f = makeFile(dir, fileName);
-          lastPath = path;
-          lastFile = f;
-        } else {
-          f = lastFile;
-        }
-        appendFile(f, streams.length, seg);
-        accum = '';
-        tokenStart = i + 1;
-        if (c === '\n') {
-          streams.push([ streamName, locators ]);
-          locators = [];
-          mode = M_STREAM_NAME;
-        }
-      } else {
-        accum += c;
-      }
-
-    }
-  }
-
-  return { rootDir, streams };
-}
-
-function findDir(parent, path) {
+function findDir(parent, path, lenient=false) {
   if (typeof(path) === 'string')
     path = path.split('/');
   if (path[0] !== '.')
     throw Error('Path must start with a dot (.)');
   let dir = parent;
   for (let i = 1; i < path.length; i++) {
-    if (!(path[i] in dir))
-      throw Error('Directory not found');
+    if (!(path[i] in dir)) {
+      if (lenient)
+        return {};
+      else
+        throw Error('Directory not found');
+    }
     dir = dir[path[i]];
   }
   return dir;
 }
 
-class WBManifestReader {
-  constructor(manifestText) {
-    const {rootDir, streams} = parse(manifestText);
-    this.rootDir = rootDir;
-    this.streams = streams;
-    //this.rootDir = process(this.streams);
-  }
-
-  listDirectory(path) {
-    let dir = findDir(this.rootDir, path);
-    let keys = Object.keys(dir);
-    keys.sort();
-    let subdirs = keys.filter(k => !(dir[k] instanceof Array));
-    let files = keys.filter(k => (dir[k] instanceof Array));
-    let res = subdirs.map(k => [ 'd', k, null ]);
-    res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
-    return res;
-  }
+function listDirectory(rootDir, path, lenient=false) {
+  let dir = findDir(rootDir, path, lenient);
+  let keys = Object.keys(dir);
+  keys.sort();
+  let subdirs = keys.filter(k => !(dir[k] instanceof Array));
+  let files = keys.filter(k => (dir[k] instanceof Array));
+  let res = subdirs.map(k => [ 'd', k, null ]);
+  res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
+  return res;
 }
-
-export default WBManifestReader;

From 9fd043a568dc9e1c3f4dcfa0045298201e6fd8ac Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 10 Feb 2020 17:47:06 +0100
Subject: [PATCH 051/170] Small improvements to manifest worker-based approach.

---
 frontend/src/js/component/wb-collection-content.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 3cb7a74..6067c2b 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -94,9 +94,12 @@ class WBCollectionContent extends Component {
         });
       }
 
-      prom_1 = prom_1.then(() => this.setState({
-        'mode': 'browsingReady'
-      }));
+      prom_1 = prom_1.then(() => {
+        this.setState({
+          'mode': 'browsingReady'
+        });
+        this.prepareRows();
+      });
 
       return prom_1;
     });
@@ -122,6 +125,11 @@ class WBCollectionContent extends Component {
   }
 
   prepareRows(listing) {
+    if (listing)
+      this.state.listing = listing;
+    else
+      listing = this.state.listing;
+
     let { manifestReader, mode } = this.state;
     let { collectionPath, page, itemsPerPage } = this.props;
     let { arvHost, arvToken } = this.props.app.state;

From d3da3055da4205334b2ca59344f009fa7e1209d1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 10 Feb 2020 18:34:08 +0100
Subject: [PATCH 052/170] Started implementing proper browse dialog.

---
 .../wb-browse-dialog-collection-content.js    |  0
 .../wb-browse-dialog-collection-list.js       |  0
 .../dialog/wb-browse-dialog-project-list.js   | 82 +++++++++++++++++++
 frontend/src/js/dialog/wb-browse-dialog.js    | 60 ++++++++++++++
 .../src/js/page/wb-launch-workflow-page.js    | 11 ++-
 5 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/dialog/wb-browse-dialog-collection-content.js
 create mode 100644 frontend/src/js/dialog/wb-browse-dialog-collection-list.js
 create mode 100644 frontend/src/js/dialog/wb-browse-dialog-project-list.js
 create mode 100644 frontend/src/js/dialog/wb-browse-dialog.js

diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
new file mode 100644
index 0000000..ff84e28
--- /dev/null
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -0,0 +1,82 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import WBPagination from 'wb-pagination';
+import WBTable from 'wb-table';
+
+class WBBrowseDialogProjectList extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    this.fetchRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.setState({
+      'page': 0
+    });
+    this.fetchRows();
+  }
+
+  changePage(page) {
+    this.setState({
+      'page': page
+    });
+    this.fetchRows();
+  }
+
+  prepareRows(items) {
+    return items.map(it => [
+      it.name,
+      it.file_count,
+      it.file_size_total
+    ]);
+  }
+
+  fetchRows() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { textSearch, itemsPerPage } = this.props;
+    const ownerUuid = ('ownerUuid' in this.state ?
+      this.state.ownerUuid : this.props.ownerUuid);
+    const { page } = this.state;
+    const filters = [
+      ['group_class', '=', 'project']
+    ];
+    if (ownerUuid)
+      filters.push(['owner_uuid', '=', ownerUuid]);
+    if (textSearch)
+      filters.push(['name', 'ilike', '%' + textSearch + '%']);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups?filters=' +
+      encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (page * itemsPerPage));
+    prom = prom.then(xhr => {
+      this.setState({
+        'rows': this.prepareRows(xhr.response.items),
+        'numPages': xhr.response.items_available / itemsPerPage
+      });
+    });
+  }
+
+  render({ app }, { ownerUuid, textSearch, page, numPages, rows }) {
+    return (
+      <div>
+        <WBTable columns={ ['Name', 'File Count', 'Size'] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages } activePage={ page }
+          onPageChanged={ i => this.changePage(i) } />
+      </div>
+    );
+  }
+}
+
+WBBrowseDialogProjectList.defaultProps = {
+  'itemsPerPage': 5
+};
+
+export default WBBrowseDialogProjectList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
new file mode 100644
index 0000000..647c9ad
--- /dev/null
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -0,0 +1,60 @@
+import { h, Component } from 'preact';
+import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
+import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+
+class WBBrowseDialog extends Component {
+  render({ app, id }, { mode }) {
+    return (
+      <div class="modal" id={ id } tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Browse</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <button class="btn btn-sm btn-outline-primary">Back</button>
+
+              <input class="form-control" type="search" placeholder="Search" />
+
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <button class="btn btn-outline-secondary" type="button">Back</button>
+                </div>
+
+                <input type="text" class="form-control" placeholder="Search"
+                  aria-label="Search" />
+
+                <div class="input-group-append">
+                  <button class="btn btn-outline-primary" type="button">Search</button>
+                </div>
+              </div>
+
+              <h5>Projects</h5>
+              <WBBrowseDialogProjectList app={ app } />
+
+              { mode === 'collection-content' ? (
+                <h5>Content</h5>
+              ) : (
+                <div>
+                  <h5>Collections</h5>
+                  <WBBrowseDialogCollectionList app={ app } />
+                </div>
+              ) }
+            </div>
+
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary">Accept</button>
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBBrowseDialog;
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index fdc9713..e71fcc4 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -2,6 +2,7 @@ import { h, Component, createRef } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBToolboxDialog from 'wb-toolbox-dialog';
+import WBBrowseDialog from 'wb-browse-dialog';
 import makeArvadosRequest from 'make-arvados-request';
 import linkState from 'linkstate';
 
@@ -58,6 +59,7 @@ class WBLaunchWorkflowPage extends Component {
     this.state.browseDialogId = uuid.v4();
     this.state.insertDialogId = uuid.v4();
     this.state.insertManyDialogId = uuid.v4();
+    this.state.realBrowseDialogId = uuid.v4();
     this.inputsTextArea = createRef();
   }
 
@@ -82,7 +84,7 @@ class WBLaunchWorkflowPage extends Component {
     defaultProcessName, defaultProcessDescription,
     inputsFunctionText, browseDialogId,
     insertDialogId, insertManyDialogId,
-    inputsPreview }) {
+    realBrowseDialogId, inputsPreview }) {
 
     return (
       <div>
@@ -108,6 +110,8 @@ class WBLaunchWorkflowPage extends Component {
           items={ app.state.toolboxItems } selectMany={ true }
           onAccepted={ values => alert(values) } />
 
+        <WBBrowseDialog app={ app } id={ realBrowseDialogId } />
+
         { workflow ?
           (<form class="container-fluid">
             <h1>Launch Workflow</h1>
@@ -171,6 +175,11 @@ class WBLaunchWorkflowPage extends Component {
                     e.preventDefault();
                     $('#' + insertManyDialogId).modal();
                   } }>Insert Many</button>
+
+                  <button class="btn btn-primary mr-2" onclick={ e => {
+                    e.preventDefault();
+                    $('#' + realBrowseDialogId).modal();
+                  } }>Insert Browse</button>
                 </div>
 
                 <textarea class="form-control" ref={ this.inputsTextArea } id="inputs"

From 7aacacb0720167e422b543b704a6f4354ee8b3ef Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 10 Feb 2020 19:04:35 +0100
Subject: [PATCH 053/170] Working on history in browse dialog.

---
 .../dialog/wb-browse-dialog-project-list.js   | 32 +++++++++++--
 frontend/src/js/dialog/wb-browse-dialog.js    | 47 ++++++++++++++++---
 2 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index ff84e28..a6a4120 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -7,6 +7,7 @@ class WBBrowseDialogProjectList extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
+    this.state.history = [];
   }
 
   componentDidMount() {
@@ -28,9 +29,30 @@ class WBBrowseDialogProjectList extends Component {
     this.fetchRows();
   }
 
+  popHistory() {
+    const state = this.state.history.pop();
+    this.setState(state);
+    this.fetchRows();
+  }
+
   prepareRows(items) {
+    const { resetSearch, pushHistory } = this.props;
+    const ownerUuid = ( 'ownerUuid' in this.state ?
+      this.state.ownerUuid : this.props.ownerUuid );
     return items.map(it => [
-      it.name,
+      (
+        <a href="#" onclick={ e => {
+          e.preventDefault();
+          this.setState({
+            'ownerUuid': it.uuid,
+            'page': 0
+          });
+          this.fetchRows();
+          this.state.history.push({ 'ownerUuid': ownerUuid });
+          pushHistory(this);
+          resetSearch();
+        } }>{ it.name }</a>
+      ),
       it.file_count,
       it.file_size_total
     ]);
@@ -57,7 +79,7 @@ class WBBrowseDialogProjectList extends Component {
     prom = prom.then(xhr => {
       this.setState({
         'rows': this.prepareRows(xhr.response.items),
-        'numPages': xhr.response.items_available / itemsPerPage
+        'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
   }
@@ -69,14 +91,16 @@ class WBBrowseDialogProjectList extends Component {
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
-          onPageChanged={ i => this.changePage(i) } />
+          onPageChanged={ i => this.changePage(i) }
+          chunkSize="3" />
       </div>
     );
   }
 }
 
 WBBrowseDialogProjectList.defaultProps = {
-  'itemsPerPage': 5
+  'itemsPerPage': 5,
+  'resetSearch': () => {}
 };
 
 export default WBBrowseDialogProjectList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 647c9ad..37c52bd 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,9 +1,36 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import linkState from 'linkstate';
 
 class WBBrowseDialog extends Component {
-  render({ app, id }, { mode }) {
+  constructor(...args) {
+    super(...args);
+    this.state.history = [];
+  }
+
+  resetSearch() {
+    this.setState({
+      'textSearch': null,
+      'textSearchInput': null
+    });
+  }
+
+  pushHistory(child) {
+    const { history } = this.state;
+    history.push([ child, { textSearch } ]);
+    this.state.history = history.slice(history.length - 1000);
+  }
+
+  popHistory() {
+    if (this.history.length === 0)
+      return;
+    const entry = history.pop();
+    this.setState(entry[1]);
+    entry[0].popHistory();
+  }
+
+  render({ app, id }, { mode, textSearch, textSearchInput }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -16,9 +43,10 @@ class WBBrowseDialog extends Component {
             </div>
 
             <div class="modal-body">
-              <button class="btn btn-sm btn-outline-primary">Back</button>
-
-              <input class="form-control" type="search" placeholder="Search" />
+              <div>
+                <h5>Go to: <a href="#">Home</a>, <a href="#">All Projects</a>,
+                  <a href="#">All Users</a>, <a href="#">Shared with Me</a></h5>
+              </div>
 
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
@@ -26,15 +54,20 @@ class WBBrowseDialog extends Component {
                 </div>
 
                 <input type="text" class="form-control" placeholder="Search"
-                  aria-label="Search" />
+                  aria-label="Search" value={ textSearchInput }
+                  onChange={ linkState(this, 'textSearchInput') } />
 
                 <div class="input-group-append">
-                  <button class="btn btn-outline-primary" type="button">Search</button>
+                  <button class="btn btn-outline-primary" type="button"
+                    onclick={ () => this.setState({ 'textSearch': this.state.textSearchInput }) }>Search</button>
                 </div>
               </div>
 
               <h5>Projects</h5>
-              <WBBrowseDialogProjectList app={ app } />
+              <WBBrowseDialogProjectList app={ app } textSearch={ textSearch }
+                resetSearch={ () => this.resetSearch() }
+                pushHistory={ () => this.pushHistory() }
+                popHistory={ () => this.popHistory() } />
 
               { mode === 'collection-content' ? (
                 <h5>Content</h5>

From 1340f0927dd618c3cafc6932af12c2e9c4deea87 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 08:27:01 +0100
Subject: [PATCH 054/170] Attempt to use hash history but this is not going to
 work.

---
 frontend/package.json                      |  1 +
 frontend/src/html/index.html               |  3 +++
 frontend/src/js/dialog/wb-browse-dialog.js | 16 ++++++++++++++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index afc78ce..f2bd946 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,7 @@
     "bootstrap": "^4.4.1",
     "crypto-js": "^3.1.9-1",
     "filesize": "^6.0.1",
+    "history": "^4.10.1",
     "jquery": "^3.4.1",
     "js-uuid": "0.0.6",
     "linkstate": "^1.1.1",
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index e22169d..44421f6 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -4,6 +4,9 @@
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/index.css" />
+    <script language="javascript">
+      window.process = { 'env': { 'NODE_ENV': 'production' } };
+    </script>
     <script language="javascript" src="/js/jquery.min.js"></script>
     <script language="javascript" src="/js/bootstrap.min.js"></script>
     <script language="javascript" src="/js/fontawesome.min.js"></script>
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 37c52bd..bddecec 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -2,11 +2,14 @@ import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
 import linkState from 'linkstate';
+import { Router } from 'preact-router';
+import { createHashHistory } from 'history';
 
 class WBBrowseDialog extends Component {
   constructor(...args) {
     super(...args);
     this.state.history = [];
+    this.state.history_1 = createHashHistory();
   }
 
   resetSearch() {
@@ -17,7 +20,7 @@ class WBBrowseDialog extends Component {
   }
 
   pushHistory(child) {
-    const { history } = this.state;
+    const { history, textSearch } = this.state;
     history.push([ child, { textSearch } ]);
     this.state.history = history.slice(history.length - 1000);
   }
@@ -30,7 +33,7 @@ class WBBrowseDialog extends Component {
     entry[0].popHistory();
   }
 
-  render({ app, id }, { mode, textSearch, textSearchInput }) {
+  render({ app, id }, { mode, textSearch, textSearchInput, history, history_1 }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -43,6 +46,15 @@ class WBBrowseDialog extends Component {
             </div>
 
             <div class="modal-body">
+              <Router history={ history_1 }>
+                <div path="/a">
+                  A
+                </div>
+                <div path="/b">
+                  B
+                </div>
+              </Router>
+
               <div>
                 <h5>Go to: <a href="#">Home</a>, <a href="#">All Projects</a>,
                   <a href="#">All Users</a>, <a href="#">Shared with Me</a></h5>

From e2fca06e2a67f44a05b6709a677cc9def7c80aab Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 13:18:54 +0100
Subject: [PATCH 055/170] Started reworking WBBrowseDialog to make it
 managable.

---
 .../wb-browse-dialog-collection-content.js    |  11 ++
 .../wb-browse-dialog-collection-list.js       |  11 ++
 .../js/dialog/wb-browse-dialog-user-list.js   |  11 ++
 frontend/src/js/dialog/wb-browse-dialog.js    | 148 ++++++++++++------
 4 files changed, 136 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-browse-dialog-user-list.js

diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
index e69de29..b58ac2d 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogCollectionContent extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogCollectionContent</div>
+    );
+  }
+}
+
+export default WBBrowseDialogCollectionContent;
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index e69de29..3f83c5b 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogCollectionList extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogCollectionList</div>
+    );
+  }
+}
+
+export default WBBrowseDialogCollectionList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog-user-list.js b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
new file mode 100644
index 0000000..ed9ad21
--- /dev/null
+++ b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
@@ -0,0 +1,11 @@
+import { h, Component } from 'preact';
+
+class WBBrowseDialogUserList extends Component {
+  render() {
+    return (
+      <div>WBBrowseDialogUserList</div>
+    );
+  }
+}
+
+export default WBBrowseDialogUserList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index bddecec..af53033 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,94 +1,152 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
+import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
 import linkState from 'linkstate';
 import { Router } from 'preact-router';
 import { createHashHistory } from 'history';
 
+//
+// internal URLs look like this
+//
+// /browse-dialog/browse/( owner-uuid )/( project-page )/( text-search )
+// /browse-dialog/users//( users-page )/( text-search )
+// /browse-dialog/shared-with-me//( project-page )/( collection-page )/( text-search )
+// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )
+//
+// general pattern therefore:
+// /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
+//
+// props:
+//   selectMany: Boolean
+//   selectWhat: [ 'file', 'directory' ]
+//
+// state:
+//   selected: Array of UUID
+//   textSearch: string
+//   textSearchInput: string
+//
+
 class WBBrowseDialog extends Component {
   constructor(...args) {
     super(...args);
     this.state.history = [];
-    this.state.history_1 = createHashHistory();
+    this.state.selected = {};
+    this.state.selectedOrder = [];
+    const { currentUser } = this.props.app.state;
+    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false);
   }
 
-  resetSearch() {
+  navigateBack() {
+    if (this.history.length === 0)
+      return;
+    const url = this.history.pop();
+    navigate(url, false);
+  }
+
+  navigate(url, history=true) {
+    if (history)
+      this.history.push(this.state.currentUrl);
+    let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
+    topPage = parseInt(topPage, 10) || 0;
+    bottomPage = parseInt(bottomPage, 10) || 0;
     this.setState({
-      'textSearch': null,
-      'textSearchInput': null
+      'currentUrl': url,
+      mode, uuid, topPage, bottomPage, textSearch
     });
   }
 
-  pushHistory(child) {
-    const { history, textSearch } = this.state;
-    history.push([ child, { textSearch } ]);
-    this.state.history = history.slice(history.length - 1000);
+  select(uuid) {
+    let { selected, selectedOrder } = this.state;
+    if (uuid in selected) {
+      const n = selectedOrder.indexOf(uuid);
+      selectedOrder = selected.splice(n, n + 1);
+    }
+    selected[uuid] = true;
+    selectedOrder.push(uuid);
+    this.setState({
+      selected, selectedOrder
+    });
   }
 
-  popHistory() {
-    if (this.history.length === 0)
+  deselect(uuid) {
+    let { selected, selectedOrder } = this.state;
+    if (!(uuid in selected))
       return;
-    const entry = history.pop();
-    this.setState(entry[1]);
-    entry[0].popHistory();
+    const n = selectedOrder.indexOf(uuid);
+    selectedOrder = selected.splice(n, n + 1);
+    delete selected[uuid];
+    this.setState({
+      selected, selectedOrder
+    });
   }
 
-  render({ app, id }, { mode, textSearch, textSearchInput, history, history_1 }) {
+  resetSelection() {
+    this.setState({
+      'selected': {},
+      'selectedOrder': []
+    });
+  }
+
+  render({ app, id, selectMany, selectWhat }, { currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
-              <h5 class="modal-title">Browse</h5>
+              { false ? <h5 class="modal-title">Browse</h5> : null }
+              <div>{ currentUrl }</div>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
 
             <div class="modal-body">
-              <Router history={ history_1 }>
-                <div path="/a">
-                  A
-                </div>
-                <div path="/b">
-                  B
-                </div>
-              </Router>
-
-              <div>
-                <h5>Go to: <a href="#">Home</a>, <a href="#">All Projects</a>,
-                  <a href="#">All Users</a>, <a href="#">Shared with Me</a></h5>
+              <div class="mb-3">
+                <a href="#" class="btn btn-outline-secondary mr-2">Back</a>
+                <a href="#" class="btn btn-outline-primary mr-2">Home</a>
+                <a href="#" class="btn btn-outline-primary mr-2">All Projects</a>
+                <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
+                <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
               </div>
 
               <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <button class="btn btn-outline-secondary" type="button">Back</button>
-                </div>
-
                 <input type="text" class="form-control" placeholder="Search"
-                  aria-label="Search" value={ textSearchInput }
-                  onChange={ linkState(this, 'textSearchInput') } />
+                  aria-label="Search" value={ textSearch }
+                  onChange={ linkState(this, 'textSearch') } />
 
                 <div class="input-group-append">
-                  <button class="btn btn-outline-primary" type="button"
-                    onclick={ () => this.setState({ 'textSearch': this.state.textSearchInput }) }>Search</button>
+                  <button class="btn btn-outline-primary" type="button">Search</button>
                 </div>
               </div>
 
-              <h5>Projects</h5>
-              <WBBrowseDialogProjectList app={ app } textSearch={ textSearch }
-                resetSearch={ () => this.resetSearch() }
-                pushHistory={ () => this.pushHistory() }
-                popHistory={ () => this.popHistory() } />
+              { (mode === 'browse' || mode === 'shared-with-me') ? (
+                <div>
+                  <h5>Projects</h5>
+                  <WBBrowseDialogProjectList app={ app } parent={ this }
+                    page={ topPage } />
+                </div>
+              ) : null }
+
+              { (mode === 'users') ? (
+                <WBBrowseDialogUserList app={ app } parent={ this } />
+              ) : null }
+
+              { (mode === 'content') ? (
+                <div>
+                  <h5>Content</h5>
+                  <WBBrowseDialogCollectionContent app={ app } parent={ this }
+                    selectMany={ selectMany } selectWhat={ selectWhat }/>
+                </div>
 
-              { mode === 'collection-content' ? (
-                <h5>Content</h5>
-              ) : (
+              ) : (mode === 'browse' || mode === 'shared-with-me') ? (
                 <div>
                   <h5>Collections</h5>
-                  <WBBrowseDialogCollectionList app={ app } />
+                  <WBBrowseDialogCollectionList app={ app } parent={ this }
+                    selectMany={ selectMany } selectWhat={ selectWhat } />
                 </div>
-              ) }
+              ) : null }
             </div>
 
             <div class="modal-footer">

From aa467cd073816d67d6d44fc3039c3fa310cf8edd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 14:04:26 +0100
Subject: [PATCH 056/170] WBBrowseDialog slowly tarts working...

---
 .../dialog/wb-browse-dialog-project-list.js   | 61 ++++++++-----------
 frontend/src/js/dialog/wb-browse-dialog.js    | 49 +++++++++++----
 2 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index a6a4120..3333c31 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -16,54 +16,29 @@ class WBBrowseDialogProjectList extends Component {
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.setState({
-      'page': 0
-    });
-    this.fetchRows();
-  }
-
-  changePage(page) {
-    this.setState({
-      'page': page
-    });
-    this.fetchRows();
-  }
-
-  popHistory() {
-    const state = this.state.history.pop();
-    this.setState(state);
     this.fetchRows();
   }
 
   prepareRows(items) {
-    const { resetSearch, pushHistory } = this.props;
-    const ownerUuid = ( 'ownerUuid' in this.state ?
-      this.state.ownerUuid : this.props.ownerUuid );
+    const { navigate } = this.props;
     return items.map(it => [
       (
         <a href="#" onclick={ e => {
           e.preventDefault();
-          this.setState({
-            'ownerUuid': it.uuid,
-            'page': 0
-          });
-          this.fetchRows();
-          this.state.history.push({ 'ownerUuid': ownerUuid });
-          pushHistory(this);
-          resetSearch();
+          navigate('/browse-dialog/browse/' + it.uuid);
         } }>{ it.name }</a>
       ),
-      it.file_count,
-      it.file_size_total
+      it.uuid
     ]);
   }
 
-  fetchRows() {
+  fetchSharedWithMe() {
+
+  }
+
+  fetchOwned() {
     const { arvHost, arvToken } = this.props.app.state;
-    const { textSearch, itemsPerPage } = this.props;
-    const ownerUuid = ('ownerUuid' in this.state ?
-      this.state.ownerUuid : this.props.ownerUuid);
-    const { page } = this.state;
+    const { ownerUuid, page, textSearch, itemsPerPage } = this.props;
     const filters = [
       ['group_class', '=', 'project']
     ];
@@ -76,22 +51,34 @@ class WBBrowseDialogProjectList extends Component {
       encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + itemsPerPage +
       '&offset=' + (page * itemsPerPage));
+    return prom;
+  }
+
+  fetchRows() {
+    const { mode, itemsPerPage } = this.props;
+
+    let prom = (mode === 'shared-with-me') ?
+      this.fetchSharedWithMe() :
+      this.fetchOwned();
+
     prom = prom.then(xhr => {
       this.setState({
         'rows': this.prepareRows(xhr.response.items),
         'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
+
+    return prom;
   }
 
-  render({ app }, { ownerUuid, textSearch, page, numPages, rows }) {
+  render({ app, navigate }, { ownerUuid, textSearch, page, numPages, rows }) {
     return (
       <div>
-        <WBTable columns={ ['Name', 'File Count', 'Size'] }
+        <WBTable columns={ ['Name', 'UUID'] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
-          onPageChanged={ i => this.changePage(i) }
+          onPageChanged={ i => navigate({ 'topPage': i }) }
           chunkSize="3" />
       </div>
     );
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index af53033..91755fc 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
-import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
+import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
 import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
 import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
 import linkState from 'linkstate';
@@ -35,19 +35,35 @@ class WBBrowseDialog extends Component {
     this.state.selected = {};
     this.state.selectedOrder = [];
     const { currentUser } = this.props.app.state;
-    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false);
+    this.state.currentUrl = '/browse-dialog/browse/' + currentUser.uuid;
+    this.state.uuid = currentUser.uuid;
+    this.state.mode = 'browse';
+    this.state.topPage = 0;
+    this.state.bottomPage = 0;
   }
 
   navigateBack() {
-    if (this.history.length === 0)
+    if (this.state.history.length === 0)
       return;
-    const url = this.history.pop();
-    navigate(url, false);
+    const url = this.state.history.pop();
+    this.navigate(url, false);
   }
 
-  navigate(url, history=true) {
-    if (history)
-      this.history.push(this.state.currentUrl);
+  navigate(url, useHistory=true) {
+    if (typeof(url) === 'object') {
+      url = ['', 'browse-dialog',
+        'mode' in url ? url.mode : this.state.mode,
+        'uuid' in url ? url.uuid : this.state.uuid,
+        'topPage' in url ? url.topPage : this.state.topPage,
+        'bottomPage' in url ? url.bottomPage : this.state.bottomPage,
+        'textSearch' in url ? url.textSearch : this.state.textSearch
+      ].join('/');
+    }
+
+    url = url.substr(url.indexOf('/browse-dialog/'));
+
+    if (useHistory)
+      this.state.history.push(this.state.currentUrl);
     let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
     topPage = parseInt(topPage, 10) || 0;
     bottomPage = parseInt(bottomPage, 10) || 0;
@@ -89,7 +105,7 @@ class WBBrowseDialog extends Component {
     });
   }
 
-  render({ app, id, selectMany, selectWhat }, { currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
+  render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -104,8 +120,13 @@ class WBBrowseDialog extends Component {
 
             <div class="modal-body">
               <div class="mb-3">
-                <a href="#" class="btn btn-outline-secondary mr-2">Back</a>
-                <a href="#" class="btn btn-outline-primary mr-2">Home</a>
+                <a href="#" class={ 'btn btn-outline-secondary mr-2' +
+                  (history.length === 0 ? ' disabled': '') }
+                  onclick={ e => { e.preventDefault();
+                    this.navigateBack(); } }>Back</a>
+                <a href="#" class="btn btn-outline-primary mr-2"
+                  onclick={ e => { e.preventDefault();
+                    this.navigate('/browse-dialog/browse/' + app.state.currentUser.uuid); } }>Home</a>
                 <a href="#" class="btn btn-outline-primary mr-2">All Projects</a>
                 <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
                 <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
@@ -124,8 +145,10 @@ class WBBrowseDialog extends Component {
               { (mode === 'browse' || mode === 'shared-with-me') ? (
                 <div>
                   <h5>Projects</h5>
-                  <WBBrowseDialogProjectList app={ app } parent={ this }
-                    page={ topPage } />
+                  <WBBrowseDialogProjectList app={ app }
+                    navigate={ url => this.navigate(url) }
+                    mode={ mode } ownerUuid={ uuid }
+                    page={ topPage } textSearch={ textSearch } />
                 </div>
               ) : null }
 

From e425b631a9a358ad6bad107111b31eed0e45c53a Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 15:13:37 +0100
Subject: [PATCH 057/170] Clumsy attempt at fetchSharedWithMe().

---
 .../dialog/wb-browse-dialog-project-list.js   | 71 ++++++++++++++++++-
 frontend/src/js/dialog/wb-browse-dialog.js    | 12 +++-
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index 3333c31..cc00828 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -33,7 +33,74 @@ class WBBrowseDialogProjectList extends Component {
   }
 
   fetchSharedWithMe() {
-
+    const { arvHost, arvToken, currentUser } = this.props.app.state;
+    /*const filters = [
+      [ '' ]
+    ];*/
+    const filters = [
+      [ 'tail_uuid', '=', currentUser.uuid ],
+      [ 'link_class', '=', 'permission' ],
+      [ 'head_uuid', 'is_a', 'arvados#group']
+    ];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/links?filters=' +
+      encodeURIComponent(JSON.stringify(filters)));
+    const uuids = {};
+    prom = prom.then(xhr => {
+      let prom_1 = new Promise(accept => accept());
+      const { items_available, limit } = xhr.response;
+      for (let i = 0; i < items_available; i += limit) {
+        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/links?filters=' +
+          encodeURIComponent(JSON.stringify(filters)) +
+          '&limit=' + limit +
+          '&offset=' + i));
+        prom_1 = prom_1.then(xhr =>
+          xhr.response.items.map(it => (uuids[it.head_uuid] = true)));
+      }
+      return prom_1;
+    });
+    prom = prom.then(() => {
+      const filters_1 = [
+        ['uuid', 'in', Object.keys(uuids)],
+        ['group_class', '=', 'project']
+      ];
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/groups?filters=' +
+        encodeURIComponent(JSON.stringify(filters_1)));
+    });
+    let res = [];
+    prom = prom.then(xhr => {
+      const filters_1 = [
+        ['uuid', 'in', Object.keys(uuids)],
+        ['group_class', '=', 'project']
+      ];
+      let prom_1 = new Promise(accept => accept());
+      const { items_available, limit } = xhr.response;
+      for (let i = 0; i < items_available; i += limit) {
+        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/groups?filters=' +
+          encodeURIComponent(JSON.stringify(filters_1)) +
+          '&limit=' + limit +
+          '&offset=' + i));
+        prom_1 = prom_1.then(xhr => (res = res.concat(xhr.response.items)));
+      }
+      return prom_1;
+    });
+    const { page, itemsPerPage } = this.props;
+    prom = prom.then(() => {
+      res.sort((a, b) => a.name.localeCompare(b.name));
+      return {
+        'response': {
+          'items': res.slice(page * itemsPerPage,
+            page * itemsPerPage + itemsPerPage),
+          'items_available': res.length
+        }
+      };
+    });
+    return prom;
+    // prom = prom.then(xhr => xhr.items.filter(it => (it.group_class === 'project')));
+    // prom = prom.then(items => )
   }
 
   fetchOwned() {
@@ -71,7 +138,7 @@ class WBBrowseDialogProjectList extends Component {
     return prom;
   }
 
-  render({ app, navigate }, { ownerUuid, textSearch, page, numPages, rows }) {
+  render({ app, navigate, page }, { numPages, rows }) {
     return (
       <div>
         <WBTable columns={ ['Name', 'UUID'] }
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 91755fc..6ef4a1f 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -127,9 +127,15 @@ class WBBrowseDialog extends Component {
                 <a href="#" class="btn btn-outline-primary mr-2"
                   onclick={ e => { e.preventDefault();
                     this.navigate('/browse-dialog/browse/' + app.state.currentUser.uuid); } }>Home</a>
-                <a href="#" class="btn btn-outline-primary mr-2">All Projects</a>
-                <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
-                <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
+                <a href="#" class="btn btn-outline-primary mr-2"
+                  onclick={ e => { e.preventDefault();
+                    this.navigate('/browse-dialog/browse'); } }>All Projects</a>
+                <a href="#" class="btn btn-outline-primary mr-2"
+                  onclick={ e => { e.preventDefault();
+                    this.navigate('/browse-dialog/users'); } }>All Users</a>
+                <a href="#" class="btn btn-outline-primary mr-2"
+                  onclick={ e => { e.preventDefault();
+                    this.navigate('/browse-dialog/shared-with-me'); } }>Shared with Me</a>
               </div>
 
               <div class="input-group mb-3">

From e93ef4da969c8e2e5f24052177bd18bb88bedf0d Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 15:26:49 +0100
Subject: [PATCH 058/170] Correct implementation of fetchSharedWithMe().

---
 .../dialog/wb-browse-dialog-project-list.js   | 73 +++----------------
 frontend/src/js/dialog/wb-browse-dialog.js    |  5 +-
 2 files changed, 13 insertions(+), 65 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index cc00828..7ee65e9 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -34,73 +34,18 @@ class WBBrowseDialogProjectList extends Component {
 
   fetchSharedWithMe() {
     const { arvHost, arvToken, currentUser } = this.props.app.state;
-    /*const filters = [
-      [ '' ]
-    ];*/
+    const { textSearch, itemsPerPage, page } = this.props;
     const filters = [
-      [ 'tail_uuid', '=', currentUser.uuid ],
-      [ 'link_class', '=', 'permission' ],
-      [ 'head_uuid', 'is_a', 'arvados#group']
+      ['group_class', '=', 'project']
     ];
-    let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/links?filters=' +
-      encodeURIComponent(JSON.stringify(filters)));
-    const uuids = {};
-    prom = prom.then(xhr => {
-      let prom_1 = new Promise(accept => accept());
-      const { items_available, limit } = xhr.response;
-      for (let i = 0; i < items_available; i += limit) {
-        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/links?filters=' +
-          encodeURIComponent(JSON.stringify(filters)) +
-          '&limit=' + limit +
-          '&offset=' + i));
-        prom_1 = prom_1.then(xhr =>
-          xhr.response.items.map(it => (uuids[it.head_uuid] = true)));
-      }
-      return prom_1;
-    });
-    prom = prom.then(() => {
-      const filters_1 = [
-        ['uuid', 'in', Object.keys(uuids)],
-        ['group_class', '=', 'project']
-      ];
-      return makeArvadosRequest(arvHost, arvToken,
-        '/arvados/v1/groups?filters=' +
-        encodeURIComponent(JSON.stringify(filters_1)));
-    });
-    let res = [];
-    prom = prom.then(xhr => {
-      const filters_1 = [
-        ['uuid', 'in', Object.keys(uuids)],
-        ['group_class', '=', 'project']
-      ];
-      let prom_1 = new Promise(accept => accept());
-      const { items_available, limit } = xhr.response;
-      for (let i = 0; i < items_available; i += limit) {
-        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/groups?filters=' +
-          encodeURIComponent(JSON.stringify(filters_1)) +
-          '&limit=' + limit +
-          '&offset=' + i));
-        prom_1 = prom_1.then(xhr => (res = res.concat(xhr.response.items)));
-      }
-      return prom_1;
-    });
-    const { page, itemsPerPage } = this.props;
-    prom = prom.then(() => {
-      res.sort((a, b) => a.name.localeCompare(b.name));
-      return {
-        'response': {
-          'items': res.slice(page * itemsPerPage,
-            page * itemsPerPage + itemsPerPage),
-          'items_available': res.length
-        }
-      };
-    });
+    if (textSearch)
+      filters.push([ 'name', 'ilike', '%' + textSearch + '%']);
+    const prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups/shared?filters=' +
+      encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * page));
     return prom;
-    // prom = prom.then(xhr => xhr.items.filter(it => (it.group_class === 'project')));
-    // prom = prom.then(items => )
   }
 
   fetchOwned() {
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 6ef4a1f..7d8ce54 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -141,7 +141,10 @@ class WBBrowseDialog extends Component {
               <div class="input-group mb-3">
                 <input type="text" class="form-control" placeholder="Search"
                   aria-label="Search" value={ textSearch }
-                  onChange={ linkState(this, 'textSearch') } />
+                  onChange={ e => this.setState({
+                      'textSearch': e.target.value,
+                      'topPage': 0,
+                      'bottomPage': 0}) } />
 
                 <div class="input-group-append">
                   <button class="btn btn-outline-primary" type="button">Search</button>

From 6aeae1b66d016fe1afcf437e3985fc1c4053050e Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 15:48:34 +0100
Subject: [PATCH 059/170] Implemented WBBrowseDialogUserList.

---
 .../js/dialog/wb-browse-dialog-user-list.js   | 62 ++++++++++++++++++-
 frontend/src/js/dialog/wb-browse-dialog.js    |  4 +-
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-user-list.js b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
index ed9ad21..ae85fad 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-user-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
@@ -1,11 +1,69 @@
 import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
 
 class WBBrowseDialogUserList extends Component {
-  render() {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    this.fetchRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchRows();
+  }
+
+  prepareRows(items) {
+    const { navigate } = this.props;
+    return items.map(it => [
+      (
+        <a href="#" onclick={ e => { e.preventDefault();
+          navigate('/browse-dialog/browse/' + it.uuid); } }>
+          { it.last_name + ', ' + it.first_name }
+        </a>
+      ),
+      it.uuid
+    ]);
+  }
+
+  fetchRows() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { itemsPerPage, page, textSearch } = this.props;
+    const order = ['last_name asc', 'first_name asc'];
+    const filters = [];
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users?order=' +
+      encodeURIComponent(JSON.stringify(order)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * page));
+    prom = prom.then(xhr => this.setState({
+      'rows': this.prepareRows(xhr.response.items),
+      'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
+    }));
+  }
+
+  render({ page, navigate }, { rows, numPages }) {
     return (
-      <div>WBBrowseDialogUserList</div>
+      <div>
+        <WBTable columns={ [ 'Name', 'UUID' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages } activePage={ page }
+          onPageChanged={ i => navigate({ 'topPage': i }) } />
+      </div>
     );
   }
 }
 
+WBBrowseDialogUserList.defaultProps = {
+  'itemsPerPage': 20
+};
+
 export default WBBrowseDialogUserList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 7d8ce54..c557dcb 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -162,7 +162,9 @@ class WBBrowseDialog extends Component {
               ) : null }
 
               { (mode === 'users') ? (
-                <WBBrowseDialogUserList app={ app } parent={ this } />
+                <WBBrowseDialogUserList app={ app }
+                  navigate={ url => this.navigate(url) }
+                  page={ topPage } textSearch={ textSearch }/>
               ) : null }
 
               { (mode === 'content') ? (

From 567d4d0a2e5a1e5f25dcce541e2ad960e2c46490 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 11 Feb 2020 21:31:06 +0100
Subject: [PATCH 060/170] Implemented WBBrowseDialogCollectionList.

---
 .../wb-browse-dialog-collection-list.js       | 65 ++++++++++++++++++-
 .../dialog/wb-browse-dialog-project-list.js   | 11 ++--
 .../js/dialog/wb-browse-dialog-user-list.js   |  2 +
 frontend/src/js/dialog/wb-browse-dialog.js    | 44 +++++++++++--
 .../src/js/page/wb-launch-workflow-page.js    |  3 +-
 5 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index 3f83c5b..41d26e5 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -1,11 +1,72 @@
 import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
 
 class WBBrowseDialogCollectionList extends Component {
-  render() {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    this.fetchRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchRows();
+  }
+
+  prepareRows(items) {
+    const { navigate, selectWhat, makeSelectionCell } = this.props;
+    return items.map(it => (selectWhat === 'directory' ? [
+        makeSelectionCell(it.uuid)
+      ] : []).concat([
+      (
+        <a href="#" onclick={ e => { e.preventDefault();
+          navigate('/browse-dialog/content/' + it.uuid); } }>{ it.name }</a>
+      ),
+      it.uuid
+    ]));
+  }
+
+  fetchRows() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { ownerUuid, textSearch, page, itemsPerPage } = this.props;
+    const filters = [];
+    if (ownerUuid)
+      filters.push(['owner_uuid', '=', ownerUuid]);
+    if (textSearch)
+      filters.push(['name', 'ilike', '%' + textSearch + '%']);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections?filters=' +
+      encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * page));
+    prom = prom.then(xhr => this.setState({
+      'rows': this.prepareRows(xhr.response.items),
+      'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
+    }));
+    return prom;
+  }
+
+  render({ selectWhat, page, navigate }, { rows, numPages }) {
     return (
-      <div>WBBrowseDialogCollectionList</div>
+      <div>
+        <WBTable columns={ (selectWhat === 'directory' ? [''] : []).concat(['Name', 'UUID']) }
+          headerClasses={ selectWhat === 'directory' ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
+          rows={ rows } />
+
+        <WBPagination activePage={ page } numPages={ numPages }
+          onPageChanged={ i => navigate({ 'bottomPage': i }) } />
+      </div>
     );
   }
 }
 
+WBBrowseDialogCollectionList.defaultProps = {
+  'itemsPerPage': 20
+};
+
 export default WBBrowseDialogCollectionList;
diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index 7ee65e9..fe0294a 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -20,8 +20,8 @@ class WBBrowseDialogProjectList extends Component {
   }
 
   prepareRows(items) {
-    const { navigate } = this.props;
-    return items.map(it => [
+    const { navigate, selectWhat, makeSelectionCell } = this.props;
+    return items.map(it => (selectWhat === 'owner' ? [ makeSelectionCell(it.uuid, 'project') ] : []).concat([
       (
         <a href="#" onclick={ e => {
           e.preventDefault();
@@ -29,7 +29,7 @@ class WBBrowseDialogProjectList extends Component {
         } }>{ it.name }</a>
       ),
       it.uuid
-    ]);
+    ]));
   }
 
   fetchSharedWithMe() {
@@ -83,10 +83,11 @@ class WBBrowseDialogProjectList extends Component {
     return prom;
   }
 
-  render({ app, navigate, page }, { numPages, rows }) {
+  render({ app, navigate, page, selectWhat }, { numPages, rows }) {
     return (
       <div>
-        <WBTable columns={ ['Name', 'UUID'] }
+        <WBTable columns={ (selectWhat === 'owner' ? [''] : []).concat(['Name', 'UUID']) }
+          headerClasses={ selectWhat === 'owner' ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
diff --git a/frontend/src/js/dialog/wb-browse-dialog-user-list.js b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
index ae85fad..ab128c9 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-user-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
@@ -41,6 +41,8 @@ class WBBrowseDialogUserList extends Component {
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/users?order=' +
       encodeURIComponent(JSON.stringify(order)) +
+      '&filters=' +
+      encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + itemsPerPage +
       '&offset=' + (itemsPerPage * page));
     prom = prom.then(xhr => this.setState({
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index c557dcb..feddf26 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -105,6 +105,31 @@ class WBBrowseDialog extends Component {
     });
   }
 
+  makeSelectionCell(uuid) {
+    const { selectMany, id, accept } = this.props;
+    const { selected } = this.state;
+
+    return selectMany ? (
+      <div>
+        <input type="checkbox" checked={ (uuid in selected) }
+          onChange={ e => {
+          if (e.target.value === 'on')
+            this.select(uuid);
+          else
+            this.deselect(uuid);
+        } } /> { '\u00A0' }
+      </div>
+    ) : (
+      <button class="btn btn-outline-primary" title="Use"
+        onclick={ () => {
+          $('#' + id).modal('hide');
+          accept(uuid);
+        } }>
+        <i class="fas fa-hand-pointer"></i>
+      </button>
+    );
+  }
+
   render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
@@ -141,7 +166,7 @@ class WBBrowseDialog extends Component {
               <div class="input-group mb-3">
                 <input type="text" class="form-control" placeholder="Search"
                   aria-label="Search" value={ textSearch }
-                  onChange={ e => this.setState({
+                  onChange={ e => this.navigate({
                       'textSearch': e.target.value,
                       'topPage': 0,
                       'bottomPage': 0}) } />
@@ -157,7 +182,9 @@ class WBBrowseDialog extends Component {
                   <WBBrowseDialogProjectList app={ app }
                     navigate={ url => this.navigate(url) }
                     mode={ mode } ownerUuid={ uuid }
-                    page={ topPage } textSearch={ textSearch } />
+                    page={ topPage } textSearch={ textSearch }
+                    selectWhat={ selectWhat }
+                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) } />
                 </div>
               ) : null }
 
@@ -174,11 +201,14 @@ class WBBrowseDialog extends Component {
                     selectMany={ selectMany } selectWhat={ selectWhat }/>
                 </div>
 
-              ) : (mode === 'browse' || mode === 'shared-with-me') ? (
+              ) : (selectWhat !== 'owner' && mode === 'browse') ? (
                 <div>
                   <h5>Collections</h5>
-                  <WBBrowseDialogCollectionList app={ app } parent={ this }
-                    selectMany={ selectMany } selectWhat={ selectWhat } />
+                  <WBBrowseDialogCollectionList app={ app }
+                    page={ bottomPage } textSearch={ textSearch }
+                    navigate={ url => this.navigate(url) }
+                    ownerUuid={ uuid } selectWhat={ selectWhat }
+                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) } />
                 </div>
               ) : null }
             </div>
@@ -194,4 +224,8 @@ class WBBrowseDialog extends Component {
   }
 }
 
+WBBrowseDialog.defaultProps = {
+  'accept': () => {}
+};
+
 export default WBBrowseDialog;
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index e71fcc4..a7802ea 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -110,7 +110,8 @@ class WBLaunchWorkflowPage extends Component {
           items={ app.state.toolboxItems } selectMany={ true }
           onAccepted={ values => alert(values) } />
 
-        <WBBrowseDialog app={ app } id={ realBrowseDialogId } />
+        <WBBrowseDialog app={ app } id={ realBrowseDialogId }
+          selectWhat="directory" />
 
         { workflow ?
           (<form class="container-fluid">

From 220ad9dd27068a1ec235e7387783621141c497fd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 12 Feb 2020 18:58:39 +0100
Subject: [PATCH 061/170] Added renaming functionality.

---
 .../src/js/component/wb-collection-listing.js |  8 ++-
 .../src/js/component/wb-process-listing.js    |  5 +-
 .../src/js/component/wb-project-listing.js    | 11 ++--
 .../src/js/component/wb-workflow-listing.js   | 13 ++++-
 frontend/src/js/dialog/wb-rename-dialog.js    | 45 +++++++++++++++
 frontend/src/js/misc/wb-rename-object.js      | 16 ++++++
 frontend/src/js/page/wb-browse.js             | 35 ++++++++++--
 frontend/src/js/widget/wb-dialog.js           | 56 +++++++++++++++++++
 8 files changed, 175 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-rename-dialog.js
 create mode 100644 frontend/src/js/misc/wb-rename-object.js
 create mode 100644 frontend/src/js/widget/wb-dialog.js

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 9523399..9e84eaf 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -21,12 +21,14 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    let { app } = this.props;
-    
+    let { app, renderRenameLink } = this.props;
+
     return items.map(item => [
       (<div>
         <div>
-          <a href={ urlForObject(item) }>{ item['name'] }</a>
+          <a href={ urlForObject(item) }>
+            { item['name'] }
+          </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 2d1021c..2c2bb27 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -22,11 +22,14 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(items) {
+    const { renderRenameLink } = this.props;
     return items.map(item => [
       (<div>
         <div>
           <a href="#"
-            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>{ item['name'] }</a>
+            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>
+            { item['name'] }
+          </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 9d37885..8a40e53 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -17,13 +17,15 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
-    let { app } = this.props;
-    
+    let { app, renderRenameLink } = this.props;
+
     return items.map(item => [
       (<div>
         <div>
           <a href="#"
-            onclick={ e => { e.preventDefault(); route('/browse/' + item['uuid']) }}>{ item['name'] }</a>
+            onclick={ e => { e.preventDefault(); route('/browse/' + item['uuid']) }}>
+            { item['name'] }
+          </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
@@ -78,7 +80,8 @@ class WBProjectListing extends Component {
 
 WBProjectListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'renderRenameLink': () => null
 };
 
 export default WBProjectListing;
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index f7bb05b..95cd285 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -6,6 +6,7 @@ import WBNameAndUuid from 'wb-name-and-uuid';
 import wbFetchObjects from 'wb-fetch-objects';
 import wbFormatDate from 'wb-format-date';
 import urlForObject from 'url-for-object';
+import arvadosObjectName from 'arvados-object-name';
 
 class WBWorkflowListing extends Component {
 
@@ -20,8 +21,18 @@ class WBWorkflowListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
+    const { renderRenameLink } = this.props;
     return items.map(item => [
-      ( <WBNameAndUuid uuid={ item.uuid } lookup={ { [item.uuid]: item } } /> ),
+      (
+        <div>
+          <div>
+            <a href={ urlForObject(item) }>
+              { arvadosObjectName(item) }
+            </a> { renderRenameLink(item, () => this.fetchItems()) }
+          </div>
+          <div>{ item.uuid }</div>
+        </div>
+      ),
       item.description,
       ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
       wbFormatDate(item.created_at),
diff --git a/frontend/src/js/dialog/wb-rename-dialog.js b/frontend/src/js/dialog/wb-rename-dialog.js
new file mode 100644
index 0000000..af31897
--- /dev/null
+++ b/frontend/src/js/dialog/wb-rename-dialog.js
@@ -0,0 +1,45 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import linkState from 'linkstate';
+import wbRenameObject from 'wb-rename-object';
+
+class WBRenameDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+    this.state.inputId = uuid.v4();
+  }
+
+  show(item, callback) {
+    const { inputId } = this.state;
+    this.setState({
+      'item': item,
+      'newName': null,
+      'callback': callback || (() => {})
+    });
+    this.dialogRef.current.show();
+    $('#' + inputId).focus();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  render({ app }, { item, newName, callback, inputId }) {
+    const { arvHost, arvToken } = app.state;
+    return (
+      <WBDialog title="Rename" ref={ this.dialogRef } accept={ () => {
+        if (newName)
+          wbRenameObject(arvHost, arvToken, item.uuid, newName).then(callback);
+      } }>
+        <div>
+          <input type="text" class="form-control" id={ inputId }
+            placeholder={ item ? item.name : 'Type new name here' }
+            value={ newName } onChange={ linkState(this, 'newName') } />
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+export default WBRenameDialog;
diff --git a/frontend/src/js/misc/wb-rename-object.js b/frontend/src/js/misc/wb-rename-object.js
new file mode 100644
index 0000000..bbd5a8a
--- /dev/null
+++ b/frontend/src/js/misc/wb-rename-object.js
@@ -0,0 +1,16 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function wbRenameObject(arvHost, arvToken, uuid, newName) {
+  const update = {
+    'name': newName
+  };
+  const typeName = arvadosTypeName(uuid);
+  return makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + typeName + 's/' +
+    uuid + '?' + typeName + '=' +
+    encodeURIComponent(JSON.stringify(update)),
+    { 'method': 'PUT' });
+}
+
+export default wbRenameObject;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index c61bc83..7b170b1 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBProjectListing from 'wb-project-listing';
@@ -8,8 +8,14 @@ import WBTabs from 'wb-tabs';
 import WBProcessListing from 'wb-process-listing';
 import WBCollectionListing from 'wb-collection-listing';
 import WBWorkflowListing from 'wb-workflow-listing';
+import WBRenameDialog from 'wb-rename-dialog';
 
 class WBBrowse extends Component {
+  constructor(...args) {
+    super(...args);
+    this.renameDialogRef = createRef();
+  }
+
   getUrl(params) {
     let res = '/browse/' +
       ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
@@ -26,11 +32,26 @@ class WBBrowse extends Component {
     route(this.getUrl(params));
   }
 
+  renameDialog(item, callback) {
+    // throw Error('Not implemented');
+    this.renameDialogRef.current.show(item, callback);
+  }
+
+  renderRenameLink(item, callback) {
+    return (
+      <a href="#" title="Rename" onclick={ e => { e.preventDefault(); this.renameDialog(item, callback); } }>
+        <i class="fas fa-edit text-secondary"></i>
+      </a>
+    );
+  }
+
   render({ ownerUuid, activePage, appState, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
     return (
       <div>
+        <WBRenameDialog app={ app } ref={ this.renameDialogRef } />
+
         <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
           (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
 
@@ -44,7 +65,8 @@ class WBBrowse extends Component {
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
-          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
+          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i) }
+          renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
 
         <WBTabs tabs={ [
           { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
@@ -58,21 +80,24 @@ class WBBrowse extends Component {
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(collectionPage || 0) }
-              getPageUrl={ i => this.getUrl({ 'collectionPage': i }) } />
+              getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
 
           ) : (objTypeTab === 'process' ? (
             <WBProcessListing appState={ appState }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
-              onPageChanged={ i => this.route({ 'processPage': i }) } />
+              onPageChanged={ i => this.route({ 'processPage': i }) }
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
 
           ) : (objTypeTab === 'workflow' ? (
             <WBWorkflowListing app={ app }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               page={ Number(workflowPage || 0) }
-              getPageUrl={ i => this.getUrl({ 'workflowPage': i }) } />
+              getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
 
           ) : null))
         }
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
new file mode 100644
index 0000000..570a625
--- /dev/null
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+
+class WBDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.id = uuid.v4();
+  }
+
+  show() {
+    const { id } = this.state;
+    $('#' + id).modal();
+  }
+
+  hide() {
+    const { id } = this.state;
+    $('#' + id).modal('hide');
+  }
+
+  render({ title, children, accept, reject }, { id }) {
+    return (
+      <form class="m-0">
+        <div class="modal" id={ id } tabindex="-1" role="dialog">
+          <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title">{ title }</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+
+              <div class="modal-body">
+                { children[0] }
+              </div>
+
+              <div class="modal-footer">
+                <input type="submit" class="btn btn-primary" value="Accept"
+                  onclick={ e => { e.preventDefault(); this.hide(); accept(); } } />
+                <button type="button" class="btn btn-secondary"
+                  onclick={ () => { this.hide(); reject(); } }>Cancel</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    );
+  }
+}
+
+WBDialog.defaultProps = {
+  'title': 'Dialog',
+  'accept': () => {},
+  'reject': () => {}
+};
+
+export default WBDialog;

From 63294c816f9d1badcfc4f7b9682a220c023c6dde Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 13:43:09 +0100
Subject: [PATCH 062/170] Added ability to delete objects.

---
 .../src/js/component/wb-collection-listing.js |  6 +--
 .../src/js/component/wb-process-listing.js    |  4 +-
 .../src/js/component/wb-project-listing.js    |  3 +-
 .../src/js/component/wb-workflow-listing.js   |  4 +-
 frontend/src/js/dialog/wb-delete-dialog.js    | 53 +++++++++++++++++++
 frontend/src/js/misc/wb-delete-object.js      | 11 ++++
 frontend/src/js/page/wb-browse.js             | 25 +++++++--
 frontend/src/js/widget/wb-dialog.js           | 11 ++--
 8 files changed, 100 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-delete-dialog.js
 create mode 100644 frontend/src/js/misc/wb-delete-object.js

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 9e84eaf..576186a 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -21,7 +21,7 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    let { app, renderRenameLink } = this.props;
+    let { app, renderRenameLink, renderDeleteButton } = this.props;
 
     return items.map(item => [
       (<div>
@@ -56,9 +56,7 @@ class WBCollectionListing extends Component {
           <i class="fas fa-list-ul"></i>
         </a>
 
-        <button class="btn btn-outline-danger m-1" title="Delete">
-          <i class="fas fa-trash"></i>
-        </button>
+        { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 2c2bb27..34483ec 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -22,7 +22,7 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(items) {
-    const { renderRenameLink } = this.props;
+    const { renderRenameLink, renderDeleteButton } = this.props;
     return items.map(item => [
       (<div>
         <div>
@@ -38,7 +38,7 @@ class WBProcessListing extends Component {
       item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
       item['output_uuid'],
       (<div>
-        <button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
+        { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 8a40e53..26f4f4a 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -17,7 +17,7 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
-    let { app, renderRenameLink } = this.props;
+    let { app, renderRenameLink, renderDeleteButton } = this.props;
 
     return items.map(item => [
       (<div>
@@ -36,6 +36,7 @@ class WBProjectListing extends Component {
           onclick={ () => (app.addToToolbox(item.uuid)) }>
           <i class="fas fa-toolbox"></i>
         </button>
+        { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 95cd285..7933b5f 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -21,7 +21,7 @@ class WBWorkflowListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    const { renderRenameLink } = this.props;
+    const { renderRenameLink, renderDeleteButton } = this.props;
     return items.map(item => [
       (
         <div>
@@ -40,7 +40,7 @@ class WBWorkflowListing extends Component {
         <a class="btn btn-outline-success mx-1 my-1" title="Launch"
           href={ urlForObject(item, 'launch') }><i class="fas fa-running"></i></a>
         <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
-        <button class="btn btn-outline-danger mx-1 my-1" title="Delete"><i class="fas fa-trash"></i></button>
+        { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/dialog/wb-delete-dialog.js b/frontend/src/js/dialog/wb-delete-dialog.js
new file mode 100644
index 0000000..d906cbc
--- /dev/null
+++ b/frontend/src/js/dialog/wb-delete-dialog.js
@@ -0,0 +1,53 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import linkState from 'linkstate';
+import wbDeleteObject from 'wb-delete-object';
+import arvadosTypeName from 'arvados-type-name';
+
+class WBDeleteDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+  }
+
+  show(item, callback) {
+    this.setState({
+      'item': item,
+      'callback': callback || (() => {})
+    });
+    this.dialogRef.current.show();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  render({ app }, { item, callback }) {
+    const { arvHost, arvToken } = app.state;
+
+    return (
+      <WBDialog title="Delete" ref={ this.dialogRef }>
+        <div>
+          <div class="mb-3">
+            Are you sure you want to delete the following { item ? arvadosTypeName(item.uuid) : null }:
+          </div>
+          { item ? <WBArvadosCrumbs app={ app } uuid={ item.uuid } /> : null }
+          <div>???</div>
+        </div>
+
+        <div>
+          <input type="submit" class="btn btn-danger mr-2" value="Delete"
+            onclick={ e => { e.preventDefault();
+              wbDeleteObject(arvHost, arvToken, item.uuid).then(callback); } } />
+          <button class="btn btn-secondary mr-2" onclick={ e => { e.preventDefault();
+            this.hide(); } }>
+            Cancel
+          </button>
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+export default WBDeleteDialog;
diff --git a/frontend/src/js/misc/wb-delete-object.js b/frontend/src/js/misc/wb-delete-object.js
new file mode 100644
index 0000000..af2ac4e
--- /dev/null
+++ b/frontend/src/js/misc/wb-delete-object.js
@@ -0,0 +1,11 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function wbDeleteObject(arvHost, arvToken, uuid) {
+  const typeName = arvadosTypeName(uuid);
+  return makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + typeName + 's/' +
+    uuid, { 'method': 'DELETE' });
+}
+
+export default wbDeleteObject;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 7b170b1..c7c90d4 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -9,11 +9,13 @@ import WBProcessListing from 'wb-process-listing';
 import WBCollectionListing from 'wb-collection-listing';
 import WBWorkflowListing from 'wb-workflow-listing';
 import WBRenameDialog from 'wb-rename-dialog';
+import WBDeleteDialog from 'wb-delete-dialog';
 
 class WBBrowse extends Component {
   constructor(...args) {
     super(...args);
     this.renameDialogRef = createRef();
+    this.deleteDialogRef = createRef();
   }
 
   getUrl(params) {
@@ -45,6 +47,15 @@ class WBBrowse extends Component {
     );
   }
 
+  renderDeleteButton(item, callback) {
+    return (
+      <button class="btn btn-outline-danger m-1" title="Delete"
+        onclick={ () => this.deleteDialogRef.current.show(item, callback) }>
+        <i class="fas fa-trash"></i>
+      </button>
+    );
+  }
+
   render({ ownerUuid, activePage, appState, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
@@ -52,6 +63,8 @@ class WBBrowse extends Component {
       <div>
         <WBRenameDialog app={ app } ref={ this.renameDialogRef } />
 
+        <WBDeleteDialog app={ app } ref={ this.deleteDialogRef } />
+
         <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
           (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
 
@@ -66,7 +79,8 @@ class WBBrowse extends Component {
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
           onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i) }
-          renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
+          renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
+          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
         <WBTabs tabs={ [
           { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
@@ -81,7 +95,8 @@ class WBBrowse extends Component {
               itemsPerPage="20"
               activePage={ Number(collectionPage || 0) }
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
           ) : (objTypeTab === 'process' ? (
             <WBProcessListing appState={ appState }
@@ -89,7 +104,8 @@ class WBBrowse extends Component {
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
           ) : (objTypeTab === 'workflow' ? (
             <WBWorkflowListing app={ app }
@@ -97,7 +113,8 @@ class WBBrowse extends Component {
               itemsPerPage="20"
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) } />
+              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
           ) : null))
         }
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
index 570a625..204bc2c 100644
--- a/frontend/src/js/widget/wb-dialog.js
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -34,10 +34,13 @@ class WBDialog extends Component {
               </div>
 
               <div class="modal-footer">
-                <input type="submit" class="btn btn-primary" value="Accept"
-                  onclick={ e => { e.preventDefault(); this.hide(); accept(); } } />
-                <button type="button" class="btn btn-secondary"
-                  onclick={ () => { this.hide(); reject(); } }>Cancel</button>
+                { children[1] ? children[1] : [
+                  <input type="submit" class="btn btn-primary" value="Accept"
+                    onclick={ e => { e.preventDefault(); this.hide(); accept(); } } />,
+                  <button type="button" class="btn btn-secondary"
+                    onclick={ () => { this.hide(); reject(); } }>Cancel</button>
+                ] }
+
               </div>
             </div>
           </div>

From e857d2e82405b2dd6c27aeb74ab02d99c7b69c82 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 14:28:21 +0100
Subject: [PATCH 063/170] Added ability to create new projects.

---
 frontend/src/js/dialog/wb-delete-dialog.js    |  2 +-
 .../src/js/dialog/wb-new-project-dialog.js    | 54 +++++++++++++++++++
 frontend/src/js/misc/make-arvados-request.js  |  8 +--
 frontend/src/js/misc/wb-delete-object.js      |  2 +-
 frontend/src/js/page/wb-browse.js             | 17 ++++--
 frontend/src/js/widget/wb-tabs.js             | 14 +++--
 6 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-new-project-dialog.js

diff --git a/frontend/src/js/dialog/wb-delete-dialog.js b/frontend/src/js/dialog/wb-delete-dialog.js
index d906cbc..838c201 100644
--- a/frontend/src/js/dialog/wb-delete-dialog.js
+++ b/frontend/src/js/dialog/wb-delete-dialog.js
@@ -38,7 +38,7 @@ class WBDeleteDialog extends Component {
 
         <div>
           <input type="submit" class="btn btn-danger mr-2" value="Delete"
-            onclick={ e => { e.preventDefault();
+            onclick={ e => { e.preventDefault(); this.hide();
               wbDeleteObject(arvHost, arvToken, item.uuid).then(callback); } } />
           <button class="btn btn-secondary mr-2" onclick={ e => { e.preventDefault();
             this.hide(); } }>
diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
new file mode 100644
index 0000000..ed5dd16
--- /dev/null
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -0,0 +1,54 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import linkState from 'linkstate';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBNewProjectDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+    this.state.inputId = uuid.v4();
+  }
+
+  show(ownerUuid, callback) {
+    const { inputId } = this.state;
+    this.setState({
+      'ownerUuid': ownerUuid,
+      'newName': null,
+      'placeholderName': 'New Project (' + (new Date()).toISOString() + ')',
+      'callback': callback || (() => {})
+    });
+    this.dialogRef.current.show();
+    $('#' + inputId).focus();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  render({ app }, { ownerUuid, newName, placeholderName, callback, inputId }) {
+    const { arvHost, arvToken } = app.state;
+    return (
+      <WBDialog title="New Project" ref={ this.dialogRef } accept={ () => {
+        const group = {
+          'group_class': 'project',
+          'name': newName || placeholderName,
+          'owner_uuid': ownerUuid
+        };
+        makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/groups', { 'method': 'POST',
+          'data': JSON.stringify(group),
+          'promiseOrdering': false }
+        ).then(callback);
+      } }>
+        <div>
+          <input type="text" class="form-control" id={ inputId }
+            placeholder={ placeholderName }
+            value={ newName } onChange={ linkState(this, 'newName') } />
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+export default WBNewProjectDialog;
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 8799ed5..972f2c3 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -10,13 +10,14 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     'responseType': 'json',
     'useSsl': true,
     'requireToken': true,
-    'onProgress': () => {}
+    'onProgress': () => {},
+    'promiseOrdering': true
   };
 
   Object.keys(defaultParams).map(k => (params[k] =
     (k in params ? params[k] : defaultParams[k])));
   let { method, data, contentType, responseType,
-    useSsl, requireToken, onProgress } = params;
+    useSsl, requireToken, onProgress, promiseOrdering } = params;
 
   if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());
@@ -43,7 +44,8 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.send(data);
   });
 
-  prom = wbApplyPromiseOrdering(prom, requestPromiseOrdering);
+  if (promiseOrdering)
+    prom = wbApplyPromiseOrdering(prom, requestPromiseOrdering);
 
   return prom;
 }
diff --git a/frontend/src/js/misc/wb-delete-object.js b/frontend/src/js/misc/wb-delete-object.js
index af2ac4e..eb8e510 100644
--- a/frontend/src/js/misc/wb-delete-object.js
+++ b/frontend/src/js/misc/wb-delete-object.js
@@ -5,7 +5,7 @@ function wbDeleteObject(arvHost, arvToken, uuid) {
   const typeName = arvadosTypeName(uuid);
   return makeArvadosRequest(arvHost, arvToken,
     '/arvados/v1/' + typeName + 's/' +
-    uuid, { 'method': 'DELETE' });
+    uuid, { 'method': 'DELETE', 'promiseOrdering': false });
 }
 
 export default wbDeleteObject;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index c7c90d4..984ec90 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -10,12 +10,15 @@ import WBCollectionListing from 'wb-collection-listing';
 import WBWorkflowListing from 'wb-workflow-listing';
 import WBRenameDialog from 'wb-rename-dialog';
 import WBDeleteDialog from 'wb-delete-dialog';
+import WBNewProjectDialog from 'wb-new-project-dialog';
 
 class WBBrowse extends Component {
   constructor(...args) {
     super(...args);
     this.renameDialogRef = createRef();
     this.deleteDialogRef = createRef();
+    this.newProjectDialogRef = createRef();
+    this.projectListingRef = createRef();
   }
 
   getUrl(params) {
@@ -65,14 +68,22 @@ class WBBrowse extends Component {
 
         <WBDeleteDialog app={ app } ref={ this.deleteDialogRef } />
 
+        <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
+
         <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
           (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
 
         <WBArvadosCrumbs uuid={ ownerUuid } app={ app } />
 
-        <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />
-
-        <WBProjectListing app={ app }
+        <WBTabs tabs={ [
+          { 'name': 'Projects', 'isActive': true },
+          { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
+            'onClick': () => this.newProjectDialogRef.current.show(ownerUuid,
+              () => this.projectListingRef.current.fetchItems() ) }
+        ] } />
+
+        <WBProjectListing ref={ this.projectListingRef }
+          app={ app }
           arvHost={ appState.arvHost }
           arvToken={ appState.arvToken }
           ownerUuid={ ownerUuid }
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 4427df6..29faa35 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -1,18 +1,22 @@
-import { h, Component } from 'preact';
+import { h, Component, VNode } from 'preact';
 
 class WBTabs extends Component {
   render({ tabs, onTabChanged }) {
     return (
       <ul class="nav nav-tabs">
         { tabs.map((t, idx) => {
-          let name, isActive, isDisabled;
+          let name, isActive, isDisabled, onClick;
+
           if (typeof(t) === 'object') {
             name = t.name;
             isActive = t.isActive;
             isDisabled = t.isDisabled;
+            onClick = t.onClick;
+
           } else if (typeof(t) === 'string') {
             name = t;
           }
+
           let cls = ['nav-link'];
           if (isActive)
             cls.push('active');
@@ -21,7 +25,11 @@ class WBTabs extends Component {
           cls = cls.join(' ');
           return (
             <li class="nav-item">
-              <a class={ cls } href="#" onclick={ e => { e.preventDefault(); onTabChanged(t); } }>{ name }</a>
+              <a class={ cls } href="#"
+                onclick={ e => { e.preventDefault();
+                  onClick ? onClick() : onTabChanged(t); } }>
+                { name }
+              </a>
             </li>
           );
         }) }

From d37252dded3922842610b8024af49d1ac42382b8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 14:41:18 +0100
Subject: [PATCH 064/170] Configurable expected status in makeArvadosRequest()

---
 frontend/src/js/dialog/wb-new-project-dialog.js | 4 ++--
 frontend/src/js/misc/make-arvados-request.js    | 8 +++++---
 frontend/src/js/misc/wb-delete-object.js        | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
index ed5dd16..db46614 100644
--- a/frontend/src/js/dialog/wb-new-project-dialog.js
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -36,9 +36,9 @@ class WBNewProjectDialog extends Component {
           'owner_uuid': ownerUuid
         };
         makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/groups', { 'method': 'POST',
+          '/arvados/v1/groups?async=true', { 'method': 'POST',
           'data': JSON.stringify(group),
-          'promiseOrdering': false }
+          'expectedStatus': 202 }
         ).then(callback);
       } }>
         <div>
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 972f2c3..2cd82db 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -11,13 +11,15 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     'useSsl': true,
     'requireToken': true,
     'onProgress': () => {},
-    'promiseOrdering': true
+    'promiseOrdering': true,
+    'expectedStatus': 200
   };
 
   Object.keys(defaultParams).map(k => (params[k] =
     (k in params ? params[k] : defaultParams[k])));
   let { method, data, contentType, responseType,
-    useSsl, requireToken, onProgress, promiseOrdering } = params;
+    useSsl, requireToken, onProgress, promiseOrdering,
+    expectedStatus } = params;
 
   if (!(arvHost && (arvToken || !requireToken)))
     return new Promise((accept, reject) => reject());
@@ -36,7 +38,7 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4)
         return;
-      if (xhr.status !== 200)
+      if (xhr.status !== expectedStatus)
         reject(xhr);
       else
         accept(xhr);
diff --git a/frontend/src/js/misc/wb-delete-object.js b/frontend/src/js/misc/wb-delete-object.js
index eb8e510..af2ac4e 100644
--- a/frontend/src/js/misc/wb-delete-object.js
+++ b/frontend/src/js/misc/wb-delete-object.js
@@ -5,7 +5,7 @@ function wbDeleteObject(arvHost, arvToken, uuid) {
   const typeName = arvadosTypeName(uuid);
   return makeArvadosRequest(arvHost, arvToken,
     '/arvados/v1/' + typeName + 's/' +
-    uuid, { 'method': 'DELETE', 'promiseOrdering': false });
+    uuid, { 'method': 'DELETE' });
 }
 
 export default wbDeleteObject;

From 12f1349735a436099165c5a97de12c737d811bc1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 18:34:13 +0100
Subject: [PATCH 065/170] Added Shared with Me mode in WBBrowse.

---
 .../src/js/component/wb-arvados-crumbs.js     | 13 +++--
 frontend/src/js/component/wb-navbar-common.js |  1 +
 .../src/js/component/wb-project-listing.js    | 20 ++++----
 frontend/src/js/page/wb-app.js                |  8 +++-
 frontend/src/js/page/wb-browse.js             | 47 ++++++++++++-------
 frontend/src/js/widget/wb-tabs.js             |  3 ++
 6 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/frontend/src/js/component/wb-arvados-crumbs.js b/frontend/src/js/component/wb-arvados-crumbs.js
index 233be8e..26640bb 100644
--- a/frontend/src/js/component/wb-arvados-crumbs.js
+++ b/frontend/src/js/component/wb-arvados-crumbs.js
@@ -9,13 +9,20 @@ class WBArvadosCrumbs extends Component {
   }
 
   fetchCrumbs() {
-    if (!this.props.uuid) {
+    const { mode, uuid, app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    if (mode === 'shared-with-me') {
+      this.setState({ 'items': [ { 'name': 'Shared with Me' } ] });
+      return;
+    }
+
+    if (!uuid) {
       this.setState({ 'items': [ { 'name': 'All Projects' } ] });
       return;
     }
 
-    let { arvHost, arvToken } = this.props.app.state;
-    let prom = fetchObjectParents(arvHost, arvToken, this.props.uuid);
+    let prom = fetchObjectParents(arvHost, arvToken, uuid);
     prom = prom.then(parents => {
       this.setState({ 'items': parents });
     });
diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index 3b6a09b..bd6c6c3 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -10,6 +10,7 @@ class WBNavbarCommon extends Component {
           { 'name': 'Home', 'id': 'home' },
           { 'name': 'All Projects', 'id': 'all-projects' },
           { 'name': 'All Users', 'id': 'all-users' },
+          { 'name': 'Shared with Me', 'id': 'shared-with-me' },
           { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
         ].concat(items) }
         rhs={ (
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 26f4f4a..51795f8 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -42,16 +42,18 @@ class WBProjectListing extends Component {
   }
 
   fetchItems() {
-    let i = this.props.activePage;
+    let { activePage, mode, itemsPerPage, ownerUuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
-    if (this.props.ownerUuid)
-      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
-    let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
-      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
-      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
-      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups' + (mode === 'shared-with-me' ? '/shared' : '') +
+      '?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * activePage));
     prom = prom.then(xhr =>
       this.setState({
         'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
@@ -65,7 +67,7 @@ class WBProjectListing extends Component {
     this.fetchItems();
   }
 
-  render({ arvHost, arvToken, ownerUuid, activePage, onPageChanged }, { rows, numPages }) {
+  render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
         <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
@@ -73,7 +75,7 @@ class WBProjectListing extends Component {
 
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => onPageChanged(i) } />
+          getPageUrl={ getPageUrl } />
       </div>
     );
   }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index eccf52b..1862de3 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -31,6 +31,8 @@ class WBApp extends Component {
       return ('/browse');
     } else if (item['id'] === 'all-users') {
       return ('/users');
+    } else if (item['id'] === 'shared-with-me') {
+      return ('/shared-with-me');
     }
   }
 
@@ -70,8 +72,10 @@ class WBApp extends Component {
         <WBSignOut path='/sign-out' app={ this } />
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
-          appState={ this.state }
-          app={ this } />
+          app={ this } mode="browse" />
+
+        <WBBrowse path="/shared-with-me/:activePage?"
+          app={ this } mode="shared-with-me" />
 
         <WBProcessView path="/process/:uuid" app={ this } />
 
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 984ec90..b4ea93d 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -22,6 +22,12 @@ class WBBrowse extends Component {
   }
 
   getUrl(params) {
+    const mode = ('mode' in params ? params.mode : this.props.mode);
+
+    if (mode === 'shared-with-me')
+      return '/shared-with-me/' + ('activePage' in params ? params.activePage :
+        (this.props.activePage || ''));
+
     let res = '/browse/' +
       ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
       ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
@@ -59,7 +65,7 @@ class WBBrowse extends Component {
     );
   }
 
-  render({ ownerUuid, activePage, appState, app,
+  render({ mode, ownerUuid, activePage, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
     return (
@@ -70,36 +76,41 @@ class WBBrowse extends Component {
 
         <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
 
-        <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
-          (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
+        <WBNavbarCommon app={ app } activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
+          (!ownerUuid) ? 'all-projects' :
+          (ownerUuid === app.state.currentUser.uuid) ? 'home' : null } />
 
-        <WBArvadosCrumbs uuid={ ownerUuid } app={ app } />
+        <WBArvadosCrumbs mode={ mode } uuid={ ownerUuid } app={ app } />
 
         <WBTabs tabs={ [
           { 'name': 'Projects', 'isActive': true },
-          { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
+          ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
             'onClick': () => this.newProjectDialogRef.current.show(ownerUuid,
-              () => this.projectListingRef.current.fetchItems() ) }
+              () => this.projectListingRef.current.fetchItems() ) } : null
         ] } />
 
         <WBProjectListing ref={ this.projectListingRef }
           app={ app }
-          arvHost={ appState.arvHost }
-          arvToken={ appState.arvToken }
+          arvHost={ app.state.arvHost }
+          arvToken={ app.state.arvToken }
+          mode={ mode }
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
-          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i) }
+          getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
           renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-        <WBTabs tabs={ [
-          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
-          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
-          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
-          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+        { (mode !== 'browse') ? null : (
+          <WBTabs tabs={ [
+            { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
+            { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
+            { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
+            onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+        ) }
 
         {
+          (mode !== 'browse') ? null :
           (!objTypeTab || objTypeTab === 'collection') ? (
             <WBCollectionListing app={ app }
               ownerUuid={ ownerUuid }
@@ -109,8 +120,8 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : (objTypeTab === 'process' ? (
-            <WBProcessListing appState={ appState }
+          ) : (objTypeTab === 'process') ? (
+            <WBProcessListing appState={ app.state }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
@@ -118,7 +129,7 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : (objTypeTab === 'workflow' ? (
+          ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
@@ -127,7 +138,7 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : null))
+          ) : null
         }
       </div>
     );
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 29faa35..e2bc2f5 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -7,6 +7,9 @@ class WBTabs extends Component {
         { tabs.map((t, idx) => {
           let name, isActive, isDisabled, onClick;
 
+          if (!t)
+            return null;
+
           if (typeof(t) === 'object') {
             name = t.name;
             isActive = t.isActive;

From 12192c5b93fecd69e65f907a00d4d78d4b5f52d5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 18:58:13 +0100
Subject: [PATCH 066/170] Support for YAML workflow definitions.

---
 frontend/package.json                           | 1 +
 frontend/rollup.config.js                       | 1 +
 frontend/src/html/index.html                    | 1 +
 frontend/src/js/component/wb-workflow-fields.js | 7 ++++++-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index f2bd946..a8b1222 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "history": "^4.10.1",
     "jquery": "^3.4.1",
     "js-uuid": "0.0.6",
+    "js-yaml": "^3.13.1",
     "linkstate": "^1.1.1",
     "popper.js": "^1.16.1",
     "preact": "^8.2.9",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 84d35a6..b69dcb1 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -46,6 +46,7 @@ export default {
       'node_modules/crypto-js/core.js': 'dist/js/crypto-js/core.js',
       'node_modules/crypto-js/md5.js': 'dist/js/crypto-js/md5.js',
       'src/js/misc/wb-manifest-worker.js': 'dist/js/wb-manifest-worker.js',
+      'node_modules/js-yaml/dist/js-yaml.min.js': 'dist/js/js-yaml.min.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 44421f6..4c23a3d 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -14,6 +14,7 @@
     <script language="javascript" src="/js/filesize.js"></script>
     <script language="javascript" src="/js/crypto-js/core.js"></script>
     <script language="javascript" src="/js/crypto-js/md5.js"></script>
+    <script language="javascript" src="/js/js-yaml.min.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-workflow-fields.js b/frontend/src/js/component/wb-workflow-fields.js
index b84f786..9a45e27 100644
--- a/frontend/src/js/component/wb-workflow-fields.js
+++ b/frontend/src/js/component/wb-workflow-fields.js
@@ -22,7 +22,12 @@ class WBWorkflowFields extends Component {
 
     prom = prom.then(xhr => {
       const item = xhr.response;
-      const definition = JSON.parse(item.definition);
+      let definition;
+      try {
+        definition = JSON.parse(item.definition);
+      } catch (_) {
+        definition = jsyaml.load(item.definition);
+      }
       const graph = definition['$graph'];
 
       let rows = [

From cf3b341c4f1fb408bb182ed68ea0a843a6fcfd5b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 14 Feb 2020 16:54:14 +0100
Subject: [PATCH 067/170] Added WBContainerView.

---
 .../src/js/component/wb-container-fields.js   | 106 ++++++++++++++++++
 frontend/src/js/misc/url-for-object.js        |   2 +-
 frontend/src/js/page/wb-app.js                |   3 +
 frontend/src/js/page/wb-container-view.js     |  29 +++++
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/js/component/wb-container-fields.js
 create mode 100644 frontend/src/js/page/wb-container-view.js

diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
new file mode 100644
index 0000000..e674e4f
--- /dev/null
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -0,0 +1,106 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBAccordion from 'wb-accordion';
+
+class WBContainerFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/containers/' + uuid);
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'State', item.state ],
+        [ 'Started At', wbFormatDate(item.started_at) ],
+        [ 'Finished At', wbFormatDate(item.started_at) ],
+        [ 'Log', item.uuid ? (
+          <WBNameAndUuid app={ app } uuid={ item.uuid } />
+        ) : ( <i>{ String(item.uuid) }</i> ) ],
+        [ 'Environment', (
+          <WBAccordion names={ ['Environment'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Working Directory', item.cwd ],
+        [ 'Command', (
+          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+        ) ],
+        [ 'Output Path', item.output_path ],
+        [ 'Mounts', (
+          <WBAccordion names={ Object.keys(item.mounts) }
+            cardHeaderClass="card-header-sm">
+            { Object.keys(item.mounts).map(k => (
+              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+            )) }
+          </WBAccordion>
+        ) ],
+        [ 'Runtime Constraints', (
+          <WBAccordion names={ ['Runtime Constraints'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Runtime Status', (
+          <WBAccordion names={ ['Runtime Status'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_status, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Scheduling Parameters', (
+          <WBAccordion names={ ['Scheduling Parameters'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Output', item.output ? (
+          <WBNameAndUuid app={ app } uuid={ item.output } />
+        ) : ( <i>{ String(item.output) }</i> )],
+        [ 'Container Image', (
+          <WBNameAndUuid app={ app } uuid={ item.container_image } />
+        ) ],
+        [ 'Progress', item.progress ],
+        [ 'Priority', item.priority ],
+        [ 'Exit Code', item.exit_code === null ? ( <i>null</i> ) : item.exit_code ],
+        [ 'Auth UUID', item.auth_uuid === null ? ( <i>null</i> ) : item.auth_uuid ],
+        [ 'Locked by UUID', item.locked_by_uuid === null ? ( <i>null</i> ) : item.locked_by_uuid ]
+      ];
+      rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows }
+          verticalHeader={ true } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBContainerFields;
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index b18e941..8a3e4a9 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -19,7 +19,7 @@ function urlForObject(item, mode='primary') {
     else
       return ('/collection/' + item.uuid);
   } else if (objectType === 'container')
-    return ('https://wb.arkau.roche.com/containers/' + item.uuid);
+    return ('/container/' + item.uuid);
 }
 
 export default urlForObject;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 1862de3..cf119f8 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -5,6 +5,7 @@ import WBSignIn from 'wb-sign-in';
 import WBSignOut from 'wb-sign-out';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
+import WBContainerView from 'wb-container-view';
 import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
@@ -79,6 +80,8 @@ class WBApp extends Component {
 
         <WBProcessView path="/process/:uuid" app={ this } />
 
+        <WBContainerView path="/container/:uuid" app={ this } />
+
         <WBCollectionView path="/collection/:uuid" app={ this } />
 
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
diff --git a/frontend/src/js/page/wb-container-view.js b/frontend/src/js/page/wb-container-view.js
new file mode 100644
index 0000000..ea2a804
--- /dev/null
+++ b/frontend/src/js/page/wb-container-view.js
@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBContainerFields from 'wb-container-fields';
+
+class WBContainerView extends Component {
+  render({ app, uuid }) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the container view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Container Fields</h2>
+        <WBContainerFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBContainerView;

From e7dc4b1c037b3c2cda161c9ee27d5f5c6686702f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 14 Feb 2020 17:18:15 +0100
Subject: [PATCH 068/170] Small fix

---
 frontend/src/js/component/wb-container-fields.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index e674e4f..284f0b1 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -32,8 +32,8 @@ class WBContainerFields extends Component {
         [ 'State', item.state ],
         [ 'Started At', wbFormatDate(item.started_at) ],
         [ 'Finished At', wbFormatDate(item.started_at) ],
-        [ 'Log', item.uuid ? (
-          <WBNameAndUuid app={ app } uuid={ item.uuid } />
+        [ 'Log', item.log ? (
+          <WBNameAndUuid app={ app } uuid={ item.log } />
         ) : ( <i>{ String(item.uuid) }</i> ) ],
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }

From a646fabd84bdb08c1dffe71cf9ea750be2917814 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 14 Feb 2020 17:19:20 +0100
Subject: [PATCH 069/170] Made project creation synchronous.

---
 frontend/src/js/dialog/wb-new-project-dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
index db46614..57a8c38 100644
--- a/frontend/src/js/dialog/wb-new-project-dialog.js
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -36,7 +36,7 @@ class WBNewProjectDialog extends Component {
           'owner_uuid': ownerUuid
         };
         makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/groups?async=true', { 'method': 'POST',
+          '/arvados/v1/groups', { 'method': 'POST',
           'data': JSON.stringify(group),
           'expectedStatus': 202 }
         ).then(callback);

From 17cf0550f48c020cc310714fca2299a526390c8b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 14 Feb 2020 18:28:04 +0100
Subject: [PATCH 070/170] Small fix

---
 frontend/src/js/component/wb-container-fields.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index 284f0b1..7fc55d6 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -34,7 +34,7 @@ class WBContainerFields extends Component {
         [ 'Finished At', wbFormatDate(item.started_at) ],
         [ 'Log', item.log ? (
           <WBNameAndUuid app={ app } uuid={ item.log } />
-        ) : ( <i>{ String(item.uuid) }</i> ) ],
+        ) : ( <i>{ String(item.log) }</i> ) ],
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">

From a6c0a704a95df7da0bc16bbfd3d61c6461ccfee3 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 17 Feb 2020 11:53:43 +0100
Subject: [PATCH 071/170] Implemented file download via StreamSaver.

---
 frontend/rollup.config.js                     |   4 +
 frontend/src/html/index.html                  |   2 +
 .../src/js/component/wb-collection-content.js |  74 +++++-------
 frontend/src/js/misc/wb-manifest-worker.js    |   3 +
 frontend/src/js/misc/wb-rootdir-wrapper.js    |  82 +++++++++++++
 frontend/src/js/page/wb-app.js                |   3 +
 frontend/src/js/page/wb-download-page.js      | 112 ++++++++++++++++++
 7 files changed, 236 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-rootdir-wrapper.js
 create mode 100644 frontend/src/js/page/wb-download-page.js

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index b69dcb1..1ac0c99 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -47,6 +47,10 @@ export default {
       'node_modules/crypto-js/md5.js': 'dist/js/crypto-js/md5.js',
       'src/js/misc/wb-manifest-worker.js': 'dist/js/wb-manifest-worker.js',
       'node_modules/js-yaml/dist/js-yaml.min.js': 'dist/js/js-yaml.min.js',
+      'node_modules/streamsaver/mitm.html': 'dist/mitm.html',
+      'node_modules/streamsaver/sw.js': 'dist/sw.js',
+      'node_modules/streamsaver/StreamSaver.js': 'dist/js/StreamSaver.js',
+      'node_modules/web-streams-polyfill/dist/ponyfill.js': 'dist/js/web-streams-polyfill/ponyfill.js',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 4c23a3d..5a01586 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -4,6 +4,7 @@
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/index.css" />
+    <script language="javascript" src="/js/web-streams-polyfill/ponyfill.js"></script>
     <script language="javascript">
       window.process = { 'env': { 'NODE_ENV': 'production' } };
     </script>
@@ -15,6 +16,7 @@
     <script language="javascript" src="/js/crypto-js/core.js"></script>
     <script language="javascript" src="/js/crypto-js/md5.js"></script>
     <script language="javascript" src="/js/js-yaml.min.js"></script>
+    <script language="javascript" src="/js/StreamSaver.js"></script>
   </head>
   <body>
     <script language="javascript" src="/js/app.min.js"></script>
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 6067c2b..593921d 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -1,9 +1,8 @@
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
-// import { WBManifestReader } from 'wb-collection-manifest';
-// import WBManifestReader from 'wb-manifest-reader';
 import WBPagination from 'wb-pagination';
+import WBRootDirWrapper from 'wb-rootdir-wrapper';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
 
@@ -23,6 +22,7 @@ class WBCollectionContent extends Component {
     this.state.mode = 'manifestDownload';
     this.state.parsedStreams = 0;
     this.state.totalStreams = 1;
+    this.state.rootDirWrapper = null;
   }
 
   getUrl(params) {
@@ -95,10 +95,20 @@ class WBCollectionContent extends Component {
       }
 
       prom_1 = prom_1.then(() => {
+        const prom_2 = new Promise(accept => {
+          manifestWorker.onmessage = e => accept(e);
+          manifestWorker.postMessage([ 'getData' ]);
+        });
+        return prom_2;
+      });
+
+      prom_1 = prom_1.then(e => {
+        this.state.rootDirWrapper = new WBRootDirWrapper(e.data[1], e.data[2]);
         this.setState({
           'mode': 'browsingReady'
         });
-        this.prepareRows();
+        this.prepareRows(this.state.rootDirWrapper.listDirectory('.' +
+          this.props.collectionPath));
       });
 
       return prom_1;
@@ -106,38 +116,22 @@ class WBCollectionContent extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { manifestWorker, mode } = this.state;
-    const { collectionPath } = nextProps;
-    if (mode === 'browsingReady') {
-      this.state.mode = 'waitForListing';
-      let prom = new Promise(accept => {
-        manifestWorker.onmessage = (e) => accept(e);
-        manifestWorker.postMessage([ 'listDirectory', '.' + collectionPath ]);
-      });
+    this.props = nextProps;
 
-      prom = prom.then(e => {
-        this.state.mode = 'browsingReady';
-        this.prepareRows(e.data[1]);
-      });
+    const { rootDirWrapper, mode } = this.state;
+    const { collectionPath } = this.props;
+
+    if (mode === 'browsingReady') {
+      const listing = rootDirWrapper.listDirectory('.' + collectionPath);
+      this.prepareRows(listing);
     }
-    this.props = nextProps;
-    // this.prepareRows();
   }
 
   prepareRows(listing) {
-    if (listing)
-      this.state.listing = listing;
-    else
-      listing = this.state.listing;
-
-    let { manifestReader, mode } = this.state;
-    let { collectionPath, page, itemsPerPage } = this.props;
-    let { arvHost, arvToken } = this.props.app.state;
-
-    //path = path.split('/');
-    //path = [ '.' ].concat(path);
+    let { rootDirWrapper, mode } = this.state;
+    let { collectionPath, page, itemsPerPage, app } = this.props;
+    let { arvHost, arvToken } = app.state;
 
-    //let listing = manifestReader.listDirectory('.' + collectionPath)
     const numPages = Math.ceil(listing.length / itemsPerPage);
     listing = listing.slice(page * itemsPerPage,
       page * itemsPerPage + itemsPerPage);
@@ -158,25 +152,17 @@ class WBCollectionContent extends Component {
             <div>
               <button class="btn btn-outline-primary mx-1" title="Download"
                 onclick={ () => {
-                  let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
-                    '.' + collectionPath + '/' + item[1]);
-                  prom = prom.then(blocks => {
-                    const blob = new Blob(blocks);
-                    const a = document.createElement('a');
-                    a.name = item[1];
-                    a.href = window.URL.createObjectURL(blob);
-                    a.click();
-                  });
+                  const file = rootDirWrapper.getFile('.' + collectionPath + '/' + item[1]);
+                  const blob = new Blob([
+                    JSON.stringify([ arvHost, arvToken, item[1], file ])
+                  ]);
+                  const blocksBlobUrl = URL.createObjectURL(blob);
+                  window.open('/download/' + encodeURIComponent(blocksBlobUrl), '_blank');
                 } }><i class="fas fa-download"></i></button>
 
               <button class="btn btn-outline-primary mx-1" title="View"
                 onclick={ () => {
-                  let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
-                    '.' + collectionPath + '/' + item[1]);
-                  prom = prom.then(blocks => {
-                    const blob = new Blob(blocks);
-                    window.open(window.URL.createObjectURL(blob));
-                  });
+                  alert('Not implemented.')
                 } }><i class="far fa-eye"></i></button>
             </div>
           ) : null)
diff --git a/frontend/src/js/misc/wb-manifest-worker.js b/frontend/src/js/misc/wb-manifest-worker.js
index e54e8f2..65ba1bd 100644
--- a/frontend/src/js/misc/wb-manifest-worker.js
+++ b/frontend/src/js/misc/wb-manifest-worker.js
@@ -16,6 +16,9 @@ onmessage = function(e) {
     const lst = listDirectory(rootDir, e.data[1], e.data[2]);
     postMessage([ 'listDirectoryResult', lst ])
     break; }
+  case 'getData': {
+    postMessage([ 'getDataResult', rootDir, streams ]);
+  break; }
   default:
     throw Error('Unknown verb: ' + e.data[0]);
   }
diff --git a/frontend/src/js/misc/wb-rootdir-wrapper.js b/frontend/src/js/misc/wb-rootdir-wrapper.js
new file mode 100644
index 0000000..ed8c4b2
--- /dev/null
+++ b/frontend/src/js/misc/wb-rootdir-wrapper.js
@@ -0,0 +1,82 @@
+class WBRootDirWrapper {
+  constructor(rootDir, streams) {
+    this.rootDir = rootDir;
+    this.streams = streams;
+  }
+
+  findDir(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+    if (path[0] !== '.')
+      throw Error('Path must begin with a dot component');
+    let dir = this.rootDir;
+    for (let i = 1; i < path.length; i++) {
+      if (!(path[i] in dir))
+        throw Error('Directory not found');
+      if (dir[path[i]] instanceof Array)
+        throw Error('Path is a file not directory');
+      dir = dir[path[i]];
+    }
+    return dir;
+  }
+
+  listDirectory(path) {
+    let dir = this.findDir(path);
+    let keys = Object.keys(dir);
+    keys.sort();
+    let subdirs = keys.filter(k => !(dir[k] instanceof Array));
+    let files = keys.filter(k => (dir[k] instanceof Array));
+    let res = subdirs.map(k => [ 'd', k, null ]);
+    res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
+    return res;
+  }
+
+  unescapeName(name) {
+    return name.replace(/(\\\\|\\[0-9]{3})/g, (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
+  }
+
+  escapeName(name) {
+    return name.replace(/ /g, '\\040');
+  }
+
+  getFile(path) {
+    if (typeof(path) === 'string')
+      path = path.split('/');
+
+    if (path.length < 2)
+      throw Error('Invalid file path');
+
+    const name = path[path.length - 1];
+
+    const dir = this.findDir(path.slice(0, path.length - 1));
+
+    if (!(name in dir))
+      throw Error('File not found');
+
+    if (!(dir[name] instanceof Array))
+      throw Error('Path points to a directory not a file');
+
+    const streams = this.streams;
+    let file = dir[name];
+    file = [ file[0].map(seg => {
+      const stm = streams[seg[0]];
+      const used = stm.map(loc => !( loc[2] <= seg[1] || loc[1] >= seg[1] + seg[2] ) );
+      const start = used.indexOf(true);
+      const end = used.lastIndexOf(true) + 1;
+      if (start === -1)
+        return [];
+      const res = [];
+      for (let i = start; i < end; i++) {
+        const loc = stm[i];
+        res.push([ loc[0], Math.max(0, seg[1] - loc[1]),
+          Math.min(loc[2], seg[1] + seg[2] - loc[1]) ]);
+      }
+      return res;
+    }), file[1] ];
+    file[0] = file[0].reduce((a, b) => a.concat(b));
+
+    return file;
+  }
+}
+
+export default WBRootDirWrapper;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index cf119f8..3abdcd8 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -11,6 +11,7 @@ import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
 import WBWorkflowView from 'wb-workflow-view';
 import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
+import WBDownloadPage from 'wb-download-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -91,6 +92,8 @@ class WBApp extends Component {
         <WBWorkflowView path="/workflow/:uuid" app={ this } />
 
         <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid" app={ this } />
+
+        <WBDownloadPage path="/download/:blocksBlobUrl" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-download-page.js b/frontend/src/js/page/wb-download-page.js
new file mode 100644
index 0000000..8660d64
--- /dev/null
+++ b/frontend/src/js/page/wb-download-page.js
@@ -0,0 +1,112 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBDownloadPage extends Component {
+  componentDidMount() {
+    const { app, blocksBlobUrl } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    let prom = new Promise((accept, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', blocksBlobUrl);
+      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());
+
+    let name, file;
+
+    const { streamSaver, location } = window;
+    streamSaver.mitm = location.protocol + '//' +
+      location.hostname + (location.port ?
+        ':' + location.port : '') + '/mitm.html';
+
+    let fileStream;
+    let writer;
+    let done = false;
+
+    prom = prom.then(text => {
+      let _;
+
+      [ _, _, name, file ] = JSON.parse(text);
+
+      fileStream = streamSaver.createWriteStream(name, {
+        size: file[1]
+      });
+      writer = fileStream.getWriter();
+
+      window.onunload = () => {
+        writer.abort()
+      };
+
+      window.onbeforeunload = evt => {
+        if (!done) {
+          evt.returnValue = `Are you sure you want to leave?`;
+        }
+      };
+
+      const filters = [
+        ['service_type', '=', 'proxy']
+      ];
+
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/keep_services?filters=' +
+        encodeURIComponent(JSON.stringify(filters)));
+    });
+
+    prom = prom.then(xhr => {
+      const services = xhr.response.items;
+      const i = Math.floor(Math.random() * services.length);
+      const proxy = services[i];
+
+      let prom_1 = new Promise(accept => accept());
+      for (let k = 0; k < file[0].length; k++) {
+        const loc = file[0][k];
+        prom_1 = prom_1.then(() => makeArvadosRequest(
+          proxy.service_host + ':' + proxy.service_port,
+          arvToken,
+          '/' + loc[0],
+          { 'useSsl': proxy.service_ssl_flag,
+            'responseType': 'arraybuffer' }
+        ));
+        prom_1 = prom_1.then(xhr_1 => {
+          const blk = xhr_1.response.slice(loc[1], loc[2]);
+          // const r = new Response(blk);
+          // r.body.pipeTo(fileStream);
+          writer.write(new Uint8Array(blk));
+        });
+      }
+      return prom_1;
+    });
+
+    prom = prom.then(() => {
+      writer.close();
+      done = true;
+    });
+  }
+
+  render() {
+    return (
+      <div class="container-fluid">
+        <div class="card my-3">
+          <div class="card-body">
+            Downloading, please wait...
+          </div>
+        </div>
+        <div class="alert alert-danger" role="alert">
+          Do not close this window until the download is finished.
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBDownloadPage;

From 589a1aece8034b15d5364e4b1411839092a97002 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 17 Feb 2020 12:17:24 +0100
Subject: [PATCH 072/170] Attempt to download inline but doesn't seem to work.

---
 frontend/rollup.config.js                 |   2 +-
 frontend/src/js/page/wb-app.js            |   2 +-
 frontend/src/js/page/wb-download-page.js  |  18 +-
 frontend/src/js/thirdparty/StreamSaver.js | 296 ++++++++++++++++++++++
 4 files changed, 314 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/js/thirdparty/StreamSaver.js

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 1ac0c99..a0a4200 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -49,7 +49,7 @@ export default {
       'node_modules/js-yaml/dist/js-yaml.min.js': 'dist/js/js-yaml.min.js',
       'node_modules/streamsaver/mitm.html': 'dist/mitm.html',
       'node_modules/streamsaver/sw.js': 'dist/sw.js',
-      'node_modules/streamsaver/StreamSaver.js': 'dist/js/StreamSaver.js',
+      'src/js/thirdparty/StreamSaver.js': 'dist/js/StreamSaver.js',
       'node_modules/web-streams-polyfill/dist/ponyfill.js': 'dist/js/web-streams-polyfill/ponyfill.js',
       verbose: true
     }),
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 3abdcd8..a086525 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -93,7 +93,7 @@ class WBApp extends Component {
 
         <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid" app={ this } />
 
-        <WBDownloadPage path="/download/:blocksBlobUrl" app={ this } />
+        <WBDownloadPage path="/download/:blocksBlobUrl/:inline?" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-download-page.js b/frontend/src/js/page/wb-download-page.js
index 8660d64..4b1e748 100644
--- a/frontend/src/js/page/wb-download-page.js
+++ b/frontend/src/js/page/wb-download-page.js
@@ -1,9 +1,21 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 
+function contentTypeFromFilename(name) {
+  let ext = name.split('.');
+  ext = ext[ext.length - 1].toUpperCase();
+  if (ext === 'TXT')
+    return 'text/plain; charset=utf-8';
+  if (ext === 'JPG' || ext === 'JPEG')
+    return 'image/jpeg';
+  if (ext === 'PNG')
+    return 'image/png';
+  return 'application/octet-stream; charset=utf-8';
+}
+
 class WBDownloadPage extends Component {
   componentDidMount() {
-    const { app, blocksBlobUrl } = this.props;
+    const { app, blocksBlobUrl, inline } = this.props;
     const { arvHost, arvToken } = app.state;
 
     let prom = new Promise((accept, reject) => {
@@ -39,7 +51,9 @@ class WBDownloadPage extends Component {
       [ _, _, name, file ] = JSON.parse(text);
 
       fileStream = streamSaver.createWriteStream(name, {
-        size: file[1]
+        size: file[1],
+        inline: inline,
+        contentType: contentTypeFromFilename(name)
       });
       writer = fileStream.getWriter();
 
diff --git a/frontend/src/js/thirdparty/StreamSaver.js b/frontend/src/js/thirdparty/StreamSaver.js
new file mode 100644
index 0000000..0a596be
--- /dev/null
+++ b/frontend/src/js/thirdparty/StreamSaver.js
@@ -0,0 +1,296 @@
+/* global chrome location ReadableStream define MessageChannel TransformStream */
+
+;((name, definition) => {
+  typeof module !== 'undefined'
+    ? module.exports = definition()
+    : typeof define === 'function' && typeof define.amd === 'object'
+      ? define(definition)
+      : this[name] = definition()
+})('streamSaver', () => {
+  'use strict'
+
+  let mitmTransporter = null
+  let supportsTransferable = false
+  const test = fn => { try { fn() } catch (e) {} }
+  const ponyfill = window.WebStreamsPolyfill || {}
+  const isSecureContext = window.isSecureContext
+  let useBlobFallback = /constructor/i.test(window.HTMLElement) || !!window.safari
+  const downloadStrategy = isSecureContext || 'MozAppearance' in document.documentElement.style
+    ? 'iframe'
+    : 'navigate'
+
+  const streamSaver = {
+    createWriteStream,
+    WritableStream: window.WritableStream || ponyfill.WritableStream,
+    supported: true,
+    version: { full: '2.0.0', major: 2, minor: 0, dot: 0 },
+    mitm: 'https://jimmywarting.github.io/StreamSaver.js/mitm.html?version=2.0.0'
+  }
+
+  /**
+   * create a hidden iframe and append it to the DOM (body)
+   *
+   * @param  {string} src page to load
+   * @return {HTMLIFrameElement} page to load
+   */
+  function makeIframe (src) {
+    if (!src) throw new Error('meh')
+    const iframe = document.createElement('iframe')
+    iframe.hidden = true
+    iframe.src = src
+    iframe.loaded = false
+    iframe.name = 'iframe'
+    iframe.isIframe = true
+    iframe.postMessage = (...args) => iframe.contentWindow.postMessage(...args)
+    iframe.addEventListener('load', () => {
+      iframe.loaded = true
+    }, { once: true })
+    document.body.appendChild(iframe)
+    return iframe
+  }
+
+  /**
+   * create a popup that simulates the basic things
+   * of what a iframe can do
+   *
+   * @param  {string} src page to load
+   * @return {object}     iframe like object
+   */
+  function makePopup (src) {
+    const options = 'width=200,height=100'
+    const delegate = document.createDocumentFragment()
+    const popup = {
+      frame: window.open(src, 'popup', options),
+      loaded: false,
+      isIframe: false,
+      isPopup: true,
+      remove () { popup.frame.close() },
+      addEventListener (...args) { delegate.addEventListener(...args) },
+      dispatchEvent (...args) { delegate.dispatchEvent(...args) },
+      removeEventListener (...args) { delegate.removeEventListener(...args) },
+      postMessage (...args) { popup.frame.postMessage(...args) }
+    }
+
+    const onReady = evt => {
+      if (evt.source === popup.frame) {
+        popup.loaded = true
+        window.removeEventListener('message', onReady)
+        popup.dispatchEvent(new Event('load'))
+      }
+    }
+
+    window.addEventListener('message', onReady)
+
+    return popup
+  }
+
+  try {
+    // We can't look for service worker since it may still work on http
+    new Response(new ReadableStream())
+    if (isSecureContext && !('serviceWorker' in navigator)) {
+      useBlobFallback = true
+    }
+  } catch (err) {
+    useBlobFallback = true
+  }
+
+  test(() => {
+    // Transfariable stream was first enabled in chrome v73 behind a flag
+    const { readable } = new TransformStream()
+    const mc = new MessageChannel()
+    mc.port1.postMessage(readable, [readable])
+    mc.port1.close()
+    mc.port2.close()
+    supportsTransferable = true
+    // Freeze TransformStream object (can only work with native)
+    Object.defineProperty(streamSaver, 'TransformStream', {
+      configurable: false,
+      writable: false,
+      value: TransformStream
+    })
+  })
+
+  function loadTransporter () {
+    if (!mitmTransporter) {
+      mitmTransporter = isSecureContext
+        ? makeIframe(streamSaver.mitm)
+        : makePopup(streamSaver.mitm)
+    }
+  }
+
+  /**
+   * @param  {string} filename filename that should be used
+   * @param  {object} options  [description]
+   * @param  {number} size     depricated
+   * @return {WritableStream}
+   */
+  function createWriteStream (filename, options, size) {
+    let opts = {
+      size: null,
+      pathname: null,
+      writableStrategy: undefined,
+      readableStrategy: undefined
+    }
+
+    // normalize arguments
+    if (Number.isFinite(options)) {
+      [ size, options ] = [ options, size ]
+      console.warn('[StreamSaver] Depricated pass an object as 2nd argument when creating a write stream')
+      opts.size = size
+      opts.writableStrategy = options
+    } else if (options && options.highWaterMark) {
+      console.warn('[StreamSaver] Depricated pass an object as 2nd argument when creating a write stream')
+      opts.size = size
+      opts.writableStrategy = options
+    } else {
+      opts = options || {}
+    }
+    if (!useBlobFallback) {
+      loadTransporter()
+
+      var bytesWritten = 0 // by StreamSaver.js (not the service worker)
+      var downloadUrl = null
+      var channel = new MessageChannel()
+
+      // Make filename RFC5987 compatible
+      filename = encodeURIComponent(filename.replace(/\//g, ':'))
+        .replace(/['()]/g, escape)
+        .replace(/\*/g, '%2A')
+
+      const response = {
+        transferringReadable: supportsTransferable,
+        pathname: opts.pathname || Math.random().toString().slice(-6) + '/' + filename,
+        headers: {
+          'Content-Type': (options.contentType ? options.contentType :
+            'application/octet-stream; charset=utf-8'),
+          'Content-Disposition': (options.inline ? 'inline' :
+            ("attachment; filename*=UTF-8''" + filename))
+        }
+      }
+
+      if (opts.size) {
+        response.headers['Content-Length'] = opts.size
+      }
+
+      const args = [ response, '*', [ channel.port2 ] ]
+
+      if (supportsTransferable) {
+        const transformer = downloadStrategy === 'iframe' ? undefined : {
+          // This transformer & flush method is only used by insecure context.
+          transform (chunk, controller) {
+            bytesWritten += chunk.length
+            controller.enqueue(chunk)
+
+            if (downloadUrl) {
+              location.href = downloadUrl
+              downloadUrl = null
+            }
+          },
+          flush () {
+            if (downloadUrl) {
+              location.href = downloadUrl
+            }
+          }
+        }
+        var ts = new streamSaver.TransformStream(
+          transformer,
+          opts.writableStrategy,
+          opts.readableStrategy
+        )
+        const readableStream = ts.readable
+
+        channel.port1.postMessage({ readableStream }, [ readableStream ])
+      }
+
+      channel.port1.onmessage = evt => {
+        // Service worker sent us a link that we should open.
+        if (evt.data.download) {
+          // Special treatment for popup...
+          if (downloadStrategy === 'navigate') {
+            mitmTransporter.remove()
+            mitmTransporter = null
+            if (bytesWritten) {
+              location.href = evt.data.download
+            } else {
+              downloadUrl = evt.data.download
+            }
+          } else {
+            if (mitmTransporter.isPopup) {
+              mitmTransporter.remove()
+              // Special case for firefox, they can keep sw alive with fetch
+              if (downloadStrategy === 'iframe') {
+                makeIframe(streamSaver.mitm)
+              }
+            }
+
+            // We never remove this iframes b/c it can interrupt saving
+            makeIframe(evt.data.download)
+          }
+        }
+      }
+
+      if (mitmTransporter.loaded) {
+        mitmTransporter.postMessage(...args)
+      } else {
+        mitmTransporter.addEventListener('load', () => {
+          mitmTransporter.postMessage(...args)
+        }, { once: true })
+      }
+    }
+
+    let chunks = []
+
+    return (!useBlobFallback && ts && ts.writable) || new streamSaver.WritableStream({
+      write (chunk) {
+        if (useBlobFallback) {
+          // Safari... The new IE6
+          // https://github.com/jimmywarting/StreamSaver.js/issues/69
+          //
+          // even doe it has everything it fails to download anything
+          // that comes from the service worker..!
+          chunks.push(chunk)
+          return
+        }
+
+        // is called when a new chunk of data is ready to be written
+        // to the underlying sink. It can return a promise to signal
+        // success or failure of the write operation. The stream
+        // implementation guarantees that this method will be called
+        // only after previous writes have succeeded, and never after
+        // close or abort is called.
+
+        // TODO: Kind of important that service worker respond back when
+        // it has been written. Otherwise we can't handle backpressure
+        // EDIT: Transfarable streams solvs this...
+        channel.port1.postMessage(chunk)
+        bytesWritten += chunk.length
+
+        if (downloadUrl) {
+          location.href = downloadUrl
+          downloadUrl = null
+        }
+      },
+      close () {
+        if (useBlobFallback) {
+          const blob = new Blob(chunks, { type: 'application/octet-stream; charset=utf-8' })
+          const link = document.createElement('a')
+          link.href = URL.createObjectURL(blob)
+          link.download = filename
+          link.click()
+        } else {
+          channel.port1.postMessage('end')
+        }
+      },
+      abort () {
+        chunks = []
+        channel.port1.postMessage('abort')
+        channel.port1.onmessage = null
+        channel.port1.close()
+        channel.port2.close()
+        channel = null
+      }
+    }, opts.writableStrategy)
+  }
+
+  return streamSaver
+})

From fc2b9a91a438f0a0116db62ec6a046e7f5bc8438 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 17 Feb 2020 13:05:24 +0100
Subject: [PATCH 073/170] Small but important fix computing file blocks.

---
 frontend/src/js/misc/wb-rootdir-wrapper.js | 2 +-
 frontend/src/js/page/wb-download-page.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/misc/wb-rootdir-wrapper.js b/frontend/src/js/misc/wb-rootdir-wrapper.js
index ed8c4b2..6fc5fcd 100644
--- a/frontend/src/js/misc/wb-rootdir-wrapper.js
+++ b/frontend/src/js/misc/wb-rootdir-wrapper.js
@@ -69,7 +69,7 @@ class WBRootDirWrapper {
       for (let i = start; i < end; i++) {
         const loc = stm[i];
         res.push([ loc[0], Math.max(0, seg[1] - loc[1]),
-          Math.min(loc[2], seg[1] + seg[2] - loc[1]) ]);
+          Math.min(loc[2] - loc[1], seg[1] + seg[2] - loc[1]) ]);
       }
       return res;
     }), file[1] ];
diff --git a/frontend/src/js/page/wb-download-page.js b/frontend/src/js/page/wb-download-page.js
index 4b1e748..c41c4b6 100644
--- a/frontend/src/js/page/wb-download-page.js
+++ b/frontend/src/js/page/wb-download-page.js
@@ -95,7 +95,7 @@ class WBDownloadPage extends Component {
           const blk = xhr_1.response.slice(loc[1], loc[2]);
           // const r = new Response(blk);
           // r.body.pipeTo(fileStream);
-          writer.write(new Uint8Array(blk));
+          return writer.write(new Uint8Array(blk));
         });
       }
       return prom_1;

From 4c9604c0114865e156466ed094c5339f30b54f87 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 09:31:42 +0100
Subject: [PATCH 074/170] Started working on dockerization.

---
 dockerfiles/wba/Dockerfile         | 13 +++++++++++++
 dockerfiles/wba/files/default.conf | 18 ++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 dockerfiles/wba/Dockerfile
 create mode 100644 dockerfiles/wba/files/default.conf

diff --git a/dockerfiles/wba/Dockerfile b/dockerfiles/wba/Dockerfile
new file mode 100644
index 0000000..ada0d14
--- /dev/null
+++ b/dockerfiles/wba/Dockerfile
@@ -0,0 +1,13 @@
+FROM alpine:3.11.3
+
+RUN apk update && apk add nginx && \
+  mv /etc/nginx/nginx.conf tmp.conf && \
+  echo "daemon off;" >/etc/nginx/nginx.conf && \
+  echo "" >>/etc/nginx/nginx.conf && \
+  cat tmp.conf >>/etc/nginx/nginx.conf && \
+  rm tmp.conf && \
+  mkdir /run/nginx
+
+COPY files/default.conf /etc/nginx/conf.d/default.conf
+
+RUN apk add gettext
diff --git a/dockerfiles/wba/files/default.conf b/dockerfiles/wba/files/default.conf
new file mode 100644
index 0000000..cebeb6e
--- /dev/null
+++ b/dockerfiles/wba/files/default.conf
@@ -0,0 +1,18 @@
+# This is a default site configuration which will simply return 404, preventing
+# chance access to any other virtualhost.
+
+server {
+        listen ${PORT0} default_server;
+        listen [::]:${PORT0} default_server;
+
+        # Everything is a 404
+        location / {
+                return 404;
+        }
+
+        # You may need this to prevent return 404 recursion.
+        location = /404.html {
+                internal;
+        }
+}
+

From ddf8ba0c55efb70c72dd392664df5fd545c26aa8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 11:39:49 +0100
Subject: [PATCH 075/170] Working on dockerization.

---
 .gitignore                                    |  1 +
 backend/nginx/conf/nginx.conf                 | 42 +++++++++++++++++++
 backend/supervisord/supervisord.conf          |  4 ++
 dockerfiles/wba/Dockerfile                    | 15 +++----
 dockerfiles/wba/files/wba/dist/index.html     |  6 +++
 .../wba/files/wba/nginx/conf/nginx.conf       | 41 ++++++++++++++++++
 dockerfiles/wba/files/wba/nginx/run/.keep     |  0
 dockerfiles/wba/files/wba/nginx/tmp/.keep     |  0
 .../wba/files/wba/supervisord/run/.keep       |  0
 .../files/wba/supervisord/supervisord.conf    |  8 ++++
 10 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 backend/nginx/conf/nginx.conf
 create mode 100644 backend/supervisord/supervisord.conf
 create mode 100644 dockerfiles/wba/files/wba/dist/index.html
 create mode 100644 dockerfiles/wba/files/wba/nginx/conf/nginx.conf
 create mode 100644 dockerfiles/wba/files/wba/nginx/run/.keep
 create mode 100644 dockerfiles/wba/files/wba/nginx/tmp/.keep
 create mode 100644 dockerfiles/wba/files/wba/supervisord/run/.keep
 create mode 100644 dockerfiles/wba/files/wba/supervisord/supervisord.conf

diff --git a/.gitignore b/.gitignore
index f8d63e5..9d1b2c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ package-lock.json
 /frontend/dist/
 /backend/server.pem
 /testdata/
+/backend/supervisord/supervisord.log
diff --git a/backend/nginx/conf/nginx.conf b/backend/nginx/conf/nginx.conf
new file mode 100644
index 0000000..5a530be
--- /dev/null
+++ b/backend/nginx/conf/nginx.conf
@@ -0,0 +1,42 @@
+error_log  /dev/null;
+pid nginx.pid;
+daemon off;
+
+events {
+
+}
+
+http {
+    include       /pstore/data/data_science/app/modules/nginx-1.17.8/conf/mime.types;
+
+    access_log /dev/null;
+
+
+    server {
+        listen       50080;
+        server_name  rkalbhpc002.kau.roche.com;
+
+        client_body_temp_path tmp/client_body_temp;
+        fastcgi_temp_path tmp/fastcgi_temp;
+        proxy_temp_path tmp/proxy_temp;
+        scgi_temp_path tmp/scgi_temp;
+        uwsgi_temp_path tmp/uwsgi_temp;
+
+        if ( $request_uri ~ \.(js|css|html|woff|ttf|svg|woff2|eot|svg)$ ) {
+          break;
+        }
+        if ( $request_uri ~ ^/fetch-blocks$ ) {
+          break;
+        }
+        rewrite .* /index.html;
+
+        location / {
+            root   /pstore/home/adaszews/workspace/arvados-workbench-advanced/frontend/dist;
+            index  index.html;
+        }
+
+        location /fetch-blocks {
+            proxy_pass http://localhost:12358/fetch-blocks;
+        }
+    }
+}
diff --git a/backend/supervisord/supervisord.conf b/backend/supervisord/supervisord.conf
new file mode 100644
index 0000000..9089d9e
--- /dev/null
+++ b/backend/supervisord/supervisord.conf
@@ -0,0 +1,4 @@
+[supervisord]
+
+[program:wba-nginx]
+command=/pstore/data/data_science/app/modules/nginx-1.17.8/sbin/nginx -p /pstore/home/adaszews/workspace/arvados-workbench-advanced/backend/nginx
diff --git a/dockerfiles/wba/Dockerfile b/dockerfiles/wba/Dockerfile
index ada0d14..62bbf90 100644
--- a/dockerfiles/wba/Dockerfile
+++ b/dockerfiles/wba/Dockerfile
@@ -1,13 +1,10 @@
 FROM alpine:3.11.3
 
-RUN apk update && apk add nginx && \
-  mv /etc/nginx/nginx.conf tmp.conf && \
-  echo "daemon off;" >/etc/nginx/nginx.conf && \
-  echo "" >>/etc/nginx/nginx.conf && \
-  cat tmp.conf >>/etc/nginx/nginx.conf && \
-  rm tmp.conf && \
-  mkdir /run/nginx
+RUN apk update && \
+  apk add nginx gettext supervisor
 
-COPY files/default.conf /etc/nginx/conf.d/default.conf
+COPY files/wba /wba
 
-RUN apk add gettext
+RUN chown -R nginx /wba/nginx/tmp /wba/nginx/run
+
+ENTRYPOINT /bin/sh -c "cd /wba/supervisord/run && /usr/bin/supervisord -c /wba/supervisord/supervisord.conf"
diff --git a/dockerfiles/wba/files/wba/dist/index.html b/dockerfiles/wba/files/wba/dist/index.html
new file mode 100644
index 0000000..6b31c83
--- /dev/null
+++ b/dockerfiles/wba/files/wba/dist/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    Hello, world!
+  </body>
+</html>
diff --git a/dockerfiles/wba/files/wba/nginx/conf/nginx.conf b/dockerfiles/wba/files/wba/nginx/conf/nginx.conf
new file mode 100644
index 0000000..751c07d
--- /dev/null
+++ b/dockerfiles/wba/files/wba/nginx/conf/nginx.conf
@@ -0,0 +1,41 @@
+error_log  /dev/null;
+pid run/nginx.pid;
+daemon off;
+
+events {
+
+}
+
+http {
+    include       /etc/nginx/mime.types;
+
+    access_log /dev/null;
+
+    server {
+        listen       ${PORT0};
+        server_name  wba.ecaas.emea.roche.com;
+
+        client_body_temp_path tmp/client_body_temp;
+        fastcgi_temp_path tmp/fastcgi_temp;
+        proxy_temp_path tmp/proxy_temp;
+        scgi_temp_path tmp/scgi_temp;
+        uwsgi_temp_path tmp/uwsgi_temp;
+
+        if ( $request_uri ~ \.(js|css|html|woff|ttf|svg|woff2|eot|svg)$ ) {
+          break;
+        }
+        if ( $request_uri ~ ^/fetch-blocks$ ) {
+          break;
+        }
+        rewrite .* /index.html;
+
+        location / {
+            root   /wba/dist;
+            index  index.html;
+        }
+
+        location /fetch-blocks {
+            proxy_pass http://localhost:12358/fetch-blocks;
+        }
+    }
+}
diff --git a/dockerfiles/wba/files/wba/nginx/run/.keep b/dockerfiles/wba/files/wba/nginx/run/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/dockerfiles/wba/files/wba/nginx/tmp/.keep b/dockerfiles/wba/files/wba/nginx/tmp/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/dockerfiles/wba/files/wba/supervisord/run/.keep b/dockerfiles/wba/files/wba/supervisord/run/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/dockerfiles/wba/files/wba/supervisord/supervisord.conf b/dockerfiles/wba/files/wba/supervisord/supervisord.conf
new file mode 100644
index 0000000..ec5975a
--- /dev/null
+++ b/dockerfiles/wba/files/wba/supervisord/supervisord.conf
@@ -0,0 +1,8 @@
+[supervisord]
+logfile=/dev/null
+nodaemon=true
+user=root
+
+[program:wba-nginx]
+command=/usr/sbin/nginx -p /wba/nginx -c conf/nginx.conf
+user=nginx

From d5e76ff52454bba75f3ba0eeee75dcd3769126b5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 13:59:35 +0100
Subject: [PATCH 076/170] For some reason 200 seems to be a valid result for
 object creation as well as 202.

---
 frontend/src/js/dialog/wb-new-project-dialog.js |  2 +-
 frontend/src/js/misc/make-arvados-request.js    | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
index 57a8c38..f5a897e 100644
--- a/frontend/src/js/dialog/wb-new-project-dialog.js
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -38,7 +38,7 @@ class WBNewProjectDialog extends Component {
         makeArvadosRequest(arvHost, arvToken,
           '/arvados/v1/groups', { 'method': 'POST',
           'data': JSON.stringify(group),
-          'expectedStatus': 202 }
+          'expectedStatus': [200, 202] }
         ).then(callback);
       } }>
         <div>
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
index 2cd82db..046ab68 100644
--- a/frontend/src/js/misc/make-arvados-request.js
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -38,10 +38,15 @@ function makeArvadosRequest(arvHost, arvToken, endpoint, params={}) {
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4)
         return;
-      if (xhr.status !== expectedStatus)
-        reject(xhr);
-      else
+
+      if ((expectedStatus instanceof Array) &&
+        expectedStatus.indexOf(xhr.status) !== -1) {
         accept(xhr);
+      } else if (expectedStatus === xhr.status) {
+        accept(xhr);
+      } else {
+        reject(xhr);
+      }
     };
     xhr.send(data);
   });

From d5c78ab70f46d7481a542992ba3a7586acf9dce5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 14:50:11 +0100
Subject: [PATCH 077/170] Created WBManifestWorkerWrapper and abandoned rootDir
 transfer back to main thread as it is too slow for big collections, ruins
 user experience.

---
 frontend/rollup.config.js                     |  2 +-
 .../src/js/component/wb-collection-content.js | 88 ++++++-------------
 .../src/js/misc/wb-manifest-worker-wrapper.js | 25 ++++++
 .../js/{misc => worker}/wb-manifest-worker.js |  0
 4 files changed, 55 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-manifest-worker-wrapper.js
 rename frontend/src/js/{misc => worker}/wb-manifest-worker.js (100%)

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index a0a4200..22355a3 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -45,7 +45,7 @@ export default {
       'node_modules/filesize/lib/filesize.js': 'dist/js/filesize.js',
       'node_modules/crypto-js/core.js': 'dist/js/crypto-js/core.js',
       'node_modules/crypto-js/md5.js': 'dist/js/crypto-js/md5.js',
-      'src/js/misc/wb-manifest-worker.js': 'dist/js/wb-manifest-worker.js',
+      'src/js/worker/wb-manifest-worker.js': 'dist/js/wb-manifest-worker.js',
       'node_modules/js-yaml/dist/js-yaml.min.js': 'dist/js/js-yaml.min.js',
       'node_modules/streamsaver/mitm.html': 'dist/mitm.html',
       'node_modules/streamsaver/sw.js': 'dist/sw.js',
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 593921d..ea419a0 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -2,9 +2,9 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import WBPagination from 'wb-pagination';
-import WBRootDirWrapper from 'wb-rootdir-wrapper';
 import makeArvadosRequest from 'make-arvados-request';
 import wbDownloadFile from 'wb-download-file';
+import WBManifestWorkerWrapper from 'wb-manifest-worker-wrapper';
 
 function unescapeName(name) {
   return name.replace(/(\\\\|\\[0-9]{3})/g,
@@ -15,14 +15,12 @@ class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
-    this.state.manifestWorker = new Worker('/js/wb-manifest-worker.js');
-    this.state.manifestWorker.onerror = (e => console.log(e));
+    this.state.manifestWorker = new WBManifestWorkerWrapper();
     this.state.loaded = 0;
     this.state.total = 0;
     this.state.mode = 'manifestDownload';
     this.state.parsedStreams = 0;
     this.state.totalStreams = 1;
-    this.state.rootDirWrapper = null;
   }
 
   getUrl(params) {
@@ -45,6 +43,7 @@ class WBCollectionContent extends Component {
       { 'onProgress': e => {
         this.setState({ 'loaded': e.loaded, 'total': e.total });
       } });
+
     prom = prom.then(xhr => {
       const streams = xhr.response.manifest_text.split('\n');
       const paths = streams.filter(s => s).map(s => {
@@ -55,38 +54,20 @@ class WBCollectionContent extends Component {
       let prom_1 = new Promise(accept => accept());
 
       prom_1 = prom_1.then(() => {
-        const prom_2 = new Promise(accept => {
-          manifestWorker.onmessage = () => accept();
-          manifestWorker.postMessage([ 'precreatePaths', paths ]);
-          this.setState({
-            'totalStreams': streams.length,
-            'parsedStreams': 0,
-            'mode': 'manifestParse'
-          })
-        })
-        return prom_2;
+        this.setState({
+          'totalStreams': streams.length,
+          'parsedStreams': 0,
+          'mode': 'manifestParse'
+        });
+        return manifestWorker.postMessage([ 'precreatePaths', paths ]);
       });
 
       for (let i = 0; i < streams.length; i++) {
+        prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'parseStream', streams[i] ]));
 
-        prom_1 = prom_1.then(() => {
-          const prom_2 = new Promise(accept => {
-            manifestWorker.onmessage = () => accept();
-            manifestWorker.postMessage([ 'parseStream', streams[i] ]);
-          });
-
-          return prom_2;
-        });
-
-        prom_1 = prom_1.then(() => {
-          const prom_2 = new Promise(accept => {
-            manifestWorker.onmessage = (e) => accept(e);
-            manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]);
-            if (i % 1000 === 0)
-              console.log(i + '/' + streams.length);
-          });
-          return prom_2;
-        });
+        prom_1 = prom_1.then(() => manifestWorker.postMessage([
+          'listDirectory', '.' + this.props.collectionPath, true
+        ]));
 
         prom_1 = prom_1.then(e => {
           this.prepareRows(e.data[1]);
@@ -94,22 +75,9 @@ class WBCollectionContent extends Component {
         });
       }
 
-      prom_1 = prom_1.then(() => {
-        const prom_2 = new Promise(accept => {
-          manifestWorker.onmessage = e => accept(e);
-          manifestWorker.postMessage([ 'getData' ]);
-        });
-        return prom_2;
-      });
-
-      prom_1 = prom_1.then(e => {
-        this.state.rootDirWrapper = new WBRootDirWrapper(e.data[1], e.data[2]);
-        this.setState({
+      prom_1 = prom_1.then(e =>  this.setState({
           'mode': 'browsingReady'
-        });
-        this.prepareRows(this.state.rootDirWrapper.listDirectory('.' +
-          this.props.collectionPath));
-      });
+      }));
 
       return prom_1;
     });
@@ -118,17 +86,17 @@ class WBCollectionContent extends Component {
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
 
-    const { rootDirWrapper, mode } = this.state;
+    const { manifestWorker, mode } = this.state;
     const { collectionPath } = this.props;
 
     if (mode === 'browsingReady') {
-      const listing = rootDirWrapper.listDirectory('.' + collectionPath);
-      this.prepareRows(listing);
+      let prom = manifestWorker.postMessage([ 'listDirectory', '.' + collectionPath, true ]);
+      prom = prom.then(e => this.prepareRows(e.data[1]));
     }
   }
 
   prepareRows(listing) {
-    let { rootDirWrapper, mode } = this.state;
+    let { manifestWorker, mode } = this.state;
     let { collectionPath, page, itemsPerPage, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
@@ -151,14 +119,16 @@ class WBCollectionContent extends Component {
           ( (mode === 'browsingReady') ? (
             <div>
               <button class="btn btn-outline-primary mx-1" title="Download"
-                onclick={ () => {
-                  const file = rootDirWrapper.getFile('.' + collectionPath + '/' + item[1]);
-                  const blob = new Blob([
-                    JSON.stringify([ arvHost, arvToken, item[1], file ])
-                  ]);
-                  const blocksBlobUrl = URL.createObjectURL(blob);
-                  window.open('/download/' + encodeURIComponent(blocksBlobUrl), '_blank');
-                } }><i class="fas fa-download"></i></button>
+                onclick={ () => manifestWorker.postMessage([ 'getFile',
+                    '.' + collectionPath + '/' + item[1] ]).then(e => {
+                      const file = e.data[1];
+                      const blob = new Blob([
+                        JSON.stringify([ arvHost, arvToken, item[1], file ])
+                      ]);
+                      const blocksBlobUrl = URL.createObjectURL(blob);
+                      window.open('/download/' + encodeURIComponent(blocksBlobUrl), '_blank');
+
+                    }) }><i class="fas fa-download"></i></button>
 
               <button class="btn btn-outline-primary mx-1" title="View"
                 onclick={ () => {
diff --git a/frontend/src/js/misc/wb-manifest-worker-wrapper.js b/frontend/src/js/misc/wb-manifest-worker-wrapper.js
new file mode 100644
index 0000000..c165fd1
--- /dev/null
+++ b/frontend/src/js/misc/wb-manifest-worker-wrapper.js
@@ -0,0 +1,25 @@
+class WBManifestWorkerWrapper {
+  constructor() {
+    this.worker = new Worker('/js/wb-manifest-worker.js');
+    this.worker.onmessage = e => this.onMessage(e);
+    this.worker.onerror = e => console.log(e);
+    this.queue = [];
+  }
+
+  onMessage(e) {
+    if (this.queue.length === 0)
+      throw Error('Unexpected message from worker');
+    const accept = this.queue.splice(0, 1)[0];
+    accept(e);
+  }
+
+  postMessage(m) {
+    const prom = new Promise(accept => {
+      this.queue.push(accept);
+      this.worker.postMessage(m);
+    });
+    return prom;
+  }
+}
+
+export default WBManifestWorkerWrapper;
diff --git a/frontend/src/js/misc/wb-manifest-worker.js b/frontend/src/js/worker/wb-manifest-worker.js
similarity index 100%
rename from frontend/src/js/misc/wb-manifest-worker.js
rename to frontend/src/js/worker/wb-manifest-worker.js

From 4d929fe25155489f070cb2cb94f75d0e85a6c4dd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 15:07:01 +0100
Subject: [PATCH 078/170] File download works again.

---
 .../src/js/component/wb-collection-content.js | 10 ++-
 .../src/js/misc/wb-manifest-worker-wrapper.js | 11 ++-
 frontend/src/js/worker/wb-manifest-worker.js  | 77 +++++++++++++++----
 3 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index ea419a0..05c3caa 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -75,9 +75,13 @@ class WBCollectionContent extends Component {
         });
       }
 
-      prom_1 = prom_1.then(e =>  this.setState({
-          'mode': 'browsingReady'
-      }));
+      prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'listDirectory',
+        '.' + this.props.collectionPath, true ]));
+
+      prom_1 = prom_1.then(e => {
+        this.state.mode = 'browsingReady';
+        this.prepareRows(e.data[1]);
+      });
 
       return prom_1;
     });
diff --git a/frontend/src/js/misc/wb-manifest-worker-wrapper.js b/frontend/src/js/misc/wb-manifest-worker-wrapper.js
index c165fd1..891ad55 100644
--- a/frontend/src/js/misc/wb-manifest-worker-wrapper.js
+++ b/frontend/src/js/misc/wb-manifest-worker-wrapper.js
@@ -9,13 +9,16 @@ class WBManifestWorkerWrapper {
   onMessage(e) {
     if (this.queue.length === 0)
       throw Error('Unexpected message from worker');
-    const accept = this.queue.splice(0, 1)[0];
-    accept(e);
+    const [msgType, accept, reject] = this.queue.splice(0, 1)[0];
+    if (e.data[0] === msgType + 'Result')
+      accept(e);
+    else
+      reject(e);
   }
 
   postMessage(m) {
-    const prom = new Promise(accept => {
-      this.queue.push(accept);
+    const prom = new Promise((accept, reject) => {
+      this.queue.push([ m[0], accept, reject ]);
       this.worker.postMessage(m);
     });
     return prom;
diff --git a/frontend/src/js/worker/wb-manifest-worker.js b/frontend/src/js/worker/wb-manifest-worker.js
index 65ba1bd..d9138ce 100644
--- a/frontend/src/js/worker/wb-manifest-worker.js
+++ b/frontend/src/js/worker/wb-manifest-worker.js
@@ -4,23 +4,28 @@ const streams = [];
 
 onmessage = function(e) {
   switch (e.data[0]) {
-  case 'precreatePaths':
-    precreatePaths(e.data[1]);
-    postMessage([ 'precreatePathsResult' ]);
-    break;
-  case 'parseStream':
-    parseStream(e.data[1]);
-    postMessage([ 'parseStreamResult' ]);
-    break;
-  case 'listDirectory': {
-    const lst = listDirectory(rootDir, e.data[1], e.data[2]);
-    postMessage([ 'listDirectoryResult', lst ])
-    break; }
-  case 'getData': {
-    postMessage([ 'getDataResult', rootDir, streams ]);
-  break; }
-  default:
-    throw Error('Unknown verb: ' + e.data[0]);
+    case 'precreatePaths':
+      precreatePaths(e.data[1]);
+      postMessage([ 'precreatePathsResult' ]);
+      break;
+    case 'parseStream':
+      parseStream(e.data[1]);
+      postMessage([ 'parseStreamResult' ]);
+      break;
+    case 'listDirectory': {
+      const lst = listDirectory(rootDir, e.data[1], e.data[2]);
+      postMessage([ 'listDirectoryResult', lst ])
+      break; }
+    case 'getData':
+      postMessage([ 'getDataResult', rootDir, streams ]);
+      break;
+    case 'getFile':
+      postMessage([ 'getFileResult', getFile(rootDir, streams, e.data[1]) ]);
+      break;
+    default: {
+      const err = Error('Unknown verb: ' + e.data[0]);
+      postMessage([ 'error', err.message ]);
+      throw err; }
   }
 }
 
@@ -141,3 +146,41 @@ function listDirectory(rootDir, path, lenient=false) {
   res = res.concat(files.map(k => [ 'f', k, dir[k][1] ]));
   return res;
 }
+
+function getFile(rootDir, streams, path) {
+  if (typeof(path) === 'string')
+    path = path.split('/');
+
+  if (path.length < 2)
+    throw Error('Invalid file path');
+
+  const name = path[path.length - 1];
+
+  const dir = findDir(rootDir, path.slice(0, path.length - 1));
+
+  if (!(name in dir))
+    throw Error('File not found');
+
+  if (!(dir[name] instanceof Array))
+    throw Error('Path points to a directory not a file');
+
+  let file = dir[name];
+  file = [ file[0].map(seg => {
+    const stm = streams[seg[0]];
+    const used = stm.map(loc => !( loc[2] <= seg[1] || loc[1] >= seg[1] + seg[2] ) );
+    const start = used.indexOf(true);
+    const end = used.lastIndexOf(true) + 1;
+    if (start === -1)
+      return [];
+    const res = [];
+    for (let i = start; i < end; i++) {
+      const loc = stm[i];
+      res.push([ loc[0], Math.max(0, seg[1] - loc[1]),
+        Math.min(loc[2] - loc[1], seg[1] + seg[2] - loc[1]) ]);
+    }
+    return res;
+  }), file[1] ];
+  file[0] = file[0].reduce((a, b) => a.concat(b));
+
+  return file;
+}

From dfd737197699c0260c952421f9f975b0bb3df3fe Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 15:24:03 +0100
Subject: [PATCH 079/170] Deprecated some manifest related modules.

---
 frontend/src/js/{misc => deprecated}/wb-arvados-collection.js  | 0
 frontend/src/js/{misc => deprecated}/wb-collection-manifest.js | 0
 frontend/src/js/{misc => deprecated}/wb-manifest-reader.js     | 0
 frontend/src/js/{misc => deprecated}/wb-rootdir-wrapper.js     | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/js/{misc => deprecated}/wb-arvados-collection.js (100%)
 rename frontend/src/js/{misc => deprecated}/wb-collection-manifest.js (100%)
 rename frontend/src/js/{misc => deprecated}/wb-manifest-reader.js (100%)
 rename frontend/src/js/{misc => deprecated}/wb-rootdir-wrapper.js (100%)

diff --git a/frontend/src/js/misc/wb-arvados-collection.js b/frontend/src/js/deprecated/wb-arvados-collection.js
similarity index 100%
rename from frontend/src/js/misc/wb-arvados-collection.js
rename to frontend/src/js/deprecated/wb-arvados-collection.js
diff --git a/frontend/src/js/misc/wb-collection-manifest.js b/frontend/src/js/deprecated/wb-collection-manifest.js
similarity index 100%
rename from frontend/src/js/misc/wb-collection-manifest.js
rename to frontend/src/js/deprecated/wb-collection-manifest.js
diff --git a/frontend/src/js/misc/wb-manifest-reader.js b/frontend/src/js/deprecated/wb-manifest-reader.js
similarity index 100%
rename from frontend/src/js/misc/wb-manifest-reader.js
rename to frontend/src/js/deprecated/wb-manifest-reader.js
diff --git a/frontend/src/js/misc/wb-rootdir-wrapper.js b/frontend/src/js/deprecated/wb-rootdir-wrapper.js
similarity index 100%
rename from frontend/src/js/misc/wb-rootdir-wrapper.js
rename to frontend/src/js/deprecated/wb-rootdir-wrapper.js

From db8247446f4a6cb9e72254e56f20787f4b2343d0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 17:45:49 +0100
Subject: [PATCH 080/170] Implemented WBBrowseDialogCollectionContent.

---
 .../wb-browse-dialog-collection-content.js    | 108 +++++++++++++++++-
 .../wb-browse-dialog-collection-list.js       |   2 +-
 frontend/src/js/dialog/wb-browse-dialog.js    |  26 +++--
 3 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
index b58ac2d..2c757f4 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
@@ -1,11 +1,115 @@
 import { h, Component } from 'preact';
+import WBManifestWorkerWrapper from 'wb-manifest-worker-wrapper';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+
+function unescapeName(name) {
+  return name.replace(/(\\\\|\\[0-9]{3})/g,
+    (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
+}
 
 class WBBrowseDialogCollectionContent extends Component {
-  render() {
+  constructor(...args) {
+    super(...args);
+    this.state.manifestWorker = new WBManifestWorkerWrapper();
+    this.state.mode = 'manifestDownload';
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    const { app, collectionUuid } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const { manifestWorker } = this.state;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + collectionUuid);
+
+    let streams;
+
+    prom = prom.then(xhr => {
+      streams = xhr.response.manifest_text.split('\n');
+      const paths = streams.filter(s => s).map(s => {
+        const n = s.indexOf(' ');
+        return unescapeName(s.substr(0, n));
+      });
+
+      return manifestWorker.postMessage([ 'precreatePaths', paths ]);
+    });
+
+    prom = prom.then(() => {
+      this.setState({ 'mode': 'manifestParse' });
+      let prom_1 = new Promise(accept => accept());
+      for (let i = 0; i < streams.length; i++) {
+        prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'parseStream', streams[i] ]));
+        prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]));
+        prom_1 = prom_1.then(e => this.prepareRows(e.data[1]));
+      }
+      return prom_1;
+    });
+
+    prom = prom.then(() => manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]));
+    prom = prom.then(e => {
+      this.state.mode = 'browsingReady';
+      this.prepareRows(e.data[1])
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    if (this.state.mode !== 'browsingReady')
+      return;
+    let prom = this.state.manifestWorker.postMessage([
+      'listDirectory', '.' + this.props.collectionPath, true
+    ]);
+    prom = prom.then(e => this.prepareRows(e.data[1]));
+  }
+
+  prepareRows(listing) {
+    const { makeSelectionCell, collectionPath, navigate,
+      page, itemsPerPage, collectionUuid, textSearch } = this.props;
+    const textLower = textSearch.toLowerCase();
+    listing = listing.filter(it => (it[1].toLowerCase().indexOf(textLower) !== -1));
+    const numPages = Math.ceil(listing.length / itemsPerPage);
+    const rows = listing.slice(page * itemsPerPage,
+      (page + 1) * itemsPerPage).map(it => [
+      makeSelectionCell(collectionUuid + '/' + collectionPath + '/' + it[1]),
+      it[0] === 'd' ? (
+        <a href="#" onclick={ e => {
+          e.preventDefault();
+          navigate({ 'collectionPath': collectionPath + '/' + it[1],
+            'bottomPage': 0 });
+        } }>{ it[1] }</a>
+      ) : it[1],
+      it[0] === 'f' ? filesize(it[2]) : ''
+    ]);
+    this.setState({ rows, numPages });
+  }
+
+  render({ page, navigate }, { rows, mode, numPages }) {
     return (
-      <div>WBBrowseDialogCollectionContent</div>
+      <div>
+        { mode === 'browsingReady' ? (
+          null
+        ) : [
+          <div>{ mode === 'manifestParse' ? 'Parsing manifest...' : 'Downloading manifest...' }</div>,
+          <div class="progress my-2">
+            <div class={ 'progress-bar progress-bar-striped progress-bar-animated' +
+              (mode === 'manifestParse' ? ' bg-success': '') } role="progressbar"
+              aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+          </div>
+        ] }
+        <WBTable headerClasses={ ['col-sm-1', 'col-sm-4', 'col-sm-4'] }
+          columns={ [ '', 'Name', 'Size' ] } rows={ rows } />
+        <WBPagination numPages={ numPages } activePage={ page }
+          onPageChanged={ i => navigate({ 'bottomPage': i }) } />
+      </div>
     );
   }
 }
 
+WBBrowseDialogCollectionContent.defaultProps = {
+  'itemsPerPage': 20
+};
+
 export default WBBrowseDialogCollectionContent;
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index 41d26e5..3f934a2 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -25,7 +25,7 @@ class WBBrowseDialogCollectionList extends Component {
       ] : []).concat([
       (
         <a href="#" onclick={ e => { e.preventDefault();
-          navigate('/browse-dialog/content/' + it.uuid); } }>{ it.name }</a>
+          navigate('/browse-dialog/content/' + it.uuid + '////'); } }>{ it.name }</a>
       ),
       it.uuid
     ]));
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index feddf26..5c91caa 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -13,7 +13,7 @@ import { createHashHistory } from 'history';
 // /browse-dialog/browse/( owner-uuid )/( project-page )/( text-search )
 // /browse-dialog/users//( users-page )/( text-search )
 // /browse-dialog/shared-with-me//( project-page )/( collection-page )/( text-search )
-// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )
+// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )/( collection-path )
 //
 // general pattern therefore:
 // /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
@@ -40,6 +40,8 @@ class WBBrowseDialog extends Component {
     this.state.mode = 'browse';
     this.state.topPage = 0;
     this.state.bottomPage = 0;
+    this.state.collectionPath = '';
+    this.state.textSearch = '';
   }
 
   navigateBack() {
@@ -56,7 +58,8 @@ class WBBrowseDialog extends Component {
         'uuid' in url ? url.uuid : this.state.uuid,
         'topPage' in url ? url.topPage : this.state.topPage,
         'bottomPage' in url ? url.bottomPage : this.state.bottomPage,
-        'textSearch' in url ? url.textSearch : this.state.textSearch
+        'textSearch' in url ? url.textSearch : this.state.textSearch,
+        encodeURIComponent('collectionPath' in url ? url.collectionPath : this.state.collectionPath)
       ].join('/');
     }
 
@@ -64,12 +67,13 @@ class WBBrowseDialog extends Component {
 
     if (useHistory)
       this.state.history.push(this.state.currentUrl);
-    let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
+    let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch, collectionPath ] = url.split('/');
     topPage = parseInt(topPage, 10) || 0;
     bottomPage = parseInt(bottomPage, 10) || 0;
+    collectionPath = decodeURIComponent(collectionPath);
     this.setState({
       'currentUrl': url,
-      mode, uuid, topPage, bottomPage, textSearch
+      mode, uuid, topPage, bottomPage, textSearch, collectionPath
     });
   }
 
@@ -130,7 +134,11 @@ class WBBrowseDialog extends Component {
     );
   }
 
-  render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
+  render({ app, id, selectMany, selectWhat },
+    { history, currentUrl, mode, uuid,
+      topPage, bottomPage, textSearch,
+      collectionPath }) {
+
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
@@ -197,8 +205,12 @@ class WBBrowseDialog extends Component {
               { (mode === 'content') ? (
                 <div>
                   <h5>Content</h5>
-                  <WBBrowseDialogCollectionContent app={ app } parent={ this }
-                    selectMany={ selectMany } selectWhat={ selectWhat }/>
+                  <WBBrowseDialogCollectionContent app={ app }
+                    collectionUuid={ uuid } collectionPath={ collectionPath }
+                    page={ bottomPage } selectWhat={ selectWhat }
+                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) }
+                    navigate={ url => this.navigate(url) }
+                    textSearch={ textSearch } />
                 </div>
 
               ) : (selectWhat !== 'owner' && mode === 'browse') ? (

From 6dae814746a88dfc6f055d836d7343bc30489e87 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 18 Feb 2020 22:34:20 +0100
Subject: [PATCH 081/170] Added keephelper.

---
 backend/keephelper/__main__.py | 77 ++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 backend/keephelper/__main__.py

diff --git a/backend/keephelper/__main__.py b/backend/keephelper/__main__.py
new file mode 100644
index 0000000..4906ba6
--- /dev/null
+++ b/backend/keephelper/__main__.py
@@ -0,0 +1,77 @@
+import aiohttp
+from aiohttp import web
+from argparse import ArgumentParser
+import ssl
+import json
+
+
+def options_fetch_blocks(request):
+    return web.Response(headers={ 'Access-Control-Allow-Origin': '*' })
+
+
+async def post_fetch_blocks(request):
+    body = await request.read()
+    body = json.loads(body)
+    proxy_host = body['keepProxyHost']
+    arv_token = body['arvToken']
+    segments = body['segments']
+    use_ssl = body['useSsl'] \
+        if 'useSsl' in body \
+        else True
+    protocol = 'https://' \
+        if use_ssl \
+        else 'http://'
+    name = body['name'] \
+        if 'name' in body \
+        else None
+    content_type = body['contentType'] \
+        if 'contentType' in body \
+        else 'application/octet-stream'
+    res = web.StreamResponse()
+    res.content_type = content_type
+    if name:
+        res.headers['Content-Disposition'] = 'attachment; filename*=UTF-8\'\'"' + name + '"'
+    else:
+        res.headers['Content-Disposition'] = 'inline'
+    res.headers['Access-Control-Allow-Origin'] = '*'
+    await res.prepare(request)
+    async with aiohttp.ClientSession(connector=aiohttp.TCPConnector(verify_ssl=False)) as session:
+        for seg in segments:
+            url = protocol + proxy_host + '/' + seg[0]
+            async with session.get(url, headers={ 'Authorization': 'OAuth2 ' + arv_token }) as response:
+                block = await response.read()
+                block = block[seg[1]:seg[2]]
+                await res.write(block)
+    return res
+
+
+def get_index(request):
+    return web.Response(text='Use /fetch-blocks to stream files from Keep')
+
+
+def create_parser():
+    parser = ArgumentParser()
+    parser.add_argument('--port', type=int, default=50080)
+    parser.add_argument('--ssl-cert', type=str, default=None)
+    return parser
+
+
+def main():
+    parser = create_parser()
+    args = parser.parse_args()
+    app = web.Application()
+    app.add_routes([
+        web.get('/', get_index),
+        web.post('/fetch-blocks', post_fetch_blocks),
+        web.options('/fetch-blocks', options_fetch_blocks)
+    ])
+    if args.ssl_cert:
+        ssl_context = ssl.SSLContext(ssl.PROTOCOL_SSLv23)
+        ssl_context.load_cert_chain(args.ssl_cert)
+    else:
+        ssl_context = None
+    web.run_app(app, port=args.port, ssl_context=ssl_context)
+
+
+if __name__ == '__main__':
+    main()

From 22972466a55536e629d974256dcab11a1ce63306 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 19 Feb 2020 09:20:57 +0100
Subject: [PATCH 082/170] Switched to rollup-plugin-uglify, made a deployment.

---
 .gitignore                                |  1 +
 dockerfiles/wba/files/wba/dist/index.html |  6 ------
 frontend/package.json                     |  3 ++-
 frontend/rollup.config.js                 | 10 ++++------
 4 files changed, 7 insertions(+), 13 deletions(-)
 delete mode 100644 dockerfiles/wba/files/wba/dist/index.html

diff --git a/.gitignore b/.gitignore
index 9d1b2c1..ba101d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ package-lock.json
 /backend/server.pem
 /testdata/
 /backend/supervisord/supervisord.log
+/dockerfiles/wba/files/wba/dist
diff --git a/dockerfiles/wba/files/wba/dist/index.html b/dockerfiles/wba/files/wba/dist/index.html
deleted file mode 100644
index 6b31c83..0000000
--- a/dockerfiles/wba/files/wba/dist/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <body>
-    Hello, world!
-  </body>
-</html>
diff --git a/frontend/package.json b/frontend/package.json
index a8b1222..2db295a 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,13 +12,14 @@
     "popper.js": "^1.16.1",
     "preact": "^8.2.9",
     "preact-router": "^2.6.1",
-    "rollup": "^0.62.0",
+    "rollup": "^0.66.6",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-copy": "^0.2.3",
     "rollup-plugin-includepaths": "^0.2.3",
     "rollup-plugin-license": "^0.7.0",
     "rollup-plugin-minify": "^1.0.3",
     "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-uglify": "^6.0.4",
     "streamsaver": "^2.0.3",
     "watch": "^1.0.2",
     "web-streams-polyfill": "^2.0.6"
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 22355a3..87169dd 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -1,12 +1,12 @@
 import resolve from 'rollup-plugin-node-resolve'
 import buble from 'rollup-plugin-buble';
-import minify from 'rollup-plugin-minify';
 import copy from 'rollup-plugin-copy';
 import includePaths from 'rollup-plugin-includepaths';
 import license from 'rollup-plugin-license';
+import { uglify } from "rollup-plugin-uglify";
 
 export default {
-  //dest: 'dist/app.min.js',
+  // dest: 'dist/js/app.js',
   input: 'src/js/index.js',
   output: {
     file: 'dist/js/app.min.js',
@@ -57,9 +57,7 @@ export default {
     resolve({}),
     license({
       banner: 'Copyright (C) F. Hoffmann-La Roche AG, 2020.\nAuthor: stanislaw.adaszewski@roche.com\nAll Rights Reserved.',
-    }) /* ,
-    minify({
-      iife: 'dist/app.min.js'
-    }) */
+    }),
+    // uglify()
   ]
 }

From 68a09d9f943f00a78cb401554017ea56244a3aba Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 18:13:14 +0100
Subject: [PATCH 083/170] Completed infrmation displayed by WBProcessListing.

---
 frontend/src/js/component/wb-name-and-uuid.js | 13 ++-
 .../src/js/component/wb-process-listing.js    | 96 +++++++++++++++----
 2 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 5927681..732df7f 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -5,7 +5,7 @@ import arvadosObjectName from 'arvados-object-name';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBNameAndUuid extends Component {
-  componentDidMount() {
+  fetchData() {
     const { uuid, app, lookup } = this.props;
 
     if (!uuid)
@@ -75,6 +75,17 @@ class WBNameAndUuid extends Component {
     }
   }
 
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.uuid !== nextProps.uuid) {
+      this.props = nextProps;
+      this.fetchData();
+    }
+  }
+
   render({ uuid, onLinkClicked }, { error, item }) {
     if (!uuid)
       return (
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 34483ec..6eb4530 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -4,6 +4,9 @@ import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBCheckboxes from 'wb-checkboxes';
+import wbFormatDate from 'wb-format-date';
+import wbFetchObjects from 'wb-fetch-objects';
+import WBNameAndUuid from 'wb-name-and-uuid';
 
 class WBProcessListing extends Component {
 
@@ -21,22 +24,28 @@ class WBProcessListing extends Component {
     this.fetchItems();
   }
 
-  prepareRows(items) {
+  prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { renderRenameLink, renderDeleteButton } = this.props;
-    return items.map(item => [
+    return requests.map(item => [
       (<div>
         <div>
-          <a href="#"
-            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>
+          <a href={ '/process/' + item['uuid'] }>
             { item['name'] }
           </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['state'],
-      item['owner_uuid'],
-      item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
-      item['output_uuid'],
+      ( <div>
+          <div>{ item['state'] } /</div>
+          <div>{ item.container_uuid ?
+            item.container_uuid in containerLookup ?
+            containerLookup[item.container_uuid].state :
+            "Container Not Found" :
+            <i>{ String(item.container_uuid) }</i> }</div>
+        </div> ),
+      ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
+      wbFormatDate(item['created_at']),
+      ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
       (<div>
         { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
@@ -44,21 +53,68 @@ class WBProcessListing extends Component {
   }
 
   fetchItems() {
-    let { arvHost, arvToken } = this.props.appState;
-    let i = this.props.activePage;
-    let filters = [
-      [ 'state', 'in', this.state.requestStates.filter((_, idx) => this.state.reqStateMask[idx]) ]
+    const { arvHost, arvToken } = this.props.appState;
+    const { requestStates, reqStateMask } = this.state;
+    const { activePage, itemsPerPage, ownerUuid,
+      requestingContainerUuid } = this.props;
+
+    const filters = [
+      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]
     ];
-    if (this.props.ownerUuid)
-      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    //if (requestingContainerUuid)
+      //filters.push([ 'requesting_container_uuid', '=', requestingContainerUuid ]);
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
-      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
-      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
-    prom = prom.then(xhr =>
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * activePage));
+
+    let requests;
+    let numPages;
+    prom = prom.then(xhr => {
+      requests = xhr.response.items;
+      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);
+      /* container_uuids = requests.map(r => r.container_uuid);
+      container_uuids = container_uuids.filter(uuid => uuid);
+      const filters_1 = [
+        [ 'uuid', 'in', container_uuids ]
+      ];
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/containers?filters=' +
+        encodeURIComponent(JSON.stringify(filters_1)));*/
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.container_uuid).filter(uuid => uuid));
+    });
+
+    let containerLookup;
+    prom = prom.then(lookup => {
+      containerLookup = lookup;
+      // const containers = xhr.response.items;
+      // containers.map(c => (containerLookup[c.uuid] = c));
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.owner_uuid).filter(uuid => uuid));
+    });
+
+    let ownerLookup;
+    prom = prom.then(lookup => {
+      ownerLookup = lookup;
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.output_uuid).filter(uuid => uuid));
+    });
+
+    let outputLookup;
+    prom = prom.then(lookup => (outputLookup = lookup));
+
+    // prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+    //  '/arvados/v1/'))
+
+    prom = prom.then(() =>
       this.setState({
-        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
-        'rows': this.prepareRows(xhr.response['items'])
+        'numPages': numPages,
+        'rows': this.prepareRows(requests, containerLookup,
+          ownerLookup, outputLookup)
       }));
   }
 
@@ -81,7 +137,7 @@ class WBProcessListing extends Component {
           cssClass="float-left mx-2 my-2" title="Container State: "
           onChange={ () => this.fetchItems() } />
 
-        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At (UTC)', 'Output', 'Actions' ] }
+        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }

From e3c9e701777b22aec72750ec31bf4f971704cfb6 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 18:20:53 +0100
Subject: [PATCH 084/170] WBProcessListing now displays only top level requests
 by default.

---
 frontend/src/js/component/wb-process-listing.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 6eb4530..68e3af7 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -59,12 +59,13 @@ class WBProcessListing extends Component {
       requestingContainerUuid } = this.props;
 
     const filters = [
-      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]
+      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ],
+      [ 'requesting_container_uuid', '=', requestingContainerUuid ]
     ];
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
     //if (requestingContainerUuid)
-      //filters.push([ 'requesting_container_uuid', '=', requestingContainerUuid ]);
+      //filters.push();
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
@@ -150,7 +151,8 @@ class WBProcessListing extends Component {
 
 WBProcessListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'requestingContainerUuid': null
 };
 
 export default WBProcessListing;

From 867b58ef7b6d6e69506fad94719fd7a8334349cf Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 18:43:04 +0100
Subject: [PATCH 085/170] Added error/warning display in WBProcessListing.

---
 .../src/js/component/wb-process-listing.js    | 64 +++++++++++--------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 68e3af7..02daf13 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -26,30 +26,43 @@ class WBProcessListing extends Component {
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { renderRenameLink, renderDeleteButton } = this.props;
-    return requests.map(item => [
-      (<div>
-        <div>
-          <a href={ '/process/' + item['uuid'] }>
-            { item['name'] }
-          </a> { renderRenameLink(item, () => this.fetchItems()) }
-        </div>
-        <div>{ item['uuid'] }</div>
-      </div>),
-      ( <div>
-          <div>{ item['state'] } /</div>
-          <div>{ item.container_uuid ?
-            item.container_uuid in containerLookup ?
-            containerLookup[item.container_uuid].state :
-            "Container Not Found" :
-            <i>{ String(item.container_uuid) }</i> }</div>
-        </div> ),
-      ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
-      wbFormatDate(item['created_at']),
-      ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
-      (<div>
-        { renderDeleteButton(item, () => this.fetchItems()) }
-      </div>)
-    ]);
+    return requests.map(item => {
+      const container = item.container_uuid in containerLookup ?
+        containerLookup[item.container_uuid] : null;
+      const runtimeStatus = container ? container.runtime_status : null;
+      const error = runtimeStatus ? runtimeStatus.error : null;
+      const warning = runtimeStatus ? runtimeStatus.warning : null;
+
+      return ( [
+        (<div>
+          <div>
+            <a href={ '/process/' + item['uuid'] }>
+              { item['name'] }
+            </a> { renderRenameLink(item, () => this.fetchItems()) }
+          </div>
+          <div>{ item['uuid'] }</div>
+        </div>),
+        ( <div>
+            { item['state'] } /
+            { item.container_uuid ?
+              container ?
+              container.state :
+              "Container Not Found" :
+              <i>{ String(item.container_uuid) }</i> }
+            { !(error || warning) && container && container.state === 'Complete' ? " / Success" : null }
+            { error ? [" / ", <a href={ '/container/' + container.uuid }
+              title={ error }>E</a> ] : null }
+            { warning ? [ " / ", <a href={ '/container/' + container.uuid }
+              title={ warning }>W</a> ] : null }
+          </div> ),
+        ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
+        wbFormatDate(item['created_at']),
+        ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
+        (<div>
+          { renderDeleteButton(item, () => this.fetchItems()) }
+        </div>)
+      ] );
+    });
   }
 
   fetchItems() {
@@ -59,9 +72,10 @@ class WBProcessListing extends Component {
       requestingContainerUuid } = this.props;
 
     const filters = [
-      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ],
       [ 'requesting_container_uuid', '=', requestingContainerUuid ]
     ];
+    if (!reqStateMask.reduce((a, b) => a & b))
+      filters.push([ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]);
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
     //if (requestingContainerUuid)

From 938a73692db0a9c87754c097d57d14549b52247b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 18:50:59 +0100
Subject: [PATCH 086/170] Removed filtering by container state.

---
 frontend/src/js/component/wb-process-listing.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 02daf13..7d68cac 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -15,9 +15,9 @@ class WBProcessListing extends Component {
     this.state.rows = [];
     this.state.numPages = 0;
     this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
-    this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
+    // this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
     this.state.reqStateMask = [ true, true, true ];
-    this.state.contStateMask = [ true, true, true, true, true ];
+    // this.state.contStateMask = [ true, true, true, true, true ];
   }
 
   componentDidMount() {
@@ -43,12 +43,12 @@ class WBProcessListing extends Component {
           <div>{ item['uuid'] }</div>
         </div>),
         ( <div>
-            { item['state'] } /
+            { item['state'] }
             { item.container_uuid ?
               container ?
-              container.state :
-              "Container Not Found" :
-              <i>{ String(item.container_uuid) }</i> }
+              [ " / ", container.state ] :
+              [ " / ", <i>Container Not Found</i> ] :
+              null }
             { !(error || warning) && container && container.state === 'Complete' ? " / Success" : null }
             { error ? [" / ", <a href={ '/container/' + container.uuid }
               title={ error }>E</a> ] : null }
@@ -148,9 +148,6 @@ class WBProcessListing extends Component {
         <WBCheckboxes items={ requestStates } checked={ reqStateMask }
           cssClass="float-left mx-2 my-2" title="Request State: "
           onChange={ () => this.fetchItems() } />
-        <WBCheckboxes items={ containerStates } checked={ contStateMask }
-          cssClass="float-left mx-2 my-2" title="Container State: "
-          onChange={ () => this.fetchItems() } />
 
         <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
           rows={ rows } />

From b1d2721acfdd878ee59c06a7c972eff6562781d8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 19:18:41 +0100
Subject: [PATCH 087/170] Added listing of children to WBProcessView.

---
 .../src/js/component/wb-process-listing.js    |  9 +++--
 frontend/src/js/page/wb-app.js                |  2 +-
 frontend/src/js/page/wb-process-view.js       | 36 +++++++++++++++++--
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 7d68cac..4dd69b0 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -139,7 +139,7 @@ class WBProcessListing extends Component {
     this.fetchItems();
   }
 
-  render({ appState, ownerUuid, activePage, onPageChanged },
+  render({ appState, ownerUuid, activePage, onPageChanged, getPageUrl },
     { rows, numPages, requestStates, containerStates,
       reqStateMask, contStateMask }) {
 
@@ -154,7 +154,8 @@ class WBProcessListing extends Component {
 
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => onPageChanged(i) } />
+          getPageUrl={ getPageUrl }
+          onPageChanged={ onPageChanged } />
       </div>
     );
   }
@@ -163,7 +164,9 @@ class WBProcessListing extends Component {
 WBProcessListing.defaultProps = {
   'itemsPerPage': 100,
   'ownerUuid': null,
-  'requestingContainerUuid': null
+  'requestingContainerUuid': null,
+  'renderRenameLink': () => {},
+  'renderDeleteButton': () => {}
 };
 
 export default WBProcessListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index a086525..7c9abfc 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -79,7 +79,7 @@ class WBApp extends Component {
         <WBBrowse path="/shared-with-me/:activePage?"
           app={ this } mode="shared-with-me" />
 
-        <WBProcessView path="/process/:uuid" app={ this } />
+        <WBProcessView path="/process/:uuid/:page?" app={ this } />
 
         <WBContainerView path="/container/:uuid" app={ this } />
 
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 254635f..03485e9 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -8,6 +8,7 @@ import urlForObject from 'url-for-object';
 import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerRequestFields from 'wb-container-request-fields';
+import WBProcessListing from 'wb-process-listing';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -15,7 +16,13 @@ class WBProcessView extends Component {
     this.state.objectUrls = [];
   }
 
-  componentDidMount() {
+  getUrl(props) {
+    const page = ('page' in props ? props.page : this.props.page);
+    return ('/process/' + this.props.uuid +
+      (page ? '/' + page : ''));
+  }
+
+  fetchData() {
     let { arvHost, arvToken } = this.props.app.state;
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests/' + this.props.uuid);
@@ -74,11 +81,25 @@ class WBProcessView extends Component {
       let objDict = {};
       objects.map(o => (objDict[o['uuid']] = o));
       let urls = objects.map(o => urlForObject(o));
-      this.setState({ 'objectUrls': urls });
+      this.setState({
+        'objectUrls': urls,
+        'request': req,
+        'container': cont
+      });
     });
   }
 
-  render({ app, uuid }, { objectUrls }) {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.setState({ 'objectUrls': [], 'request': null, 'container': null });
+    this.fetchData();
+  }
+
+  render({ app, uuid, page }, { objectUrls, container }) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -95,6 +116,15 @@ class WBProcessView extends Component {
         <h2>Container Request Fields</h2>
         <WBContainerRequestFields app={ app } uuid={ uuid } />
 
+        { container ? ([
+          <h2>Children</h2>,
+          <WBProcessListing appState={ app.state }
+            requestingContainerUuid={ container.uuid }
+            itemsPerPage="20"
+            activePage={ Number(page || 0) }
+            getPageUrl={ page => this.getUrl({ page }) } />
+        ]) : null }
+
         <div>
           <a href="/browse">Click here</a>
         </div>

From 17fb685941286331f1433ccf1cedf6224f673d2b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 21 Feb 2020 09:23:40 +0100
Subject: [PATCH 088/170] Made WBProcessListing more responsive.

---
 .../src/js/component/wb-process-listing.js    | 83 +++----------------
 frontend/src/js/component/wb-process-state.js | 47 +++++++++++
 frontend/src/js/misc/wb-fetch-objects.js      |  5 ++
 frontend/src/js/page/wb-browse.js             |  3 +-
 frontend/src/js/page/wb-process-view.js       | 21 +++--
 5 files changed, 80 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/js/component/wb-process-state.js

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 4dd69b0..fb95c94 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -7,6 +7,11 @@ import WBCheckboxes from 'wb-checkboxes';
 import wbFormatDate from 'wb-format-date';
 import wbFetchObjects from 'wb-fetch-objects';
 import WBNameAndUuid from 'wb-name-and-uuid';
+import WBProcessState from 'wb-process-state';
+
+function maskRows(rows) {
+  return rows.map(r => r.map(c => '-'));
+}
 
 class WBProcessListing extends Component {
 
@@ -15,9 +20,7 @@ class WBProcessListing extends Component {
     this.state.rows = [];
     this.state.numPages = 0;
     this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
-    // this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
     this.state.reqStateMask = [ true, true, true ];
-    // this.state.contStateMask = [ true, true, true, true, true ];
   }
 
   componentDidMount() {
@@ -25,14 +28,8 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
-    const { renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton } = this.props;
     return requests.map(item => {
-      const container = item.container_uuid in containerLookup ?
-        containerLookup[item.container_uuid] : null;
-      const runtimeStatus = container ? container.runtime_status : null;
-      const error = runtimeStatus ? runtimeStatus.error : null;
-      const warning = runtimeStatus ? runtimeStatus.warning : null;
-
       return ( [
         (<div>
           <div>
@@ -42,22 +39,10 @@ class WBProcessListing extends Component {
           </div>
           <div>{ item['uuid'] }</div>
         </div>),
-        ( <div>
-            { item['state'] }
-            { item.container_uuid ?
-              container ?
-              [ " / ", container.state ] :
-              [ " / ", <i>Container Not Found</i> ] :
-              null }
-            { !(error || warning) && container && container.state === 'Complete' ? " / Success" : null }
-            { error ? [" / ", <a href={ '/container/' + container.uuid }
-              title={ error }>E</a> ] : null }
-            { warning ? [ " / ", <a href={ '/container/' + container.uuid }
-              title={ warning }>W</a> ] : null }
-          </div> ),
-        ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
+        ( <WBProcessState app={ app } process={ item } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } /> ),
         wbFormatDate(item['created_at']),
-        ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } /> ),
         (<div>
           { renderDeleteButton(item, () => this.fetchItems()) }
         </div>)
@@ -78,64 +63,22 @@ class WBProcessListing extends Component {
       filters.push([ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]);
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
-    //if (requestingContainerUuid)
-      //filters.push();
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + itemsPerPage +
       '&offset=' + (itemsPerPage * activePage));
 
-    let requests;
-    let numPages;
-    prom = prom.then(xhr => {
-      requests = xhr.response.items;
-      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);
-      /* container_uuids = requests.map(r => r.container_uuid);
-      container_uuids = container_uuids.filter(uuid => uuid);
-      const filters_1 = [
-        [ 'uuid', 'in', container_uuids ]
-      ];
-      return makeArvadosRequest(arvHost, arvToken,
-        '/arvados/v1/containers?filters=' +
-        encodeURIComponent(JSON.stringify(filters_1)));*/
-      return wbFetchObjects(arvHost, arvToken,
-        requests.map(r => r.container_uuid).filter(uuid => uuid));
-    });
-
-    let containerLookup;
-    prom = prom.then(lookup => {
-      containerLookup = lookup;
-      // const containers = xhr.response.items;
-      // containers.map(c => (containerLookup[c.uuid] = c));
-      return wbFetchObjects(arvHost, arvToken,
-        requests.map(r => r.owner_uuid).filter(uuid => uuid));
-    });
-
-    let ownerLookup;
-    prom = prom.then(lookup => {
-      ownerLookup = lookup;
-      return wbFetchObjects(arvHost, arvToken,
-        requests.map(r => r.output_uuid).filter(uuid => uuid));
-    });
-
-    let outputLookup;
-    prom = prom.then(lookup => (outputLookup = lookup));
-
-    // prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
-    //  '/arvados/v1/'))
-
-    prom = prom.then(() =>
+    prom = prom.then(xhr =>
       this.setState({
-        'numPages': numPages,
-        'rows': this.prepareRows(requests, containerLookup,
-          ownerLookup, outputLookup)
+        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+        'rows': this.prepareRows(xhr.response.items)
       }));
   }
 
   componentWillReceiveProps(nextProps, nextState) {
-    // this.setState({ 'rows': [] }); // .rows = [];
     this.props = nextProps;
+    this.setState({ 'rows': maskRows(this.state.rows) });
     this.fetchItems();
   }
 
diff --git a/frontend/src/js/component/wb-process-state.js b/frontend/src/js/component/wb-process-state.js
new file mode 100644
index 0000000..27387e0
--- /dev/null
+++ b/frontend/src/js/component/wb-process-state.js
@@ -0,0 +1,47 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBProcessState extends Component {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchData();
+  }
+
+  fetchData() {
+    const { app, process } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    if (!process.container_uuid)
+      return;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/containers/' + process.container_uuid);
+    prom = prom.then(xhr => this.setState({ 'container': xhr.response }));
+    prom = prom.catch(() => this.setState({ 'apiError': 'Failed to fetch container' }));
+  }
+
+  render({ process }, { container, apiError }) {
+    const runtimeStatus = container ? container.runtime_status : null;
+    const error = runtimeStatus ? runtimeStatus.error : null;
+    const warning = runtimeStatus ? runtimeStatus.warning : null;
+
+    return (
+      <div>
+        { process.state }
+        { apiError ? <i>{ [ ' / ', apiError ] }</i> : null }
+        { container ? [ " / ", container.state ] : null }
+        { !(error || warning) && container && container.state === 'Complete' ? " / Success" : null }
+        { error ? [" / ", <a href={ '/container/' + container.uuid }
+          title={ error }>E</a> ] : null }
+        { warning ? [ " / ", <a href={ '/container/' + container.uuid }
+          title={ warning }>W</a> ] : null }
+      </div>
+    );
+  }
+}
+
+export default WBProcessState;
diff --git a/frontend/src/js/misc/wb-fetch-objects.js b/frontend/src/js/misc/wb-fetch-objects.js
index bcc47e2..64e5a5a 100644
--- a/frontend/src/js/misc/wb-fetch-objects.js
+++ b/frontend/src/js/misc/wb-fetch-objects.js
@@ -7,6 +7,10 @@ function wbFetchObjects(arvHost, arvToken, uuids) {
   uuids = {};
   Object.keys(unique).map(u => {
     let typeName = arvadosTypeName(u);
+    if (!typeName) {
+      console.log('Unknown type name for UUID: ' + u);
+      return;
+    }
     if (!(typeName in uuids))
       uuids[typeName] = [];
     uuids[typeName].push(u);
@@ -23,6 +27,7 @@ function wbFetchObjects(arvHost, arvToken, uuids) {
       encodeURIComponent(JSON.stringify(filters))));
     prom = prom.then(xhr => xhr.response.items.map(it => (
       lookup[it.uuid] = it)));
+    prom = prom.catch(xhr => console.log(xhr.responseURL + ': ' + xhr.statusText));
   }
 
   prom = prom.then(() => lookup);
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index b4ea93d..91490f2 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -121,7 +121,8 @@ class WBBrowse extends Component {
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
           ) : (objTypeTab === 'process') ? (
-            <WBProcessListing appState={ app.state }
+            <WBProcessListing app={ app }
+              appState={ app.state }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 03485e9..8a1a1b2 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -9,6 +9,7 @@ import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerRequestFields from 'wb-container-request-fields';
 import WBProcessListing from 'wb-process-listing';
+import wbFetchObjects from 'wb-fetch-objects';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -55,9 +56,12 @@ class WBProcessView extends Component {
       uuids.map(u => (dict[u] = true));
       return Object.keys(dict);
     });
-    prom = prom.then(uuids => {
+    prom = prom.then(uuids => wbFetchObjects(arvHost, arvToken, uuids));
+    /* prom = prom.then(() => {
       // let uuids = detectUuids([ req, cont ]);
-      let objectTypes = uuids.map(u => arvadosTypeName(u.split('-')[1]) + 's');
+      let objectTypes = uuids.map(u => arvadosTypeName(u) + 's');
+      //objectTypes = objectTypes.filter(ot => ot);
+      //objectTypes = objectTypes.map(ot => ot + 's');
       let objQueries = {};
       objectTypes.map(t => (objQueries[t] = []));
       uuids.map((u, idx) => (objQueries[objectTypes[idx]].push(u)));
@@ -76,11 +80,11 @@ class WBProcessView extends Component {
       }
       prom_1 = prom_1.then(() => objects);
       return prom_1;
-    });
+    }); */
     prom = prom.then(objects => {
-      let objDict = {};
-      objects.map(o => (objDict[o['uuid']] = o));
-      let urls = objects.map(o => urlForObject(o));
+      // let objDict = {};
+      // objects.map(o => (objDict[o['uuid']] = o));
+      let urls = Object.values(objects).map(o => urlForObject(o));
       this.setState({
         'objectUrls': urls,
         'request': req,
@@ -95,7 +99,7 @@ class WBProcessView extends Component {
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.setState({ 'objectUrls': [], 'request': null, 'container': null });
+    // this.setState({ 'objectUrls': [], 'request': null, 'container': null });
     this.fetchData();
   }
 
@@ -118,7 +122,8 @@ class WBProcessView extends Component {
 
         { container ? ([
           <h2>Children</h2>,
-          <WBProcessListing appState={ app.state }
+          <WBProcessListing app={ app }
+            appState={ app.state }
             requestingContainerUuid={ container.uuid }
             itemsPerPage="20"
             activePage={ Number(page || 0) }

From ba62733c7d7526a3eefb86e09477777ba9d1eb03 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 21 Feb 2020 09:42:38 +0100
Subject: [PATCH 089/170] Added ability hold off refresh in WBProcessListing.

---
 .../src/js/component/wb-process-listing.js    |  5 ++++-
 frontend/src/js/page/wb-process-view.js       | 19 +++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index fb95c94..f1e3033 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -54,7 +54,10 @@ class WBProcessListing extends Component {
     const { arvHost, arvToken } = this.props.appState;
     const { requestStates, reqStateMask } = this.state;
     const { activePage, itemsPerPage, ownerUuid,
-      requestingContainerUuid } = this.props;
+      requestingContainerUuid, waitForNextProps } = this.props;
+
+    if (waitForNextProps)
+      return;
 
     const filters = [
       [ 'requesting_container_uuid', '=', requestingContainerUuid ]
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 8a1a1b2..7c635b8 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -99,7 +99,7 @@ class WBProcessView extends Component {
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    // this.setState({ 'objectUrls': [], 'request': null, 'container': null });
+    this.setState({ 'objectUrls': [], 'request': null, 'container': null });
     this.fetchData();
   }
 
@@ -120,15 +120,14 @@ class WBProcessView extends Component {
         <h2>Container Request Fields</h2>
         <WBContainerRequestFields app={ app } uuid={ uuid } />
 
-        { container ? ([
-          <h2>Children</h2>,
-          <WBProcessListing app={ app }
-            appState={ app.state }
-            requestingContainerUuid={ container.uuid }
-            itemsPerPage="20"
-            activePage={ Number(page || 0) }
-            getPageUrl={ page => this.getUrl({ page }) } />
-        ]) : null }
+        <h2>Children</h2>
+        <WBProcessListing app={ app }
+          appState={ app.state }
+          requestingContainerUuid={ container ? container.uuid : null }
+          waitForNextProps={ !container }
+          itemsPerPage="20"
+          activePage={ Number(page || 0) }
+          getPageUrl={ page => this.getUrl({ page }) } />
 
         <div>
           <a href="/browse">Click here</a>

From 2a7358a2d609ef6f43560ef435bcd60b753acc98 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 21 Feb 2020 13:46:34 +0100
Subject: [PATCH 090/170] Added WBImageViewerPage using Papaya.

---
 frontend/package.json                         |   1 +
 frontend/rollup.config.js                     |   2 +
 frontend/src/html/index.html                  |   1 +
 .../src/js/component/wb-collection-content.js |  14 +++
 frontend/src/js/page/wb-app.js                |   3 +
 frontend/src/js/page/wb-image-viewer-page.js  | 103 ++++++++++++++++++
 6 files changed, 124 insertions(+)
 create mode 100644 frontend/src/js/page/wb-image-viewer-page.js

diff --git a/frontend/package.json b/frontend/package.json
index 2db295a..1d7576b 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "js-uuid": "0.0.6",
     "js-yaml": "^3.13.1",
     "linkstate": "^1.1.1",
+    "papaya-viewer": "^1.0.1449",
     "popper.js": "^1.16.1",
     "preact": "^8.2.9",
     "preact-router": "^2.6.1",
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 87169dd..3711d93 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -51,6 +51,8 @@ export default {
       'node_modules/streamsaver/sw.js': 'dist/sw.js',
       'src/js/thirdparty/StreamSaver.js': 'dist/js/StreamSaver.js',
       'node_modules/web-streams-polyfill/dist/ponyfill.js': 'dist/js/web-streams-polyfill/ponyfill.js',
+      'node_modules/papaya-viewer/release/current/standard/papaya.js': 'dist/js/papaya.js',
+      'node_modules/papaya-viewer/release/current/standard/papaya.css': 'dist/css/papaya.css',
       verbose: true
     }),
     buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 5a01586..e7e1be6 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -4,6 +4,7 @@
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/index.css" />
+    <link rel="stylesheet" type="text/css" href="/css/papaya.css" />
     <script language="javascript" src="/js/web-streams-polyfill/ponyfill.js"></script>
     <script language="javascript">
       window.process = { 'env': { 'NODE_ENV': 'production' } };
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 05c3caa..3194e9e 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -138,6 +138,20 @@ class WBCollectionContent extends Component {
                 onclick={ () => {
                   alert('Not implemented.')
                 } }><i class="far fa-eye"></i></button>
+
+              { item[1].toLowerCase().endsWith('.nii') ? (
+                <button class="btn btn-outline-primary mx-1" title="View Image"
+                  onclick={ () => manifestWorker.postMessage([ 'getFile',
+                      '.' + collectionPath + '/' + item[1] ]).then(e => {
+                      const file = e.data[1];
+                      const blob = new Blob([
+                        JSON.stringify({ 'name': item[1], 'file': file })
+                      ]);
+                      const blocksBlobUrl = URL.createObjectURL(blob);
+                      window.open('/image-viewer/' + encodeURIComponent(blocksBlobUrl), '_blank');
+
+                    }) }><i class="far fa-eye"></i></button>
+              ) : null }
             </div>
           ) : null)
         ]
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 7c9abfc..a59e65d 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -12,6 +12,7 @@ import WBUsersPage from 'wb-users-page';
 import WBWorkflowView from 'wb-workflow-view';
 import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
 import WBDownloadPage from 'wb-download-page';
+import WBImageViewerPage from 'wb-image-viewer-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -94,6 +95,8 @@ class WBApp extends Component {
         <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid" app={ this } />
 
         <WBDownloadPage path="/download/:blocksBlobUrl/:inline?" app={ this } />
+
+        <WBImageViewerPage path="/image-viewer/:blobUrl" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-image-viewer-page.js b/frontend/src/js/page/wb-image-viewer-page.js
new file mode 100644
index 0000000..1343630
--- /dev/null
+++ b/frontend/src/js/page/wb-image-viewer-page.js
@@ -0,0 +1,103 @@
+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 (true) { // 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;

From a7b27ab8ff083d57359e3300998c4a8b4a88cbf3 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 2 Mar 2020 14:19:45 +0100
Subject: [PATCH 091/170] Added selectability to WBBrowse.

---
 frontend/src/css/index.css                    |  4 +++
 .../src/js/component/wb-collection-listing.js |  7 +++--
 .../src/js/component/wb-process-listing.js    |  7 +++--
 .../src/js/component/wb-project-listing.js    | 11 +++++--
 .../src/js/component/wb-workflow-listing.js   |  7 +++--
 frontend/src/js/page/wb-browse.js             | 29 ++++++++++++++++---
 6 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index f0cac02..f46dceb 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -5,3 +5,7 @@ pre.word-wrap {
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+
+.w-1 {
+  width: 1px !important;
+}
diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 576186a..f0eaa27 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -21,9 +21,11 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    let { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href={ urlForObject(item) }>
@@ -137,7 +139,8 @@ class WBCollectionListing extends Component {
           { error }
         </div>) : null }
 
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+          headerClasses={ [ 'w-1'] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index f1e3033..7c1f3df 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -28,9 +28,11 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
-    const { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return requests.map(item => {
       return ( [
+        renderSelectionCell(item),
         (<div>
           <div>
             <a href={ '/process/' + item['uuid'] }>
@@ -95,7 +97,8 @@ class WBProcessListing extends Component {
           cssClass="float-left mx-2 my-2" title="Request State: "
           onChange={ () => this.fetchItems() } />
 
-        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 51795f8..ed07d0c 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -17,9 +17,11 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href="#"
@@ -70,7 +72,8 @@ class WBProjectListing extends Component {
   render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
@@ -84,7 +87,9 @@ class WBProjectListing extends Component {
 WBProjectListing.defaultProps = {
   'itemsPerPage': 100,
   'ownerUuid': null,
-  'renderRenameLink': () => null
+  'renderRenameLink': () => null,
+  'renderDeleteButton': () => null,
+  'renderSelectionCell': () => null
 };
 
 export default WBProjectListing;
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 7933b5f..dbb7fcd 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -21,8 +21,10 @@ class WBWorkflowListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    const { renderRenameLink, renderDeleteButton } = this.props;
+    const { renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return items.map(item => [
+      renderSelectionCell(item),
       (
         <div>
           <div>
@@ -78,7 +80,8 @@ class WBWorkflowListing extends Component {
   render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 91490f2..bf205de 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -19,6 +19,7 @@ class WBBrowse extends Component {
     this.deleteDialogRef = createRef();
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
+    this.state.selected = {};
   }
 
   getUrl(params) {
@@ -65,6 +66,22 @@ class WBBrowse extends Component {
     );
   }
 
+  renderSelectionCell(item) {
+    const { selected } = this.state;
+    const { uuid } = item;
+    return (
+      <div>
+        <input type="checkbox" checked={ (uuid in selected) }
+          onChange={ e => {
+          if (e.target.value === 'on')
+            selected[uuid] = true;
+          else
+            delete selected[uuid];
+        } } /> { '\u00A0' }
+      </div>
+    );
+  }
+
   render({ mode, ownerUuid, activePage, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
@@ -99,7 +116,8 @@ class WBBrowse extends Component {
           activePage={ Number(activePage || 0) }
           getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+          renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
@@ -118,7 +136,8 @@ class WBBrowse extends Component {
               activePage={ Number(collectionPage || 0) }
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'process') ? (
             <WBProcessListing app={ app }
@@ -128,7 +147,8 @@ class WBBrowse extends Component {
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
@@ -137,7 +157,8 @@ class WBBrowse extends Component {
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : null
         }

From a1c966a332e5f41e81b16a2541acdb8350637ca4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 2 Mar 2020 15:44:14 +0100
Subject: [PATCH 092/170] Added ability to move objects.

---
 frontend/src/js/misc/wb-move-object.js | 13 ++++++
 frontend/src/js/page/wb-browse.js      | 56 ++++++++++++++++++++++----
 2 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-move-object.js

diff --git a/frontend/src/js/misc/wb-move-object.js b/frontend/src/js/misc/wb-move-object.js
new file mode 100644
index 0000000..a5b08fe
--- /dev/null
+++ b/frontend/src/js/misc/wb-move-object.js
@@ -0,0 +1,13 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function wbMoveObject(arvHost, arvToken, uuid, newOwnerUuid) {
+  const typeName = arvadosTypeName(uuid);
+  return makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + typeName + 's/' +
+    uuid, { 'method': 'PUT', 'data': JSON.stringify({
+      'owner_uuid': newOwnerUuid
+    }) });
+}
+
+export default wbMoveObject;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index bf205de..d96ca11 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -11,6 +11,28 @@ import WBWorkflowListing from 'wb-workflow-listing';
 import WBRenameDialog from 'wb-rename-dialog';
 import WBDeleteDialog from 'wb-delete-dialog';
 import WBNewProjectDialog from 'wb-new-project-dialog';
+import wbMoveObject from 'wb-move-object';
+
+class WBBrowseProjectTabs extends Component {
+  render({ ownerUuid, selected, newProjectDialogRef, projectListingRef,
+    moveHere, copyHere }) {
+
+    return (
+      <WBTabs tabs={ [
+        { 'name': 'Projects', 'isActive': true },
+        ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
+          'onClick': () => newProjectDialogRef.current.show(ownerUuid,
+            () => projectListingRef.current.fetchItems() ) } : null,
+        ( ownerUuid && Object.keys(selected).length > 0 ) ?
+          { 'name': ( <span><i class="fas fa-compress-arrows-alt text-warning"></i> Move Here</span> ),
+            'onClick': moveHere } : null,
+        ( ownerUuid && Object.keys(selected).length > 0 ) ?
+          { 'name': ( <span><i class="fas fa-file-import text-warning"></i> Copy Here</span> ),
+            'onClick': copyHere } : null
+      ] } />
+    );
+  }
+}
 
 class WBBrowse extends Component {
   constructor(...args) {
@@ -19,6 +41,7 @@ class WBBrowse extends Component {
     this.deleteDialogRef = createRef();
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
+    this.projectTabsRef = createRef();
     this.state.selected = {};
   }
 
@@ -73,17 +96,36 @@ class WBBrowse extends Component {
       <div>
         <input type="checkbox" checked={ (uuid in selected) }
           onChange={ e => {
-          if (e.target.value === 'on')
+          if (e.target.checked)
             selected[uuid] = true;
           else
             delete selected[uuid];
+          this.projectTabsRef.current.setState({});
         } } /> { '\u00A0' }
       </div>
     );
   }
 
+  moveHere() {
+    const { ownerUuid, app } = this.props;
+    const { selected } = this.state;
+    const { arvHost, arvToken } = app.state;
+    let prom = new Promise(accept => accept());
+    const uuids = Object.keys(selected);
+    for (let i = 0; i < uuids.length; i++) {
+      prom = prom.then(() => wbMoveObject(arvHost, arvToken, uuids[i], ownerUuid));
+      prom = prom.then(() => ( delete selected[uuids[i]] ));
+      prom = prom.catch(() => {});
+    }
+    prom = prom.then(() => this.setState({}));
+  }
+
+  copyHere() {
+
+  }
+
   render({ mode, ownerUuid, activePage, app,
-    objTypeTab, collectionPage, processPage, workflowPage }) {
+    objTypeTab, collectionPage, processPage, workflowPage }, { selected }) {
 
     return (
       <div>
@@ -99,12 +141,10 @@ class WBBrowse extends Component {
 
         <WBArvadosCrumbs mode={ mode } uuid={ ownerUuid } app={ app } />
 
-        <WBTabs tabs={ [
-          { 'name': 'Projects', 'isActive': true },
-          ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
-            'onClick': () => this.newProjectDialogRef.current.show(ownerUuid,
-              () => this.projectListingRef.current.fetchItems() ) } : null
-        ] } />
+        <WBBrowseProjectTabs ref={ this.projectTabsRef } ownerUuid={ ownerUuid }
+          selected={ selected } newProjectDialogRef={ this.newProjectDialogRef }
+          projectListingRef={ this.projectListingRef } moveHere={ () => this.moveHere() }
+          copyHere={ () => this.copyHere() } />
 
         <WBProjectListing ref={ this.projectListingRef }
           app={ app }

From 7ff593a834027e1c0bab3c97816b76e832c3b5f6 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 2 Mar 2020 16:07:18 +0100
Subject: [PATCH 093/170] Added ability to copy collections.

---
 frontend/src/js/misc/wb-copy-collection.js | 25 ++++++++++++++++++++++
 frontend/src/js/page/wb-browse.js          | 15 +++++++++----
 2 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-copy-collection.js

diff --git a/frontend/src/js/misc/wb-copy-collection.js b/frontend/src/js/misc/wb-copy-collection.js
new file mode 100644
index 0000000..df53f13
--- /dev/null
+++ b/frontend/src/js/misc/wb-copy-collection.js
@@ -0,0 +1,25 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function wbCopyCollection(arvHost, arvToken, uuid, newOwnerUuid) {
+  const typeName = arvadosTypeName(uuid);
+  if (typeName !== 'collection')
+    throw Error('Specified UUID does not refer to a collection');
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/collections/' + uuid);
+  prom = prom.then(xhr => {
+    const { name, description, properties, portable_data_hash,
+      manifest_text } = xhr.response;
+    const dup = { name: name + ' (Copied at ' + new Date().toISOString() + ')',
+      description, properties, portable_data_hash, manifest_text,
+      owner_uuid: newOwnerUuid };
+    return makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections', {
+        'method': 'POST',
+        'data': JSON.stringify(dup)
+      });
+  });
+  return prom;
+}
+
+export default wbCopyCollection;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index d96ca11..8be72c7 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -12,6 +12,8 @@ import WBRenameDialog from 'wb-rename-dialog';
 import WBDeleteDialog from 'wb-delete-dialog';
 import WBNewProjectDialog from 'wb-new-project-dialog';
 import wbMoveObject from 'wb-move-object';
+import wbCopyCollection from 'wb-copy-collection';
+import arvadosTypeName from 'arvados-type-name';
 
 class WBBrowseProjectTabs extends Component {
   render({ ownerUuid, selected, newProjectDialogRef, projectListingRef,
@@ -26,7 +28,8 @@ class WBBrowseProjectTabs extends Component {
         ( ownerUuid && Object.keys(selected).length > 0 ) ?
           { 'name': ( <span><i class="fas fa-compress-arrows-alt text-warning"></i> Move Here</span> ),
             'onClick': moveHere } : null,
-        ( ownerUuid && Object.keys(selected).length > 0 ) ?
+        ( ownerUuid && (uuids => uuids.length > 0 && uuids.length ===
+          uuids.map(arvadosTypeName).filter(a => (a === 'collection')).length )(Object.keys(selected)) ) ?
           { 'name': ( <span><i class="fas fa-file-import text-warning"></i> Copy Here</span> ),
             'onClick': copyHere } : null
       ] } />
@@ -106,22 +109,26 @@ class WBBrowse extends Component {
     );
   }
 
-  moveHere() {
+  moveOrCopyOp(op) {
     const { ownerUuid, app } = this.props;
     const { selected } = this.state;
     const { arvHost, arvToken } = app.state;
     let prom = new Promise(accept => accept());
     const uuids = Object.keys(selected);
     for (let i = 0; i < uuids.length; i++) {
-      prom = prom.then(() => wbMoveObject(arvHost, arvToken, uuids[i], ownerUuid));
+      prom = prom.then(() => op(arvHost, arvToken, uuids[i], ownerUuid));
       prom = prom.then(() => ( delete selected[uuids[i]] ));
       prom = prom.catch(() => {});
     }
     prom = prom.then(() => this.setState({}));
   }
 
-  copyHere() {
+  moveHere() {
+    this.moveOrCopyOp(wbMoveObject);
+  }
 
+  copyHere() {
+    this.moveOrCopyOp(wbCopyCollection);
   }
 
   render({ mode, ownerUuid, activePage, app,

From cc15888b363c3e2676b00a85b2ba2f3f19acd9bd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 2 Mar 2020 17:32:11 +0100
Subject: [PATCH 094/170] Started implementing sharing management.

---
 .../src/js/component/wb-project-listing.js    |  3 +-
 frontend/src/js/dialog/wb-browse-dialog.js    |  9 ++-
 frontend/src/js/page/wb-app.js                |  3 +
 frontend/src/js/page/wb-browse.js             | 12 +++-
 frontend/src/js/page/wb-sharing-page.js       | 71 +++++++++++++++++++
 frontend/src/js/widget/wb-select.js           | 19 +++++
 6 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/js/page/wb-sharing-page.js
 create mode 100644 frontend/src/js/widget/wb-select.js

diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index ed07d0c..896522b 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -18,7 +18,7 @@ class WBProjectListing extends Component {
 
   prepareRows(items) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell } = this.props;
+      renderSelectionCell, renderSharingButton } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -39,6 +39,7 @@ class WBProjectListing extends Component {
           <i class="fas fa-toolbox"></i>
         </button>
         { renderDeleteButton(item, () => this.fetchItems()) }
+        { renderSharingButton(item) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 5c91caa..fa9954d 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -42,6 +42,7 @@ class WBBrowseDialog extends Component {
     this.state.bottomPage = 0;
     this.state.collectionPath = '';
     this.state.textSearch = '';
+    this.state.id = ('id' in this.props) ? this.props.id : uuid.v4();
   }
 
   navigateBack() {
@@ -134,10 +135,14 @@ class WBBrowseDialog extends Component {
     );
   }
 
-  render({ app, id, selectMany, selectWhat },
+  show(callback) {
+    $('#' + this.state.id).modal();
+  }
+
+  render({ app, selectMany, selectWhat },
     { history, currentUrl, mode, uuid,
       topPage, bottomPage, textSearch,
-      collectionPath }) {
+      collectionPath, id }) {
 
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index a59e65d..8e125fc 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -13,6 +13,7 @@ import WBWorkflowView from 'wb-workflow-view';
 import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
 import WBDownloadPage from 'wb-download-page';
 import WBImageViewerPage from 'wb-image-viewer-page';
+import WBSharingPage from 'wb-sharing-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -97,6 +98,8 @@ class WBApp extends Component {
         <WBDownloadPage path="/download/:blocksBlobUrl/:inline?" app={ this } />
 
         <WBImageViewerPage path="/image-viewer/:blobUrl" app={ this } />
+
+        <WBSharingPage path="/sharing/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 8be72c7..aad22eb 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -109,6 +109,15 @@ class WBBrowse extends Component {
     );
   }
 
+  renderSharingButton(item) {
+    return (
+      <a class="btn btn-outline-success m-1" title="Share"
+        href={ '/sharing/' + item.uuid }>
+        <i class="fas fa-share-alt"></i>
+      </a>
+    );
+  }
+
   moveOrCopyOp(op) {
     const { ownerUuid, app } = this.props;
     const { selected } = this.state;
@@ -164,7 +173,8 @@ class WBBrowse extends Component {
           getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
           renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-          renderSelectionCell={ it => this.renderSelectionCell(it) } />
+          renderSelectionCell={ it => this.renderSelectionCell(it) }
+          renderSharingButton={ it => this.renderSharingButton(it) } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js
new file mode 100644
index 0000000..5904529
--- /dev/null
+++ b/frontend/src/js/page/wb-sharing-page.js
@@ -0,0 +1,71 @@
+import { h, Component, createRef } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBSelect from 'wb-select';
+import WBTable from 'wb-table';
+import WBBrowseDialog from 'wb-browse-dialog';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBSharingPage extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.browseDialogRef = createRef();
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  fetchData() {
+    const { app, uuid } = this.props;
+    const { arvHost, arvToken } = app.state;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/permissions/' + encodeURIComponent(uuid));
+    prom = prom.then(xhr => this.setState({
+      'rows': this.prepareRows(xhr.response.items)
+    }));
+  }
+
+  deletePermission(uuid) {
+    throw Error('Not implemented');
+  }
+
+  prepareRows(items) {
+    const { app } = this.props;
+    return items.map(it => [
+      ( <WBNameAndUuid app={ app } uuid={ it.tail_uuid } /> ),
+      ( <WBSelect value={ it.name } options={ ['can_read', 'can_write', 'can_manage'] } /> ),
+      ( <button class="btn btn-outline-danger m-1" title="Delete"
+        onclick={ () => this.deletePermission(it.uuid) }>
+        <i class="fas fa-trash"></i>
+      </button> )
+    ]);
+  }
+
+  render({ app, uuid }, { rows }) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the sharing management page for { uuid }
+        </div>
+
+        <WBTable columns={ [ 'Name', 'Permission', '' ] }
+          headerClasses={ [ null, null, 'w-1' ] }
+          rows={ rows } />
+
+        <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />
+
+        <button class="btn btn-primary"
+          onclick={ () => this.browseDialogRef.current.show() }>Add</button>
+      </div>
+    );
+  }
+}
+
+export default WBSharingPage;
diff --git a/frontend/src/js/widget/wb-select.js b/frontend/src/js/widget/wb-select.js
new file mode 100644
index 0000000..2ce89b1
--- /dev/null
+++ b/frontend/src/js/widget/wb-select.js
@@ -0,0 +1,19 @@
+import { h, Component } from 'preact';
+
+class WBSelect extends Component {
+  render({ value, options, onChange }) {
+    return (
+      <select class="form-control" onchange={ onChange }>
+        { options.map(o => {
+          const name = (typeof(o) === 'string') ? o : o.name;
+          const id = (typeof(o) === 'object') ? o.id : name;
+          return (
+            <option selected={ (value === id) } value={ id }>{ name }</option>
+          );
+        }) }
+      </select>
+    );
+  }
+}
+
+export default WBSelect;

From 7f64a4670053d81270acad41b570c5686f95c4a4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 10:34:31 +0100
Subject: [PATCH 095/170] Added WBPickObjectDialog.

---
 .../src/js/dialog/wb-pick-object-dialog.js    | 111 ++++++++++++++++++
 frontend/src/js/page/wb-sharing-page.js       |  36 ++++--
 2 files changed, 136 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-pick-object-dialog.js

diff --git a/frontend/src/js/dialog/wb-pick-object-dialog.js b/frontend/src/js/dialog/wb-pick-object-dialog.js
new file mode 100644
index 0000000..07d3b5c
--- /dev/null
+++ b/frontend/src/js/dialog/wb-pick-object-dialog.js
@@ -0,0 +1,111 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosObjectName from 'arvados-object-name';
+
+class WBPickObjectDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.title = 'WBPickObjectDialog';
+    this.state.rows = [];
+    this.state.textSearch = null;
+    this.dialogRef = createRef();
+  }
+
+  show(title, objectType, accept, filters=[]) {
+    this.setState({ title, objectType, page: 0, rows: [], accept, filters, textSearch: null });
+    this.dialogRef.current.show();
+    this.fetchData();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  fetchData() {
+    const { app, itemsPerPage } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const { objectType, page, textSearch } = this.state;
+    let { filters } = this.state;
+    if (textSearch)
+      filters = filters.concat([['any', 'ilike', '%' + textSearch + '%']]);
+    const order = (objectType === 'user') ?
+      ['last_name asc', 'first_name asc'] :
+      ['name asc'];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + objectType +
+      's?offset=' + (page * itemsPerPage) +
+      '&limit=' + itemsPerPage +
+      '&filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&order=' + encodeURIComponent(JSON.stringify(order))
+    );
+    prom = prom.then(xhr => this.setState({
+      numPages: Math.ceil(xhr.response.items_available / itemsPerPage),
+      rows: this.prepareRows(xhr.response.items)
+    }));
+    return prom;
+  }
+
+  prepareRows(items) {
+    const { accept } = this.state;
+    const { dialogRef } = this;
+
+    return items.map(it => [
+      (<div>
+        <div>
+          <a href="#" onclick={ () => { dialogRef.current.hide(); accept(it); } }>
+            { arvadosObjectName(it) }
+          </a>
+        </div>
+        <div>{ it.uuid }</div>
+      </div>)
+    ]);
+  }
+
+  search(textSearch) {
+    this.setState({ textSearch, page: 0});
+    this.fetchData();
+  }
+
+  render({}, { title, rows, page, numPages, textSearch }) {
+    return (
+      <WBDialog title={ title } ref={ this.dialogRef }>
+        <div>
+          <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="Search"
+              aria-label="Search" value={ textSearch }
+              onkeydown={ e => { if (e.keyCode === 13) {
+                e.preventDefault();
+                this.search(e.target.value);
+              } } }
+              onchange={ e => this.search(e.target.value) } />
+
+            <div class="input-group-append">
+              <button class="btn btn-outline-primary" type="button" onclick={ e => e.preventDefault() }>Search</button>
+            </div>
+          </div>
+
+          <WBTable columns={ [ 'Name' ] } rows={ rows } />
+
+          <WBPagination activePage={ page } numPages={ numPages } chunkSize={ 3 }
+            onPageChanged={ i => { this.setState({ page: i }); this.fetchData(); } } />
+        </div>
+
+        <div>
+          <button class="btn btn-secondary"
+            onclick={ e => { e.preventDefault(); this.hide(); } }>
+            Cancel
+          </button>
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+WBPickObjectDialog.defaultProps = {
+  itemsPerPage: 20
+};
+
+export default WBPickObjectDialog;
diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js
index 5904529..3ef7193 100644
--- a/frontend/src/js/page/wb-sharing-page.js
+++ b/frontend/src/js/page/wb-sharing-page.js
@@ -4,14 +4,14 @@ import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBSelect from 'wb-select';
 import WBTable from 'wb-table';
-import WBBrowseDialog from 'wb-browse-dialog';
+import WBPickObjectDialog from 'wb-pick-object-dialog';
 import makeArvadosRequest from 'make-arvados-request';
 
 class WBSharingPage extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
-    this.browseDialogRef = createRef();
+    this.dialogRef = createRef();
   }
 
   componentDidMount() {
@@ -44,6 +44,14 @@ class WBSharingPage extends Component {
     ]);
   }
 
+  addEntry(it) {
+    throw Error('Not implemented');
+  }
+
+  save() {
+    throw Error('Not implemented');
+  }
+
   render({ app, uuid }, { rows }) {
     return (
       <div>
@@ -51,18 +59,24 @@ class WBSharingPage extends Component {
 
         <WBArvadosCrumbs app={ app } uuid={ uuid } />
 
-        <div class="my-2">
-          This is the sharing management page for { uuid }
-        </div>
+        <div class="container-fluid">
+          <div class="my-2">
+            This is the sharing management page for { uuid }
+          </div>
 
-        <WBTable columns={ [ 'Name', 'Permission', '' ] }
-          headerClasses={ [ null, null, 'w-1' ] }
-          rows={ rows } />
+          <WBTable columns={ [ 'Name', 'Permission', '' ] }
+            headerClasses={ [ null, null, 'w-1' ] }
+            rows={ rows } />
 
-        <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />
+          <WBPickObjectDialog app={ app } ref={ this.dialogRef } />
 
-        <button class="btn btn-primary"
-          onclick={ () => this.browseDialogRef.current.show() }>Add</button>
+          <button class="btn btn-outline-secondary mr-2"
+            onclick={ () => this.dialogRef.current.show('Select User', 'user', it => this.addEntry(it)) }>Add User...</button>
+          <button class="btn btn-outline-secondary mr-2"
+            onclick={ () => this.dialogRef.current.show('Select Group', 'group', it => this.addEntry(it), [['group_class', '=', 'role']]) }>Add Group...</button>
+          <button class="btn btn-primary mr-2"
+            onclick={ () => this.save() }>Save</button>
+        </div>
       </div>
     );
   }

From 71b56cd3b5cce6cd79614bbf7787aa45e4b67869 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 11:46:00 +0100
Subject: [PATCH 096/170] Implemented sharing management.

---
 .../src/js/component/wb-collection-listing.js |   4 +-
 .../src/js/component/wb-process-listing.js    |   3 +-
 .../src/js/component/wb-workflow-listing.js   |   3 +-
 frontend/src/js/page/wb-browse.js             |   9 +-
 frontend/src/js/page/wb-sharing-page.js       | 105 ++++++++++++++++--
 5 files changed, 108 insertions(+), 16 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index f0eaa27..6e01e6a 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -22,7 +22,7 @@ class WBCollectionListing extends Component {
 
   prepareRows(items, ownerLookup) {
     let { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell } = this.props;
+      renderSelectionCell, renderSharingButton } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -59,6 +59,8 @@ class WBCollectionListing extends Component {
         </a>
 
         { renderDeleteButton(item, () => this.fetchItems()) }
+
+        { renderSharingButton(item) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 7c1f3df..3228ed1 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -29,7 +29,7 @@ class WBProcessListing extends Component {
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell } = this.props;
+      renderSelectionCell, renderSharingButton } = this.props;
     return requests.map(item => {
       return ( [
         renderSelectionCell(item),
@@ -47,6 +47,7 @@ class WBProcessListing extends Component {
         ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } /> ),
         (<div>
           { renderDeleteButton(item, () => this.fetchItems()) }
+          { renderSharingButton(item) }
         </div>)
       ] );
     });
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index dbb7fcd..4dbea55 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -22,7 +22,7 @@ class WBWorkflowListing extends Component {
 
   prepareRows(items, ownerLookup) {
     const { renderRenameLink, renderDeleteButton,
-      renderSelectionCell } = this.props;
+      renderSelectionCell, renderSharingButton } = this.props;
     return items.map(item => [
       renderSelectionCell(item),
       (
@@ -43,6 +43,7 @@ class WBWorkflowListing extends Component {
           href={ urlForObject(item, 'launch') }><i class="fas fa-running"></i></a>
         <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
         { renderDeleteButton(item, () => this.fetchItems()) }
+        { renderSharingButton(item) }
       </div>)
     ]);
   }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index aad22eb..eb83941 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -194,7 +194,8 @@ class WBBrowse extends Component {
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) } />
+              renderSelectionCell={ it => this.renderSelectionCell(it) }
+              renderSharingButton={ it => this.renderSharingButton(it) } />
 
           ) : (objTypeTab === 'process') ? (
             <WBProcessListing app={ app }
@@ -205,7 +206,8 @@ class WBBrowse extends Component {
               onPageChanged={ i => this.route({ 'processPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) } />
+              renderSelectionCell={ it => this.renderSelectionCell(it) }
+              renderSharingButton={ it => this.renderSharingButton(it) } />
 
           ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
@@ -215,7 +217,8 @@ class WBBrowse extends Component {
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) } />
+              renderSelectionCell={ it => this.renderSelectionCell(it) }
+              renderSharingButton={ it => this.renderSharingButton(it) } />
 
           ) : null
         }
diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js
index 3ef7193..4a4562d 100644
--- a/frontend/src/js/page/wb-sharing-page.js
+++ b/frontend/src/js/page/wb-sharing-page.js
@@ -22,37 +22,116 @@ class WBSharingPage extends Component {
     const { app, uuid } = this.props;
     const { arvHost, arvToken } = app.state;
     let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/permissions/' + encodeURIComponent(uuid));
+      '/arvados/v1/permissions/' + encodeURIComponent(uuid) +
+      '?limit=100000');
     prom = prom.then(xhr => this.setState({
+      'entries': xhr.response.items,
       'rows': this.prepareRows(xhr.response.items)
     }));
   }
 
-  deletePermission(uuid) {
-    throw Error('Not implemented');
+  deleteEntry(it) {
+    it._delete = true;
+    this.setState({ rows: this.prepareRows(this.state.entries) });
   }
 
   prepareRows(items) {
     const { app } = this.props;
-    return items.map(it => [
+    return items.filter(it => (!it._delete)).map(it => [
       ( <WBNameAndUuid app={ app } uuid={ it.tail_uuid } /> ),
-      ( <WBSelect value={ it.name } options={ ['can_read', 'can_write', 'can_manage'] } /> ),
+      ( <WBSelect value={ it.name }
+          options={ ['can_read', 'can_write', 'can_manage'] }
+          onChange={ e => this.modifyEntry(it, e.target.value) } /> ),
       ( <button class="btn btn-outline-danger m-1" title="Delete"
-        onclick={ () => this.deletePermission(it.uuid) }>
+        onclick={ () => this.deleteEntry(it) }>
         <i class="fas fa-trash"></i>
       </button> )
     ]);
   }
 
-  addEntry(it) {
-    throw Error('Not implemented');
+  modifyEntry(it, newPermissionName) {
+    it.name = newPermissionName;
+    it._dirty = true;
+    // this.setState({ rows: this.prepareRows(this.state.entries) });
+  }
+
+  addEntry(it, permissionName='can_read') {
+    // throw Error('Not implemented');
+    const { uuid } = this.props;
+    let { entries } = this.state;
+    if (entries.filter(e => (e.tail_uuid === it.uuid)).length > 0)
+      return; // already in the list
+    const e = {
+      //_dirty: true,
+      link_class: 'permission',
+      head_uuid: uuid,
+      tail_uuid: it.uuid,
+      name: permissionName
+    };
+    entries = entries.concat([e]);
+    this.setState({
+      entries,
+      rows: this.prepareRows(entries)
+    });
+  }
+
+  disableControls() {
+    $('input, select, button').attr('disabled', 'disabled');
+    $('a').each(function() { $(this).data('old_href', $(this).attr('href')); });
+    $('a').attr('href', null);
+  }
+
+  enableControls() {
+    $('input, select, button').attr('disabled', null);
+    $('a').each(function() { $(this).attr('href', $(this).data('old_href')); });
   }
 
   save() {
-    throw Error('Not implemented');
+    const { entries } = this.state;
+    const { arvHost, arvToken } = this.props.app.state;
+    let prom = new Promise(accept => accept());
+    this.disableControls();
+    this.setState({ working: true });
+    for (let i = 0; i < entries.length; i++) {
+      const e = entries[i];
+
+      //if (!e._dirty && !e._delete)
+        //continue;
+
+      if (!e.uuid) {
+        prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/links',
+          { 'method': 'POST',
+            'data': JSON.stringify({
+              'link_class': 'permission',
+              'head_uuid': e.head_uuid,
+              'tail_uuid': e.tail_uuid,
+              'name': e.name
+            }) }));
+
+      } else if (e._delete) {
+        prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/links/' + e.uuid,
+          { 'method': 'DELETE' }));
+
+      } else if (e._dirty) {
+        prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/links/' + e.uuid,
+          { 'method': 'PUT',
+            'data': JSON.stringify({
+              'name': e.name
+            }) }));
+      }
+      prom = prom.catch(() => {});
+    }
+    prom = prom.then(() => {
+      this.enableControls();
+      this.fetchData();
+      this.setState({ working: false });
+    });
   }
 
-  render({ app, uuid }, { rows }) {
+  render({ app, uuid }, { rows, working }) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -70,6 +149,12 @@ class WBSharingPage extends Component {
 
           <WBPickObjectDialog app={ app } ref={ this.dialogRef } />
 
+          { working ? (<div class="progress my-2">
+            <div class={ 'progress-bar progress-bar-striped progress-bar-animated' }
+              role="progressbar" aria-valuenow="100" aria-valuemin="0"
+              aria-valuemax="100" style="width: 100%"></div>
+          </div>) : null }
+
           <button class="btn btn-outline-secondary mr-2"
             onclick={ () => this.dialogRef.current.show('Select User', 'user', it => this.addEntry(it)) }>Add User...</button>
           <button class="btn btn-outline-secondary mr-2"

From 38d75278a718febb00c57726dd4cbaf6e7ad6542 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 14:39:59 +0100
Subject: [PATCH 097/170] Make collection content crumbs functional.

---
 frontend/src/js/component/wb-collection-content.js |  6 +++++-
 frontend/src/js/widget/wb-breadcrumbs.js           | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 3194e9e..aa1cda4 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -164,7 +164,11 @@ class WBCollectionContent extends Component {
 
     return (
       <div>
-        <WBBreadcrumbs items={ ('.' + collectionPath).split('/') } />
+        <WBBreadcrumbs items={ ('.' + collectionPath).split('/').map((name, index) => ({ name, index })) }
+          getItemUrl={ it => this.getUrl({
+            collectionPath: ('.' + collectionPath).split('/').slice(0, it.index + 1).join('/').substr(1),
+            page: 0
+          }) } />
 
         { (mode === 'manifestDownload') ?
           (
diff --git a/frontend/src/js/widget/wb-breadcrumbs.js b/frontend/src/js/widget/wb-breadcrumbs.js
index a1b6af5..d2887ac 100644
--- a/frontend/src/js/widget/wb-breadcrumbs.js
+++ b/frontend/src/js/widget/wb-breadcrumbs.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 class WBBreadcrumbs extends Component {
-  render({ items, onItemClicked }) {
+  render({ items, onItemClicked, getItemUrl }) {
     return (
       <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -10,8 +10,11 @@ class WBBreadcrumbs extends Component {
               (idx == items.length - 1 ? ' active' : '') }>
               {
                 (idx < items.length - 1) ? (
-                  <a href="#" onclick={ e => { e.preventDefault();
-                    onItemClicked(item); } }>{ typeof(item) === 'string' ? item : item['name'] }</a>
+                  <a href={ getItemUrl ? getItemUrl(item) : '#' }
+                    onclick={ onItemClicked ? ( e => { e.preventDefault();
+                    onItemClicked(item); } ) : null }>
+                    { typeof(item) === 'string' ? item : item['name'] }
+                  </a>
                 ) : (
                   typeof(item) === 'string' ? item : item['name']
                 )
@@ -25,7 +28,8 @@ class WBBreadcrumbs extends Component {
 }
 
 WBBreadcrumbs.defaultProps = {
-  'onItemClicked': () => {}
+  onItemClicked: null,
+  getItemUrl: null
 }
 
 export default WBBreadcrumbs;

From 3c7aa92fb0e0402dccb9fde7457a45b749182545 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 14:50:16 +0100
Subject: [PATCH 098/170] Better encoding of collectionPath in the URL.

---
 frontend/src/js/component/wb-collection-content.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index aa1cda4..7c0d301 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -11,6 +11,10 @@ function unescapeName(name) {
     (_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
 }
 
+function encodeURIComponentIncludingDots(s) {
+  return encodeURIComponent(s).replace('.', '%2E');
+}
+
 class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
@@ -26,7 +30,7 @@ class WBCollectionContent extends Component {
   getUrl(params) {
     let res = '/collection-browse/' +
       ('uuid' in params ? params.uuid : this.props.uuid) + '/' +
-      encodeURIComponent('collectionPath' in params ? params.collectionPath : this.props.collectionPath) + '/' +
+      encodeURIComponentIncludingDots('collectionPath' in params ? params.collectionPath : this.props.collectionPath) + '/' +
       ('page' in params ? params.page : this.props.page);
     return res;
   }

From cf3405b41856ee0f678f94a325e4d793f1d8460a Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 17:02:02 +0100
Subject: [PATCH 099/170] Added navbar text search support in WBBrowse and
 WBUsersPage.

---
 .../src/js/component/wb-collection-listing.js |  5 ++-
 frontend/src/js/component/wb-inline-search.js |  9 ++---
 frontend/src/js/component/wb-navbar-common.js |  8 ++---
 .../src/js/component/wb-process-listing.js    |  5 ++-
 .../src/js/component/wb-project-listing.js    |  7 ++--
 frontend/src/js/component/wb-user-listing.js  |  7 +++-
 .../src/js/component/wb-workflow-listing.js   |  4 ++-
 frontend/src/js/page/wb-app.js                |  6 ++--
 frontend/src/js/page/wb-browse.js             | 33 ++++++++++++-------
 frontend/src/js/page/wb-users-page.js         | 18 +++++++---
 10 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 6e01e6a..0ad0c29 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -68,13 +68,16 @@ class WBCollectionListing extends Component {
   fetchItems() {
     let { arvHost, arvToken } = this.props.app.state;
 
-    let { activePage, itemsPerPage, ownerUuid } = this.props;
+    let { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
 
     let filters = [];
 
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
 
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + encodeURIComponent(itemsPerPage) +
diff --git a/frontend/src/js/component/wb-inline-search.js b/frontend/src/js/component/wb-inline-search.js
index 7f7b685..ff028e5 100644
--- a/frontend/src/js/component/wb-inline-search.js
+++ b/frontend/src/js/component/wb-inline-search.js
@@ -1,12 +1,13 @@
 import { h, Component } from 'preact';
 
 class WBInlineSearch extends Component {
-  render() {
+  render({ textSearch, navigate }) {
     return (
-      <form class="form-inline my-2 my-lg-0">
-        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+      <div class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
+          value={ textSearch } onchange={ navigate ? (e => navigate(e.target.value)) : null } />
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-      </form>
+      </div>
     );
   }
 }
diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index bd6c6c3..9bb3ef0 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -3,7 +3,7 @@ import WBNavbar from 'wb-navbar';
 import WBInlineSearch from 'wb-inline-search';
 
 class WBNavbarCommon extends Component {
-  render({ app, items, activeItem }) {
+  render({ app, items, activeItem, textSearch, textSearchNavigate }) {
     return (
       <WBNavbar
         items={ [
@@ -13,9 +13,9 @@ class WBNavbarCommon extends Component {
           { 'name': 'Shared with Me', 'id': 'shared-with-me' },
           { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
         ].concat(items) }
-        rhs={ (
-          <WBInlineSearch />
-        ) }
+        rhs={ textSearchNavigate ? (
+          <WBInlineSearch textSearch={ textSearch } navigate={ textSearchNavigate } />
+        ) : null }
         titleUrl = { '/browse/' + app.state.currentUser.uuid }
         getItemUrl={ item => app.navbarItemUrl(item) }
         activeItem={ activeItem } />
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 3228ed1..96eaf49 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -57,7 +57,8 @@ class WBProcessListing extends Component {
     const { arvHost, arvToken } = this.props.appState;
     const { requestStates, reqStateMask } = this.state;
     const { activePage, itemsPerPage, ownerUuid,
-      requestingContainerUuid, waitForNextProps } = this.props;
+      requestingContainerUuid, waitForNextProps,
+      textSearch } = this.props;
 
     if (waitForNextProps)
       return;
@@ -69,6 +70,8 @@ class WBProcessListing extends Component {
       filters.push([ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]);
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ])
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 896522b..12dbb7f 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -24,8 +24,7 @@ class WBProjectListing extends Component {
       renderSelectionCell(item),
       (<div>
         <div>
-          <a href="#"
-            onclick={ e => { e.preventDefault(); route('/browse/' + item['uuid']) }}>
+          <a href={ '/browse/' + item.uuid }>
             { item['name'] }
           </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
@@ -45,13 +44,15 @@ class WBProjectListing extends Component {
   }
 
   fetchItems() {
-    let { activePage, mode, itemsPerPage, ownerUuid, app } = this.props;
+    let { activePage, mode, itemsPerPage, ownerUuid, app, textSearch } = this.props;
     let { arvHost, arvToken } = app.state;
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/groups' + (mode === 'shared-with-me' ? '/shared' : '') +
       '?filters=' + encodeURIComponent(JSON.stringify(filters)) +
diff --git a/frontend/src/js/component/wb-user-listing.js b/frontend/src/js/component/wb-user-listing.js
index 88e7970..a232ed1 100644
--- a/frontend/src/js/component/wb-user-listing.js
+++ b/frontend/src/js/component/wb-user-listing.js
@@ -15,12 +15,17 @@ class WBUserListing extends Component {
 
   preparePage() {
     const { arvHost, arvToken } = this.props.app.state;
-    const { itemsPerPage, page } = this.props;
+    const { itemsPerPage, page, textSearch } = this.props;
 
     const order = ['last_name asc'];
 
+    const filters = [];
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/users?order=' + encodeURIComponent(JSON.stringify(order)) +
+      '&filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + itemsPerPage + '&offset=' + (itemsPerPage * page));
     prom = prom.then(xhr => {
       this.setState({
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 4dbea55..bd2bf37 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -50,10 +50,12 @@ class WBWorkflowListing extends Component {
 
   fetchItems() {
     const { arvHost, arvToken } = this.props.app.state;
-    const { page, itemsPerPage, ownerUuid } = this.props;
+    const { page, itemsPerPage, ownerUuid, textSearch } = this.props;
     const filters = [];
     if (ownerUuid)
       filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
     const select = ['uuid', 'name', 'description', 'owner_uuid', 'created_at'];
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/workflows?filters=' + encodeURIComponent(JSON.stringify(filters)) +
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 8e125fc..1e23034 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -75,10 +75,10 @@ class WBApp extends Component {
 
         <WBSignOut path='/sign-out' app={ this } />
 
-        <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?/:textSearch?"
           app={ this } mode="browse" />
 
-        <WBBrowse path="/shared-with-me/:activePage?"
+        <WBBrowse path="/shared-with-me/:activePage?/:textSearch?"
           app={ this } mode="shared-with-me" />
 
         <WBProcessView path="/process/:uuid/:page?" app={ this } />
@@ -89,7 +89,7 @@ class WBApp extends Component {
 
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
 
-        <WBUsersPage path='/users/:page?' app={ this } />
+        <WBUsersPage path='/users/:page?/:textSearch?' app={ this } />
 
         <WBWorkflowView path="/workflow/:uuid" app={ this } />
 
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index eb83941..490974b 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -52,8 +52,9 @@ class WBBrowse extends Component {
     const mode = ('mode' in params ? params.mode : this.props.mode);
 
     if (mode === 'shared-with-me')
-      return '/shared-with-me/' + ('activePage' in params ? params.activePage :
-        (this.props.activePage || ''));
+      return '/shared-with-me/' +
+        ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
+        ('textSearch' in params ? params.textSearch : (this.props.textSearch || ''));
 
     let res = '/browse/' +
       ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
@@ -61,7 +62,8 @@ class WBBrowse extends Component {
       ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
       ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
       ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
-      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || ''));
+      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')) + '/' +
+      encodeURIComponent('textSearch' in params ? params.textSearch : (this.props.textSearch || ''));
 
     return res;
   }
@@ -141,7 +143,8 @@ class WBBrowse extends Component {
   }
 
   render({ mode, ownerUuid, activePage, app,
-    objTypeTab, collectionPage, processPage, workflowPage }, { selected }) {
+    objTypeTab, collectionPage, processPage, workflowPage,
+    textSearch }, { selected }) {
 
     return (
       <div>
@@ -151,9 +154,13 @@ class WBBrowse extends Component {
 
         <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
 
-        <WBNavbarCommon app={ app } activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
-          (!ownerUuid) ? 'all-projects' :
-          (ownerUuid === app.state.currentUser.uuid) ? 'home' : null } />
+        <WBNavbarCommon app={ app }
+          activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
+            (!ownerUuid) ? 'all-projects' :
+            (ownerUuid === app.state.currentUser.uuid) ? 'home' : null }
+          textSearch={ textSearch }
+          textSearchNavigate={ textSearch => route(this.getUrl({ textSearch,
+            activePage: 0, collectionPage: 0, processPage: 0, workflowPage: 0 })) } />
 
         <WBArvadosCrumbs mode={ mode } uuid={ ownerUuid } app={ app } />
 
@@ -174,7 +181,8 @@ class WBBrowse extends Component {
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
           renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
           renderSelectionCell={ it => this.renderSelectionCell(it) }
-          renderSharingButton={ it => this.renderSharingButton(it) } />
+          renderSharingButton={ it => this.renderSharingButton(it) }
+          textSearch={ textSearch } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
@@ -195,7 +203,8 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
               renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) } />
+              renderSharingButton={ it => this.renderSharingButton(it) }
+              textSearch={ textSearch } />
 
           ) : (objTypeTab === 'process') ? (
             <WBProcessListing app={ app }
@@ -207,7 +216,8 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
               renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) } />
+              renderSharingButton={ it => this.renderSharingButton(it) }
+              textSearch={ textSearch } />
 
           ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
@@ -218,7 +228,8 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
               renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) } />
+              renderSharingButton={ it => this.renderSharingButton(it) }
+              textSearch={ textSearch } />
 
           ) : null
         }
diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js
index 5388a0f..360cff4 100644
--- a/frontend/src/js/page/wb-users-page.js
+++ b/frontend/src/js/page/wb-users-page.js
@@ -1,19 +1,27 @@
 import { h, Component } from 'preact';
+import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBUserListing from 'wb-user-listing';
 
 class WBUsersPage extends Component {
-  getUrl(page) {
-    return ('/users/' + page);
+  getUrl(params) {
+    const url = '/users/' +
+      Number('page' in params ? params.page : (this.props.page || 0)) + '/' +
+      encodeURIComponent('textSearch' in params ? params.textSearch : (this.props.textSearch || ''));
+    return url;
+    // return ('/users/' + page);
   }
 
-  render({ app, page }) {
+  render({ app, page, textSearch }) {
     return (
       <div>
-        <WBNavbarCommon app={ app } activeItem="all-users" />
+        <WBNavbarCommon app={ app } activeItem="all-users"
+          textSearch={ textSearch }
+          textSearchNavigate={ textSearch => route(this.getUrl({ textSearch, page: 0 })) } />
 
         <WBUserListing app={ app } page={ Number(page || 0) }
-          getPageUrl={ page => this.getUrl(page) } />
+          textSearch={ textSearch }
+          getPageUrl={ page => this.getUrl({ page }) } />
       </div>
     );
   }

From e3d98fd2f8d2c9a0def3e6e52f4a389e22fe1243 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 17:17:35 +0100
Subject: [PATCH 100/170] Make WBBrowse more concise by using common
 properties.

---
 frontend/rollup.config.js         |  2 +-
 frontend/src/js/page/wb-browse.js | 51 ++++++++++++-------------------
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 3711d93..206cf0d 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -55,7 +55,7 @@ export default {
       'node_modules/papaya-viewer/release/current/standard/papaya.css': 'dist/css/papaya.css',
       verbose: true
     }),
-    buble({jsx: 'h'}),
+    buble({jsx: 'h', objectAssign: 'Object.assign'}),
     resolve({}),
     license({
       banner: 'Copyright (C) F. Hoffmann-La Roche AG, 2020.\nAuthor: stanislaw.adaszewski@roche.com\nAll Rights Reserved.',
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 490974b..d4c2dc5 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -146,6 +146,19 @@ class WBBrowse extends Component {
     objTypeTab, collectionPage, processPage, workflowPage,
     textSearch }, { selected }) {
 
+    const commonProps = {
+      renderRenameLink: (it, cb) => this.renderRenameLink(it, cb),
+      renderDeleteButton: (it, cb) => this.renderDeleteButton(it, cb),
+      renderSelectionCell: it => this.renderSelectionCell(it),
+      renderSharingButton: it => this.renderSharingButton(it),
+      textSearch,
+      app,
+      appState: app.state,
+      arvHost: app.state.arvHost,
+      arvToken: app.state.arvToken,
+      ownerUuid
+    };
+
     return (
       <div>
         <WBRenameDialog app={ app } ref={ this.renameDialogRef } />
@@ -170,19 +183,11 @@ class WBBrowse extends Component {
           copyHere={ () => this.copyHere() } />
 
         <WBProjectListing ref={ this.projectListingRef }
-          app={ app }
-          arvHost={ app.state.arvHost }
-          arvToken={ app.state.arvToken }
           mode={ mode }
-          ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
           getPageUrl={ i => this.getUrl({ 'activePage': i }) }
-          renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-          renderSelectionCell={ it => this.renderSelectionCell(it) }
-          renderSharingButton={ it => this.renderSharingButton(it) }
-          textSearch={ textSearch } />
+          { ...commonProps } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
@@ -195,41 +200,25 @@ class WBBrowse extends Component {
         {
           (mode !== 'browse') ? null :
           (!objTypeTab || objTypeTab === 'collection') ? (
-            <WBCollectionListing app={ app }
-              ownerUuid={ ownerUuid }
+            <WBCollectionListing
               itemsPerPage="20"
               activePage={ Number(collectionPage || 0) }
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) }
-              textSearch={ textSearch } />
+              { ...commonProps } />
 
           ) : (objTypeTab === 'process') ? (
-            <WBProcessListing app={ app }
-              appState={ app.state }
-              ownerUuid={ ownerUuid }
+            <WBProcessListing
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) }
-              textSearch={ textSearch } />
+              { ...commonProps } />
 
           ) : (objTypeTab === 'workflow') ? (
-            <WBWorkflowListing app={ app }
-              ownerUuid={ ownerUuid }
+            <WBWorkflowListing
               itemsPerPage="20"
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
-              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
-              renderSelectionCell={ it => this.renderSelectionCell(it) }
-              renderSharingButton={ it => this.renderSharingButton(it) }
-              textSearch={ textSearch } />
+              { ...commonProps } />
 
           ) : null
         }

From 06767271bfe703e07d41f54598c4d325be472848 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 18:36:23 +0100
Subject: [PATCH 101/170] Added a discrete indeterminate progress indicator
 following the mouse cursor to signal outstanding API requests.

---
 .../src/js/misc/wb-apply-promise-ordering.js  | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/misc/wb-apply-promise-ordering.js b/frontend/src/js/misc/wb-apply-promise-ordering.js
index 161b0db..855ebb9 100644
--- a/frontend/src/js/misc/wb-apply-promise-ordering.js
+++ b/frontend/src/js/misc/wb-apply-promise-ordering.js
@@ -1,12 +1,56 @@
 const defaultOrderRegistry = {};
 
+/* function notify(orderRegistry) {
+  if (!('listeners' in orderRegistry))
+    return;
+  for (let k in orderRegistry.listeners) {
+    orderRegistry.listeners[k](orderRegistry);
+  }
+} */
+
+function cursorDecor() {
+  let d = $('#cursor-decor');
+  if (d.length === 1)
+    return $(d[0]);
+  d = $('<div id="cursor-decor" style="z-index: 10000; position: absolute; left: 10px; top: 10px;"> \
+      <div class="progress" style="height: 8px;"> \
+        <div class="progress-bar progress-bar-striped progress-bar-animated" \
+          role="progressbar" aria-valuenow="100" aria-valuemin="0" \
+          aria-valuemax="100" style="width: 32px;"></div> \
+      </div> \
+    </div>');
+  $(document.body).append(d);
+  let pageX = 0, pageY = 0, scrollX = 0, scrollY = 0;
+  document.addEventListener('mousemove', e => {
+    pageX = e.pageX;
+    pageY = e.pageY;
+    d.css({ left: (e.pageX + 16) + 'px', top: (e.pageY + 16) + 'px' })
+    scrollX = window.scrollX;
+    scrollY = window.scrollY;
+  });
+  document.addEventListener('scroll', e => {
+    d.css({ left: (pageX + window.scrollX - scrollX + 16) + 'px',
+      top: (pageY + window.scrollY - scrollY + 16) + 'px' });
+  });
+  return d;
+}
+
+function updateCursorDecor(orderRegistry) {
+  const d = cursorDecor();
+  if (Object.keys(orderRegistry.pendingCompletion).length === 0)
+    d.hide();
+  else
+    d.show();
+}
+
 function wbApplyPromiseOrdering(prom, orderRegistry) {
   let orderId;
 
   if (!orderRegistry)
     orderRegistry = defaultOrderRegistry;
 
-  if (Object.keys(orderRegistry).length === 0) {
+  //if (Object.keys(orderRegistry).length === 0) {
+  if (!('started' in orderRegistry)) {
     orderRegistry.started = 0;
     orderRegistry.pendingCompletion = {};
     orderRegistry.completed = { 0: true };
@@ -15,6 +59,8 @@ function wbApplyPromiseOrdering(prom, orderRegistry) {
   orderRegistry.started += 1;
   orderId = orderRegistry.started;
   // console.log('New orderId: ' + orderId);
+  // notify(orderRegistry);
+  cursorDecor().show();
 
   const orderCallback = ((isCatch, payload) => {
     // console.log('orderId: ' + orderId +
@@ -41,6 +87,7 @@ function wbApplyPromiseOrdering(prom, orderRegistry) {
         // console.log('Garbage collect');
         orderRegistry.started = 0;
         orderRegistry.completed = { 0: true };
+        cursorDecor().hide();
       }
 
       if (isCatch)

From b948c812f45b35e8788f64bc4d8766f1c88ea802 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 4 Mar 2020 08:29:49 +0100
Subject: [PATCH 102/170] Fix default selection cell/sharing button render
 functions in WBProcessListing.

---
 frontend/src/js/component/wb-process-listing.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 96eaf49..45e0e35 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -115,11 +115,13 @@ class WBProcessListing extends Component {
 }
 
 WBProcessListing.defaultProps = {
-  'itemsPerPage': 100,
-  'ownerUuid': null,
-  'requestingContainerUuid': null,
-  'renderRenameLink': () => {},
-  'renderDeleteButton': () => {}
+  itemsPerPage: 100,
+  ownerUuid: null,
+  requestingContainerUuid: null,
+  renderRenameLink: () => null,
+  renderDeleteButton: () => null,
+  renderSelectionCell: () => null,
+  renderSharingButton: () => null
 };
 
 export default WBProcessListing;

From 9c2496f50ddb410b98f5b0ee80f87d7d2b8c4770 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 4 Mar 2020 08:31:56 +0100
Subject: [PATCH 103/170] Remove the toolbox button.

---
 frontend/src/js/component/wb-collection-listing.js | 5 -----
 frontend/src/js/component/wb-project-listing.js    | 4 ----
 2 files changed, 9 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 0ad0c29..663b11e 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -48,11 +48,6 @@ class WBCollectionListing extends Component {
       item['file_count'],
       filesize(item['file_size_total']),
       (<div>
-        <button class="btn btn-outline-warning m-1" title="Add to Toolbox"
-          onclick={ () => (app.addToToolbox(item.uuid)) }>
-          <i class="fas fa-toolbox"></i>
-        </button>
-
         <a class="btn btn-outline-primary m-1" title="Properties"
           href={ urlForObject(item, 'properties') }>
           <i class="fas fa-list-ul"></i>
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 12dbb7f..db05be9 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -33,10 +33,6 @@ class WBProjectListing extends Component {
       item['description'],
       item['owner_uuid'],
       (<div>
-        <button class="btn btn-outline-warning m-1" title="Add to Toolbox"
-          onclick={ () => (app.addToToolbox(item.uuid)) }>
-          <i class="fas fa-toolbox"></i>
-        </button>
         { renderDeleteButton(item, () => this.fetchItems()) }
         { renderSharingButton(item) }
       </div>)

From 880eee342bcbe8297423133de8ab12f3133dcef1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 4 Mar 2020 15:45:45 +0100
Subject: [PATCH 104/170] Working on workflow launcher.

---
 frontend/src/js/dialog/wb-browse-dialog.js    |  32 +--
 .../src/js/page/wb-launch-workflow-page.js    | 193 ++++++------------
 2 files changed, 85 insertions(+), 140 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index fa9954d..e96d6ff 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -20,7 +20,7 @@ import { createHashHistory } from 'history';
 //
 // props:
 //   selectMany: Boolean
-//   selectWhat: [ 'file', 'directory' ]
+//   selectWhat: [ 'file', 'directory', 'owner' ]
 //
 // state:
 //   selected: Array of UUID
@@ -43,6 +43,7 @@ class WBBrowseDialog extends Component {
     this.state.collectionPath = '';
     this.state.textSearch = '';
     this.state.id = ('id' in this.props) ? this.props.id : uuid.v4();
+    this.state.accept = () => {};
   }
 
   navigateBack() {
@@ -52,7 +53,7 @@ class WBBrowseDialog extends Component {
     this.navigate(url, false);
   }
 
-  navigate(url, useHistory=true) {
+  navigate(url, useHistory=true, stateUpdate={}) {
     if (typeof(url) === 'object') {
       url = ['', 'browse-dialog',
         'mode' in url ? url.mode : this.state.mode,
@@ -71,11 +72,11 @@ class WBBrowseDialog extends Component {
     let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch, collectionPath ] = url.split('/');
     topPage = parseInt(topPage, 10) || 0;
     bottomPage = parseInt(bottomPage, 10) || 0;
-    collectionPath = decodeURIComponent(collectionPath);
-    this.setState({
+    collectionPath = decodeURIComponent(collectionPath || '');
+    this.setState(Object.assign({
       'currentUrl': url,
       mode, uuid, topPage, bottomPage, textSearch, collectionPath
-    });
+    }, stateUpdate));
   }
 
   select(uuid) {
@@ -111,14 +112,13 @@ class WBBrowseDialog extends Component {
   }
 
   makeSelectionCell(uuid) {
-    const { selectMany, id, accept } = this.props;
-    const { selected } = this.state;
+    const { selected, accept, selectMany, id } = this.state;
 
     return selectMany ? (
       <div>
         <input type="checkbox" checked={ (uuid in selected) }
           onChange={ e => {
-          if (e.target.value === 'on')
+          if (e.target.checked)
             this.select(uuid);
           else
             this.deselect(uuid);
@@ -135,14 +135,19 @@ class WBBrowseDialog extends Component {
     );
   }
 
-  show(callback) {
+  show(selectWhat, selectMany, accept=(() => {})) {
+    const { app } = this.props;
+    const { currentUser } = app.state;
+    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false,
+      { selectWhat, selectMany, accept, history: [] });
     $('#' + this.state.id).modal();
   }
 
-  render({ app, selectMany, selectWhat },
+  render({ app },
     { history, currentUrl, mode, uuid,
       topPage, bottomPage, textSearch,
-      collectionPath, id }) {
+      collectionPath, id, accept, selectedOrder,
+      selectMany, selectWhat }) {
 
     return (
       <div class="modal" id={ id } tabindex="-1" role="dialog">
@@ -231,7 +236,10 @@ class WBBrowseDialog extends Component {
             </div>
 
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary">Accept</button>
+              { selectMany ? (
+                <button type="button" class="btn btn-primary"
+                  onclick={ e => { e.preventDefault(); accept(selectedOrder); } }>Accept</button>
+              ) : null }
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
             </div>
           </div>
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index a7802ea..29e14f8 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -1,66 +1,26 @@
 import { h, Component, createRef } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
-import WBToolboxDialog from 'wb-toolbox-dialog';
 import WBBrowseDialog from 'wb-browse-dialog';
+import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
 import linkState from 'linkstate';
 
-function createInputsTemplate(workflow) {
-  const g = JSON.parse(workflow.definition)['$graph'];
-  const main = g.find(it => (it.id === '#main'));
-  let res = '';
-  main.inputs.map(it => {
-    let id = it.id.split('/');
-    id = id[id.length - 1];
-    if (it.label) res += '    // ' + it.label + '\n';
-    if (it.doc) res += '    // ' + it.doc + '\n';
-    res += '    // Type: ' + ((typeof(it.type) === 'string') ?
-      it.type : JSON.stringify(it.type)) + '\n\n';
-    res += '    \'' + id + '\': \'\',\n\n';
-    //res += '    // ' + ' '.repeat(id.length) + '^^^^\n\n';
-  });
-  /* let res = main.inputs.map(it => { it.value = null; return it; });
-  res = JSON.stringify(res, null, 2);
-  res = res.split('\n');
-  res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
-  res = res.join('\n'); */
-  return res;
-}
-
-function uuidsToCwlObjects(spec) {
-  if (typeof(spec) === 'string') {
-    if (/^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(spec)) {
-      return {
-        'class': 'Directory',
-        'location': 'keep:' + spec
-      };
-    } else if (/^[a-f0-9]{32}\+[0-9]+/.exec(spec)) {
-      return {
-        'class': 'Directory',
-        'location': 'keep:' + spec
-      };
-    } else {
-      return spec;
-    }
-  } else if (typeof(spec) === 'object') {
-    const res = (spec instanceof Array) ? [] : {};
-    Object.keys(spec).map(k => (res[k] = uuidsToCwlObjects(spec[k])));
-    return res;
-
-  } else {
-    return spec;
+function parseDefinition(text) {
+  let definition;
+  try {
+    definition = JSON.parse(text);
+  } catch (_) {
+    definition = jsyaml.load(text);
   }
+  return definition;
 }
 
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
     super(...args);
-    this.state.browseDialogId = uuid.v4();
-    this.state.insertDialogId = uuid.v4();
-    this.state.insertManyDialogId = uuid.v4();
-    this.state.realBrowseDialogId = uuid.v4();
-    this.inputsTextArea = createRef();
+    this.browseDialogRef = createRef();
+    this.state.inputs = {};
   }
 
   componentDidMount() {
@@ -71,47 +31,64 @@ class WBLaunchWorkflowPage extends Component {
       '/arvados/v1/workflows/' + workflowUuid);
     prom = prom.then(xhr => this.setState({
       'workflow': xhr.response,
+      'workflowDefinition': parseDefinition(xhr.response.definition),
       'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
-      'defaultProcessDescription': xhr.response.description,
-      'inputsFunctionText': '(() => {\n  return {\n' +
-        createInputsTemplate(xhr.response) +
-        '  };\n})()'
+      'defaultProcessDescription': xhr.response.description
     }));
   }
 
+  renderInput(inputSpec) {
+    const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
+      (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
+
+    const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
+      (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
+
+    const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
+      inputSpec.type.type === 'array');
+
+    if (!isFile && !isDirectory)
+      return (
+        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
+          value={ this.state.inputs[inputSpec.id] }
+          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
+      );
+
+    const button = (
+      <button class="btn btn-outline-primary"
+        onclick={ e => {
+          e.preventDefault();
+          this.browseDialogRef.current.show(isFile ? 'file' : 'directory', isArray,
+            v => {
+              this.state.inputs[inputSpec.id] = v.toString();
+              this.setState({});
+            });
+        } }>
+        Browse...
+      </button>
+    );
+
+    return (
+      <div class="input-group">
+        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
+          value={ this.state.inputs[inputSpec.id] }
+          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
+        <div class="input-group-append">
+          { button }
+        </div>
+      </div>
+    );
+  }
+
   render({ app, workflowUuid },
-    { workflow, projectUuid, processName, processDescription,
-    defaultProcessName, defaultProcessDescription,
-    inputsFunctionText, browseDialogId,
-    insertDialogId, insertManyDialogId,
-    realBrowseDialogId, inputsPreview }) {
+    { workflow, workflowDefinition, projectUuid, processName, processDescription,
+    defaultProcessName, defaultProcessDescription }) {
 
     return (
       <div>
         <WBNavbarCommon app={ app } />
 
-        <WBToolboxDialog app={ app } id={ browseDialogId }
-          items={ app.state.toolboxItems } onAccepted={ value =>
-            this.setState({ 'projectUuid': value }) } />
-
-        <WBToolboxDialog app={ app } id={ insertDialogId }
-          items={ app.state.toolboxItems }
-          onAccepted={ value => {
-            const t = this.inputsTextArea.current;
-            const start = t.selectionStart;
-            const end = t.selectionEnd;
-            this.setState({
-              'inputsFunctionText': t.value.substr(0, start) + value +
-                t.value.substr(end)
-            });
-          } } />
-
-        <WBToolboxDialog app={ app } id={ insertManyDialogId }
-          items={ app.state.toolboxItems } selectMany={ true }
-          onAccepted={ values => alert(values) } />
-
-        <WBBrowseDialog app={ app } id={ realBrowseDialogId }
-          selectWhat="directory" />
+        <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />
 
         { workflow ?
           (<form class="container-fluid">
@@ -138,17 +115,13 @@ class WBLaunchWorkflowPage extends Component {
                   <div class="input-group-append">
                     <button class="btn btn-primary" type="button"
                       id="button-addon2" onclick={ e => { e.preventDefault();
-                        $('#' + browseDialogId).modal(); } }>Browse</button>
+                        this.browseDialogRef.current.show('owner', false,
+                          projectUuid => this.setState({ projectUuid })); } }>Browse</button>
                   </div>
                 </div>
               </div>
             </div>
 
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" id="createSubproject" />
-              <label class="form-check-label" for="createSubproject">Create subproject</label>
-            </div>
-
             <div class="form-group">
               <label for="processName">Process Name</label>
               <input type="text" class="form-control" id="processName"
@@ -165,47 +138,11 @@ class WBLaunchWorkflowPage extends Component {
 
             <div class="form-group">
               <label for="inputs">Inputs</label>
-              <div>
-                <div class="mb-2">
-                  <button class="btn btn-primary mr-2" onclick={ e => {
-                    e.preventDefault();
-                    $('#' + insertDialogId).modal();
-                  } }>Insert</button>
-
-                  <button class="btn btn-primary mr-2" onclick={ e => {
-                    e.preventDefault();
-                    $('#' + insertManyDialogId).modal();
-                  } }>Insert Many</button>
-
-                  <button class="btn btn-primary mr-2" onclick={ e => {
-                    e.preventDefault();
-                    $('#' + realBrowseDialogId).modal();
-                  } }>Insert Browse</button>
-                </div>
-
-                <textarea class="form-control" ref={ this.inputsTextArea } id="inputs"
-                  style="font-family: monospace;" rows="20"
-                  value={ inputsFunctionText }
-                  onChange={ linkState(this, 'inputsFunctionText') }></textarea>
-
-                <div class="my-2">
-                  <button class="btn btn-primary" onclick={ e => {
-                    e.preventDefault();
-                    try {
-                      let inputsVal = eval(inputsFunctionText);
-                      inputsVal = uuidsToCwlObjects(inputsVal);
-                      this.setState({ 'inputsPreview': JSON.stringify(inputsVal, null, 2) });
-                    } catch (exc) {
-                      this.setState({ 'inputsPreview': exc });
-                    }
-                  } }>Preview</button>
-                </div>
-
-                <textarea class="form-control" readonly="readonly"
-                  style="font-family: monospace;" rows="10"
-                  value={ inputsPreview }></textarea>
-              </div>
-
+              <WBTable columns={ [ 'Name', 'Value'] }
+                rows={ workflowDefinition.$graph.find(a => (a.id === '#main')).inputs.map(it => [
+                  it.label || it.id,
+                  this.renderInput(it)
+                ]) } />
             </div>
           </form>) : <div>Loading...</div> }
       </div>

From d9c7f4b0b9452c63b8b5f6af48cc698031b57afa Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 4 Mar 2020 17:15:56 +0100
Subject: [PATCH 105/170] Further progress in workflow launcher.

---
 .../wb-browse-dialog-collection-content.js    |   9 +-
 .../wb-browse-dialog-collection-list.js       |  11 +-
 frontend/src/js/dialog/wb-browse-dialog.js    |  13 +-
 .../src/js/page/wb-launch-workflow-page.js    | 133 ++++++++++++++----
 4 files changed, 123 insertions(+), 43 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
index 2c757f4..e2a1d98 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
@@ -67,13 +67,16 @@ class WBBrowseDialogCollectionContent extends Component {
 
   prepareRows(listing) {
     const { makeSelectionCell, collectionPath, navigate,
-      page, itemsPerPage, collectionUuid, textSearch } = this.props;
+      page, itemsPerPage, collectionUuid, textSearch, selectWhat } = this.props;
     const textLower = textSearch.toLowerCase();
     listing = listing.filter(it => (it[1].toLowerCase().indexOf(textLower) !== -1));
     const numPages = Math.ceil(listing.length / itemsPerPage);
     const rows = listing.slice(page * itemsPerPage,
       (page + 1) * itemsPerPage).map(it => [
-      makeSelectionCell(collectionUuid + '/' + collectionPath + '/' + it[1]),
+      ((it[0] === 'd' && selectWhat === 'directory') ||
+        (it[0] === 'f' && selectWhat === 'file')) ?
+        makeSelectionCell(collectionUuid + collectionPath + '/' + it[1]) :
+        null,
       it[0] === 'd' ? (
         <a href="#" onclick={ e => {
           e.preventDefault();
@@ -99,7 +102,7 @@ class WBBrowseDialogCollectionContent extends Component {
               aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
           </div>
         ] }
-        <WBTable headerClasses={ ['col-sm-1', 'col-sm-4', 'col-sm-4'] }
+        <WBTable headerClasses={ [ 'w-1' ] }
           columns={ [ '', 'Name', 'Size' ] } rows={ rows } />
         <WBPagination numPages={ numPages } activePage={ page }
           onPageChanged={ i => navigate({ 'bottomPage': i }) } />
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index 3f934a2..9b26ab6 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -20,15 +20,14 @@ class WBBrowseDialogCollectionList extends Component {
 
   prepareRows(items) {
     const { navigate, selectWhat, makeSelectionCell } = this.props;
-    return items.map(it => (selectWhat === 'directory' ? [
-        makeSelectionCell(it.uuid)
-      ] : []).concat([
+    return items.map(it => [
+      (selectWhat === 'directory' ? makeSelectionCell(it.uuid) : null),
       (
         <a href="#" onclick={ e => { e.preventDefault();
           navigate('/browse-dialog/content/' + it.uuid + '////'); } }>{ it.name }</a>
       ),
       it.uuid
-    ]));
+    ]);
   }
 
   fetchRows() {
@@ -54,8 +53,8 @@ class WBBrowseDialogCollectionList extends Component {
   render({ selectWhat, page, navigate }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ (selectWhat === 'directory' ? [''] : []).concat(['Name', 'UUID']) }
-          headerClasses={ selectWhat === 'directory' ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
+        <WBTable columns={ ['', 'Name', 'UUID'] }
+          headerClasses={ ['w-1'] }
           rows={ rows } />
 
         <WBPagination activePage={ page } numPages={ numPages }
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index e96d6ff..e072855 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -87,9 +87,9 @@ class WBBrowseDialog extends Component {
     }
     selected[uuid] = true;
     selectedOrder.push(uuid);
-    this.setState({
+    /* this.setState({
       selected, selectedOrder
-    });
+    }); */
   }
 
   deselect(uuid) {
@@ -99,9 +99,9 @@ class WBBrowseDialog extends Component {
     const n = selectedOrder.indexOf(uuid);
     selectedOrder = selected.splice(n, n + 1);
     delete selected[uuid];
-    this.setState({
+    /* this.setState({
       selected, selectedOrder
-    });
+    }); */
   }
 
   resetSelection() {
@@ -139,7 +139,8 @@ class WBBrowseDialog extends Component {
     const { app } = this.props;
     const { currentUser } = app.state;
     this.navigate('/browse-dialog/browse/' + currentUser.uuid, false,
-      { selectWhat, selectMany, accept, history: [] });
+      { selectWhat, selectMany, accept, history: [],
+        selected: {}, selectedOrder: [] });
     $('#' + this.state.id).modal();
   }
 
@@ -238,7 +239,7 @@ class WBBrowseDialog extends Component {
             <div class="modal-footer">
               { selectMany ? (
                 <button type="button" class="btn btn-primary"
-                  onclick={ e => { e.preventDefault(); accept(selectedOrder); } }>Accept</button>
+                  onclick={ e => { e.preventDefault(); accept(selectedOrder); $('#' + id).modal('hide'); } }>Accept</button>
               ) : null }
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
             </div>
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 29e14f8..6b0cdfe 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -3,6 +3,7 @@ import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBBrowseDialog from 'wb-browse-dialog';
 import WBTable from 'wb-table';
+import WBNameAndUuid from 'wb-name-and-uuid';
 import makeArvadosRequest from 'make-arvados-request';
 import linkState from 'linkstate';
 
@@ -16,6 +17,51 @@ function parseDefinition(text) {
   return definition;
 }
 
+function encodeURIComponentIncludingDots(s) {
+  return encodeURIComponent(s).replace('.', '%2E');
+}
+
+class WBPathDisplay extends Component {
+  fetchData() {
+    const { app, path } = this.props;
+    const { arvHost, arvToken } = app.state;
+    let m;
+    if (m = /^[0-9a-f]{32}\+[0-9]+/.exec(path));
+    else if (m = /^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(path));
+    else return;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + m[0]);
+    prom = prom.then(xhr => this.setState({
+      item: xhr.response,
+      tail: path.substr(m[0].length)
+    }));
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchData();
+  }
+
+  render({}, { item, tail }) {
+    if (!item)
+      return 'Loading...';
+
+    return (
+      <span>
+        <a href={ '/collection-browse/' + item.uuid }>
+          { item.name || item.uuid }
+        </a><a href={ '/collection-browse/' + item.uuid + '/' + encodeURIComponentIncludingDots(tail) }>
+          { tail }
+        </a>
+      </span>
+    );
+  }
+}
+
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
     super(...args);
@@ -38,20 +84,25 @@ class WBLaunchWorkflowPage extends Component {
   }
 
   renderInput(inputSpec) {
+    const { app } = this.props;
+
     const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
       (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
 
     const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
       (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
 
-    const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
-      inputSpec.type.type === 'array');
+    const isArray = true; // (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
+      // inputSpec.type.type === 'array');
 
     if (!isFile && !isDirectory)
       return (
-        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
-          value={ this.state.inputs[inputSpec.id] }
-          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
+        <div>
+          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
+            value={ this.state.inputs[inputSpec.id] }
+            onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
+          <div class="mt-2 text-muted">{ inputSpec.doc }</div>
+        </div>
       );
 
     const button = (
@@ -60,7 +111,7 @@ class WBLaunchWorkflowPage extends Component {
           e.preventDefault();
           this.browseDialogRef.current.show(isFile ? 'file' : 'directory', isArray,
             v => {
-              this.state.inputs[inputSpec.id] = v.toString();
+              this.state.inputs[inputSpec.id] = JSON.stringify(v);
               this.setState({});
             });
         } }>
@@ -68,14 +119,36 @@ class WBLaunchWorkflowPage extends Component {
       </button>
     );
 
+    let value = this.state.inputs[inputSpec.id];
+    if (value) {
+      try {
+        value = jsyaml.load(value);
+      } catch (_) {}
+    }
+
     return (
-      <div class="input-group">
-        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
-          value={ this.state.inputs[inputSpec.id] }
-          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
-        <div class="input-group-append">
-          { button }
+      <div>
+        <div class="input-group">
+          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
+            value={ this.state.inputs[inputSpec.id] }
+            onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
+          <div class="input-group-append">
+            { button }
+          </div>
         </div>
+        <div class="mt-2 text-muted">{ inputSpec.doc }</div>
+        { value ?
+          isArray ? (
+            <ul class="mb-0">
+              { value.map(path => (
+                <li>
+                  <WBPathDisplay app={ app } path={ path } />
+                </li>
+              )) }
+            </ul>
+        ) : (
+          <WBPathDisplay app={ app } path={ value } />
+        ) : null }
       </div>
     );
   }
@@ -102,24 +175,22 @@ class WBLaunchWorkflowPage extends Component {
             <div class="form-group">
               <label for="projectUuid">Project UUID</label>
 
-              <div>
-                { projectUuid ? (
-                  <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
-                ) : null }
-
-                <div class="input-group mb-3">
-                  <input type="text" class="form-control" id="projectUuid"
-                    placeholder="Enter Project UUID" aria-label="Project UUID"
-                    aria-describedby="button-addon2" value={ projectUuid }
-                    onChange={ linkState(this, 'projectUuid') } />
-                  <div class="input-group-append">
-                    <button class="btn btn-primary" type="button"
-                      id="button-addon2" onclick={ e => { e.preventDefault();
-                        this.browseDialogRef.current.show('owner', false,
-                          projectUuid => this.setState({ projectUuid })); } }>Browse</button>
-                  </div>
+              <div class="input-group mb-3">
+                <input type="text" class="form-control" id="projectUuid"
+                  placeholder="Enter Project UUID" aria-label="Project UUID"
+                  aria-describedby="button-addon2" value={ projectUuid }
+                  onChange={ linkState(this, 'projectUuid') } />
+                <div class="input-group-append">
+                  <button class="btn btn-primary" type="button"
+                    id="button-addon2" onclick={ e => { e.preventDefault();
+                      this.browseDialogRef.current.show('owner', false,
+                        projectUuid => this.setState({ projectUuid })); } }>Browse</button>
                 </div>
               </div>
+
+              { projectUuid ? (
+                <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
+              ) : null }
             </div>
 
             <div class="form-group">
@@ -144,6 +215,12 @@ class WBLaunchWorkflowPage extends Component {
                   this.renderInput(it)
                 ]) } />
             </div>
+
+            <div class="form-group">
+              <button class="btn btn-success" onclick={ e => { e.preventDefault(); this.submit(); } }>
+                Submit
+              </button>
+            </div>
           </form>) : <div>Loading...</div> }
       </div>
     );

From 277d8dd293f3a2040f3cca7402b1eab73cba575b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 6 Mar 2020 16:40:22 +0100
Subject: [PATCH 106/170] Finished the new workflow launcher.

---
 frontend/src/js/misc/wb-disable-controls.js   |  12 ++
 .../src/js/page/wb-launch-workflow-page.js    | 147 ++++++++++++++++--
 2 files changed, 150 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-disable-controls.js

diff --git a/frontend/src/js/misc/wb-disable-controls.js b/frontend/src/js/misc/wb-disable-controls.js
new file mode 100644
index 0000000..251d260
--- /dev/null
+++ b/frontend/src/js/misc/wb-disable-controls.js
@@ -0,0 +1,12 @@
+function wbDisableControls() {
+  $('input, select, button').attr('disabled', 'disabled');
+  $('a').each(function() { $(this).data('old_href', $(this).attr('href')); });
+  $('a').attr('href', null);
+}
+
+function wbEnableControls() {
+  $('input, select, button').attr('disabled', null);
+  $('a').each(function() { $(this).attr('href', $(this).data('old_href')); });
+}
+
+export { wbEnableControls, wbDisableControls };
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 6b0cdfe..322ccf2 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -1,10 +1,12 @@
 import { h, Component, createRef } from 'preact';
+import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBBrowseDialog from 'wb-browse-dialog';
 import WBTable from 'wb-table';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import makeArvadosRequest from 'make-arvados-request';
+import { wbDisableControls, wbEnableControls } from 'wb-disable-controls';
 import linkState from 'linkstate';
 
 function parseDefinition(text) {
@@ -21,6 +23,41 @@ function encodeURIComponentIncludingDots(s) {
   return encodeURIComponent(s).replace('.', '%2E');
 }
 
+function inputSpecInfo(inputSpec) {
+  const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
+    (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
+
+  const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
+    (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
+
+  const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
+    inputSpec.type.type === 'array');
+
+  return { isFile, isDirectory, isArray };
+}
+
+function uuidsToCwl(obj, isFile) {
+  if (obj instanceof Array) {
+    const res = {};
+    for (let k in obj) {
+        res[k] = uuidsToCwl(obj[k], isFile);
+    }
+    return res;
+  }
+
+  if (typeof(obj) === 'string' &&
+    (/^[0-9a-z]{5}-[0-9a-z]{5}-[0-9a-z]{15}/.exec(obj) ||
+      /^[0-9a-f]{32}\+[0-9]+/.exec(obj))) {
+
+    return {
+      'class': (isFile ? 'File' : 'Directory'),
+      'location': 'keep:' + obj
+    };
+  }
+
+  throw Error('Expected Arvados path or array of paths');
+}
+
 class WBPathDisplay extends Component {
   fetchData() {
     const { app, path } = this.props;
@@ -67,6 +104,7 @@ class WBLaunchWorkflowPage extends Component {
     super(...args);
     this.browseDialogRef = createRef();
     this.state.inputs = {};
+    this.state.errors = [];
   }
 
   componentDidMount() {
@@ -86,14 +124,7 @@ class WBLaunchWorkflowPage extends Component {
   renderInput(inputSpec) {
     const { app } = this.props;
 
-    const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
-      (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
-
-    const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
-      (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
-
-    const isArray = true; // (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
-      // inputSpec.type.type === 'array');
+    const { isFile, isDirectory, isArray } = inputSpecInfo(inputSpec);
 
     if (!isFile && !isDirectory)
       return (
@@ -153,9 +184,97 @@ class WBLaunchWorkflowPage extends Component {
     );
   }
 
+  submit() {
+    // first see if all inputs are parseable
+    const inputs = {};
+    const errors = [];
+
+    const { workflowDefinition } = this.state;
+    const main = workflowDefinition['$graph'].find(a => (a.id === '#main'));
+
+    for (let k in this.state.inputs) {
+      try {
+        let val = jsyaml.safeLoad(this.state.inputs[k]);
+        const { isFile } = inputSpecInfo(main.inputs.find(a => (a.id === k)));
+        val = uuidsToCwl(val, isFile);
+        k = k.split('/').slice(1).join('/');
+        inputs[k] = val;
+      } catch (exc) {
+        errors.push('Error parsing ' + k + ': ' + exc.message);
+      }
+    }
+
+    if (errors.length > 0) {
+      this.setState({ errors });
+      return;
+    }
+
+    // prepare a request
+    const { app, workflowUuid } = this.props;
+    const { processName, processDescription,
+      defaultProcessName, defaultProcessDescription,
+      projectUuid } = this.state;
+    const { arvHost, arvToken, currentUser } = app.state;
+    const req = {
+      name: processName || defaultProcessName,
+      description: processDescription || defaultProcessDescription,
+      owner_uuid: projectUuid || currentUser.uuid,
+      container_image: 'arvados/jobs',
+      properties: {
+        template_uuid: workflowUuid
+      },
+      runtime_constraints: {
+        API: true,
+        vcpus: 1,
+        ram: 1073741824
+      },
+      cwd: '/var/spool/cwl',
+      command: [
+        'arvados-cwl-runner',
+        '--local',
+        '--api=containers',
+        '--project-uuid=' + (projectUuid || currentUser.uuid),
+        '--collection-cache-size=256',
+        '/var/lib/cwl/workflow.json#main',
+        '/var/lib/cwl/cwl.input.json'],
+      output_path: '/var/spool/cwl',
+      priority: 1,
+      state: 'Committed',
+      mounts: {
+        'stdout': {
+          kind: 'file',
+          path: '/var/spool/cwl/cwl.output.json'
+        },
+        '/var/spool/cwl': {
+          kind: 'collection',
+          writable: true
+        },
+        '/var/lib/cwl/workflow.json': {
+          kind: 'json',
+          content: workflowDefinition
+        },
+        '/var/lib/cwl/cwl.input.json': {
+          kind: 'json',
+          content: inputs
+        }
+      }
+    };
+
+    wbDisableControls();
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests',
+      { method: 'POST', data: JSON.stringify(req) });
+    prom = prom.then(xhr => {
+      wbEnableControls();
+      route('/process/' + xhr.response.uuid);
+    });
+
+    // throw Error('Not implemented');
+  }
+
   render({ app, workflowUuid },
     { workflow, workflowDefinition, projectUuid, processName, processDescription,
-    defaultProcessName, defaultProcessDescription }) {
+    defaultProcessName, defaultProcessDescription, errors }) {
 
     return (
       <div>
@@ -221,6 +340,16 @@ class WBLaunchWorkflowPage extends Component {
                 Submit
               </button>
             </div>
+
+            { errors.length > 0 ? (
+              <div class="form-group">
+                { errors.map(err => (
+                  <div class="alert alert-danger" role="alert">
+                    { err }
+                  </div>
+                ))}
+              </div>
+            ) : null }
           </form>) : <div>Loading...</div> }
       </div>
     );

From 0395efc73b4ae5de0eb2caed3f5cdd302d3f7bfc Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 11 Mar 2020 11:04:32 +0100
Subject: [PATCH 107/170] Add normal login via redirection.

---
 frontend/src/js/page/wb-app.js     |  2 +-
 frontend/src/js/page/wb-sign-in.js | 62 +++++++++++++++++++++++++-----
 frontend/src/js/widget/wb-tabs.js  |  2 +-
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 1e23034..22c07f2 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -71,7 +71,7 @@ class WBApp extends Component {
       <Router>
         <WBLandingPage path="/" />
 
-        <WBSignIn path="/sign-in" appState={ this.state } />
+        <WBSignIn path="/sign-in/:mode?" appState={ this.state } />
 
         <WBSignOut path='/sign-out' app={ this } />
 
diff --git a/frontend/src/js/page/wb-sign-in.js b/frontend/src/js/page/wb-sign-in.js
index cacc7f4..822de80 100644
--- a/frontend/src/js/page/wb-sign-in.js
+++ b/frontend/src/js/page/wb-sign-in.js
@@ -1,11 +1,47 @@
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
+import WBTabs from 'wb-tabs';
 import linkState from 'linkstate';
 import makeArvadosRequest from 'make-arvados-request';
 
 class WBSignIn extends Component {
-  onSubmit() {
+  constructor(...args) {
+    super(...args);
+    const search = new URLSearchParams(window.location.search);
+    this.state.arvHost = window.localStorage.arvHost;
+    this.state.arvToken = search.get('api_token');
+  }
+
+  componentDidMount() {
+    // const arvHost = window.localStorage.arvHost;
+    // const arvToken = search.get('api_token');
+    const { arvHost, arvToken } = this.state;
+    if (arvHost && arvToken) {
+      this.state.arvHost = arvHost;
+      this.state.arvToken = arvToken;
+      this.submitToken();
+    }
+  }
+
+  submit() {
+    const { mode } = this.props;
+    if (mode === 'token')
+      this.submitToken();
+    else if (!mode || mode === 'sso')
+      this.submitSingleSignOn();
+    else
+      throw Error('Unsupported mode');
+  }
+
+  submitSingleSignOn() {
+    const { arvHost } = this.state;
+    window.localStorage.arvHost = arvHost;
+    window.location = 'https://' + arvHost + '/login?return_to='
+      + encodeURIComponent(window.location.protocol + '//' + window.location.host + '/sign-in/token');
+  }
+
+  submitToken() {
     let { appState } = this.props;
     let { arvHost, arvToken } = this.state;
     let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/users/current');
@@ -23,14 +59,18 @@ class WBSignIn extends Component {
     });
   }
 
-  render({}, { arvHost, arvToken }) {
+  render({ mode }, { arvHost, arvToken }) {
     return (
       <div>
         <WBNavbar />
+
         <div class="container my-3">
           <div class="row justify-content-center">
             <div class="col-6">
               <h1>Sign In</h1>
+              <WBTabs class="my-3" tabs={ [ { name: 'SSO', isActive: (!mode || mode === 'sso') },
+                { name: 'Token', isActive: (mode === 'token') } ] }
+                onTabChanged={ t => route(t.name === 'Token' ? '/sign-in/token' : '/sign-in/sso') } />
               <form>
                 <div class="form-group">
                   <label for="arvHost">Arvados API Host</label>
@@ -39,15 +79,17 @@ class WBSignIn extends Component {
                     value={ arvHost }
                     onInput={ linkState(this, 'arvHost') } />
                 </div>
-                <div class="form-group">
-                  <label for="arvToken">Token</label>
-                  <input type="text" class="form-control" id="arvToken"
-                    placeholder="Enter Arvados API Token"
-                    value={ arvToken }
-                    onInput={ linkState(this, 'arvToken') } />
-                </div>
+                { mode === 'token' ? (
+                  <div class="form-group">
+                    <label for="arvToken">Token</label>
+                    <input type="text" class="form-control" id="arvToken"
+                      placeholder="Enter Arvados API Token"
+                      value={ arvToken }
+                      onInput={ linkState(this, 'arvToken') } />
+                  </div>
+                ) : null }
                 <button type="submit" class="btn btn-primary"
-                  onclick={ e => { e.preventDefault(); this.onSubmit(); } }>Submit</button>
+                  onclick={ e => { e.preventDefault(); this.submit(); } }>Submit</button>
               </form>
             </div>
           </div>
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index e2bc2f5..0ae016d 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -3,7 +3,7 @@ import { h, Component, VNode } from 'preact';
 class WBTabs extends Component {
   render({ tabs, onTabChanged }) {
     return (
-      <ul class="nav nav-tabs">
+      <ul class={ 'nav nav-tabs ' + this.props.class }>
         { tabs.map((t, idx) => {
           let name, isActive, isDisabled, onClick;
 

From cdaea262cfe6f0730f8acdb9920b894115869e3a Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 11 Mar 2020 11:22:21 +0100
Subject: [PATCH 108/170] Add project description during creation

---
 .../src/js/dialog/wb-new-project-dialog.js    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
index f5a897e..c1ffa3a 100644
--- a/frontend/src/js/dialog/wb-new-project-dialog.js
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -26,13 +26,16 @@ class WBNewProjectDialog extends Component {
     this.dialogRef.current.hide();
   }
 
-  render({ app }, { ownerUuid, newName, placeholderName, callback, inputId }) {
+  render({ app }, { ownerUuid, newName, placeholderName, callback, inputId,
+    projectDescription }) {
+
     const { arvHost, arvToken } = app.state;
     return (
       <WBDialog title="New Project" ref={ this.dialogRef } accept={ () => {
         const group = {
           'group_class': 'project',
           'name': newName || placeholderName,
+          'description': projectDescription || null,
           'owner_uuid': ownerUuid
         };
         makeArvadosRequest(arvHost, arvToken,
@@ -42,9 +45,18 @@ class WBNewProjectDialog extends Component {
         ).then(callback);
       } }>
         <div>
-          <input type="text" class="form-control" id={ inputId }
-            placeholder={ placeholderName }
-            value={ newName } onChange={ linkState(this, 'newName') } />
+          <div class="form-group">
+            <label for={ inputId }>Project Name</label>
+            <input type="text" class="form-control" id={ inputId }
+              placeholder={ placeholderName }
+              value={ newName } onChange={ linkState(this, 'newName') } />
+          </div>
+          <div class="form-group">
+            <label for="projectDescription">Project Description (optional)</label>
+            <input type="text" class="form-control" id="projectDescription"
+              placeholder="Project Description (optional)"
+              value={ projectDescription } onChange={ linkState(this, 'projectDescription') } />
+          </div>
         </div>
       </WBDialog>
     );

From 0d3df51dec1c1258e5222063f92d654e2f35858f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 11 Mar 2020 13:00:51 +0100
Subject: [PATCH 109/170] Added ability to edit
 project/collection/process/workflow description.

---
 .../src/js/component/wb-collection-listing.js | 11 ++--
 .../src/js/component/wb-process-listing.js    | 10 +++-
 .../src/js/component/wb-project-listing.js    | 10 ++--
 .../src/js/component/wb-workflow-listing.js   | 12 +++--
 .../js/dialog/wb-edit-description-dialog.js   | 52 +++++++++++++++++++
 frontend/src/js/page/wb-browse.js             | 15 ++++++
 6 files changed, 99 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-edit-description-dialog.js

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 663b11e..2e96671 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -22,7 +22,8 @@ class WBCollectionListing extends Component {
 
   prepareRows(items, ownerLookup) {
     let { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -34,7 +35,9 @@ class WBCollectionListing extends Component {
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['description'],
+      (<div>
+        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       (<div>
         <div>
           { ownerLookup[item.owner_uuid] ? (
@@ -153,7 +156,9 @@ class WBCollectionListing extends Component {
 
 WBCollectionListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'renderSharingButton': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBCollectionListing;
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 45e0e35..b4f9130 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -29,7 +29,9 @@ class WBProcessListing extends Component {
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
+
     return requests.map(item => {
       return ( [
         renderSelectionCell(item),
@@ -40,6 +42,9 @@ class WBProcessListing extends Component {
             </a> { renderRenameLink(item, () => this.fetchItems()) }
           </div>
           <div>{ item['uuid'] }</div>
+          <div class="mt-2">
+            { item.description } { renderEditDescription(item, () => this.fetchItems()) }
+          </div>
         </div>),
         ( <WBProcessState app={ app } process={ item } /> ),
         ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } /> ),
@@ -121,7 +126,8 @@ WBProcessListing.defaultProps = {
   renderRenameLink: () => null,
   renderDeleteButton: () => null,
   renderSelectionCell: () => null,
-  renderSharingButton: () => null
+  renderSharingButton: () => null,
+  renderEditDescription: () => null
 };
 
 export default WBProcessListing;
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index db05be9..e0bf9ee 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -18,7 +18,8 @@ class WBProjectListing extends Component {
 
   prepareRows(items) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -30,7 +31,9 @@ class WBProjectListing extends Component {
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['description'],
+      (<div>
+        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       item['owner_uuid'],
       (<div>
         { renderDeleteButton(item, () => this.fetchItems()) }
@@ -87,7 +90,8 @@ WBProjectListing.defaultProps = {
   'ownerUuid': null,
   'renderRenameLink': () => null,
   'renderDeleteButton': () => null,
-  'renderSelectionCell': () => null
+  'renderSelectionCell': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBProjectListing;
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index bd2bf37..84f2d14 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -22,7 +22,9 @@ class WBWorkflowListing extends Component {
 
   prepareRows(items, ownerLookup) {
     const { renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
+
     return items.map(item => [
       renderSelectionCell(item),
       (
@@ -35,7 +37,9 @@ class WBWorkflowListing extends Component {
           <div>{ item.uuid }</div>
         </div>
       ),
-      item.description,
+      (<div>
+         { item.description } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
       wbFormatDate(item.created_at),
       (<div>
@@ -97,7 +101,9 @@ class WBWorkflowListing extends Component {
 
 WBWorkflowListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'renderSharingButton': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBWorkflowListing;
diff --git a/frontend/src/js/dialog/wb-edit-description-dialog.js b/frontend/src/js/dialog/wb-edit-description-dialog.js
new file mode 100644
index 0000000..b2f920c
--- /dev/null
+++ b/frontend/src/js/dialog/wb-edit-description-dialog.js
@@ -0,0 +1,52 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import linkState from 'linkstate';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+class WBEditDescriptionDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+    this.state.inputId = uuid.v4();
+  }
+
+  show(item, callback) {
+    const { inputId } = this.state;
+    this.setState({
+      'item': item,
+      'newDescription': null,
+      'callback': callback || (() => {})
+    });
+    this.dialogRef.current.show();
+    $('#' + inputId).focus();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  render({ app }, { item, newDescription, callback, inputId }) {
+    const { arvHost, arvToken } = app.state;
+    return (
+      <WBDialog title="Edit Description" ref={ this.dialogRef } accept={ () =>
+          makeArvadosRequest(arvHost, arvToken,
+            '/arvados/v1/' + arvadosTypeName(item.uuid) +
+            's/' + item.uuid, {
+              method: 'PUT',
+              data: JSON.stringify({
+                description: newDescription || null
+              })
+            }).then(callback)
+      }>
+        <div>
+          <input type="text" class="form-control" id={ inputId }
+            placeholder={ (item && item.description) ? item.description : 'Type new description here' }
+            value={ newDescription } onChange={ linkState(this, 'newDescription') } />
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+export default WBEditDescriptionDialog;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index d4c2dc5..da81311 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -11,6 +11,7 @@ import WBWorkflowListing from 'wb-workflow-listing';
 import WBRenameDialog from 'wb-rename-dialog';
 import WBDeleteDialog from 'wb-delete-dialog';
 import WBNewProjectDialog from 'wb-new-project-dialog';
+import WBEditDescriptionDialog from 'wb-edit-description-dialog';
 import wbMoveObject from 'wb-move-object';
 import wbCopyCollection from 'wb-copy-collection';
 import arvadosTypeName from 'arvados-type-name';
@@ -45,6 +46,7 @@ class WBBrowse extends Component {
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
     this.projectTabsRef = createRef();
+    this.editDescriptionDialogRef = createRef();
     this.state.selected = {};
   }
 
@@ -85,6 +87,16 @@ class WBBrowse extends Component {
     );
   }
 
+  renderEditDescription(item, callback) {
+    return (
+      <a href="#" title="Edit description" onclick={ e => { e.preventDefault();
+        this.editDescriptionDialogRef.current.show(item, callback); } }>
+
+        <i class="fas fa-edit text-secondary"></i>
+      </a>
+    );
+  }
+
   renderDeleteButton(item, callback) {
     return (
       <button class="btn btn-outline-danger m-1" title="Delete"
@@ -148,6 +160,7 @@ class WBBrowse extends Component {
 
     const commonProps = {
       renderRenameLink: (it, cb) => this.renderRenameLink(it, cb),
+      renderEditDescription: (it, cb) => this.renderEditDescription(it, cb),
       renderDeleteButton: (it, cb) => this.renderDeleteButton(it, cb),
       renderSelectionCell: it => this.renderSelectionCell(it),
       renderSharingButton: it => this.renderSharingButton(it),
@@ -167,6 +180,8 @@ class WBBrowse extends Component {
 
         <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
 
+        <WBEditDescriptionDialog app={ app } ref={ this.editDescriptionDialogRef } />
+
         <WBNavbarCommon app={ app }
           activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
             (!ownerUuid) ? 'all-projects' :

From 9268bcba842722c2a956a917b144a239defd926b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 11 Mar 2020 13:54:23 +0100
Subject: [PATCH 110/170] Started working on using default values in workflows.

---
 .../src/js/page/wb-launch-workflow-page.js    | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 322ccf2..09dacc1 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -113,12 +113,19 @@ class WBLaunchWorkflowPage extends Component {
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/workflows/' + workflowUuid);
-    prom = prom.then(xhr => this.setState({
-      'workflow': xhr.response,
-      'workflowDefinition': parseDefinition(xhr.response.definition),
-      'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
-      'defaultProcessDescription': xhr.response.description
-    }));
+    prom = prom.then(xhr => {
+        const def = parseDefinition(xhr.response.definition);
+        const inputs = {};
+        const main = def['$graph'].find(a => (a.id === '#main'));
+        main.inputs.map(a => (inputs[a.id] = JSON.stringify(a.default)));
+        this.setState({
+        'workflow': xhr.response,
+        'workflowDefinition': def,
+        'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
+        'defaultProcessDescription': xhr.response.description,
+        inputs
+      });
+    });
   }
 
   renderInput(inputSpec) {

From 9c1ed80b082d4cf01c6875b7ae84ef4e8bdd8547 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 12 Mar 2020 19:20:56 +0100
Subject: [PATCH 111/170] Default values in workflows seem to work.

---
 frontend/src/js/page/wb-launch-workflow-page.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 09dacc1..0878a65 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -58,6 +58,12 @@ function uuidsToCwl(obj, isFile) {
   throw Error('Expected Arvados path or array of paths');
 }
 
+function parseKeepRef(value) {
+  if (typeof(value) === 'object' && 'location' in value && value.location.startsWith('keep:'))
+    return value.location.substr(5);
+  return value;
+}
+
 class WBPathDisplay extends Component {
   fetchData() {
     const { app, path } = this.props;
@@ -72,6 +78,7 @@ class WBPathDisplay extends Component {
       item: xhr.response,
       tail: path.substr(m[0].length)
     }));
+    prom = prom.catch(() => this.setState({ 'error': 'Cannot load' }));
   }
 
   componentDidMount() {
@@ -83,7 +90,10 @@ class WBPathDisplay extends Component {
     this.fetchData();
   }
 
-  render({}, { item, tail }) {
+  render({}, { item, tail, error }) {
+    if (error)
+      return error;
+
     if (!item)
       return 'Loading...';
 
@@ -180,12 +190,12 @@ class WBLaunchWorkflowPage extends Component {
             <ul class="mb-0">
               { value.map(path => (
                 <li>
-                  <WBPathDisplay app={ app } path={ path } />
+                  <WBPathDisplay app={ app } path={ parseKeepRef(path) } />
                 </li>
               )) }
             </ul>
         ) : (
-          <WBPathDisplay app={ app } path={ value } />
+          <WBPathDisplay app={ app } path={ parseKeepRef(value) } />
         ) : null }
       </div>
     );

From 39a1eb82fa5017579d0b7f2bc5c615f6649fdd3f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 12 Mar 2020 19:31:04 +0100
Subject: [PATCH 112/170] Support for viewing .nii.gz

---
 frontend/src/js/component/wb-collection-content.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 7c0d301..66f6042 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -15,6 +15,14 @@ function encodeURIComponentIncludingDots(s) {
   return encodeURIComponent(s).replace('.', '%2E');
 }
 
+function endsWith(what, endings) {
+  if (typeof(endings) === 'string')
+    return what.endsWith(endings);
+  if (endings instanceof Array)
+    return endings.map(a => what.endsWith(a)).reduce((a, b) => (a || b));
+  throw Error('Expected second argument to be either a string or an array');
+}
+
 class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
@@ -143,7 +151,7 @@ class WBCollectionContent extends Component {
                   alert('Not implemented.')
                 } }><i class="far fa-eye"></i></button>
 
-              { item[1].toLowerCase().endsWith('.nii') ? (
+              { endsWith(item[1].toLowerCase(), ['.nii', '.nii.gz']) ? (
                 <button class="btn btn-outline-primary mx-1" title="View Image"
                   onclick={ () => manifestWorker.postMessage([ 'getFile',
                       '.' + collectionPath + '/' + item[1] ]).then(e => {
@@ -154,7 +162,7 @@ class WBCollectionContent extends Component {
                       const blocksBlobUrl = URL.createObjectURL(blob);
                       window.open('/image-viewer/' + encodeURIComponent(blocksBlobUrl), '_blank');
 
-                    }) }><i class="far fa-eye"></i></button>
+                    }) }><i class="fas fa-image"></i></button>
               ) : null }
             </div>
           ) : null)

From de3985b007710159152edf0887adf7bc595f4c78 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 12 Mar 2020 19:40:11 +0100
Subject: [PATCH 113/170] Pass undefined workflow params as null.

---
 frontend/src/js/page/wb-launch-workflow-page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 0878a65..22f668a 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -215,7 +215,7 @@ class WBLaunchWorkflowPage extends Component {
         const { isFile } = inputSpecInfo(main.inputs.find(a => (a.id === k)));
         val = uuidsToCwl(val, isFile);
         k = k.split('/').slice(1).join('/');
-        inputs[k] = val;
+        inputs[k] = (val === undefined ? null : val);
       } catch (exc) {
         errors.push('Error parsing ' + k + ': ' + exc.message);
       }

From 4217a270c2e3bbf9d478ee3ef0fe96a28876812d Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 31 Mar 2020 19:47:17 +0200
Subject: [PATCH 114/170] Support [File, Directory] syntax in workflow input
 type spec

---
 backend/srv.py                                |  2 +-
 .../wb-browse-dialog-collection-content.js    |  6 ++--
 .../wb-browse-dialog-collection-list.js       |  2 +-
 .../dialog/wb-browse-dialog-project-list.js   |  6 ++--
 .../src/js/page/wb-launch-workflow-page.js    | 28 +++++++++++--------
 5 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/backend/srv.py b/backend/srv.py
index 711e099..b1bae77 100644
--- a/backend/srv.py
+++ b/backend/srv.py
@@ -9,7 +9,7 @@ class RequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
         SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
         # RequestHandler, self).do_GET()
 
-httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4443), RequestHandler)
+httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4445), RequestHandler)
 httpd.socket = ssl.wrap_socket (httpd.socket, certfile='/pstore/home/adaszews/workspace/arvados-workbench-advanced/backend/server.pem', server_side=True)
 httpd.serve_forever()
 
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
index e2a1d98..b7131d5 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
@@ -73,9 +73,9 @@ class WBBrowseDialogCollectionContent extends Component {
     const numPages = Math.ceil(listing.length / itemsPerPage);
     const rows = listing.slice(page * itemsPerPage,
       (page + 1) * itemsPerPage).map(it => [
-      ((it[0] === 'd' && selectWhat === 'directory') ||
-        (it[0] === 'f' && selectWhat === 'file')) ?
-        makeSelectionCell(collectionUuid + collectionPath + '/' + it[1]) :
+      ((it[0] === 'd' && [].concat(selectWhat).indexOf('directory') !== -1) ||
+        (it[0] === 'f' && [].concat(selectWhat).indexOf('file') !== -1)) ?
+        makeSelectionCell(collectionUuid + collectionPath + '/' + it[1] + (it[0] === 'd' ? '/' : '')) :
         null,
       it[0] === 'd' ? (
         <a href="#" onclick={ e => {
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index 9b26ab6..0536cb1 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -21,7 +21,7 @@ class WBBrowseDialogCollectionList extends Component {
   prepareRows(items) {
     const { navigate, selectWhat, makeSelectionCell } = this.props;
     return items.map(it => [
-      (selectWhat === 'directory' ? makeSelectionCell(it.uuid) : null),
+      ([].concat(selectWhat).indexOf('directory') !== -1 ? makeSelectionCell(it.uuid + '/') : null),
       (
         <a href="#" onclick={ e => { e.preventDefault();
           navigate('/browse-dialog/content/' + it.uuid + '////'); } }>{ it.name }</a>
diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index fe0294a..641db66 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -21,7 +21,7 @@ class WBBrowseDialogProjectList extends Component {
 
   prepareRows(items) {
     const { navigate, selectWhat, makeSelectionCell } = this.props;
-    return items.map(it => (selectWhat === 'owner' ? [ makeSelectionCell(it.uuid, 'project') ] : []).concat([
+    return items.map(it => ([].concat(selectWhat).indexOf('owner') !== -1 ? [ makeSelectionCell(it.uuid, 'project') ] : []).concat([
       (
         <a href="#" onclick={ e => {
           e.preventDefault();
@@ -86,8 +86,8 @@ class WBBrowseDialogProjectList extends Component {
   render({ app, navigate, page, selectWhat }, { numPages, rows }) {
     return (
       <div>
-        <WBTable columns={ (selectWhat === 'owner' ? [''] : []).concat(['Name', 'UUID']) }
-          headerClasses={ selectWhat === 'owner' ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
+        <WBTable columns={ ([].concat(selectWhat).indexOf('owner') !== -1 ? [''] : []).concat(['Name', 'UUID']) }
+          headerClasses={ [].concat(selectWhat).indexOf('owner') !== -1 ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages } activePage={ page }
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 22f668a..60720ed 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -25,10 +25,10 @@ function encodeURIComponentIncludingDots(s) {
 
 function inputSpecInfo(inputSpec) {
   const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
-    (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));
+    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('File') !== -1));
 
   const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
-    (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));
+    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('Directory') !== -1));
 
   const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
     inputSpec.type.type === 'array');
@@ -36,11 +36,11 @@ function inputSpecInfo(inputSpec) {
   return { isFile, isDirectory, isArray };
 }
 
-function uuidsToCwl(obj, isFile) {
+function uuidsToCwl(obj) {
   if (obj instanceof Array) {
-    const res = {};
+    const res = [];
     for (let k in obj) {
-        res[k] = uuidsToCwl(obj[k], isFile);
+        res[k] = uuidsToCwl(obj[k]);
     }
     return res;
   }
@@ -49,9 +49,11 @@ function uuidsToCwl(obj, isFile) {
     (/^[0-9a-z]{5}-[0-9a-z]{5}-[0-9a-z]{15}/.exec(obj) ||
       /^[0-9a-f]{32}\+[0-9]+/.exec(obj))) {
 
+    const isDirectory = obj.endsWith('/');
+
     return {
-      'class': (isFile ? 'File' : 'Directory'),
-      'location': 'keep:' + obj
+      'class': (isDirectory ? 'Directory' : 'File'),
+      'location': 'keep:' + (isDirectory ? obj.substr(0, obj.length - 1) : obj)
     };
   }
 
@@ -66,8 +68,11 @@ function parseKeepRef(value) {
 
 class WBPathDisplay extends Component {
   fetchData() {
-    const { app, path } = this.props;
+    const { app } = this.props;
     const { arvHost, arvToken } = app.state;
+    let { path } = this.props;
+    if (path.endsWith('/'))
+      path = path.substr(0, path.length - 1);
     let m;
     if (m = /^[0-9a-f]{32}\+[0-9]+/.exec(path));
     else if (m = /^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(path));
@@ -157,7 +162,9 @@ class WBLaunchWorkflowPage extends Component {
       <button class="btn btn-outline-primary"
         onclick={ e => {
           e.preventDefault();
-          this.browseDialogRef.current.show(isFile ? 'file' : 'directory', isArray,
+          this.browseDialogRef.current.show(
+            [].concat(isFile ? 'file' : []).concat(isDirectory ? 'directory' : []),
+            isArray,
             v => {
               this.state.inputs[inputSpec.id] = JSON.stringify(v);
               this.setState({});
@@ -212,8 +219,7 @@ class WBLaunchWorkflowPage extends Component {
     for (let k in this.state.inputs) {
       try {
         let val = jsyaml.safeLoad(this.state.inputs[k]);
-        const { isFile } = inputSpecInfo(main.inputs.find(a => (a.id === k)));
-        val = uuidsToCwl(val, isFile);
+        val = uuidsToCwl(val);
         k = k.split('/').slice(1).join('/');
         inputs[k] = (val === undefined ? null : val);
       } catch (exc) {

From f318afe8bfd5170f155b736d51f1cd5f6cdb4ad0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 1 Apr 2020 17:37:38 +0200
Subject: [PATCH 115/170] Started implementing WBProcessDashboard.

---
 .../src/js/component/wb-process-dashboard.js  | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/js/component/wb-process-dashboard.js

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
new file mode 100644
index 0000000..561fa02
--- /dev/null
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+function getAll(makeRequest) {
+  let prom = makeRequest(0);
+  prom = prom.then(xhr => {
+    const { items, limit, items_available } = xhr.response;
+    let res = [].concat(items);
+    let prom_1 = new Promise(accept => accept());
+    for (let ofs = limit; ofs < items_available; ofs += limit) {
+      prom_1 = prom_1.then(() => makeRequest(ofs));
+      prom_1 = prom_1.then(xhr_1 => {
+        res = res.concat(xhr_1.response.items);
+      });
+    }
+    prom_1 = prom_1.then(() => res);
+    return prom_1;
+  });
+  return prom;
+}
+
+class WBProcessDashboard extends Component {
+  fetchData() {
+    const { app, uuid } = this.props;
+    const { arvHost, arvToken } = app.state;
+    let prom = new Promise(accept => accept());
+    if (uuid) {
+      prom = prom.then(() => {
+        return makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/container_requests/' + encodeURIComponent(uuid));
+      });
+      prom = prom.then(xhr => {
+        const cr = xhr.response;
+        return makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/containers/' + encodeURIComponent(cr.container_uuid));
+      });
+      prom = prom.then(xhr => {
+        const c = xhr.response;
+        const filters = [ [ 'requesting_container_uuid', '=', c.uuid ] ];
+        return makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/container_requests?filters=' +
+          encodeURIComponent(JSON.stringify(filters)));
+      });
+    } else {
+      prom = prom.then(() => {
+        return makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/container_requests');
+      });
+    }
+
+  }
+
+  render() {
+
+  }
+}

From cefa4399c94f1226807301cc89a3e3b47aa757c2 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 1 Apr 2020 21:33:13 +0200
Subject: [PATCH 116/170] WBProcessDashboard seems to mostly work.

---
 .../src/js/component/wb-process-dashboard.js  | 107 +++++++++++++++---
 frontend/src/js/page/wb-process-view.js       |   4 +
 2 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index 561fa02..bc02f24 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
 
 function getAll(makeRequest) {
@@ -19,38 +20,114 @@ function getAll(makeRequest) {
   return prom;
 }
 
+function determineState(containerRequest) {
+  const cr = containerRequest;
+  const c = cr.container;
+  if (cr.state === 'Uncommitted' || !c || c.state === 'Queued' || c.state === 'Locked')
+    return 'Pending';
+  if (c.state === 'Running')
+    return 'Running';
+  if (c.state === 'Complete' && c.exit_code === 0)
+    return 'Complete';
+  if (c.state === 'Complete' && c.exit_code !== 0)
+    return 'Failed';
+  if (c.state === 'Cancelled')
+    return 'Cancelled';
+}
+
 class WBProcessDashboard extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = Array(5).fill(Array(6).fill('-'));
+  }
+
   fetchData() {
-    const { app, uuid } = this.props;
+    const { app, parentProcessUuid } = this.props;
     const { arvHost, arvToken } = app.state;
     let prom = new Promise(accept => accept());
-    if (uuid) {
+    if (parentProcessUuid) {
       prom = prom.then(() => {
         return makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/container_requests/' + encodeURIComponent(uuid));
+          '/arvados/v1/container_requests/' + encodeURIComponent(parentProcessUuid));
       });
       prom = prom.then(xhr => {
         const cr = xhr.response;
-        return makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/containers/' + encodeURIComponent(cr.container_uuid));
-      });
-      prom = prom.then(xhr => {
-        const c = xhr.response;
-        const filters = [ [ 'requesting_container_uuid', '=', c.uuid ] ];
-        return makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/container_requests?filters=' +
-          encodeURIComponent(JSON.stringify(filters)));
+        if (!cr.container_uuid)
+          return [];
+        const filters = [ [ 'requesting_container_uuid', '=', cr.container_uuid ] ];
+        return getAll(ofs =>
+          makeArvadosRequest(arvHost, arvToken,
+            '/arvados/v1/container_requests?filters=' +
+            encodeURIComponent(JSON.stringify(filters)) +
+            '&order=' + encodeURIComponent(['uuid asc']) +
+            '&offset=' + ofs));
       });
     } else {
       prom = prom.then(() => {
-        return makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/container_requests');
+        return getAll(ofs => makeArvadosRequest(arvHost, arvToken,
+          '/arvados/v1/container_requests?order=' +
+          encodeURIComponent(['uuid asc']) + '&offset=' + ofs));
       });
     }
+    let crlist;
+    prom = prom.then(crl => {
+      crlist = crl;
+      const uuids = crlist.map(a => a.container_uuid);
+      // uuids = uuids.slice(0, 2);
+      // crlist.map(a => ( crdict[a.uuid] = a));
+      const filters = [ [ 'uuid', 'in', uuids ] ];
+      return getAll(ofs => makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/containers?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+        '&offset=' + ofs));
+    });
+    prom = prom.then(cl => {
+      cl.map(a => (crlist.find(b => (b.container_uuid === a.uuid)).container = a));
+      crlist.map(a => (a.wb_state = determineState(a)));
+      const stats = {};
+      for (let state in { 'Pending': 1, 'Running': 1, 'Complete': 1, 'Failed': 1, 'Cancelled': 1 }) {
+        const f = crlist.filter(a => (a.wb_state === state));
+        stats[state] = { 'Count': f.length };
+        if (state === 'Pending')
+          f.map(a => (a.wb_wait_time = (new Date() - new Date(a.created_at)) / 3.6e6));
+        else
+          f.map(a => (a.wb_wait_time = (new Date(a.container.started_at) - new Date(a.created_at)) / 3.6e6));
+        f.sort((a, b) => (a.wb_wait_time - b.wb_wait_time));
+        stats[state]['Shortest Wait Time'] = f.length ? (f[0].wb_wait_time.toFixed(2) + ' hours') : '-';
+        stats[state]['Longest Wait Time'] = f.length ? (f[f.length - 1].wb_wait_time.toFixed(2) + ' hours') : '-';
+        if (state === 'Pending')
+          f.map(a => (a.wb_run_time = 0));
+        else if (state === 'Running')
+          f.map(a => (a.wb_run_time = (new Date() - new Date(a.container.started_at)) / 3.6e6));
+        else
+          f.map(a => (a.wb_run_time = Math.max(0, new Date(a.container.finished_at) - new Date(a.container.started_at)) / 3.6e6));
+        f.sort((a, b) => (a.wb_run_time - b.wb_run_time));
+        stats[state]['Shortest Run Time'] = f.length ? (f[0].wb_run_time.toFixed(2) + ' hours') : '-';
+        stats[state]['Longest Run Time'] = f.length ? (f[f.length - 1].wb_run_time.toFixed(2) + ' hours') : '-';
+      }
+      const rows = [];
+      for (let st in { 'Count': 1, 'Shortest Wait Time': 1, 'Longest Wait Time': 1,
+        'Shortest Run Time': 1, 'Longest Run Time': 1}) {
+        rows.push([st].concat(['Pending', 'Running', 'Complete', 'Failed', 'Cancelled'].map(a => stats[a][st])));
+      }
+      this.setState({ rows });
+    });
+  }
 
+  componentDidMount() {
+    this.fetchData();
   }
 
-  render() {
+  /* componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    fetchData();
+  } */
 
+  render({}, { rows }) {
+    return (
+      <WBTable columns={ [ '', 'Pending', 'Running', 'Complete', 'Failed', 'Cancelled' ] }
+        rows={ rows } verticalHeader={ true } />
+    );
   }
 }
+
+export default WBProcessDashboard;
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 7c635b8..0ff4b3f 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -9,6 +9,7 @@ import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerRequestFields from 'wb-container-request-fields';
 import WBProcessListing from 'wb-process-listing';
+import WBProcessDashboard from 'wb-process-dashboard';
 import wbFetchObjects from 'wb-fetch-objects';
 
 class WBProcessView extends Component {
@@ -114,6 +115,9 @@ class WBProcessView extends Component {
           This is the process view for { uuid }
         </div>
 
+        <h2>Children Dashboard</h2>
+        <WBProcessDashboard app={ app } parentProcessUuid={ uuid } />
+
         <h2>Common Fields</h2>
         <WBCommonFields app={ app } uuid={ uuid } />
 

From 17a712bccedbb5f65e944f2817e58f58f1bc6853 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 1 Apr 2020 21:51:10 +0200
Subject: [PATCH 117/170] Cleaning up WBProcessView.

---
 .../src/js/component/wb-process-dashboard.js  |  8 ++-
 frontend/src/js/page/wb-process-view.js       | 63 +------------------
 2 files changed, 6 insertions(+), 65 deletions(-)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index bc02f24..abdf85b 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -23,6 +23,8 @@ function getAll(makeRequest) {
 function determineState(containerRequest) {
   const cr = containerRequest;
   const c = cr.container;
+  if (cr.state !== 'Uncommitted' && cr.priority === 0)
+    return 'Cancelled';
   if (cr.state === 'Uncommitted' || !c || c.state === 'Queued' || c.state === 'Locked')
     return 'Pending';
   if (c.state === 'Running')
@@ -90,7 +92,7 @@ class WBProcessDashboard extends Component {
         if (state === 'Pending')
           f.map(a => (a.wb_wait_time = (new Date() - new Date(a.created_at)) / 3.6e6));
         else
-          f.map(a => (a.wb_wait_time = (new Date(a.container.started_at) - new Date(a.created_at)) / 3.6e6));
+          f.map(a => (a.wb_wait_time = Math.max(0, (a.container ? new Date(a.container.started_at) : new Date(0)) - new Date(a.created_at)) / 3.6e6));
         f.sort((a, b) => (a.wb_wait_time - b.wb_wait_time));
         stats[state]['Shortest Wait Time'] = f.length ? (f[0].wb_wait_time.toFixed(2) + ' hours') : '-';
         stats[state]['Longest Wait Time'] = f.length ? (f[f.length - 1].wb_wait_time.toFixed(2) + ' hours') : '-';
@@ -99,7 +101,7 @@ class WBProcessDashboard extends Component {
         else if (state === 'Running')
           f.map(a => (a.wb_run_time = (new Date() - new Date(a.container.started_at)) / 3.6e6));
         else
-          f.map(a => (a.wb_run_time = Math.max(0, new Date(a.container.finished_at) - new Date(a.container.started_at)) / 3.6e6));
+          f.map(a => (a.wb_run_time = Math.max(0, a.container ? new Date(a.container.finished_at) - new Date(a.container.started_at) : 0) / 3.6e6));
         f.sort((a, b) => (a.wb_run_time - b.wb_run_time));
         stats[state]['Shortest Run Time'] = f.length ? (f[0].wb_run_time.toFixed(2) + ' hours') : '-';
         stats[state]['Longest Run Time'] = f.length ? (f[f.length - 1].wb_run_time.toFixed(2) + ' hours') : '-';
@@ -124,7 +126,7 @@ class WBProcessDashboard extends Component {
 
   render({}, { rows }) {
     return (
-      <WBTable columns={ [ '', 'Pending', 'Running', 'Complete', 'Failed', 'Cancelled' ] }
+      <WBTable columns={ [ 'State', 'Pending', 'Running', 'Complete', 'Failed', 'Cancelled' ] }
         rows={ rows } verticalHeader={ true } />
     );
   }
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index 0ff4b3f..f89f712 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -2,15 +2,10 @@ import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import makeArvadosRequest from 'make-arvados-request';
-import detectUuids from 'detect-uuids';
-import arvadosTypeName from 'arvados-type-name';
-import urlForObject from 'url-for-object';
-import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerRequestFields from 'wb-container-request-fields';
 import WBProcessListing from 'wb-process-listing';
 import WBProcessDashboard from 'wb-process-dashboard';
-import wbFetchObjects from 'wb-fetch-objects';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -39,55 +34,8 @@ class WBProcessView extends Component {
         return prom_1;
       }
     });
-    //prom = prom.then(xhr => (cont = xhr.response));
     prom = prom.then(() => {
-      let hashes = detectHashes([ req, cont ]);
-      let filters = [
-        [ 'portable_data_hash', 'in', hashes ]
-      ];
-      return makeArvadosRequest(arvHost, arvToken,
-        '/arvados/v1/collections?filters=' +
-        encodeURIComponent(JSON.stringify(filters)));
-    });
-    prom = prom.then(xhr => {
-      let colUuids = xhr.response['items'].map(item => item.uuid);
-      let uuids = detectUuids([ req, cont ]);
-      let dict = {};
-      colUuids.map(u => (dict[u] = true));
-      uuids.map(u => (dict[u] = true));
-      return Object.keys(dict);
-    });
-    prom = prom.then(uuids => wbFetchObjects(arvHost, arvToken, uuids));
-    /* prom = prom.then(() => {
-      // let uuids = detectUuids([ req, cont ]);
-      let objectTypes = uuids.map(u => arvadosTypeName(u) + 's');
-      //objectTypes = objectTypes.filter(ot => ot);
-      //objectTypes = objectTypes.map(ot => ot + 's');
-      let objQueries = {};
-      objectTypes.map(t => (objQueries[t] = []));
-      uuids.map((u, idx) => (objQueries[objectTypes[idx]].push(u)));
-      let prom_1 = new Promise(accept => accept());
-      let objects = [];
-      // delete objQueries['users'];
-      delete objQueries['api_clients'];
-      for (let k in objQueries) {
-        let filters = [
-          ['uuid', 'in', objQueries[k]]
-        ];
-        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
-          '/arvados/v1/' + k + '?filters=' +
-          encodeURIComponent(JSON.stringify(filters))));
-        prom_1 = prom_1.then(xhr => (objects = objects.concat(xhr.response['items'])));
-      }
-      prom_1 = prom_1.then(() => objects);
-      return prom_1;
-    }); */
-    prom = prom.then(objects => {
-      // let objDict = {};
-      // objects.map(o => (objDict[o['uuid']] = o));
-      let urls = Object.values(objects).map(o => urlForObject(o));
       this.setState({
-        'objectUrls': urls,
         'request': req,
         'container': cont
       });
@@ -104,7 +52,7 @@ class WBProcessView extends Component {
     this.fetchData();
   }
 
-  render({ app, uuid, page }, { objectUrls, container }) {
+  render({ app, uuid, page }, { container }) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -132,15 +80,6 @@ class WBProcessView extends Component {
           itemsPerPage="20"
           activePage={ Number(page || 0) }
           getPageUrl={ page => this.getUrl({ page }) } />
-
-        <div>
-          <a href="/browse">Click here</a>
-        </div>
-        <ul>
-          { objectUrls.map(url => (
-            <li><a href={ url }>{ url }</a></li>
-          )) }
-        </ul>
       </div>
     );
   }

From 3d026c072e1b407977a6fcf4629d28ffb4df4092 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 2 Apr 2020 11:06:43 +0200
Subject: [PATCH 118/170] WBProcessDashboard now fetches data when
 parentProcessUuid changes.

---
 frontend/src/js/component/wb-process-dashboard.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index abdf85b..1b83390 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -119,10 +119,13 @@ class WBProcessDashboard extends Component {
     this.fetchData();
   }
 
-  /* componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.parentProcessUuid === this.props.parentProcessUuid)
+      return;
+
     this.props = nextProps;
-    fetchData();
-  } */
+    this.fetchData();
+  }
 
   render({}, { rows }) {
     return (

From dff95fab2dd22c72e996a4d06b6423d2f044c809 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 2 Apr 2020 17:15:54 +0200
Subject: [PATCH 119/170] Add ability to cancel container_requests

---
 frontend/src/js/component/wb-process-dashboard.js |  1 +
 frontend/src/js/component/wb-process-listing.js   | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index 1b83390..0ee047d 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -80,6 +80,7 @@ class WBProcessDashboard extends Component {
       const filters = [ [ 'uuid', 'in', uuids ] ];
       return getAll(ofs => makeArvadosRequest(arvHost, arvToken,
         '/arvados/v1/containers?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+        '&order=' + encodeURIComponent(JSON.stringify([ 'uuid asc' ])) +
         '&offset=' + ofs));
     });
     prom = prom.then(cl => {
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index b4f9130..c2961e6 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -27,6 +27,18 @@ class WBProcessListing extends Component {
     this.fetchItems();
   }
 
+  cancelProcess(uuid) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests/' + encodeURIComponent(uuid),
+      { method: 'PUT', data: JSON.stringify({ priority: 0 }) });
+    prom = prom.then(() => {
+      this.setState({ rows: maskRows(this.state.rows) });
+      this.fetchItems();
+    });
+  }
+
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { app, renderRenameLink, renderDeleteButton,
       renderSelectionCell, renderSharingButton,
@@ -51,6 +63,9 @@ class WBProcessListing extends Component {
         wbFormatDate(item['created_at']),
         ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } /> ),
         (<div>
+          <button class="btn btn-outline-warning m-1" onclick={ () => this.cancelProcess(item.uuid) }>
+            <i class="fas fa-stop-circle"></i>
+          </button>
           { renderDeleteButton(item, () => this.fetchItems()) }
           { renderSharingButton(item) }
         </div>)

From 9865a725c031f2673f311ff95bd07e51b3bf1b0a Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 3 Apr 2020 12:18:52 +0200
Subject: [PATCH 120/170] Order fix in WBProcessDashboard.

---
 frontend/src/js/component/wb-process-dashboard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index 0ee047d..4ca2513 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -61,14 +61,14 @@ class WBProcessDashboard extends Component {
           makeArvadosRequest(arvHost, arvToken,
             '/arvados/v1/container_requests?filters=' +
             encodeURIComponent(JSON.stringify(filters)) +
-            '&order=' + encodeURIComponent(['uuid asc']) +
+            '&order=' + encodeURIComponent(JSON.stringify(['uuid asc'])) +
             '&offset=' + ofs));
       });
     } else {
       prom = prom.then(() => {
         return getAll(ofs => makeArvadosRequest(arvHost, arvToken,
           '/arvados/v1/container_requests?order=' +
-          encodeURIComponent(['uuid asc']) + '&offset=' + ofs));
+          encodeURIComponent(JSON.stringify(['uuid asc'])) + '&offset=' + ofs));
       });
     }
     let crlist;

From cfdbb532f79bdf153eb7d08ff4124ac90f8d7089 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 3 Apr 2020 12:45:22 +0200
Subject: [PATCH 121/170] Added lazy mode to WBNameAndUuid and WBProcessState.

---
 frontend/src/js/component/wb-name-and-uuid.js | 23 +++++++++++++++----
 .../src/js/component/wb-process-listing.js    |  6 ++---
 frontend/src/js/component/wb-process-state.js | 20 ++++++++++++----
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 732df7f..2c45b57 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -76,17 +76,26 @@ class WBNameAndUuid extends Component {
   }
 
   componentDidMount() {
-    this.fetchData();
+    if (this.props.lazy)
+      ;//this.setState({ item: { uuid: this.props.uuid }});
+    else
+      this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.uuid !== nextProps.uuid) {
+    if (this.props.uuid === nextProps.uuid)
+      return;
+
+    if (nextProps.lazy) {
+      this.setState({ item: { uuid: nextProps.uuid }});
+
+    } else {
       this.props = nextProps;
       this.fetchData();
     }
   }
 
-  render({ uuid, onLinkClicked }, { error, item }) {
+  render({ uuid, onLinkClicked, lazy }, { error, item }) {
     if (!uuid)
       return (
         <div><i>{ String(uuid) }</i></div>
@@ -97,10 +106,14 @@ class WBNameAndUuid extends Component {
         <div>
           { error ? error : (item ? (
             <a href={ urlForObject(item) } onclick={ onLinkClicked }>{ arvadosObjectName(item) }</a>
-          ) : 'Loading...') }
+          ) : (lazy ? null : 'Loading...')) }
         </div>
         <div>
-          { uuid }
+          { uuid } { (lazy && !item) ? (
+            <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+              <i class="fas fa-search"></i>
+            </a>
+          ) : null }
         </div>
       </div>
     );
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index c2961e6..45e8b8a 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -58,10 +58,10 @@ class WBProcessListing extends Component {
             { item.description } { renderEditDescription(item, () => this.fetchItems()) }
           </div>
         </div>),
-        ( <WBProcessState app={ app } process={ item } /> ),
-        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } /> ),
+        ( <WBProcessState app={ app } process={ item } lazy={ true } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
         wbFormatDate(item['created_at']),
-        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } lazy={ true } /> ),
         (<div>
           <button class="btn btn-outline-warning m-1" onclick={ () => this.cancelProcess(item.uuid) }>
             <i class="fas fa-stop-circle"></i>
diff --git a/frontend/src/js/component/wb-process-state.js b/frontend/src/js/component/wb-process-state.js
index 27387e0..b334ae1 100644
--- a/frontend/src/js/component/wb-process-state.js
+++ b/frontend/src/js/component/wb-process-state.js
@@ -3,12 +3,18 @@ import makeArvadosRequest from 'make-arvados-request';
 
 class WBProcessState extends Component {
   componentDidMount() {
-    this.fetchData();
+    if (!this.props.lazy)
+      this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
-    this.props = nextProps;
-    this.fetchData();
+    if (this.props.lazy) {
+      this.setState({ container: null, apiError: null });
+
+    } else {
+      this.props = nextProps;
+      this.fetchData();
+    }
   }
 
   fetchData() {
@@ -24,7 +30,7 @@ class WBProcessState extends Component {
     prom = prom.catch(() => this.setState({ 'apiError': 'Failed to fetch container' }));
   }
 
-  render({ process }, { container, apiError }) {
+  render({ process, lazy }, { container, apiError }) {
     const runtimeStatus = container ? container.runtime_status : null;
     const error = runtimeStatus ? runtimeStatus.error : null;
     const warning = runtimeStatus ? runtimeStatus.warning : null;
@@ -38,7 +44,11 @@ class WBProcessState extends Component {
         { error ? [" / ", <a href={ '/container/' + container.uuid }
           title={ error }>E</a> ] : null }
         { warning ? [ " / ", <a href={ '/container/' + container.uuid }
-          title={ warning }>W</a> ] : null }
+          title={ warning }>W</a> ] : null } { lazy && !container && !apiError ? (
+          <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+            <i class="fas fa-search"></i>
+          </a>
+        ) : null }
       </div>
     );
   }

From 5078d35f5b5062f11fff0b41535ca4c06ee1e9ca Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 3 Apr 2020 18:01:42 +0200
Subject: [PATCH 122/170] Made the process dashboard lazy.

---
 .../src/js/component/wb-process-dashboard.js  | 19 +++++++++++++++----
 frontend/src/js/page/wb-process-view.js       |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index 4ca2513..a251d95 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -117,21 +117,32 @@ class WBProcessDashboard extends Component {
   }
 
   componentDidMount() {
-    this.fetchData();
+    if (!this.props.lazy)
+      this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.parentProcessUuid === this.props.parentProcessUuid)
       return;
 
+    if (this.props.lazy) {
+      this.setState({ rows: Array(5).fill(Array(6).fill('-')) });
+      return;
+    }
+
     this.props = nextProps;
     this.fetchData();
   }
 
-  render({}, { rows }) {
+  render({ lazy }, { rows }) {
     return (
-      <WBTable columns={ [ 'State', 'Pending', 'Running', 'Complete', 'Failed', 'Cancelled' ] }
-        rows={ rows } verticalHeader={ true } />
+      <div>
+        <WBTable columns={ [ 'State', 'Pending', 'Running', 'Complete', 'Failed', 'Cancelled' ] }
+          rows={ rows } verticalHeader={ true } />
+        { lazy ? (
+          <a href="#" onclick={ e => { e.preventDefault(); this.fetchData(); } }>Refresh</a>
+        ) : null }
+      </div>
     );
   }
 }
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index f89f712..f4bc3f3 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -64,7 +64,7 @@ class WBProcessView extends Component {
         </div>
 
         <h2>Children Dashboard</h2>
-        <WBProcessDashboard app={ app } parentProcessUuid={ uuid } />
+        <WBProcessDashboard app={ app } parentProcessUuid={ uuid } lazy={ true } />
 
         <h2>Common Fields</h2>
         <WBCommonFields app={ app } uuid={ uuid } />

From f2cb003915b2e4b5f5a0dec72d88ae5687ed2482 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 3 Apr 2020 23:34:27 +0200
Subject: [PATCH 123/170] Owner column in project listing - added WBNameAndUuid
 controls

---
 .../src/js/component/wb-collection-fields.js  | 12 +++++++++--
 frontend/src/js/component/wb-common-fields.js | 20 ++++++++-----------
 frontend/src/js/component/wb-name-and-uuid.js |  2 +-
 .../src/js/component/wb-project-listing.js    |  3 ++-
 .../src/js/misc/wb-format-special-value.js    |  9 +++++++++
 5 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-format-special-value.js

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index e660eb5..8888f4a 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -8,6 +8,14 @@ import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 
+function formatSpecialValue(value) {
+  if (value === null) return (<i>null</i>);
+  if (value === undefined) return (<i>undefined</i>);
+  if (typeof(value) === 'boolean') return (<i>{ String(value) }</i>);
+  if (value === '') return '-';
+  return String(value);
+}
+
 class WBCollectionFields extends Component {
   componentDidMount() {
     this.prepareRows();
@@ -25,7 +33,7 @@ class WBCollectionFields extends Component {
     const filters = [
       ['uuid', '=', uuid]
     ];
-    
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
 
@@ -35,7 +43,7 @@ class WBCollectionFields extends Component {
         throw Error('Item not found');
       let rows = [
         [ 'Name', item.name ],
-        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+        [ 'Description', formatSpecialValue(item.description) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
             <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index d895bdc..da75ad7 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -22,18 +22,14 @@ class WBCommonFields extends Component {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
-    const filters = [
-      ['uuid', '=', uuid]
-    ];
+    const typeName = arvadosTypeName(uuid);
 
     let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/' + arvadosTypeName(uuid) +
-      's?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      '/arvados/v1/' + typeName + 's/' +
+      encodeURIComponent(uuid));
 
     prom = prom.then(xhr => {
-      const item = xhr.response.items[0];
-      if (!item)
-        throw Error('Item not found');
+      const item = xhr.response;
       let rows = [
         [ 'UUID', item.uuid ],
         [ 'Kind', item.kind ],
@@ -43,14 +39,14 @@ class WBCommonFields extends Component {
         [ 'Created at', wbFormatDate(item.created_at) ],
         [ 'Modified at', wbFormatDate(item.modified_at) ],
         [ 'Modified by User', (
-          <WBNameAndUuid app={ app } uuid={ item.modified_by_user_uuid } />
+          item.modified_by_user_uuid ? (<WBNameAndUuid app={ app } uuid={ item.modified_by_user_uuid } />) : '-'
         ) ],
         [ 'Modified by Client', (
-          <WBNameAndUuid app={ app } uuid={ item.modified_by_client_uuid } />
+          item.modified_by_client_uuid ? (<WBNameAndUuid app={ app } uuid={ item.modified_by_client_uuid } />) : '-'
         ) ],
         [ 'API Url', (
-          <a href={ 'https://' + app.state.arvHost + '/arvados/v1' + item.href }>
-            { 'https://' + app.state.arvHost + '/arvados/v1' + item.href }
+          <a href={ 'https://' + app.state.arvHost + '/arvados/v1/' + typeName + 's/' + uuid }>
+            { 'https://' + app.state.arvHost + '/arvados/v1/' + typeName + 's/' + uuid }
           </a>
         ) ],
         [ 'ETag', item.etag ]
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 2c45b57..2e9cc45 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -87,7 +87,7 @@ class WBNameAndUuid extends Component {
       return;
 
     if (nextProps.lazy) {
-      this.setState({ item: { uuid: nextProps.uuid }});
+      this.setState({ item:  null });
 
     } else {
       this.props = nextProps;
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index e0bf9ee..0d2eb52 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -3,6 +3,7 @@ import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
+import WBNameAndUuid from 'wb-name-and-uuid';
 
 class WBProjectListing extends Component {
 
@@ -34,7 +35,7 @@ class WBProjectListing extends Component {
       (<div>
         { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
       </div>),
-      item['owner_uuid'],
+      ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
       (<div>
         { renderDeleteButton(item, () => this.fetchItems()) }
         { renderSharingButton(item) }
diff --git a/frontend/src/js/misc/wb-format-special-value.js b/frontend/src/js/misc/wb-format-special-value.js
new file mode 100644
index 0000000..b4d89b9
--- /dev/null
+++ b/frontend/src/js/misc/wb-format-special-value.js
@@ -0,0 +1,9 @@
+function wbFormatSpecialValue(value) {
+  if (value === null) return (<i>null</i>);
+  if (value === undefined) return (<i>undefined</i>);
+  if (typeof(value) === 'boolean') return (<i>{ String(value) }</i>);
+  if (value === '') return '-';
+  return String(value);
+}
+
+export default wbFormatSpecialValue;

From 9687678d6ba80b4ea5fcaaa7074e87e1a2aa4666 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 4 Apr 2020 17:33:48 +0200
Subject: [PATCH 124/170] Restored polling whether Papaya loaded.

---
 frontend/src/js/page/wb-image-viewer-page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/page/wb-image-viewer-page.js b/frontend/src/js/page/wb-image-viewer-page.js
index 1343630..d2b2054 100644
--- a/frontend/src/js/page/wb-image-viewer-page.js
+++ b/frontend/src/js/page/wb-image-viewer-page.js
@@ -45,7 +45,7 @@ function downloadFile(arvHost, arvToken, file) {
     const poll = () => {
       setTimeout(() => {
         console.log('Polling Papaya startup...')
-        if (true) { // window.papayaContainers && window.papayaContainers[0]) {
+        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);

From 49574a208a915578383ca8bdd8ca83bbb3665af9 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 6 Apr 2020 22:57:58 +0200
Subject: [PATCH 125/170] Add wbProcessStateName for reuse.

---
 .../src/js/component/wb-collection-fields.js  | 11 ++--------
 .../src/js/component/wb-process-dashboard.js  | 20 ++-----------------
 frontend/src/js/misc/wb-process-state-name.js | 18 +++++++++++++++++
 3 files changed, 22 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/js/misc/wb-process-state-name.js

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index 8888f4a..0049f89 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -7,14 +7,7 @@ import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
-
-function formatSpecialValue(value) {
-  if (value === null) return (<i>null</i>);
-  if (value === undefined) return (<i>undefined</i>);
-  if (typeof(value) === 'boolean') return (<i>{ String(value) }</i>);
-  if (value === '') return '-';
-  return String(value);
-}
+import wbFormatSpecialValue from 'wb-format-special-value';
 
 class WBCollectionFields extends Component {
   componentDidMount() {
@@ -43,7 +36,7 @@ class WBCollectionFields extends Component {
         throw Error('Item not found');
       let rows = [
         [ 'Name', item.name ],
-        [ 'Description', formatSpecialValue(item.description) ],
+        [ 'Description', wbFormatSpecialValue(item.description) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
             <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index a251d95..c9b60b5 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
+import wbProcessStateName from 'wb-process-state-name';
 
 function getAll(makeRequest) {
   let prom = makeRequest(0);
@@ -20,23 +21,6 @@ function getAll(makeRequest) {
   return prom;
 }
 
-function determineState(containerRequest) {
-  const cr = containerRequest;
-  const c = cr.container;
-  if (cr.state !== 'Uncommitted' && cr.priority === 0)
-    return 'Cancelled';
-  if (cr.state === 'Uncommitted' || !c || c.state === 'Queued' || c.state === 'Locked')
-    return 'Pending';
-  if (c.state === 'Running')
-    return 'Running';
-  if (c.state === 'Complete' && c.exit_code === 0)
-    return 'Complete';
-  if (c.state === 'Complete' && c.exit_code !== 0)
-    return 'Failed';
-  if (c.state === 'Cancelled')
-    return 'Cancelled';
-}
-
 class WBProcessDashboard extends Component {
   constructor(...args) {
     super(...args);
@@ -85,7 +69,7 @@ class WBProcessDashboard extends Component {
     });
     prom = prom.then(cl => {
       cl.map(a => (crlist.find(b => (b.container_uuid === a.uuid)).container = a));
-      crlist.map(a => (a.wb_state = determineState(a)));
+      crlist.map(a => (a.wb_state = wbProcessStateName(a, a.container)));
       const stats = {};
       for (let state in { 'Pending': 1, 'Running': 1, 'Complete': 1, 'Failed': 1, 'Cancelled': 1 }) {
         const f = crlist.filter(a => (a.wb_state === state));
diff --git a/frontend/src/js/misc/wb-process-state-name.js b/frontend/src/js/misc/wb-process-state-name.js
new file mode 100644
index 0000000..876d529
--- /dev/null
+++ b/frontend/src/js/misc/wb-process-state-name.js
@@ -0,0 +1,18 @@
+function wbProcessStateName(containerRequest, container) {
+  const cr = containerRequest;
+  const c = container;
+  if (cr.state !== 'Uncommitted' && cr.priority === 0)
+    return 'Cancelled';
+  if (cr.state === 'Uncommitted' || !c || c.state === 'Queued' || c.state === 'Locked')
+    return 'Pending';
+  if (c.state === 'Running')
+    return 'Running';
+  if (c.state === 'Complete' && c.exit_code === 0)
+    return 'Complete';
+  if (c.state === 'Complete' && c.exit_code !== 0)
+    return 'Failed';
+  if (c.state === 'Cancelled')
+    return 'Cancelled';
+}
+
+export default wbProcessStateName;

From f6044afd07c0a9c6f872edbbac8f4cf51ae8c0b1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 6 Apr 2020 23:22:42 +0200
Subject: [PATCH 126/170] Fix WBProcessState - mark processes as Failed when
 exit_code is not 0, as Cancelled when priority is 0.

---
 frontend/src/js/component/wb-process-state.js | 8 ++++----
 frontend/src/js/misc/wb-process-state-name.js | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-process-state.js b/frontend/src/js/component/wb-process-state.js
index b334ae1..3aab5a4 100644
--- a/frontend/src/js/component/wb-process-state.js
+++ b/frontend/src/js/component/wb-process-state.js
@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
+import wbProcessStateName from 'wb-process-state-name';
 
 class WBProcessState extends Component {
   componentDidMount() {
@@ -37,14 +38,13 @@ class WBProcessState extends Component {
 
     return (
       <div>
-        { process.state }
+        { wbProcessStateName(process, container) }
         { apiError ? <i>{ [ ' / ', apiError ] }</i> : null }
-        { container ? [ " / ", container.state ] : null }
-        { !(error || warning) && container && container.state === 'Complete' ? " / Success" : null }
         { error ? [" / ", <a href={ '/container/' + container.uuid }
           title={ error }>E</a> ] : null }
         { warning ? [ " / ", <a href={ '/container/' + container.uuid }
-          title={ warning }>W</a> ] : null } { lazy && !container && !apiError ? (
+          title={ warning }>W</a> ] : null } {}
+        { lazy && !container && !apiError ? (
           <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
             <i class="fas fa-search"></i>
           </a>
diff --git a/frontend/src/js/misc/wb-process-state-name.js b/frontend/src/js/misc/wb-process-state-name.js
index 876d529..2ecf5a3 100644
--- a/frontend/src/js/misc/wb-process-state-name.js
+++ b/frontend/src/js/misc/wb-process-state-name.js
@@ -1,9 +1,11 @@
 function wbProcessStateName(containerRequest, container) {
   const cr = containerRequest;
   const c = container;
+  if (!c)
+    return cr.state;
   if (cr.state !== 'Uncommitted' && cr.priority === 0)
     return 'Cancelled';
-  if (cr.state === 'Uncommitted' || !c || c.state === 'Queued' || c.state === 'Locked')
+  if (cr.state === 'Uncommitted' || !cr.container_uuid || c.state === 'Queued' || c.state === 'Locked')
     return 'Pending';
   if (c.state === 'Running')
     return 'Running';

From d8e66eb1c77c797633deae261aecf805f8984e69 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 7 Apr 2020 00:24:57 +0200
Subject: [PATCH 127/170] Started implementing WBIdTools.

---
 frontend/src/js/misc/wb-id-tools.js | 44 +++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 frontend/src/js/misc/wb-id-tools.js

diff --git a/frontend/src/js/misc/wb-id-tools.js b/frontend/src/js/misc/wb-id-tools.js
new file mode 100644
index 0000000..2ac4752
--- /dev/null
+++ b/frontend/src/js/misc/wb-id-tools.js
@@ -0,0 +1,44 @@
+import arvadosTypeName from 'arvados-type-name';
+
+const UUID_REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/g;
+const PDH_REGEX = /[a-f0-9]{32}\+[0-9]+/g;
+
+class WBIdTools {
+  static isIdentifier(value) {
+    return ( this.isUuid(value) || this.isPDH(value) );
+  }
+
+  static isUuid(value) {
+    const m = UUID_REGEX.exec(value);
+    return (m && m[0] === value);
+  }
+
+  static isPDH(value) {
+    const m = PDH_REGEX.exec(value);
+    return (m && m[0] === value);
+  }
+
+  static startsWithIdentifier(value) {
+    return ( this.startsWithUuid(value) || this.startsWithPDH(value) );
+  }
+
+  static startsWithUuid(value) {
+    const m = UUID_REGEX.exec(value);
+    return ( m && m.index === 0 );
+  }
+
+  static startsWithPDH(value) {
+    const m = PDH_REGEX.exec(value);
+    return ( m && m.index === 0 );
+  }
+
+  static typeName(value) {
+    if (this.isPDH(value))
+      return 'collection';
+    if (this.isUuid(value))
+      return arvadosTypeName(value);
+    throw Error('Given value is neither an UUID nor a PDH: ' + value);
+  }
+}
+
+export default WBIdTools;

From 11be269b865a26cba6805ff8954f5fe756e92ce1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 7 Apr 2020 18:37:54 +0200
Subject: [PATCH 128/170] Periodic refresh instead of every iteration in
 manifest worker.

---
 .../src/js/component/wb-collection-content.js | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index 66f6042..e31f860 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -23,6 +23,10 @@ function endsWith(what, endings) {
   throw Error('Expected second argument to be either a string or an array');
 }
 
+function maskRows(rows) {
+  return rows.map(r => r.map(c => '-'));
+}
+
 class WBCollectionContent extends Component {
   constructor(...args) {
     super(...args);
@@ -74,16 +78,29 @@ class WBCollectionContent extends Component {
         return manifestWorker.postMessage([ 'precreatePaths', paths ]);
       });
 
+      let lastListingTimestamp = new Date(0);
+
       for (let i = 0; i < streams.length; i++) {
         prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'parseStream', streams[i] ]));
 
-        prom_1 = prom_1.then(() => manifestWorker.postMessage([
-          'listDirectory', '.' + this.props.collectionPath, true
-        ]));
+        prom_1 = prom_1.then(() => {
+          if (new Date() - lastListingTimestamp < 1000)
+            return;
+
+          lastListingTimestamp = new Date();
 
-        prom_1 = prom_1.then(e => {
-          this.prepareRows(e.data[1]);
-          this.setState({ 'parsedStreams': (i + 1) });
+          let prom_2 = new Promise(accept => accept());
+
+          prom_2 = prom_2.then(() => manifestWorker.postMessage([
+            'listDirectory', '.' + this.props.collectionPath, true
+          ]));
+
+          prom_2 = prom_2.then(e => {
+            this.prepareRows(e.data[1]);
+            this.setState({ 'parsedStreams': (i + 1) });
+          });
+
+          return prom_2;
         });
       }
 
@@ -102,6 +119,8 @@ class WBCollectionContent extends Component {
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
 
+    this.setState({ rows: maskRows(this.state.rows) });
+
     const { manifestWorker, mode } = this.state;
     const { collectionPath } = this.props;
 

From f11d42c5d2c5b5fd35f2fb821655f44eab2e7ba0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 8 Apr 2020 01:13:47 +0200
Subject: [PATCH 129/170] Fix in wbFormatSpecialValue()

---
 frontend/src/js/misc/wb-format-special-value.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/js/misc/wb-format-special-value.js b/frontend/src/js/misc/wb-format-special-value.js
index b4d89b9..ef14033 100644
--- a/frontend/src/js/misc/wb-format-special-value.js
+++ b/frontend/src/js/misc/wb-format-special-value.js
@@ -1,3 +1,5 @@
+import { h } from 'preact';
+
 function wbFormatSpecialValue(value) {
   if (value === null) return (<i>null</i>);
   if (value === undefined) return (<i>undefined</i>);

From 6a5e0c498bdb9cd5618d5e6a74a2dd743f38978e Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 8 Apr 2020 01:14:28 +0200
Subject: [PATCH 130/170] A bit of debugging in WBAccordion.

---
 frontend/src/js/widget/wb-accordion.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index ca44a0b..f2d4158 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -6,8 +6,17 @@ class WBAccordion extends Component {
     this.state.domId = 'accordion-' + uuid.v4();
     this.state.headerDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
     this.state.collapseDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
+    // console.log('WBAccordion() : domId=' + this.state.domId);
   }
 
+  /* componentDidMount() {
+    console.log('WBAccordion.componentDidMount()');
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('WBAccordion.componentWillReceiveProps()');
+  } */
+
   render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds }) {
     return (
       <div class="accordion" id={ domId }>

From 041d3bb15ab108eea58e3bd428dccaef6d568365 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 8 Apr 2020 16:51:03 +0200
Subject: [PATCH 131/170] Started working on fixing WBAccordion

---
 frontend/src/js/widget/wb-accordion.js | 60 ++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index f2d4158..d4bf2dd 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -3,34 +3,78 @@ import { h, Component } from 'preact';
 class WBAccordion extends Component {
   constructor(...args) {
     super(...args);
+    this.setupIds();
+    console.log('WBAccordion() : domId=' + this.state.domId);
+  }
+
+  setupIds() {
     this.state.domId = 'accordion-' + uuid.v4();
-    this.state.headerDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
-    this.state.collapseDomIds = this.props.names.map(() => ('accordion-' + uuid.v4()));
-    // console.log('WBAccordion() : domId=' + this.state.domId);
+    const { names } = this.props;
+    const { state  } = this;
+    state.headerDomIds = names.map(() => ('accordion-' + uuid.v4()));
+    state.collapseDomIds = names.map(() => ('accordion-' + uuid.v4()));
+    state.isOpen = Array(names.length).fill(false);
+    state.collapseElements = null;
+  }
+
+  setupEvents() {
+    const { collapseDomIds, isOpen } = this.state;
+    const accordion = this;
+    const collapseElements = $(collapseDomIds.map(a => '#' + a).join(','));
+    this.state.collapseElements = collapseElements;
+    collapseElements.on('hidden.bs.collapse shown.bs.collapse', function(ev) {
+      // console.log(this.id);
+      const el = this;
+      const idx = collapseDomIds.findIndex(a => (a === el.id));
+      isOpen[idx] = (ev.type === 'shown');
+      accordion.setState({ isOpen });
+    });
+  }
+
+  removeEvents() {
+    const { collapseElements } = this.state;
+    collapseElements.off('hidden.bs.collapse shown.bs.collapse');
   }
 
-  /* componentDidMount() {
+  setup() {
+    this.setupIds();
+    this.setupEvents();
+  }
+
+  componentDidMount() {
     console.log('WBAccordion.componentDidMount()');
+    this.setupEvents();
+  }
+
+  componentWillUnmount() {
+    console.log('WBAccordion.componentWillUnmount()');
+    this.removeEvents();
   }
 
   componentWillReceiveProps(nextProps) {
     console.log('WBAccordion.componentWillReceiveProps()');
-  } */
+    this.props = nextProps;
+    this.removeEvents();
+    this.setupIds();
+    this.setState({}); // render
+    this.setupEvents();
+  }
 
-  render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds }) {
+  render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds, isOpen }) {
     return (
       <div class="accordion" id={ domId }>
         { children.map((_, i) => (
           <div class="card">
             <div class={ cardHeaderClass} id={ headerDomIds[i] }>
               <h2 class="mb-0">
-                <button class="btn btn-link" type="button" data-toggle="collapse" data-target={ '#' + collapseDomIds[i] } aria-expanded="false" aria-controls={ collapseDomIds[i] }>
+                <button class="btn btn-link" type="button" data-toggle="collapse" data-target={ '#' + collapseDomIds[i] } aria-expanded={ isOpen[i] } aria-controls={ collapseDomIds[i] }>
                   { names[i] }
                 </button>
               </h2>
             </div>
 
-            <div id={ collapseDomIds[i] } class="collapse" aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
+            <div id={ collapseDomIds[i] } class={ 'collapse' + (isOpen[i] ? ' show' : '') }
+              aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
               <div class="card-body">
                 { children[i] }
               </div>

From fa8375fc98a60772473c2726f4aa94651070ed20 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 8 Apr 2020 17:56:07 +0200
Subject: [PATCH 132/170] Fix WBAccordion's state getting confused when
 navigating between pages.

---
 frontend/src/js/widget/wb-accordion.js | 71 ++++++++++----------------
 1 file changed, 27 insertions(+), 44 deletions(-)

diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index d4bf2dd..b3e4109 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -4,7 +4,6 @@ class WBAccordion extends Component {
   constructor(...args) {
     super(...args);
     this.setupIds();
-    console.log('WBAccordion() : domId=' + this.state.domId);
   }
 
   setupIds() {
@@ -13,68 +12,52 @@ class WBAccordion extends Component {
     const { state  } = this;
     state.headerDomIds = names.map(() => ('accordion-' + uuid.v4()));
     state.collapseDomIds = names.map(() => ('accordion-' + uuid.v4()));
-    state.isOpen = Array(names.length).fill(false);
+    state.collapseClass = Array(names.length).fill('collapse');
+    state.ariaExpanded = Array(names.length).fill(false);
+    state.buttonClass = Array(names.length).fill('btn btn-link collapsed');
     state.collapseElements = null;
   }
 
-  setupEvents() {
-    const { collapseDomIds, isOpen } = this.state;
-    const accordion = this;
-    const collapseElements = $(collapseDomIds.map(a => '#' + a).join(','));
-    this.state.collapseElements = collapseElements;
-    collapseElements.on('hidden.bs.collapse shown.bs.collapse', function(ev) {
-      // console.log(this.id);
-      const el = this;
-      const idx = collapseDomIds.findIndex(a => (a === el.id));
-      isOpen[idx] = (ev.type === 'shown');
-      accordion.setState({ isOpen });
-    });
-  }
-
-  removeEvents() {
-    const { collapseElements } = this.state;
-    collapseElements.off('hidden.bs.collapse shown.bs.collapse');
-  }
-
-  setup() {
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
     this.setupIds();
-    this.setupEvents();
   }
 
-  componentDidMount() {
-    console.log('WBAccordion.componentDidMount()');
-    this.setupEvents();
+  toggle(idx) {
+    const { ariaExpanded, collapseClass, buttonClass } = this.state;
+    const isOpen = ariaExpanded[idx];
+    for (let i = 0; i < ariaExpanded.length; i++) {
+      ariaExpanded[i] = false;
+      collapseClass[i] = 'collapse';
+      buttonClass[i] = 'btn btn-link collapsed';
+    }
+    if (!isOpen) {
+      ariaExpanded[idx] = true;
+      collapseClass[idx] = 'collapse show';
+      buttonClass[idx] = 'btn btn-link';
+    }
+    this.setState({ ariaExpanded, collapseClass, buttonClass });
   }
 
-  componentWillUnmount() {
-    console.log('WBAccordion.componentWillUnmount()');
-    this.removeEvents();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    console.log('WBAccordion.componentWillReceiveProps()');
-    this.props = nextProps;
-    this.removeEvents();
-    this.setupIds();
-    this.setState({}); // render
-    this.setupEvents();
-  }
+  render({ children, names, cardHeaderClass }, { domId, headerDomIds,
+    collapseDomIds, collapseClass, ariaExpanded, buttonClass }) {
 
-  render({ children, names, cardHeaderClass }, { domId, headerDomIds, collapseDomIds, isOpen }) {
     return (
       <div class="accordion" id={ domId }>
         { children.map((_, i) => (
           <div class="card">
-            <div class={ cardHeaderClass} id={ headerDomIds[i] }>
+            <div class={ cardHeaderClass } id={ headerDomIds[i] }>
               <h2 class="mb-0">
-                <button class="btn btn-link" type="button" data-toggle="collapse" data-target={ '#' + collapseDomIds[i] } aria-expanded={ isOpen[i] } aria-controls={ collapseDomIds[i] }>
+                <button class={ buttonClass[i] } type="button"
+                  aria-expanded={ ariaExpanded[i] } aria-controls={ collapseDomIds[i] }
+                  onclick={ () => this.toggle(i) }>
                   { names[i] }
                 </button>
               </h2>
             </div>
 
-            <div id={ collapseDomIds[i] } class={ 'collapse' + (isOpen[i] ? ' show' : '') }
-              aria-labelledby={ headerDomIds[i] } data-parent={ '#' + domId }>
+            <div id={ collapseDomIds[i] } class={ collapseClass[i] }
+              aria-labelledby={ headerDomIds[i] }>
               <div class="card-body">
                 { children[i] }
               </div>

From 5677512efafcf81d02a4d0b1d6a0df94807131d4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 8 Apr 2020 18:30:32 +0200
Subject: [PATCH 133/170] Add collection type filtering: log, output, etc.

---
 .../src/js/component/wb-collection-listing.js | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 2e96671..4e34a9a 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -6,6 +6,7 @@ import WBPagination from 'wb-pagination';
 import urlForObject from 'url-for-object';
 import arvadosTypeName from 'arvados-type-name';
 import arvadosObjectName from 'arvados-object-name';
+import WBCheckboxes from 'wb-checkboxes';
 
 class WBCollectionListing extends Component {
 
@@ -14,6 +15,8 @@ class WBCollectionListing extends Component {
     this.state.rows = [];
     this.state.numPages = 0;
     this.state.orderStream = uuid.v4();
+    this.state.collectionTypes = [ 'Intermediate', 'Output', 'Log', 'Other' ];
+    this.state.collectionTypeMask = [ true, true, true, true ];
   }
 
   componentDidMount() {
@@ -64,9 +67,9 @@ class WBCollectionListing extends Component {
   }
 
   fetchItems() {
-    let { arvHost, arvToken } = this.props.app.state;
-
-    let { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
+    const { arvHost, arvToken } = this.props.app.state;
+    const { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
+    const { collectionTypes, collectionTypeMask } = this.state;
 
     let filters = [];
 
@@ -76,6 +79,17 @@ class WBCollectionListing extends Component {
     if (textSearch)
       filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
 
+    if (collectionTypeMask.filter(a => (!a)).length != 0) {
+      if (collectionTypeMask[3]) {
+        for (let i = 0; i < 3; i++)
+          if (!collectionTypeMask[i])
+            filters.push([ 'properties.type', '!=', collectionTypes[i].toLowerCase() ]);
+      } else {
+        filters.push([ 'properties.type', 'in',
+          collectionTypes.filter((_, k) => collectionTypeMask[k]).map(a => a.toLowerCase()) ]);
+      }
+    }
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + encodeURIComponent(itemsPerPage) +
@@ -135,13 +149,19 @@ class WBCollectionListing extends Component {
     this.fetchItems();
   }
 
-  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error }) {
+  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error,
+    collectionTypes, collectionTypeMask }) {
+
     return (
       <div>
         { error ? (<div class="alert alert-danger" role="alert">
           { error }
         </div>) : null }
 
+        <WBCheckboxes items={ collectionTypes } checked={ collectionTypeMask }
+          cssClass="float-left mx-2 my-2" title="Collection Type: "
+          onChange={ () => route(getPageUrl(0)) } />
+
         <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
           headerClasses={ [ 'w-1'] }
           rows={ rows } />

From 8e4f93cae2704ea9687a598245bae5e4290f5b71 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 9 Apr 2020 22:55:22 +0200
Subject: [PATCH 134/170] Fix modal dialog on history back press.

---
 frontend/src/js/dialog/wb-browse-dialog.js |  9 +++++++--
 frontend/src/js/widget/wb-dialog.js        | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index e072855..566bd5d 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
 import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
@@ -44,6 +44,7 @@ class WBBrowseDialog extends Component {
     this.state.textSearch = '';
     this.state.id = ('id' in this.props) ? this.props.id : uuid.v4();
     this.state.accept = () => {};
+    this.modalRef = createRef();
   }
 
   navigateBack() {
@@ -144,6 +145,10 @@ class WBBrowseDialog extends Component {
     $('#' + this.state.id).modal();
   }
 
+  componentWillUnmount() {
+    $(this.modalRef.current).modal('hide');
+  }
+
   render({ app },
     { history, currentUrl, mode, uuid,
       topPage, bottomPage, textSearch,
@@ -151,7 +156,7 @@ class WBBrowseDialog extends Component {
       selectMany, selectWhat }) {
 
     return (
-      <div class="modal" id={ id } tabindex="-1" role="dialog">
+      <div class="modal" id={ id } tabindex="-1" role="dialog" ref={ this.modalRef }>
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
index 204bc2c..fc357a8 100644
--- a/frontend/src/js/widget/wb-dialog.js
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -1,25 +1,27 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 class WBDialog extends Component {
   constructor(...args) {
     super(...args);
-    this.state.id = uuid.v4();
+    this.modalRef = createRef();
   }
 
   show() {
-    const { id } = this.state;
-    $('#' + id).modal();
+    $(this.modalRef.current).modal();
   }
 
   hide() {
-    const { id } = this.state;
-    $('#' + id).modal('hide');
+    $(this.modalRef.current).modal('hide');
   }
 
-  render({ title, children, accept, reject }, { id }) {
+  componentWillUnmount() {
+    $(this.modalRef.current).modal('hide');
+  }
+
+  render({ title, children, accept, reject }) {
     return (
       <form class="m-0">
-        <div class="modal" id={ id } tabindex="-1" role="dialog">
+        <div class="modal" tabindex="-1" role="dialog" ref={ this.modalRef }>
           <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
               <div class="modal-header">

From eebcec1f5032eded68d8933e7112e7af3baa8cbd Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 10 Apr 2020 18:48:06 +0200
Subject: [PATCH 135/170] Added a tmux script.

---
 frontend/tmux.sh | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 frontend/tmux.sh

diff --git a/frontend/tmux.sh b/frontend/tmux.sh
new file mode 100644
index 0000000..25855bf
--- /dev/null
+++ b/frontend/tmux.sh
@@ -0,0 +1,23 @@
+#!/bin/sh
+
+set -e
+
+function panetitle () {
+  printf "\033]2;%s\033\\" "$1";
+}
+
+export -f panetitle
+
+export TERM=putty
+
+source ${HOME}/workspace/ml/ml tmux-2.7.0
+
+tmux new-session -x 2000 -y 1200 -d "ml python2; cd ${HOME}/workspace/arvados-workbench-advanced/frontend/dist; panetitle https_server; /bin/bash --init-file <(echo \"python2 ../../backend/srv.py\")"
+
+tmux split-window -v "source ${HOME}/workspace/ml/ml nodejs-8.11.3; cd ${HOME}/workspace/arvados-workbench-advanced/frontend; panetitle npm_run_watch; /bin/bash --init-file <(echo \"npm run watch\")"
+
+tmux split-window -v "cd ${HOME}/workspace/arvados-workbench-advanced; panetitle project; /bin/bash"
+
+tmux select-layout even-vertical
+
+tmux attach

From daacdc3bc1fd52dc155c91a8d7935410191720e8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 10 Apr 2020 18:56:26 +0200
Subject: [PATCH 136/170] Reorganized files slightly.

---
 frontend/rollup.config.js                                     | 4 +++-
 frontend/src/js/{misc => arvados/base}/arvados-object-name.js | 0
 frontend/src/js/{misc => arvados/base}/arvados-type-name.js   | 0
 frontend/src/js/{misc => arvados/base}/detect-hashes.js       | 0
 frontend/src/js/{misc => arvados/base}/detect-uuids.js        | 0
 .../src/js/{misc => arvados/base}/fetch-object-parents.js     | 0
 .../src/js/{misc => arvados/base}/make-arvados-request.js     | 0
 frontend/src/js/{misc => arvados/base}/url-for-object.js      | 0
 frontend/src/js/{misc => arvados/base}/wb-delete-object.js    | 0
 frontend/src/js/{misc => arvados/base}/wb-fetch-objects.js    | 0
 frontend/src/js/{misc => arvados/base}/wb-id-tools.js         | 0
 frontend/src/js/{misc => arvados/base}/wb-move-object.js      | 0
 frontend/src/js/{misc => arvados/base}/wb-rename-object.js    | 0
 .../src/js/{misc => arvados/collection}/wb-copy-collection.js | 0
 .../src/js/{misc => arvados/collection}/wb-download-file.js   | 0
 .../collection}/wb-manifest-worker-wrapper.js                 | 0
 .../src/js/{misc => arvados/process}/wb-process-state-name.js | 0
 17 files changed, 3 insertions(+), 1 deletion(-)
 rename frontend/src/js/{misc => arvados/base}/arvados-object-name.js (100%)
 rename frontend/src/js/{misc => arvados/base}/arvados-type-name.js (100%)
 rename frontend/src/js/{misc => arvados/base}/detect-hashes.js (100%)
 rename frontend/src/js/{misc => arvados/base}/detect-uuids.js (100%)
 rename frontend/src/js/{misc => arvados/base}/fetch-object-parents.js (100%)
 rename frontend/src/js/{misc => arvados/base}/make-arvados-request.js (100%)
 rename frontend/src/js/{misc => arvados/base}/url-for-object.js (100%)
 rename frontend/src/js/{misc => arvados/base}/wb-delete-object.js (100%)
 rename frontend/src/js/{misc => arvados/base}/wb-fetch-objects.js (100%)
 rename frontend/src/js/{misc => arvados/base}/wb-id-tools.js (100%)
 rename frontend/src/js/{misc => arvados/base}/wb-move-object.js (100%)
 rename frontend/src/js/{misc => arvados/base}/wb-rename-object.js (100%)
 rename frontend/src/js/{misc => arvados/collection}/wb-copy-collection.js (100%)
 rename frontend/src/js/{misc => arvados/collection}/wb-download-file.js (100%)
 rename frontend/src/js/{misc => arvados/collection}/wb-manifest-worker-wrapper.js (100%)
 rename frontend/src/js/{misc => arvados/process}/wb-process-state-name.js (100%)

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 206cf0d..9adbd0f 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -16,7 +16,9 @@ export default {
   },
   plugins: [
     includePaths({
-      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component', 'src/js/page', 'src/js/dialog']
+      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component',
+        'src/js/page', 'src/js/dialog', 'src/js/arvados/base',
+        'src/js/arvados/collection', 'src/js/arvados/process']
     }),
     copy({
       'src/html/index.html': 'dist/index.html',
diff --git a/frontend/src/js/misc/arvados-object-name.js b/frontend/src/js/arvados/base/arvados-object-name.js
similarity index 100%
rename from frontend/src/js/misc/arvados-object-name.js
rename to frontend/src/js/arvados/base/arvados-object-name.js
diff --git a/frontend/src/js/misc/arvados-type-name.js b/frontend/src/js/arvados/base/arvados-type-name.js
similarity index 100%
rename from frontend/src/js/misc/arvados-type-name.js
rename to frontend/src/js/arvados/base/arvados-type-name.js
diff --git a/frontend/src/js/misc/detect-hashes.js b/frontend/src/js/arvados/base/detect-hashes.js
similarity index 100%
rename from frontend/src/js/misc/detect-hashes.js
rename to frontend/src/js/arvados/base/detect-hashes.js
diff --git a/frontend/src/js/misc/detect-uuids.js b/frontend/src/js/arvados/base/detect-uuids.js
similarity index 100%
rename from frontend/src/js/misc/detect-uuids.js
rename to frontend/src/js/arvados/base/detect-uuids.js
diff --git a/frontend/src/js/misc/fetch-object-parents.js b/frontend/src/js/arvados/base/fetch-object-parents.js
similarity index 100%
rename from frontend/src/js/misc/fetch-object-parents.js
rename to frontend/src/js/arvados/base/fetch-object-parents.js
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/arvados/base/make-arvados-request.js
similarity index 100%
rename from frontend/src/js/misc/make-arvados-request.js
rename to frontend/src/js/arvados/base/make-arvados-request.js
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/arvados/base/url-for-object.js
similarity index 100%
rename from frontend/src/js/misc/url-for-object.js
rename to frontend/src/js/arvados/base/url-for-object.js
diff --git a/frontend/src/js/misc/wb-delete-object.js b/frontend/src/js/arvados/base/wb-delete-object.js
similarity index 100%
rename from frontend/src/js/misc/wb-delete-object.js
rename to frontend/src/js/arvados/base/wb-delete-object.js
diff --git a/frontend/src/js/misc/wb-fetch-objects.js b/frontend/src/js/arvados/base/wb-fetch-objects.js
similarity index 100%
rename from frontend/src/js/misc/wb-fetch-objects.js
rename to frontend/src/js/arvados/base/wb-fetch-objects.js
diff --git a/frontend/src/js/misc/wb-id-tools.js b/frontend/src/js/arvados/base/wb-id-tools.js
similarity index 100%
rename from frontend/src/js/misc/wb-id-tools.js
rename to frontend/src/js/arvados/base/wb-id-tools.js
diff --git a/frontend/src/js/misc/wb-move-object.js b/frontend/src/js/arvados/base/wb-move-object.js
similarity index 100%
rename from frontend/src/js/misc/wb-move-object.js
rename to frontend/src/js/arvados/base/wb-move-object.js
diff --git a/frontend/src/js/misc/wb-rename-object.js b/frontend/src/js/arvados/base/wb-rename-object.js
similarity index 100%
rename from frontend/src/js/misc/wb-rename-object.js
rename to frontend/src/js/arvados/base/wb-rename-object.js
diff --git a/frontend/src/js/misc/wb-copy-collection.js b/frontend/src/js/arvados/collection/wb-copy-collection.js
similarity index 100%
rename from frontend/src/js/misc/wb-copy-collection.js
rename to frontend/src/js/arvados/collection/wb-copy-collection.js
diff --git a/frontend/src/js/misc/wb-download-file.js b/frontend/src/js/arvados/collection/wb-download-file.js
similarity index 100%
rename from frontend/src/js/misc/wb-download-file.js
rename to frontend/src/js/arvados/collection/wb-download-file.js
diff --git a/frontend/src/js/misc/wb-manifest-worker-wrapper.js b/frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js
similarity index 100%
rename from frontend/src/js/misc/wb-manifest-worker-wrapper.js
rename to frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js
diff --git a/frontend/src/js/misc/wb-process-state-name.js b/frontend/src/js/arvados/process/wb-process-state-name.js
similarity index 100%
rename from frontend/src/js/misc/wb-process-state-name.js
rename to frontend/src/js/arvados/process/wb-process-state-name.js

From 89fe88a41ba87b9c922f0a17774cc83ca33e12a0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 10 Apr 2020 19:16:09 +0200
Subject: [PATCH 137/170] Breaking out some pieces from
 wb-launch-workflow-page.

---
 .../js/arvados/process/wb-input-spec-info.js  |  14 +++
 .../arvados/process/wb-parse-workflow-def.js  |  11 ++
 .../src/js/arvados/process/wb-process-misc.js |  11 ++
 .../src/js/arvados/process/wb-uuids-to-cwl.js |  25 ++++
 frontend/src/js/component/wb-path-display.js  |  53 ++++++++
 .../src/js/page/wb-launch-workflow-page.js    | 116 ++----------------
 6 files changed, 122 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/js/arvados/process/wb-input-spec-info.js
 create mode 100644 frontend/src/js/arvados/process/wb-parse-workflow-def.js
 create mode 100644 frontend/src/js/arvados/process/wb-process-misc.js
 create mode 100644 frontend/src/js/arvados/process/wb-uuids-to-cwl.js
 create mode 100644 frontend/src/js/component/wb-path-display.js

diff --git a/frontend/src/js/arvados/process/wb-input-spec-info.js b/frontend/src/js/arvados/process/wb-input-spec-info.js
new file mode 100644
index 0000000..338b707
--- /dev/null
+++ b/frontend/src/js/arvados/process/wb-input-spec-info.js
@@ -0,0 +1,14 @@
+function wbInputSpecInfo(inputSpec) {
+  const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
+    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('File') !== -1));
+
+  const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
+    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('Directory') !== -1));
+
+  const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
+    inputSpec.type.type === 'array');
+
+  return { isFile, isDirectory, isArray };
+}
+
+export default wbInputSpecInfo;
diff --git a/frontend/src/js/arvados/process/wb-parse-workflow-def.js b/frontend/src/js/arvados/process/wb-parse-workflow-def.js
new file mode 100644
index 0000000..2644c9f
--- /dev/null
+++ b/frontend/src/js/arvados/process/wb-parse-workflow-def.js
@@ -0,0 +1,11 @@
+function wbParseWorkflowDef(text) {
+  let definition;
+  try {
+    definition = JSON.parse(text);
+  } catch (_) {
+    definition = jsyaml.load(text);
+  }
+  return definition;
+}
+
+export default wbParseWorkflowDef;
diff --git a/frontend/src/js/arvados/process/wb-process-misc.js b/frontend/src/js/arvados/process/wb-process-misc.js
new file mode 100644
index 0000000..9cd06e6
--- /dev/null
+++ b/frontend/src/js/arvados/process/wb-process-misc.js
@@ -0,0 +1,11 @@
+function encodeURIComponentIncludingDots(s) {
+  return encodeURIComponent(s).replace('.', '%2E');
+}
+
+function parseKeepRef(value) {
+  if (typeof(value) === 'object' && 'location' in value && value.location.startsWith('keep:'))
+    return value.location.substr(5);
+  return value;
+}
+
+export { encodeURIComponentIncludingDots, parseKeepRef }
diff --git a/frontend/src/js/arvados/process/wb-uuids-to-cwl.js b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
new file mode 100644
index 0000000..6c0a3ff
--- /dev/null
+++ b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
@@ -0,0 +1,25 @@
+function wbUuidsToCwl(obj) {
+  if (obj instanceof Array) {
+    const res = [];
+    for (let k in obj) {
+        res[k] = uuidsToCwl(obj[k]);
+    }
+    return res;
+  }
+
+  if (typeof(obj) === 'string' &&
+    (/^[0-9a-z]{5}-[0-9a-z]{5}-[0-9a-z]{15}/.exec(obj) ||
+      /^[0-9a-f]{32}\+[0-9]+/.exec(obj))) {
+
+    const isDirectory = obj.endsWith('/');
+
+    return {
+      'class': (isDirectory ? 'Directory' : 'File'),
+      'location': 'keep:' + (isDirectory ? obj.substr(0, obj.length - 1) : obj)
+    };
+  }
+
+  throw Error('Expected Arvados path or array of paths');
+}
+
+export default wbUuidsToCwl;
diff --git a/frontend/src/js/component/wb-path-display.js b/frontend/src/js/component/wb-path-display.js
new file mode 100644
index 0000000..91706c3
--- /dev/null
+++ b/frontend/src/js/component/wb-path-display.js
@@ -0,0 +1,53 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import { encodeURIComponentIncludingDots } from 'wb-process-misc';
+
+class WBPathDisplay extends Component {
+  fetchData() {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+    let { path } = this.props;
+    if (path.endsWith('/'))
+      path = path.substr(0, path.length - 1);
+    let m;
+    if (m = /^[0-9a-f]{32}\+[0-9]+/.exec(path));
+    else if (m = /^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(path));
+    else return;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + m[0]);
+    prom = prom.then(xhr => this.setState({
+      item: xhr.response,
+      tail: path.substr(m[0].length)
+    }));
+    prom = prom.catch(() => this.setState({ 'error': 'Cannot load' }));
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchData();
+  }
+
+  render({}, { item, tail, error }) {
+    if (error)
+      return error;
+
+    if (!item)
+      return 'Loading...';
+
+    return (
+      <span>
+        <a href={ '/collection-browse/' + item.uuid }>
+          { item.name || item.uuid }
+        </a><a href={ '/collection-browse/' + item.uuid + '/' + encodeURIComponentIncludingDots(tail) }>
+          { tail }
+        </a>
+      </span>
+    );
+  }
+}
+
+export default WBPathDisplay;
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 60720ed..cda3671 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -8,111 +8,11 @@ import WBNameAndUuid from 'wb-name-and-uuid';
 import makeArvadosRequest from 'make-arvados-request';
 import { wbDisableControls, wbEnableControls } from 'wb-disable-controls';
 import linkState from 'linkstate';
-
-function parseDefinition(text) {
-  let definition;
-  try {
-    definition = JSON.parse(text);
-  } catch (_) {
-    definition = jsyaml.load(text);
-  }
-  return definition;
-}
-
-function encodeURIComponentIncludingDots(s) {
-  return encodeURIComponent(s).replace('.', '%2E');
-}
-
-function inputSpecInfo(inputSpec) {
-  const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
-    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('File') !== -1));
-
-  const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
-    (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('Directory') !== -1));
-
-  const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
-    inputSpec.type.type === 'array');
-
-  return { isFile, isDirectory, isArray };
-}
-
-function uuidsToCwl(obj) {
-  if (obj instanceof Array) {
-    const res = [];
-    for (let k in obj) {
-        res[k] = uuidsToCwl(obj[k]);
-    }
-    return res;
-  }
-
-  if (typeof(obj) === 'string' &&
-    (/^[0-9a-z]{5}-[0-9a-z]{5}-[0-9a-z]{15}/.exec(obj) ||
-      /^[0-9a-f]{32}\+[0-9]+/.exec(obj))) {
-
-    const isDirectory = obj.endsWith('/');
-
-    return {
-      'class': (isDirectory ? 'Directory' : 'File'),
-      'location': 'keep:' + (isDirectory ? obj.substr(0, obj.length - 1) : obj)
-    };
-  }
-
-  throw Error('Expected Arvados path or array of paths');
-}
-
-function parseKeepRef(value) {
-  if (typeof(value) === 'object' && 'location' in value && value.location.startsWith('keep:'))
-    return value.location.substr(5);
-  return value;
-}
-
-class WBPathDisplay extends Component {
-  fetchData() {
-    const { app } = this.props;
-    const { arvHost, arvToken } = app.state;
-    let { path } = this.props;
-    if (path.endsWith('/'))
-      path = path.substr(0, path.length - 1);
-    let m;
-    if (m = /^[0-9a-f]{32}\+[0-9]+/.exec(path));
-    else if (m = /^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(path));
-    else return;
-    let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/collections/' + m[0]);
-    prom = prom.then(xhr => this.setState({
-      item: xhr.response,
-      tail: path.substr(m[0].length)
-    }));
-    prom = prom.catch(() => this.setState({ 'error': 'Cannot load' }));
-  }
-
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.props = nextProps;
-    this.fetchData();
-  }
-
-  render({}, { item, tail, error }) {
-    if (error)
-      return error;
-
-    if (!item)
-      return 'Loading...';
-
-    return (
-      <span>
-        <a href={ '/collection-browse/' + item.uuid }>
-          { item.name || item.uuid }
-        </a><a href={ '/collection-browse/' + item.uuid + '/' + encodeURIComponentIncludingDots(tail) }>
-          { tail }
-        </a>
-      </span>
-    );
-  }
-}
+import wbParseWorkflowDef from 'wb-parse-workflow-def';
+import wbInputSpecInfo from 'wb-input-spec-info';
+import wbUuidsToCwl from 'wb-uuids-to-cwl';
+import { encodeURIComponentIncludingDots, parseKeepRef } from 'wb-process-misc';
+import WBPathDisplay from 'wb-path-display';
 
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
@@ -129,7 +29,7 @@ class WBLaunchWorkflowPage extends Component {
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/workflows/' + workflowUuid);
     prom = prom.then(xhr => {
-        const def = parseDefinition(xhr.response.definition);
+        const def = wbParseWorkflowDef(xhr.response.definition);
         const inputs = {};
         const main = def['$graph'].find(a => (a.id === '#main'));
         main.inputs.map(a => (inputs[a.id] = JSON.stringify(a.default)));
@@ -146,7 +46,7 @@ class WBLaunchWorkflowPage extends Component {
   renderInput(inputSpec) {
     const { app } = this.props;
 
-    const { isFile, isDirectory, isArray } = inputSpecInfo(inputSpec);
+    const { isFile, isDirectory, isArray } = wbInputSpecInfo(inputSpec);
 
     if (!isFile && !isDirectory)
       return (
@@ -219,7 +119,7 @@ class WBLaunchWorkflowPage extends Component {
     for (let k in this.state.inputs) {
       try {
         let val = jsyaml.safeLoad(this.state.inputs[k]);
-        val = uuidsToCwl(val);
+        val = wbUuidsToCwl(val);
         k = k.split('/').slice(1).join('/');
         inputs[k] = (val === undefined ? null : val);
       } catch (exc) {

From f6ffec6bb12d7915e58e87ad56ed7d12f08bb8c9 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 10 Apr 2020 22:43:58 +0200
Subject: [PATCH 138/170] Further modularization of wb-launch-workflow-page,
 looks much more manageable now.

---
 .../process/wb-submit-container-request.js    |  87 +++++++++
 .../src/js/arvados/process/wb-uuids-to-cwl.js |   2 +-
 .../src/js/component/wb-workflow-input.js     |  71 +++++++
 .../src/js/page/wb-launch-workflow-page.js    | 179 +++---------------
 4 files changed, 190 insertions(+), 149 deletions(-)
 create mode 100644 frontend/src/js/arvados/process/wb-submit-container-request.js
 create mode 100644 frontend/src/js/component/wb-workflow-input.js

diff --git a/frontend/src/js/arvados/process/wb-submit-container-request.js b/frontend/src/js/arvados/process/wb-submit-container-request.js
new file mode 100644
index 0000000..060b2c1
--- /dev/null
+++ b/frontend/src/js/arvados/process/wb-submit-container-request.js
@@ -0,0 +1,87 @@
+import makeArvadosRequest from 'make-arvados-request';
+import wbUuidsToCwl from 'wb-uuids-to-cwl';
+
+function wbParseWorkflowInputs(workflowDefinition, userInputs, errors) {
+  // first see if all inputs are parseable
+  const inputs = {};
+
+  const main = workflowDefinition['$graph'].find(a => (a.id === '#main'));
+
+  for (let k in userInputs) {
+    try {
+      let val = jsyaml.safeLoad(userInputs[k]);
+      val = wbUuidsToCwl(val);
+      k = k.split('/').slice(1).join('/');
+      inputs[k] = (val === undefined ? null : val);
+    } catch (exc) {
+      errors.push('Error parsing ' + k + ': ' + exc.message);
+    }
+  }
+
+  return inputs;
+}
+
+// params:
+//   arvHost, arvToken, inputs,
+//   projectUuid, workflowDefinition, workflowUuid
+//   processName, processDescription
+function wbSubmitContainerRequest(params) {
+
+  const { workflowDefinition, workflowUuid,
+    processName, processDescription, inputs,
+    arvHost, arvToken, projectUuid } = params;
+
+  // prepare a request
+  const req = {
+    name: processName,
+    description: processDescription,
+    owner_uuid: projectUuid,
+    container_image: 'arvados/jobs',
+    properties: {
+      template_uuid: workflowUuid
+    },
+    runtime_constraints: {
+      API: true,
+      vcpus: 1,
+      ram: 1073741824
+    },
+    cwd: '/var/spool/cwl',
+    command: [
+      'arvados-cwl-runner',
+      '--local',
+      '--api=containers',
+      '--project-uuid=' + projectUuid,
+      '--collection-cache-size=256',
+      '/var/lib/cwl/workflow.json#main',
+      '/var/lib/cwl/cwl.input.json'],
+    output_path: '/var/spool/cwl',
+    priority: 1,
+    state: 'Committed',
+    mounts: {
+      'stdout': {
+        kind: 'file',
+        path: '/var/spool/cwl/cwl.output.json'
+      },
+      '/var/spool/cwl': {
+        kind: 'collection',
+        writable: true
+      },
+      '/var/lib/cwl/workflow.json': {
+        kind: 'json',
+        content: workflowDefinition
+      },
+      '/var/lib/cwl/cwl.input.json': {
+        kind: 'json',
+        content: inputs
+      }
+    }
+  };
+
+  const prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/container_requests',
+    { method: 'POST', data: JSON.stringify(req) });
+
+  return prom;
+}
+
+export { wbParseWorkflowInputs, wbSubmitContainerRequest };
diff --git a/frontend/src/js/arvados/process/wb-uuids-to-cwl.js b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
index 6c0a3ff..cb1df7c 100644
--- a/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
+++ b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
@@ -2,7 +2,7 @@ function wbUuidsToCwl(obj) {
   if (obj instanceof Array) {
     const res = [];
     for (let k in obj) {
-        res[k] = uuidsToCwl(obj[k]);
+        res[k] = wbUuidsToCwl(obj[k]);
     }
     return res;
   }
diff --git a/frontend/src/js/component/wb-workflow-input.js b/frontend/src/js/component/wb-workflow-input.js
new file mode 100644
index 0000000..473a611
--- /dev/null
+++ b/frontend/src/js/component/wb-workflow-input.js
@@ -0,0 +1,71 @@
+import { h, Component } from 'preact';
+import wbInputSpecInfo from 'wb-input-spec-info';
+import WBPathDisplay from 'wb-path-display';
+import { parseKeepRef } from 'wb-process-misc';
+
+class WBWorkflowInput extends Component {
+  render({ app, inputSpec, inputsDict, browseDialogRef }) {
+    const { isFile, isDirectory, isArray } = wbInputSpecInfo(inputSpec);
+
+    if (!isFile && !isDirectory)
+      return (
+        <div>
+          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
+            value={ inputsDict[inputSpec.id] }
+            onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
+          <div class="mt-2 text-muted">{ inputSpec.doc }</div>
+        </div>
+      );
+
+    const button = (
+      <button class="btn btn-outline-primary"
+        onclick={ e => {
+          e.preventDefault();
+          browseDialogRef.current.show(
+            [].concat(isFile ? 'file' : []).concat(isDirectory ? 'directory' : []),
+            isArray,
+            v => {
+              inputsDict[inputSpec.id] = JSON.stringify(v);
+              this.setState({});
+            });
+        } }>
+        Browse...
+      </button>
+    );
+
+    let value = inputsDict[inputSpec.id];
+    if (value) {
+      try {
+        value = jsyaml.load(value);
+      } catch (_) {}
+    }
+
+    return (
+      <div>
+        <div class="input-group">
+          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
+            value={ inputsDict[inputSpec.id] }
+            onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
+          <div class="input-group-append">
+            { button }
+          </div>
+        </div>
+        <div class="mt-2 text-muted">{ inputSpec.doc }</div>
+        { value ?
+          isArray ? (
+            <ul class="mb-0">
+              { value.map(path => (
+                <li>
+                  <WBPathDisplay app={ app } path={ parseKeepRef(path) } />
+                </li>
+              )) }
+            </ul>
+        ) : (
+          <WBPathDisplay app={ app } path={ parseKeepRef(value) } />
+        ) : null }
+      </div>
+    );
+  }
+}
+
+export default WBWorkflowInput;
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index cda3671..603ad5b 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -4,15 +4,12 @@ import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBBrowseDialog from 'wb-browse-dialog';
 import WBTable from 'wb-table';
-import WBNameAndUuid from 'wb-name-and-uuid';
 import makeArvadosRequest from 'make-arvados-request';
 import { wbDisableControls, wbEnableControls } from 'wb-disable-controls';
 import linkState from 'linkstate';
 import wbParseWorkflowDef from 'wb-parse-workflow-def';
-import wbInputSpecInfo from 'wb-input-spec-info';
-import wbUuidsToCwl from 'wb-uuids-to-cwl';
-import { encodeURIComponentIncludingDots, parseKeepRef } from 'wb-process-misc';
-import WBPathDisplay from 'wb-path-display';
+import { wbParseWorkflowInputs, wbSubmitContainerRequest } from 'wb-submit-container-request';
+import WBWorkflowInput from 'wb-workflow-input';
 
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
@@ -43,156 +40,40 @@ class WBLaunchWorkflowPage extends Component {
     });
   }
 
-  renderInput(inputSpec) {
-    const { app } = this.props;
-
-    const { isFile, isDirectory, isArray } = wbInputSpecInfo(inputSpec);
-
-    if (!isFile && !isDirectory)
-      return (
-        <div>
-          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
-            value={ this.state.inputs[inputSpec.id] }
-            onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
-          <div class="mt-2 text-muted">{ inputSpec.doc }</div>
-        </div>
-      );
-
-    const button = (
-      <button class="btn btn-outline-primary"
-        onclick={ e => {
-          e.preventDefault();
-          this.browseDialogRef.current.show(
-            [].concat(isFile ? 'file' : []).concat(isDirectory ? 'directory' : []),
-            isArray,
-            v => {
-              this.state.inputs[inputSpec.id] = JSON.stringify(v);
-              this.setState({});
-            });
-        } }>
-        Browse...
-      </button>
-    );
-
-    let value = this.state.inputs[inputSpec.id];
-    if (value) {
-      try {
-        value = jsyaml.load(value);
-      } catch (_) {}
-    }
-
-    return (
-      <div>
-        <div class="input-group">
-          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
-            value={ this.state.inputs[inputSpec.id] }
-            onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
-          <div class="input-group-append">
-            { button }
-          </div>
-        </div>
-        <div class="mt-2 text-muted">{ inputSpec.doc }</div>
-        { value ?
-          isArray ? (
-            <ul class="mb-0">
-              { value.map(path => (
-                <li>
-                  <WBPathDisplay app={ app } path={ parseKeepRef(path) } />
-                </li>
-              )) }
-            </ul>
-        ) : (
-          <WBPathDisplay app={ app } path={ parseKeepRef(value) } />
-        ) : null }
-      </div>
-    );
-  }
-
   submit() {
     // first see if all inputs are parseable
-    const inputs = {};
-    const errors = [];
-
-    const { workflowDefinition } = this.state;
-    const main = workflowDefinition['$graph'].find(a => (a.id === '#main'));
-
-    for (let k in this.state.inputs) {
-      try {
-        let val = jsyaml.safeLoad(this.state.inputs[k]);
-        val = wbUuidsToCwl(val);
-        k = k.split('/').slice(1).join('/');
-        inputs[k] = (val === undefined ? null : val);
-      } catch (exc) {
-        errors.push('Error parsing ' + k + ': ' + exc.message);
-      }
-    }
+    const { app, workflowUuid } = this.props;
+    const { arvHost, arvToken, currentUser } = app.state;
+    const { workflowDefinition, projectUuid,
+      processName, processDescription,
+      defaultProcessName, defaultProcessDescription } = this.state;
 
+    const errors = [];
+    const inputs = wbParseWorkflowInputs(workflowDefinition,
+      this.state.inputs, errors);
     if (errors.length > 0) {
       this.setState({ errors });
       return;
     }
 
-    // prepare a request
-    const { app, workflowUuid } = this.props;
-    const { processName, processDescription,
-      defaultProcessName, defaultProcessDescription,
-      projectUuid } = this.state;
-    const { arvHost, arvToken, currentUser } = app.state;
-    const req = {
-      name: processName || defaultProcessName,
-      description: processDescription || defaultProcessDescription,
-      owner_uuid: projectUuid || currentUser.uuid,
-      container_image: 'arvados/jobs',
-      properties: {
-        template_uuid: workflowUuid
-      },
-      runtime_constraints: {
-        API: true,
-        vcpus: 1,
-        ram: 1073741824
-      },
-      cwd: '/var/spool/cwl',
-      command: [
-        'arvados-cwl-runner',
-        '--local',
-        '--api=containers',
-        '--project-uuid=' + (projectUuid || currentUser.uuid),
-        '--collection-cache-size=256',
-        '/var/lib/cwl/workflow.json#main',
-        '/var/lib/cwl/cwl.input.json'],
-      output_path: '/var/spool/cwl',
-      priority: 1,
-      state: 'Committed',
-      mounts: {
-        'stdout': {
-          kind: 'file',
-          path: '/var/spool/cwl/cwl.output.json'
-        },
-        '/var/spool/cwl': {
-          kind: 'collection',
-          writable: true
-        },
-        '/var/lib/cwl/workflow.json': {
-          kind: 'json',
-          content: workflowDefinition
-        },
-        '/var/lib/cwl/cwl.input.json': {
-          kind: 'json',
-          content: inputs
-        }
-      }
-    };
+    const params = {
+      arvHost, arvToken, inputs,
+      processName: processName || defaultProcessName,
+      processDescription: processDescription || defaultProcessDescription,
+      projectUuid: projectUuid || currentUser.uuid,
+      workflowUuid, workflowDefinition
+    }
 
     wbDisableControls();
-    let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/container_requests',
-      { method: 'POST', data: JSON.stringify(req) });
+    let prom = wbSubmitContainerRequest(params);
     prom = prom.then(xhr => {
       wbEnableControls();
       route('/process/' + xhr.response.uuid);
     });
-
-    // throw Error('Not implemented');
+    prom = prom.catch(exc => {
+      wbEnableControls();
+      this.setState({ errors: [ exc.message ] });
+    });
   }
 
   render({ app, workflowUuid },
@@ -254,16 +135,12 @@ class WBLaunchWorkflowPage extends Component {
               <WBTable columns={ [ 'Name', 'Value'] }
                 rows={ workflowDefinition.$graph.find(a => (a.id === '#main')).inputs.map(it => [
                   it.label || it.id,
-                  this.renderInput(it)
+                  ( <WBWorkflowInput app={ app } inputSpec={ it }
+                    inputsDict={ this.state.inputs }
+                    browseDialogRef={ this.browseDialogRef } /> )
                 ]) } />
             </div>
 
-            <div class="form-group">
-              <button class="btn btn-success" onclick={ e => { e.preventDefault(); this.submit(); } }>
-                Submit
-              </button>
-            </div>
-
             { errors.length > 0 ? (
               <div class="form-group">
                 { errors.map(err => (
@@ -273,6 +150,12 @@ class WBLaunchWorkflowPage extends Component {
                 ))}
               </div>
             ) : null }
+
+            <div class="form-group">
+              <button class="btn btn-success" onclick={ e => { e.preventDefault(); this.submit(); } }>
+                Submit
+              </button>
+            </div>
           </form>) : <div>Loading...</div> }
       </div>
     );

From 9979cb0b6f3ea3bd5b9afb24c6d24afacb2abed7 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 11 Apr 2020 00:35:58 +0200
Subject: [PATCH 139/170] Started implementing running processes in
 automatically created sub-projects, needs testing.

---
 .../process/wb-submit-container-request.js    | 164 +++++++++++++-----
 .../src/js/page/wb-launch-workflow-page.js    |  18 +-
 2 files changed, 131 insertions(+), 51 deletions(-)

diff --git a/frontend/src/js/arvados/process/wb-submit-container-request.js b/frontend/src/js/arvados/process/wb-submit-container-request.js
index 060b2c1..074ce09 100644
--- a/frontend/src/js/arvados/process/wb-submit-container-request.js
+++ b/frontend/src/js/arvados/process/wb-submit-container-request.js
@@ -21,65 +21,133 @@ function wbParseWorkflowInputs(workflowDefinition, userInputs, errors) {
   return inputs;
 }
 
+function ensureSubProject(arvHost, arvToken, projectUuid) {
+  const filters = [
+    [ 'type', '=', 'project' ],
+    [ 'owner_uuid', '=', projectUuid ],
+    [ 'properties.type', '=', 'daily_process_subproject_container' ]
+  ];
+
+  let prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)));
+
+  prom = prom.then(xhr => {
+    if (xhr.response.items.length === 0) {
+      let prom_1 = new Promise(accept => accept());
+      prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/groups', { method: 'POST',
+        data: { owner_uuid: projectUuid,
+          name: 'Container for daily sub-projects for processes',
+          properties: { type: 'daily_process_subproject_container' } } }));
+      prom_1 = prom_1.then(xhr_1 => xhr_1.response.uuid);
+      return prom_1;
+    }
+    return xhr.items[0].uuid;
+  });
+
+  let date = new Date();
+  date = (date.getYear() + 1900) + '-' +
+    ('00' + (date.getMonth() + 1)).slice(-2) + '-' +
+    ('00' + date.getDate()).slice(-2);
+
+  prom = prom.then(containerUuid => {
+    const filters_1 = [
+      [ 'type', '=', 'project'],
+      [ 'owner_uuid', '=', containerUuid ],
+      [ 'properties.type', '=', 'daily_process_subproject' ],
+      [ 'properties.date', '=', date ]
+    ];
+    return makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters_1)));
+  });
+
+  prom = prom.then(xhr => {
+    if (xhr.reponse.items.length === 0) {
+      let prom_1 = new Promise(accept => accept());
+      prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/groups', { method: 'POST',
+        data: { owner_uuid: containerUuid,
+          name: 'Daily processes sub-project for ' + date,
+          properties: { type: 'daily_process_subproject', date } } }));
+      prom_1 = prom_1.then(xhr => xhr.response.uuid);
+      return prom_1;
+    }
+    return xhr.items[0].uuid;
+  });
+  return prom;
+}
+
 // params:
 //   arvHost, arvToken, inputs,
 //   projectUuid, workflowDefinition, workflowUuid
-//   processName, processDescription
+//   processName, processDescription, placeInSubProject
 function wbSubmitContainerRequest(params) {
 
   const { workflowDefinition, workflowUuid,
     processName, processDescription, inputs,
-    arvHost, arvToken, projectUuid } = params;
-
-  // prepare a request
-  const req = {
-    name: processName,
-    description: processDescription,
-    owner_uuid: projectUuid,
-    container_image: 'arvados/jobs',
-    properties: {
-      template_uuid: workflowUuid
-    },
-    runtime_constraints: {
-      API: true,
-      vcpus: 1,
-      ram: 1073741824
-    },
-    cwd: '/var/spool/cwl',
-    command: [
-      'arvados-cwl-runner',
-      '--local',
-      '--api=containers',
-      '--project-uuid=' + projectUuid,
-      '--collection-cache-size=256',
-      '/var/lib/cwl/workflow.json#main',
-      '/var/lib/cwl/cwl.input.json'],
-    output_path: '/var/spool/cwl',
-    priority: 1,
-    state: 'Committed',
-    mounts: {
-      'stdout': {
-        kind: 'file',
-        path: '/var/spool/cwl/cwl.output.json'
-      },
-      '/var/spool/cwl': {
-        kind: 'collection',
-        writable: true
+    arvHost, arvToken,
+    placeInSubProject } = params;
+
+  let { projectUuid } = params;
+
+  let prom = new Promise(accept => accept());
+
+  if (placeInSubProject) {
+    prom = prom.then(() => ensureSubProject(arvHost, arvToken, projectUuid));
+    prom = prom.then(subProjUuid => (projectUuid = subProjUuid));
+  }
+
+  prom = prom.then(() => {
+    // prepare a request
+    const req = {
+      name: processName,
+      description: processDescription,
+      owner_uuid: projectUuid,
+      container_image: 'arvados/jobs',
+      properties: {
+        template_uuid: workflowUuid
       },
-      '/var/lib/cwl/workflow.json': {
-        kind: 'json',
-        content: workflowDefinition
+      runtime_constraints: {
+        API: true,
+        vcpus: 1,
+        ram: 1073741824
       },
-      '/var/lib/cwl/cwl.input.json': {
-        kind: 'json',
-        content: inputs
+      cwd: '/var/spool/cwl',
+      command: [
+        'arvados-cwl-runner',
+        '--local',
+        '--api=containers',
+        '--project-uuid=' + projectUuid,
+        '--collection-cache-size=256',
+        '/var/lib/cwl/workflow.json#main',
+        '/var/lib/cwl/cwl.input.json'],
+      output_path: '/var/spool/cwl',
+      priority: 1,
+      state: 'Committed',
+      mounts: {
+        'stdout': {
+          kind: 'file',
+          path: '/var/spool/cwl/cwl.output.json'
+        },
+        '/var/spool/cwl': {
+          kind: 'collection',
+          writable: true
+        },
+        '/var/lib/cwl/workflow.json': {
+          kind: 'json',
+          content: workflowDefinition
+        },
+        '/var/lib/cwl/cwl.input.json': {
+          kind: 'json',
+          content: inputs
+        }
       }
-    }
-  };
+    };
 
-  const prom = makeArvadosRequest(arvHost, arvToken,
-    '/arvados/v1/container_requests',
-    { method: 'POST', data: JSON.stringify(req) });
+    return makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests',
+      { method: 'POST', data: JSON.stringify(req) });
+  });
 
   return prom;
 }
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 603ad5b..8397aad 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -17,6 +17,7 @@ class WBLaunchWorkflowPage extends Component {
     this.browseDialogRef = createRef();
     this.state.inputs = {};
     this.state.errors = [];
+    this.state.placeInSubProject = true;
   }
 
   componentDidMount() {
@@ -46,7 +47,8 @@ class WBLaunchWorkflowPage extends Component {
     const { arvHost, arvToken, currentUser } = app.state;
     const { workflowDefinition, projectUuid,
       processName, processDescription,
-      defaultProcessName, defaultProcessDescription } = this.state;
+      defaultProcessName, defaultProcessDescription,
+      placeInSubProject } = this.state;
 
     const errors = [];
     const inputs = wbParseWorkflowInputs(workflowDefinition,
@@ -61,7 +63,7 @@ class WBLaunchWorkflowPage extends Component {
       processName: processName || defaultProcessName,
       processDescription: processDescription || defaultProcessDescription,
       projectUuid: projectUuid || currentUser.uuid,
-      workflowUuid, workflowDefinition
+      workflowUuid, workflowDefinition, placeInSubProject
     }
 
     wbDisableControls();
@@ -78,7 +80,7 @@ class WBLaunchWorkflowPage extends Component {
 
   render({ app, workflowUuid },
     { workflow, workflowDefinition, projectUuid, processName, processDescription,
-    defaultProcessName, defaultProcessDescription, errors }) {
+    defaultProcessName, defaultProcessDescription, errors, placeInSubProject }) {
 
     return (
       <div>
@@ -116,6 +118,16 @@ class WBLaunchWorkflowPage extends Component {
               ) : null }
             </div>
 
+            <div class="form-check mb-3">
+              <input class="form-check-input" type="checkbox"
+                checked={ placeInSubProject ? 'checked' : null }
+                onchange={ e => (this.state.placeInSubProject = e.target.checked) }
+                id="placeInSubProject" />
+              <label class="form-check-label" for="placeInSubProject">
+                Place in a daily sub-project
+              </label>
+            </div>
+
             <div class="form-group">
               <label for="processName">Process Name</label>
               <input type="text" class="form-control" id="processName"

From 2c95865e2ec2b53a9d12897fde46f33acc391dd0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 11 Apr 2020 00:47:11 +0200
Subject: [PATCH 140/170] Automatic subproject creation for processes seems to
 work.

---
 .../process/wb-submit-container-request.js    | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/js/arvados/process/wb-submit-container-request.js b/frontend/src/js/arvados/process/wb-submit-container-request.js
index 074ce09..9b15459 100644
--- a/frontend/src/js/arvados/process/wb-submit-container-request.js
+++ b/frontend/src/js/arvados/process/wb-submit-container-request.js
@@ -23,7 +23,7 @@ function wbParseWorkflowInputs(workflowDefinition, userInputs, errors) {
 
 function ensureSubProject(arvHost, arvToken, projectUuid) {
   const filters = [
-    [ 'type', '=', 'project' ],
+    [ 'group_class', '=', 'project' ],
     [ 'owner_uuid', '=', projectUuid ],
     [ 'properties.type', '=', 'daily_process_subproject_container' ]
   ];
@@ -36,13 +36,14 @@ function ensureSubProject(arvHost, arvToken, projectUuid) {
       let prom_1 = new Promise(accept => accept());
       prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
         '/arvados/v1/groups', { method: 'POST',
-        data: { owner_uuid: projectUuid,
+        data: JSON.stringify({ owner_uuid: projectUuid,
+          group_class: 'project',
           name: 'Container for daily sub-projects for processes',
-          properties: { type: 'daily_process_subproject_container' } } }));
+          properties: { type: 'daily_process_subproject_container' } }) }));
       prom_1 = prom_1.then(xhr_1 => xhr_1.response.uuid);
       return prom_1;
     }
-    return xhr.items[0].uuid;
+    return xhr.response.items[0].uuid;
   });
 
   let date = new Date();
@@ -50,29 +51,35 @@ function ensureSubProject(arvHost, arvToken, projectUuid) {
     ('00' + (date.getMonth() + 1)).slice(-2) + '-' +
     ('00' + date.getDate()).slice(-2);
 
-  prom = prom.then(containerUuid => {
+  let containerUuid;
+
+  prom = prom.then(uuid => {
+    containerUuid = uuid;
+
     const filters_1 = [
-      [ 'type', '=', 'project'],
+      [ 'group_class', '=', 'project'],
       [ 'owner_uuid', '=', containerUuid ],
       [ 'properties.type', '=', 'daily_process_subproject' ],
       [ 'properties.date', '=', date ]
     ];
+    
     return makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters_1)));
   });
 
   prom = prom.then(xhr => {
-    if (xhr.reponse.items.length === 0) {
+    if (xhr.response.items.length === 0) {
       let prom_1 = new Promise(accept => accept());
       prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
         '/arvados/v1/groups', { method: 'POST',
-        data: { owner_uuid: containerUuid,
+        data: JSON.stringify({ owner_uuid: containerUuid,
+          group_class: 'project',
           name: 'Daily processes sub-project for ' + date,
-          properties: { type: 'daily_process_subproject', date } } }));
+          properties: { type: 'daily_process_subproject', date } }) }));
       prom_1 = prom_1.then(xhr => xhr.response.uuid);
       return prom_1;
     }
-    return xhr.items[0].uuid;
+    return xhr.response.items[0].uuid;
   });
   return prom;
 }

From aade2d9b1637343c5c14b8d7216a505c100b1a00 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 11 Apr 2020 11:30:21 +0200
Subject: [PATCH 141/170] Make no tab open by default in the listing of home
 directory, since this is the one that usually contains a mess.

---
 frontend/src/js/page/wb-browse.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index da81311..0c31cab 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -172,6 +172,9 @@ class WBBrowse extends Component {
       ownerUuid
     };
 
+    const { currentUser } = app.state;
+    const atHome = (ownerUuid === currentUser.uuid);
+
     return (
       <div>
         <WBRenameDialog app={ app } ref={ this.renameDialogRef } />
@@ -206,7 +209,7 @@ class WBBrowse extends Component {
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
-            { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
+            { 'id': 'collection', 'name': 'Collections', 'isActive': ((!objTypeTab && !atHome) || objTypeTab === 'collection') },
             { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
             { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
             onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
@@ -214,7 +217,7 @@ class WBBrowse extends Component {
 
         {
           (mode !== 'browse') ? null :
-          (!objTypeTab || objTypeTab === 'collection') ? (
+          ((!objTypeTab && !atHome) || objTypeTab === 'collection') ? (
             <WBCollectionListing
               itemsPerPage="20"
               activePage={ Number(collectionPage || 0) }

From c1250d77cc7d55dafe3501dc93b8b74b74de6bc0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Sat, 11 Apr 2020 11:34:23 +0200
Subject: [PATCH 142/170] Extended the no default tab effect to All Projects
 view.

---
 frontend/src/js/page/wb-browse.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 0c31cab..6743b38 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -173,7 +173,7 @@ class WBBrowse extends Component {
     };
 
     const { currentUser } = app.state;
-    const atHome = (ownerUuid === currentUser.uuid);
+    const noDefaultTab = (!ownerUuid || ownerUuid === currentUser.uuid);
 
     return (
       <div>
@@ -209,7 +209,7 @@ class WBBrowse extends Component {
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
-            { 'id': 'collection', 'name': 'Collections', 'isActive': ((!objTypeTab && !atHome) || objTypeTab === 'collection') },
+            { 'id': 'collection', 'name': 'Collections', 'isActive': ((!objTypeTab && !noDefaultTab) || objTypeTab === 'collection') },
             { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
             { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
             onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
@@ -217,7 +217,7 @@ class WBBrowse extends Component {
 
         {
           (mode !== 'browse') ? null :
-          ((!objTypeTab && !atHome) || objTypeTab === 'collection') ? (
+          ((!objTypeTab && !noDefaultTab) || objTypeTab === 'collection') ? (
             <WBCollectionListing
               itemsPerPage="20"
               activePage={ Number(collectionPage || 0) }

From a5a829959d0d519df71bb84b9beadb497899daba Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 12:21:38 +0200
Subject: [PATCH 143/170] Added WBLiveLogs to container view.

---
 frontend/src/css/index.css                |  7 ++++
 frontend/src/js/component/wb-live-logs.js | 47 +++++++++++++++++++++++
 frontend/src/js/page/wb-container-view.js |  4 ++
 3 files changed, 58 insertions(+)
 create mode 100644 frontend/src/js/component/wb-live-logs.js

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index f46dceb..76e1fcf 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -6,6 +6,13 @@ pre.word-wrap {
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
 
+pre.terminal {
+  background: black;
+  color: #aaa;
+  height: 600px;
+  width: 100%;
+}
+
 .w-1 {
   width: 1px !important;
 }
diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
new file mode 100644
index 0000000..26f0b79
--- /dev/null
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -0,0 +1,47 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBLiveLogs extends Component {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.uuid === this.props.uuid);
+      return;
+    this.props = nextProps;
+    this.fetchData();
+  }
+
+  fetchData() {
+    const { uuid, app } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const filters = [
+      [ 'object_uuid', '=', uuid ]
+    ];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)));
+    prom = prom.then(xhr => {
+      const { items } = xhr.response;
+      this.setState({
+        content: items.filter(a => ('text' in a.properties)).map(a => a.properties.text.trim()).join('\n')
+      });
+    });
+  }
+
+  render({}, { content }) {
+    return (
+      <div>
+        <a href="#" onclick={ e => {
+          e.preventDefault();
+          this.fetchData();
+        } }>Refresh</a>
+        <pre class="word-warp terminal">
+          { content }
+        </pre>
+      </div>
+    );
+  }
+}
+
+export default WBLiveLogs;
diff --git a/frontend/src/js/page/wb-container-view.js b/frontend/src/js/page/wb-container-view.js
index ea2a804..3ca5a4b 100644
--- a/frontend/src/js/page/wb-container-view.js
+++ b/frontend/src/js/page/wb-container-view.js
@@ -3,6 +3,7 @@ import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerFields from 'wb-container-fields';
+import WBLiveLogs from 'wb-live-logs';
 
 class WBContainerView extends Component {
   render({ app, uuid }) {
@@ -21,6 +22,9 @@ class WBContainerView extends Component {
 
         <h2>Container Fields</h2>
         <WBContainerFields app={ app } uuid={ uuid } />
+
+        <h2>Live Logs</h2>
+        <WBLiveLogs app={ app } uuid={ uuid } />
       </div>
     );
   }

From ace10afce7d30f9eb603ad1fab6798d8ea141f0e Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 12:40:30 +0200
Subject: [PATCH 144/170] Added pagination to WBLiveLogs.

---
 frontend/src/js/component/wb-live-logs.js | 27 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index 26f0b79..e4e92e2 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -1,7 +1,13 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
+import WBPagination from 'wb-pagination';
 
 class WBLiveLogs extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.page = 0;
+  }
+
   componentDidMount() {
     this.fetchData();
   }
@@ -10,32 +16,41 @@ class WBLiveLogs extends Component {
     if (nextProps.uuid === this.props.uuid);
       return;
     this.props = nextProps;
+    this.state.page = 0;
     this.fetchData();
   }
 
   fetchData() {
-    const { uuid, app } = this.props;
+    const { uuid, app, itemsPerPage } = this.props;
+    const { page } = this.state;
     const { arvHost, arvToken } = app.state;
     const filters = [
       [ 'object_uuid', '=', uuid ]
     ];
     let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&offset=' + (itemsPerPage * page) +
+      '&limit=' + itemsPerPage);
     prom = prom.then(xhr => {
       const { items } = xhr.response;
       this.setState({
-        content: items.filter(a => ('text' in a.properties)).map(a => a.properties.text.trim()).join('\n')
+        content: items
+          .filter(a => ('text' in a.properties))
+          .map(a => a.properties.text.trim()).join('\n'),
+        numPages: Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
   }
 
-  render({}, { content }) {
+  render({}, { content, page, numPages }) {
     return (
       <div>
         <a href="#" onclick={ e => {
           e.preventDefault();
           this.fetchData();
         } }>Refresh</a>
+        <WBPagination activePage={ page } numPages={ numPages }
+          onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
         <pre class="word-warp terminal">
           { content }
         </pre>
@@ -44,4 +59,8 @@ class WBLiveLogs extends Component {
   }
 }
 
+WBLiveLogs.defaultProps = {
+  itemsPerPage: 100
+};
+
 export default WBLiveLogs;

From 438dc4bb18aa468c393b89909f7140280ceb7516 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 12:57:48 +0200
Subject: [PATCH 145/170] Improved WBPagination, three dots now move to the
 middle of neighboring pages.

---
 frontend/src/js/widget/wb-pagination.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
index 5d0ff89..9c0d901 100644
--- a/frontend/src/js/widget/wb-pagination.js
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -28,13 +28,14 @@ class WBPagination extends Component {
       </li>
     ));
 
-    for (let idx in visible) {
+    for (let idx = 0; idx < visible.length; idx++) {
       let i = visible[idx];
+      let capturePrev = prev;
       if (i > prev + 1)
         res.push((
           <li class="page-item">
-            <a class="page-link" href={ getPageUrl(i - 1) }
-              onclick={ e => this.changePage(e, i - 1) }>...</a>
+            <a class="page-link" href={ getPageUrl(Math.round((i + capturePrev) / 2)) }
+              onclick={ e => this.changePage(e, Math.round((i + capturePrev) / 2)) }>...</a>
           </li>
         ));
       prev = i;

From fe4eaba244271803c9b4cb6025ee19efaec37b3f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 13:08:57 +0200
Subject: [PATCH 146/170] Refresh button in WBLiveLogs not necessary with
 pagination.

---
 frontend/src/js/component/wb-live-logs.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index e4e92e2..944ee18 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -45,10 +45,6 @@ class WBLiveLogs extends Component {
   render({}, { content, page, numPages }) {
     return (
       <div>
-        <a href="#" onclick={ e => {
-          e.preventDefault();
-          this.fetchData();
-        } }>Refresh</a>
         <WBPagination activePage={ page } numPages={ numPages }
           onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
         <pre class="word-warp terminal">
@@ -60,7 +56,7 @@ class WBLiveLogs extends Component {
 }
 
 WBLiveLogs.defaultProps = {
-  itemsPerPage: 100
+  itemsPerPage: 1000
 };
 
 export default WBLiveLogs;

From 47eadecf2c5c1bc01b066e713d843504093577af Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 13:15:45 +0200
Subject: [PATCH 147/170] Added scrollback to top on page change in WBLiveLogs.

---
 frontend/src/js/component/wb-live-logs.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index 944ee18..e7a0a11 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import WBPagination from 'wb-pagination';
 
@@ -6,6 +6,7 @@ class WBLiveLogs extends Component {
   constructor(...args) {
     super(...args);
     this.state.page = 0;
+    this.terminalRef = createRef();
   }
 
   componentDidMount() {
@@ -39,6 +40,7 @@ class WBLiveLogs extends Component {
           .map(a => a.properties.text.trim()).join('\n'),
         numPages: Math.ceil(xhr.response.items_available / itemsPerPage)
       });
+      this.terminalRef.current.scrollTo(0, 0);
     });
   }
 
@@ -47,7 +49,7 @@ class WBLiveLogs extends Component {
       <div>
         <WBPagination activePage={ page } numPages={ numPages }
           onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
-        <pre class="word-warp terminal">
+        <pre class="word-warp terminal" ref={ this.terminalRef }>
           { content }
         </pre>
       </div>

From b9df02edf241d07b9688fe6a2016624cd7106435 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 13 Apr 2020 13:27:28 +0200
Subject: [PATCH 148/170] Added more log entries per page switch to WBLiveLogs.

---
 frontend/src/js/component/wb-live-logs.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index e7a0a11..a827c74 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -6,6 +6,7 @@ class WBLiveLogs extends Component {
   constructor(...args) {
     super(...args);
     this.state.page = 0;
+    this.state.moreItemsPerPage = false;
     this.terminalRef = createRef();
   }
 
@@ -22,8 +23,11 @@ class WBLiveLogs extends Component {
   }
 
   fetchData() {
-    const { uuid, app, itemsPerPage } = this.props;
-    const { page } = this.state;
+    const { uuid, app } = this.props;
+    let { itemsPerPage } = this.props;
+    const { page, moreItemsPerPage } = this.state;
+    if (moreItemsPerPage)
+      itemsPerPage *= 10;
     const { arvHost, arvToken } = app.state;
     const filters = [
       [ 'object_uuid', '=', uuid ]
@@ -44,9 +48,16 @@ class WBLiveLogs extends Component {
     });
   }
 
-  render({}, { content, page, numPages }) {
+  render({}, { content, page, numPages, moreItemsPerPage }) {
     return (
       <div>
+        <div class="custom-control custom-switch">
+          <input type="checkbox" class="custom-control-input" id="morePerPageSwitch"
+            checked = { moreItemsPerPage ? 'checked' : null }
+            onchange={ e => { this.state.moreItemsPerPage = e.target.checked;
+              this.state.page = 0; this.fetchData(); } } />
+          <label class="custom-control-label" for="morePerPageSwitch">More log entries per page</label>
+        </div>
         <WBPagination activePage={ page } numPages={ numPages }
           onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
         <pre class="word-warp terminal" ref={ this.terminalRef }>
@@ -58,7 +69,7 @@ class WBLiveLogs extends Component {
 }
 
 WBLiveLogs.defaultProps = {
-  itemsPerPage: 1000
+  itemsPerPage: 100
 };
 
 export default WBLiveLogs;

From a6bb8bc6cad2410793a1f6faa2dd81d1b6120d1b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 12:26:08 +0200
Subject: [PATCH 149/170] Fixed a CSS typo in WBLiveLogs.

---
 frontend/src/js/component/wb-live-logs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index a827c74..256ca24 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -60,7 +60,7 @@ class WBLiveLogs extends Component {
         </div>
         <WBPagination activePage={ page } numPages={ numPages }
           onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
-        <pre class="word-warp terminal" ref={ this.terminalRef }>
+        <pre class="word-wrap terminal" ref={ this.terminalRef }>
           { content }
         </pre>
       </div>

From 416fc08245d26939c920013d508b25594f6e63fc Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 13:28:55 +0200
Subject: [PATCH 150/170] Added WBJsonViewer.

---
 frontend/src/css/index.css                  |  5 +++
 frontend/src/js/arvados/base/wb-id-tools.js | 32 +++++++++++++++--
 frontend/src/js/component/wb-json-viewer.js | 39 +++++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/js/component/wb-json-viewer.js

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 76e1fcf..f47cc41 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -16,3 +16,8 @@ pre.terminal {
 .w-1 {
   width: 1px !important;
 }
+
+div.wb-json-viewer {
+  font-family: "Courier New", fixed-width;
+  white-space: pre;
+}
diff --git a/frontend/src/js/arvados/base/wb-id-tools.js b/frontend/src/js/arvados/base/wb-id-tools.js
index 2ac4752..400a32e 100644
--- a/frontend/src/js/arvados/base/wb-id-tools.js
+++ b/frontend/src/js/arvados/base/wb-id-tools.js
@@ -1,7 +1,13 @@
 import arvadosTypeName from 'arvados-type-name';
 
-const UUID_REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/g;
-const PDH_REGEX = /[a-f0-9]{32}\+[0-9]+/g;
+const UUID_PATTERN = '[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}';
+const PDH_PATTERN = '[a-f0-9]{32}\\+[0-9]+';
+
+const UUID_REGEX = new RegExp(UUID_PATTERN);
+const PDH_REGEX = new RegExp(PDH_PATTERN);
+
+const UUID_REGEX_G = new RegExp(UUID_PATTERN, 'g');
+const PDH_REGEX_G = new RegExp(PDH_PATTERN, 'g');
 
 class WBIdTools {
   static isIdentifier(value) {
@@ -32,6 +38,28 @@ class WBIdTools {
     return ( m && m.index === 0 );
   }
 
+  static detectIdentifiers(value) {
+    return this.detectUuids(value).concat(this.detectPDHs(value));
+  }
+
+  static detectUuids(value) {
+    let m;
+    const res = [];
+    while (m = UUID_REGEX_G.exec(value)) {
+      res.push(m);
+    }
+    return res;
+  }
+
+  static detectPDHs(value) {
+    let m;
+    const res = [];
+    while (m = PDH_REGEX_G.exec(value)) {
+      res.push(m);
+    }
+    return res;
+  }
+
   static typeName(value) {
     if (this.isPDH(value))
       return 'collection';
diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
new file mode 100644
index 0000000..a9fdd20
--- /dev/null
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -0,0 +1,39 @@
+import { h, Component } from 'preact';
+import WBIdTools from 'wb-id-tools';
+import urlForObject from 'url-for-object';
+
+function detectIds(value) {
+  const matches = WBIdTools.detectIdentifiers(value);
+  matches.sort((a, b) => (a.index - b.index));
+  const res = [];
+  let ofs = 0;
+  for (let i = 0; i < matches.length; i++) {
+    const { index } = matches[i];
+    const id = matches[i][0];
+    const typeName = WBIdTools.typeName(id);
+    const url = (typeName === 'group' ? '/browse/' + id :
+      typeName === 'collection' ? '/collection-browse/' + id :
+      urlForObject({ uuid: id }));
+    res.push(value.substring(ofs, index));
+    res.push(h('a', { href: url }, id));
+    ofs = index + id.length;
+  }
+  res.push(value.substring(ofs));
+  return res;
+}
+
+class WBJsonViewer extends Component {
+  render({ value, stringify }) {
+    if (stringify)
+      value = JSON.stringify(value, null, 2);
+    return (
+      <div class="wb-json-viewer">{ detectIds(value) }</div>
+    );
+  }
+}
+
+WBJsonViewer.defaultProps = {
+  stringify: true
+};
+
+export default WBJsonViewer;

From d275025a8d8ba412450b5998c767da64e25cb6d1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 13:30:42 +0200
Subject: [PATCH 151/170] Replaced <pre>s with WBJsonViewer in
 WBContainerRequestFields.

---
 .../js/component/wb-container-request-fields.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index a7d1b05..cfedefe 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -7,6 +7,7 @@ import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBContainerRequestFields extends Component {
   componentDidMount() {
@@ -33,7 +34,7 @@ class WBContainerRequestFields extends Component {
         [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+            <WBJsonViewer value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'State', item.state ],
@@ -48,20 +49,20 @@ class WBContainerRequestFields extends Component {
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+              <WBJsonViewer value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+            <WBJsonViewer value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Container Image', (
@@ -70,12 +71,12 @@ class WBContainerRequestFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+            <WBJsonViewer value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+          <WBJsonViewer value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Output Name', item.output_name ],
@@ -90,7 +91,7 @@ class WBContainerRequestFields extends Component {
           <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
         ) ],
         [ 'Filters', (
-          item.filters ? (<pre class="word-wrap">{ item.filters }</pre>) : (<i>{ String(item.filters) }</i>)
+          item.filters ? (<WBJsonViewer value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
         ) ],
         [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
         [ 'Runtime User', (
@@ -98,7 +99,7 @@ class WBContainerRequestFields extends Component {
         ) ],
         [ 'Runtime Auth Scopes', (
           item.runtime_auth_scopes ? (
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_auth_scopes, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_auth_scopes } />
           ) : (
             <i>{ String(item.runtime_auth_scopes) }</i>
           )

From 06639bb5aa6db896eebb79e837cc8bcea1d888d4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 13:52:13 +0200
Subject: [PATCH 152/170] Replaced <pre>s with WBJsonViewer in
 WBCollectionFields, WBContainerFields and WBWorkflowFields.

---
 frontend/src/js/component/wb-collection-fields.js |  3 ++-
 frontend/src/js/component/wb-container-fields.js  | 13 +++++++------
 frontend/src/js/component/wb-workflow-fields.js   |  9 +++++----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index 0049f89..0bedadc 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -8,6 +8,7 @@ import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 import wbFormatSpecialValue from 'wb-format-special-value';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBCollectionFields extends Component {
   componentDidMount() {
@@ -39,7 +40,7 @@ class WBCollectionFields extends Component {
         [ 'Description', wbFormatSpecialValue(item.description) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+            <WBJsonViewer value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'Portable Data Hash', item.portable_data_hash ],
diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index 7fc55d6..9597301 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -7,6 +7,7 @@ import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBContainerFields extends Component {
   componentDidMount() {
@@ -38,38 +39,38 @@ class WBContainerFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+            <WBJsonViewer value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+          <WBJsonViewer value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Mounts', (
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+              <WBJsonViewer value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Runtime Status', (
           <WBAccordion names={ ['Runtime Status'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_status, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_status } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+            <WBJsonViewer value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Output', item.output ? (
diff --git a/frontend/src/js/component/wb-workflow-fields.js b/frontend/src/js/component/wb-workflow-fields.js
index 9a45e27..069e1fc 100644
--- a/frontend/src/js/component/wb-workflow-fields.js
+++ b/frontend/src/js/component/wb-workflow-fields.js
@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBWorkflowFields extends Component {
   componentDidMount() {
@@ -51,9 +52,9 @@ class WBWorkflowFields extends Component {
               <WBAccordion names={ [ 'Inputs', 'Outputs', 'Rest' ] }
                 cardHeaderClass="card-header-sm">
 
-                <pre class="word-wrap">{ JSON.stringify(it.inputs, null, 2) }</pre>
+                <WBJsonViewer value={ it.inputs } />
 
-                <pre class="word-wrap">{ JSON.stringify(it.outputs, null, 2) }</pre>
+                <WBJsonViewer value={ it.outputs } />
 
                 { (() => {
                   delete it['inputs'];
@@ -63,7 +64,7 @@ class WBWorkflowFields extends Component {
                   delete it['doc'];
                   delete it['id'];
                   return (
-                    <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+                    <WBJsonViewer value={ it } />
                   );
                 })() }
 
@@ -77,7 +78,7 @@ class WBWorkflowFields extends Component {
             cardHeaderClass="card-header-sm">
 
             { graph.map(it => (
-              <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
+              <WBJsonViewer value={ it } />
             )) }
 
           </WBAccordion>

From 872b2e0ee09ea24adbc787add6a6911cf101c3ec Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 13:56:08 +0200
Subject: [PATCH 153/170] Wrap fix in .wb-json-viewer

---
 frontend/src/css/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index f47cc41..d7ab0a9 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -19,5 +19,5 @@ pre.terminal {
 
 div.wb-json-viewer {
   font-family: "Courier New", fixed-width;
-  white-space: pre;
+  white-space: pre-wrap;
 }

From a0edc66dfb1688ecd1255892a01d255d5904c60e Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 14:26:47 +0200
Subject: [PATCH 154/170] Added lookups to WBJsonViewer.

---
 .../src/js/component/wb-collection-fields.js  |  2 +-
 .../src/js/component/wb-container-fields.js   | 12 ++--
 .../component/wb-container-request-fields.js  | 16 +++---
 frontend/src/js/component/wb-json-viewer.js   | 56 +++++++++++++++++--
 .../src/js/component/wb-workflow-fields.js    |  8 +--
 5 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index 0bedadc..d693123 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -40,7 +40,7 @@ class WBCollectionFields extends Component {
         [ 'Description', wbFormatSpecialValue(item.description) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.properties } />
+            <WBJsonViewer app={ app } value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'Portable Data Hash', item.portable_data_hash ],
diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index 9597301..bab11e4 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -39,38 +39,38 @@ class WBContainerFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.environment } />
+            <WBJsonViewer app={ app } value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <WBJsonViewer value={ item.command } />
+          <WBJsonViewer app={ app } value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Mounts', (
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <WBJsonViewer value={ item.mounts[k] } />
+              <WBJsonViewer app={ app } value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.runtime_constraints } />
+            <WBJsonViewer app={ app } value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Runtime Status', (
           <WBAccordion names={ ['Runtime Status'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.runtime_status } />
+            <WBJsonViewer app={ app } value={ item.runtime_status } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.scheduling_parameters } />
+            <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Output', item.output ? (
diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index cfedefe..38df3fd 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -34,7 +34,7 @@ class WBContainerRequestFields extends Component {
         [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.properties } />
+            <WBJsonViewer app={ app } value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'State', item.state ],
@@ -49,20 +49,20 @@ class WBContainerRequestFields extends Component {
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <WBJsonViewer value={ item.mounts[k] } />
+              <WBJsonViewer app={ app } value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.runtime_constraints } />
+            <WBJsonViewer app={ app } value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.scheduling_parameters } />
+            <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Container Image', (
@@ -71,12 +71,12 @@ class WBContainerRequestFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <WBJsonViewer value={ item.environment } />
+            <WBJsonViewer app={ app } value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <WBJsonViewer value={ item.command } />
+          <WBJsonViewer app={ app } value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Output Name', item.output_name ],
@@ -91,7 +91,7 @@ class WBContainerRequestFields extends Component {
           <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
         ) ],
         [ 'Filters', (
-          item.filters ? (<WBJsonViewer value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
+          item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
         ) ],
         [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
         [ 'Runtime User', (
@@ -99,7 +99,7 @@ class WBContainerRequestFields extends Component {
         ) ],
         [ 'Runtime Auth Scopes', (
           item.runtime_auth_scopes ? (
-            <WBJsonViewer value={ item.runtime_auth_scopes } />
+            <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
           ) : (
             <i>{ String(item.runtime_auth_scopes) }</i>
           )
diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
index a9fdd20..b12f32e 100644
--- a/frontend/src/js/component/wb-json-viewer.js
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -1,8 +1,56 @@
 import { h, Component } from 'preact';
 import WBIdTools from 'wb-id-tools';
 import urlForObject from 'url-for-object';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosObjectName from 'arvados-object-name';
 
-function detectIds(value) {
+class WBLazyInlineName extends Component {
+  fetchData() {
+    const { app, identifier } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const typeName = WBIdTools.typeName(identifier);
+    if (WBIdTools.isPDH(identifier)) {
+      const filters = [
+        [ 'portable_data_hash', '=', identifier ]
+      ];
+      let prom = makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      prom = prom.then(xhr => this.setState({ item: {
+        uuid: xhr.response.items.length > 0 ? xhr.response.items[0].uuid : '',
+        name: xhr.response.items.length > 0 ? xhr.response.items[0].name : 'Not Found' +
+          ( xhr.response.items_available > 1 ? ' (+' + (xhr.response.items_available - 1) + ' others)' : '' )
+      }}));
+      return;
+    }
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + typeName + 's/' + identifier);
+    prom = prom.then(xhr => this.setState({ item: xhr.response }));
+    prom = prom.catch(() => this.setState({ item: { name: 'Not Found' }}));
+  }
+
+  render({ identifier }, { item }) {
+    if (item) {
+      return (
+        <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
+      );
+    }
+
+    const typeName = WBIdTools.typeName(identifier);
+    const url = (typeName === 'group' ? '/browse/' + identifier :
+      typeName === 'collection' ? '/collection-browse/' + identifier :
+      urlForObject({ uuid: identifier }));
+    return (
+      <span>
+        <a href={ url }>{ identifier }</a> <a href="#" title="Look up"
+          onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+          <i class="fas fa-search"></i>
+        </a>
+      </span>
+    );
+  }
+}
+
+function detectIds(value, app) {
   const matches = WBIdTools.detectIdentifiers(value);
   matches.sort((a, b) => (a.index - b.index));
   const res = [];
@@ -15,7 +63,7 @@ function detectIds(value) {
       typeName === 'collection' ? '/collection-browse/' + id :
       urlForObject({ uuid: id }));
     res.push(value.substring(ofs, index));
-    res.push(h('a', { href: url }, id));
+    res.push(h(WBLazyInlineName, { identifier: id, app }, id));
     ofs = index + id.length;
   }
   res.push(value.substring(ofs));
@@ -23,11 +71,11 @@ function detectIds(value) {
 }
 
 class WBJsonViewer extends Component {
-  render({ value, stringify }) {
+  render({ value, stringify, app }) {
     if (stringify)
       value = JSON.stringify(value, null, 2);
     return (
-      <div class="wb-json-viewer">{ detectIds(value) }</div>
+      <div class="wb-json-viewer">{ detectIds(value, app) }</div>
     );
   }
 }
diff --git a/frontend/src/js/component/wb-workflow-fields.js b/frontend/src/js/component/wb-workflow-fields.js
index 069e1fc..4e74eba 100644
--- a/frontend/src/js/component/wb-workflow-fields.js
+++ b/frontend/src/js/component/wb-workflow-fields.js
@@ -52,9 +52,9 @@ class WBWorkflowFields extends Component {
               <WBAccordion names={ [ 'Inputs', 'Outputs', 'Rest' ] }
                 cardHeaderClass="card-header-sm">
 
-                <WBJsonViewer value={ it.inputs } />
+                <WBJsonViewer app={ app } value={ it.inputs } />
 
-                <WBJsonViewer value={ it.outputs } />
+                <WBJsonViewer app={ app } value={ it.outputs } />
 
                 { (() => {
                   delete it['inputs'];
@@ -64,7 +64,7 @@ class WBWorkflowFields extends Component {
                   delete it['doc'];
                   delete it['id'];
                   return (
-                    <WBJsonViewer value={ it } />
+                    <WBJsonViewer app={ app } value={ it } />
                   );
                 })() }
 
@@ -78,7 +78,7 @@ class WBWorkflowFields extends Component {
             cardHeaderClass="card-header-sm">
 
             { graph.map(it => (
-              <WBJsonViewer value={ it } />
+              <WBJsonViewer app={ app } value={ it } />
             )) }
 
           </WBAccordion>

From 86f221579c8bd4c22f45011b5fc4afbbd0352e0d Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 14 Apr 2020 15:12:00 +0200
Subject: [PATCH 155/170] Minor lifecycle fix in WBJsonViewer.

---
 frontend/src/js/component/wb-json-viewer.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
index b12f32e..d3940d5 100644
--- a/frontend/src/js/component/wb-json-viewer.js
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -5,6 +5,12 @@ import makeArvadosRequest from 'make-arvados-request';
 import arvadosObjectName from 'arvados-object-name';
 
 class WBLazyInlineName extends Component {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.identifier === this.props.identifier)
+      return;
+    this.setState({ item: null });
+  }
+
   fetchData() {
     const { app, identifier } = this.props;
     const { arvHost, arvToken } = app.state;

From c6e6a6ecd005bbe181e4889a4f323ca84aba3663 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 15 Apr 2020 12:52:33 +0200
Subject: [PATCH 156/170] Add project properties view.

---
 .../src/js/arvados/base/url-for-object.js     |  9 ++-
 frontend/src/js/component/wb-json-viewer.js   | 53 +--------------
 .../src/js/component/wb-lazy-inline-name.js   | 59 +++++++++++++++++
 .../src/js/component/wb-project-fields.js     | 65 +++++++++++++++++++
 .../src/js/component/wb-project-listing.js    |  5 ++
 frontend/src/js/page/wb-app.js                |  3 +
 frontend/src/js/page/wb-project-view.js       | 29 +++++++++
 7 files changed, 168 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/js/component/wb-lazy-inline-name.js
 create mode 100644 frontend/src/js/component/wb-project-fields.js
 create mode 100644 frontend/src/js/page/wb-project-view.js

diff --git a/frontend/src/js/arvados/base/url-for-object.js b/frontend/src/js/arvados/base/url-for-object.js
index 8a3e4a9..fce5424 100644
--- a/frontend/src/js/arvados/base/url-for-object.js
+++ b/frontend/src/js/arvados/base/url-for-object.js
@@ -4,9 +4,12 @@ function urlForObject(item, mode='primary') {
   let objectType = arvadosTypeName(item.uuid.split('-')[1]);
   if (objectType === 'user')
     return ('/browse/' + item.uuid);
-  else if (objectType === 'group' && item.group_class === 'project')
-    return ('/browse/' + item.uuid);
-  else if (objectType === 'container_request')
+  else if (objectType === 'group' && item.group_class === 'project') {
+    if (mode === 'properties')
+      return ('/project/' + item.uuid);
+    else
+      return ('/browse/' + item.uuid);
+  } else if (objectType === 'container_request')
     return ('/process/' + item.uuid);
   else if (objectType === 'workflow') {
     if (mode === 'launch')
diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
index d3940d5..abbf696 100644
--- a/frontend/src/js/component/wb-json-viewer.js
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -3,58 +3,7 @@ import WBIdTools from 'wb-id-tools';
 import urlForObject from 'url-for-object';
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosObjectName from 'arvados-object-name';
-
-class WBLazyInlineName extends Component {
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.identifier === this.props.identifier)
-      return;
-    this.setState({ item: null });
-  }
-
-  fetchData() {
-    const { app, identifier } = this.props;
-    const { arvHost, arvToken } = app.state;
-    const typeName = WBIdTools.typeName(identifier);
-    if (WBIdTools.isPDH(identifier)) {
-      const filters = [
-        [ 'portable_data_hash', '=', identifier ]
-      ];
-      let prom = makeArvadosRequest(arvHost, arvToken,
-        '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
-      prom = prom.then(xhr => this.setState({ item: {
-        uuid: xhr.response.items.length > 0 ? xhr.response.items[0].uuid : '',
-        name: xhr.response.items.length > 0 ? xhr.response.items[0].name : 'Not Found' +
-          ( xhr.response.items_available > 1 ? ' (+' + (xhr.response.items_available - 1) + ' others)' : '' )
-      }}));
-      return;
-    }
-    let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/' + typeName + 's/' + identifier);
-    prom = prom.then(xhr => this.setState({ item: xhr.response }));
-    prom = prom.catch(() => this.setState({ item: { name: 'Not Found' }}));
-  }
-
-  render({ identifier }, { item }) {
-    if (item) {
-      return (
-        <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
-      );
-    }
-
-    const typeName = WBIdTools.typeName(identifier);
-    const url = (typeName === 'group' ? '/browse/' + identifier :
-      typeName === 'collection' ? '/collection-browse/' + identifier :
-      urlForObject({ uuid: identifier }));
-    return (
-      <span>
-        <a href={ url }>{ identifier }</a> <a href="#" title="Look up"
-          onclick={ e => { e.preventDefault(); this.fetchData(); } }>
-          <i class="fas fa-search"></i>
-        </a>
-      </span>
-    );
-  }
-}
+import WBLazyInlineName from 'wb-lazy-inline-name';
 
 function detectIds(value, app) {
   const matches = WBIdTools.detectIdentifiers(value);
diff --git a/frontend/src/js/component/wb-lazy-inline-name.js b/frontend/src/js/component/wb-lazy-inline-name.js
new file mode 100644
index 0000000..3b5ec47
--- /dev/null
+++ b/frontend/src/js/component/wb-lazy-inline-name.js
@@ -0,0 +1,59 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+import WBIdTools from 'wb-id-tools';
+import urlForObject from 'url-for-object';
+import arvadosObjectName from 'arvados-object-name';
+
+class WBLazyInlineName extends Component {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.identifier === this.props.identifier)
+      return;
+    this.setState({ item: null });
+  }
+
+  fetchData() {
+    const { app, identifier } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const typeName = WBIdTools.typeName(identifier);
+    if (WBIdTools.isPDH(identifier)) {
+      const filters = [
+        [ 'portable_data_hash', '=', identifier ]
+      ];
+      let prom = makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      prom = prom.then(xhr => this.setState({ item: {
+        uuid: xhr.response.items.length > 0 ? xhr.response.items[0].uuid : '',
+        name: xhr.response.items.length > 0 ? xhr.response.items[0].name : 'Not Found' +
+          ( xhr.response.items_available > 1 ? ' (+' + (xhr.response.items_available - 1) + ' others)' : '' )
+      }}));
+      return;
+    }
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + typeName + 's/' + identifier);
+    prom = prom.then(xhr => this.setState({ item: xhr.response }));
+    prom = prom.catch(() => this.setState({ item: { name: 'Not Found' }}));
+  }
+
+  render({ identifier }, { item }) {
+    if (item) {
+      return (
+        <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
+      );
+    }
+
+    const typeName = WBIdTools.typeName(identifier);
+    const url = (typeName === 'group' ? '/browse/' + identifier :
+      typeName === 'collection' ? '/collection-browse/' + identifier :
+      urlForObject({ uuid: identifier }));
+    return (
+      <span>
+        <a href={ url }>{ identifier }</a> <a href="#" title="Look up"
+          onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+          <i class="fas fa-search"></i>
+        </a>
+      </span>
+    );
+  }
+}
+
+export default WBLazyInlineName;
diff --git a/frontend/src/js/component/wb-project-fields.js b/frontend/src/js/component/wb-project-fields.js
new file mode 100644
index 0000000..f859fcf
--- /dev/null
+++ b/frontend/src/js/component/wb-project-fields.js
@@ -0,0 +1,65 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
+import wbFormatSpecialValue from 'wb-format-special-value';
+import WBLazyInlineName from 'wb-lazy-inline-name';
+import wbFormatDate from 'wb-format-date';
+
+class WBProjectFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups/' + uuid);
+
+    prom = prom.then(xhr => {
+      const item = xhr.response;
+
+      const rows = [
+        [ 'Name', wbFormatSpecialValue(item.name) ],
+        [ 'Description', wbFormatSpecialValue(item.description) ],
+        [ 'Properties', (
+          <WBAccordion names={[ 'Properties' ]} cardHeaderClass="card-header-sm">
+            <WBJsonViewer app={ app } value={ item.properties } />
+          </WBAccordion>
+        ) ],
+        [ 'Writable by', item.writable_by
+          .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
+          .reduce((a, b) => [].concat(a).concat(', ').concat(b))
+        ],
+        [ 'Trash At', wbFormatDate(item.trash_at) ],
+        [ 'Delete At', wbFormatDate(item.delete_at) ],
+        [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
+      ];
+
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows }
+          verticalHeader={ true } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBProjectFields;
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 0d2eb52..83bc254 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -4,6 +4,7 @@ import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBNameAndUuid from 'wb-name-and-uuid';
+import urlForObject from 'url-for-object';
 
 class WBProjectListing extends Component {
 
@@ -37,6 +38,10 @@ class WBProjectListing extends Component {
       </div>),
       ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
       (<div>
+        <a class="btn btn-outline-primary m-1" title="Properties"
+          href={ urlForObject(item, 'properties') }>
+          <i class="fas fa-list-ul"></i>
+        </a>
         { renderDeleteButton(item, () => this.fetchItems()) }
         { renderSharingButton(item) }
       </div>)
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 22c07f2..14aeb76 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -14,6 +14,7 @@ import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
 import WBDownloadPage from 'wb-download-page';
 import WBImageViewerPage from 'wb-image-viewer-page';
 import WBSharingPage from 'wb-sharing-page';
+import WBProjectView from 'wb-project-view';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -100,6 +101,8 @@ class WBApp extends Component {
         <WBImageViewerPage path="/image-viewer/:blobUrl" app={ this } />
 
         <WBSharingPage path="/sharing/:uuid" app={ this } />
+
+        <WBProjectView path="/project/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-project-view.js b/frontend/src/js/page/wb-project-view.js
new file mode 100644
index 0000000..44695ad
--- /dev/null
+++ b/frontend/src/js/page/wb-project-view.js
@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBProjectFields from 'wb-project-fields';
+
+class WBProjectView extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the project view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Project Fields</h2>
+        <WBProjectFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBProjectView;

From bef304ae6c4f246b4a86c1ad9988da835b202731 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 08:40:37 +0200
Subject: [PATCH 157/170] Don't break lines in baseCommand json viewer

---
 frontend/src/js/component/wb-container-fields.js         | 2 +-
 frontend/src/js/component/wb-container-request-fields.js | 2 +-
 frontend/src/js/component/wb-json-viewer.js              | 7 ++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index bab11e4..5f0644d 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -44,7 +44,7 @@ class WBContainerFields extends Component {
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <WBJsonViewer app={ app } value={ item.command } />
+          <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Mounts', (
diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index 38df3fd..3130db6 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -76,7 +76,7 @@ class WBContainerRequestFields extends Component {
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <WBJsonViewer app={ app } value={ item.command } />
+          <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Output Name', item.output_name ],
diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
index abbf696..02e0368 100644
--- a/frontend/src/js/component/wb-json-viewer.js
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -26,9 +26,9 @@ function detectIds(value, app) {
 }
 
 class WBJsonViewer extends Component {
-  render({ value, stringify, app }) {
+  render({ value, stringify, app, pretty }) {
     if (stringify)
-      value = JSON.stringify(value, null, 2);
+      value = pretty ? JSON.stringify(value, null, 2) : JSON.stringify(value);
     return (
       <div class="wb-json-viewer">{ detectIds(value, app) }</div>
     );
@@ -36,7 +36,8 @@ class WBJsonViewer extends Component {
 }
 
 WBJsonViewer.defaultProps = {
-  stringify: true
+  stringify: true,
+  pretty: true
 };
 
 export default WBJsonViewer;

From fea18bb0887f82c593b69747ac94210bd938d424 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 09:00:12 +0200
Subject: [PATCH 158/170] Resolved the problem with paths in default values for
 workflow parameters.

---
 frontend/src/js/page/wb-launch-workflow-page.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 8397aad..9403a3a 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -10,6 +10,7 @@ import linkState from 'linkstate';
 import wbParseWorkflowDef from 'wb-parse-workflow-def';
 import { wbParseWorkflowInputs, wbSubmitContainerRequest } from 'wb-submit-container-request';
 import WBWorkflowInput from 'wb-workflow-input';
+import { parseKeepRef } from 'wb-process-misc';
 
 class WBLaunchWorkflowPage extends Component {
   constructor(...args) {
@@ -30,7 +31,7 @@ class WBLaunchWorkflowPage extends Component {
         const def = wbParseWorkflowDef(xhr.response.definition);
         const inputs = {};
         const main = def['$graph'].find(a => (a.id === '#main'));
-        main.inputs.map(a => (inputs[a.id] = JSON.stringify(a.default)));
+        main.inputs.map(a => (inputs[a.id] = JSON.stringify(parseKeepRef(a.default))));
         this.setState({
         'workflow': xhr.response,
         'workflowDefinition': def,

From c63bd07c37ca4688e5d6475d3a368549cd998b7f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 14:18:13 +0200
Subject: [PATCH 159/170] Started implementing properties editors -
 WBCollectionFields for starters.

---
 frontend/src/css/index.css                    |  4 ++
 .../src/js/arvados/base/wb-update-field.js    | 16 +++++
 .../src/js/component/wb-collection-fields.js  | 71 +++++++++++--------
 frontend/src/js/component/wb-json-editor.js   | 60 ++++++++++++++++
 frontend/src/js/widget/wb-accordion.js        |  6 +-
 frontend/src/js/widget/wb-dialog.js           | 13 ++--
 6 files changed, 131 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/js/arvados/base/wb-update-field.js
 create mode 100644 frontend/src/js/component/wb-json-editor.js

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index d7ab0a9..2c49b82 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -21,3 +21,7 @@ div.wb-json-viewer {
   font-family: "Courier New", fixed-width;
   white-space: pre-wrap;
 }
+
+textarea.wb-json-editor {
+  font-family: "Courier New", fixed-width;
+}
diff --git a/frontend/src/js/arvados/base/wb-update-field.js b/frontend/src/js/arvados/base/wb-update-field.js
new file mode 100644
index 0000000..b5c2362
--- /dev/null
+++ b/frontend/src/js/arvados/base/wb-update-field.js
@@ -0,0 +1,16 @@
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+function wbUpdateField(arvHost, arvToken, uuid, fieldName, fieldValue) {
+  const typeName = arvadosTypeName(uuid);
+  const data = {};
+  data[fieldName] = fieldValue;
+  const prom = makeArvadosRequest(arvHost, arvToken,
+    '/arvados/v1/' + typeName + 's/' + uuid, {
+      method: 'PUT',
+      data: JSON.stringify(data)
+    });
+  return prom;
+}
+
+export default wbUpdateField;
diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index d693123..45a7ae0 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -9,18 +9,54 @@ import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 import wbFormatSpecialValue from 'wb-format-special-value';
 import WBJsonViewer from 'wb-json-viewer';
+import WBJsonEditor from 'wb-json-editor';
+import wbUpdateField from 'wb-update-field';
 
 class WBCollectionFields extends Component {
   componentDidMount() {
-    this.prepareRows();
+    this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.prepareRows();
+    this.fetchData();
   }
 
-  prepareRows() {
+  prepareRows(item) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+    
+    let rows = [
+      [ 'Name', item.name ],
+      [ 'Description', wbFormatSpecialValue(item.description) ],
+      [ 'Properties', (
+        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
+          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
+            .then(() => { item.properties = value; this.prepareRows(item); }) } />
+      ) ],
+      [ 'Portable Data Hash', item.portable_data_hash ],
+      [ 'Replication Desired', item.replication_desired ? item.replication_desired : (
+        <i>{ String(item.replication_desired) }</i>
+      ) ],
+      [ 'Replication Confirmed', item.replication_confirmed ? item.replication_confirmed : (
+        <i>{ String(item.replication_confirmed) }</i>
+      ) ],
+      [ 'Replication Confirmed At', wbFormatDate(item.replication_confirmed_at) ],
+      [ 'Trash At', wbFormatDate(item.trash_at) ],
+      [ 'Delete At', wbFormatDate(item.delete_at) ],
+      [ 'Is Trashed', String(item.is_trashed) ],
+      [ 'Current Version UUID', (
+        <WBNameAndUuid app={ app } uuid={ item.current_version_uuid } />
+      ) ],
+      [ 'Version', item.version ],
+      [ 'Preserve Version', String(item.preserve_version) ],
+      [ 'File Count', item.file_count ],
+      [ 'Total Size', filesize(item.file_size_total) ]
+    ];
+    this.setState({ 'rows': rows });
+  }
+
+  fetchData() {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
@@ -35,34 +71,7 @@ class WBCollectionFields extends Component {
       const item = xhr.response.items[0];
       if (!item)
         throw Error('Item not found');
-      let rows = [
-        [ 'Name', item.name ],
-        [ 'Description', wbFormatSpecialValue(item.description) ],
-        [ 'Properties', (
-          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.properties } />
-          </WBAccordion>
-        ) ],
-        [ 'Portable Data Hash', item.portable_data_hash ],
-        [ 'Replication Desired', item.replication_desired ? item.replication_desired : (
-          <i>{ String(item.replication_desired) }</i>
-        ) ],
-        [ 'Replication Confirmed', item.replication_confirmed ? item.replication_confirmed : (
-          <i>{ String(item.replication_confirmed) }</i>
-        ) ],
-        [ 'Replication Confirmed At', wbFormatDate(item.replication_confirmed_at) ],
-        [ 'Trash At', wbFormatDate(item.trash_at) ],
-        [ 'Delete At', wbFormatDate(item.delete_at) ],
-        [ 'Is Trashed', String(item.is_trashed) ],
-        [ 'Current Version UUID', (
-          <WBNameAndUuid app={ app } uuid={ item.current_version_uuid } />
-        ) ],
-        [ 'Version', item.version ],
-        [ 'Preserve Version', String(item.preserve_version) ],
-        [ 'File Count', item.file_count ],
-        [ 'Total Size', filesize(item.file_size_total) ]
-      ];
-      this.setState({ 'rows': rows });
+      this.prepareRows(item);
     });
   }
 
diff --git a/frontend/src/js/component/wb-json-editor.js b/frontend/src/js/component/wb-json-editor.js
new file mode 100644
index 0000000..c77400e
--- /dev/null
+++ b/frontend/src/js/component/wb-json-editor.js
@@ -0,0 +1,60 @@
+import { h, Component, createRef } from 'preact';
+import WBJsonViewer from 'wb-json-viewer';
+import WBAccordion from 'wb-accordion';
+import WBDialog from 'wb-dialog';
+
+class WBJsonEditor extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+  }
+
+  render({ app, name, value, stringify, pretty, onChange }, { editValue, parseError }) {
+    return (
+      <div>
+        <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
+          accept={ () => {
+            onChange(JSON.parse(editValue));
+          } }
+          canAccept={ () => {
+            try { JSON.parse(editValue) }
+            catch (exc) { this.setState({ parseError: exc.message }); return false; }
+            return true;
+          } }>
+          <div>
+            <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
+              onChange={ e => this.setState({ editValue: e.target.value }) } />
+            { parseError ? (
+              <div class="alert alert-danger" role="alert">
+                { parseError }
+              </div>
+            ) : null }
+          </div>
+        </WBDialog>
+        <WBAccordion names={ [ name ] } extraHeaderUi={ [ (
+          <button class="btn btn-link px-0" title="Edit"
+            onclick={ () => {
+              this.setState({ parseError: null,
+                  editValue: stringify ?
+                  pretty ? JSON.stringify(value, null, 2)
+                  : JSON.stringify(value) : value });
+              this.dialogRef.current.show();
+            } }>
+            <i class="fas fa-edit text-secondary" />
+          </button>
+        ) ] } cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ value } stringify={ stringify }
+            pretty={ pretty } />
+        </WBAccordion>
+      </div>
+    );
+  }
+}
+
+WBJsonEditor.defaultProps = {
+  stringify: true,
+  pretty: true,
+  onChange: () => {}
+};
+
+export default WBJsonEditor;
diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index b3e4109..7bd6d71 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -39,7 +39,7 @@ class WBAccordion extends Component {
     this.setState({ ariaExpanded, collapseClass, buttonClass });
   }
 
-  render({ children, names, cardHeaderClass }, { domId, headerDomIds,
+  render({ children, names, extraHeaderUi, cardHeaderClass }, { domId, headerDomIds,
     collapseDomIds, collapseClass, ariaExpanded, buttonClass }) {
 
     return (
@@ -53,6 +53,7 @@ class WBAccordion extends Component {
                   onclick={ () => this.toggle(i) }>
                   { names[i] }
                 </button>
+                { extraHeaderUi[i] }
               </h2>
             </div>
 
@@ -70,7 +71,8 @@ class WBAccordion extends Component {
 };
 
 WBAccordion.defaultProps = {
-  'cardHeaderClass': 'card-header'
+  cardHeaderClass: 'card-header',
+  extraHeaderUi: []
 };
 
 export default WBAccordion;
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
index fc357a8..257b7a4 100644
--- a/frontend/src/js/widget/wb-dialog.js
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -18,7 +18,7 @@ class WBDialog extends Component {
     $(this.modalRef.current).modal('hide');
   }
 
-  render({ title, children, accept, reject }) {
+  render({ title, children, canAccept, accept, reject }) {
     return (
       <form class="m-0">
         <div class="modal" tabindex="-1" role="dialog" ref={ this.modalRef }>
@@ -38,12 +38,12 @@ class WBDialog extends Component {
               <div class="modal-footer">
                 { children[1] ? children[1] : [
                   <input type="submit" class="btn btn-primary" value="Accept"
-                    onclick={ e => { e.preventDefault(); this.hide(); accept(); } } />,
+                    onclick={ e => { e.preventDefault(); if (!canAccept()) return; this.hide(); accept(); } } />,
                   <button type="button" class="btn btn-secondary"
                     onclick={ () => { this.hide(); reject(); } }>Cancel</button>
                 ] }
-
               </div>
+
             </div>
           </div>
         </div>
@@ -53,9 +53,10 @@ class WBDialog extends Component {
 }
 
 WBDialog.defaultProps = {
-  'title': 'Dialog',
-  'accept': () => {},
-  'reject': () => {}
+  title: 'Dialog',
+  accept: () => {},
+  reject: () => {},
+  canAccept: () => true
 };
 
 export default WBDialog;

From 1afd3a1f1597cd092a42c748a065ec095e6b468b Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 16:18:14 +0200
Subject: [PATCH 160/170] Added properties editor to WBContainerRequestFields.

---
 .../component/wb-container-request-fields.js  | 175 +++++++++---------
 1 file changed, 90 insertions(+), 85 deletions(-)

diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index 3130db6..8d3b23d 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -8,106 +8,111 @@ import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 import WBJsonViewer from 'wb-json-viewer';
+import wbUpdateField from 'wb-update-field';
+import WBJsonEditor from 'wb-json-editor';
 
 class WBContainerRequestFields extends Component {
   componentDidMount() {
-    this.prepareRows();
+    this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.prepareRows();
+    this.fetchData();
   }
 
-  prepareRows() {
+  prepareRows(item) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    let rows = [
+      [ 'Name', item.name ],
+      [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+      [ 'Properties', (
+        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
+          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
+            .then(() => { item.properties = value; this.prepareRows(item); }) } />
+      ) ],
+      [ 'State', item.state ],
+      [ 'Requesting Container', (
+        <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
+      ) ],
+      [ 'Container', (
+        <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
+      ) ],
+      [ 'Container Count Max', item.container_count_max ],
+      [ 'Mounts', (
+        <WBAccordion names={ Object.keys(item.mounts) }
+          cardHeaderClass="card-header-sm">
+          { Object.keys(item.mounts).map(k => (
+            <WBJsonViewer app={ app } value={ item.mounts[k] } />
+          )) }
+        </WBAccordion>
+      ) ],
+      [ 'Runtime Constraints', (
+        <WBAccordion names={ ['Runtime Constraints'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.runtime_constraints } />
+        </WBAccordion>
+      ) ],
+      [ 'Scheduling Parameters', (
+        <WBAccordion names={ ['Scheduling Parameters'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
+        </WBAccordion>
+      ) ],
+      [ 'Container Image', (
+        <WBNameAndUuid app={ app } uuid={ item.container_image } />
+      ) ],
+      [ 'Environment', (
+        <WBAccordion names={ ['Environment'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.environment } />
+        </WBAccordion>
+      ) ],
+      [ 'Working Directory', item.cwd ],
+      [ 'Command', (
+        <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
+      ) ],
+      [ 'Output Path', item.output_path ],
+      [ 'Output Name', item.output_name ],
+      [ 'Output TTL', item.output_ttl ],
+      [ 'Priority', item.priority ],
+      [ 'Expires At', wbFormatDate(item.expires_at) ],
+      [ 'Use Existing', String(item.use_existing) ],
+      [ 'Log', (
+        <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
+      ) ],
+      [ 'Output', (
+        <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
+      ) ],
+      [ 'Filters', (
+        item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
+      ) ],
+      [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
+      [ 'Runtime User', (
+        <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
+      ) ],
+      [ 'Runtime Auth Scopes', (
+        item.runtime_auth_scopes ? (
+          <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
+        ) : (
+          <i>{ String(item.runtime_auth_scopes) }</i>
+        )
+      ) ]
+    ];
+    rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
+    this.setState({ rows });
+  }
+
+  fetchData() {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
     let item;
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests/' + uuid);
-    prom = prom.then(xhr => (item = xhr.response));
-
-    prom = prom.then(() => {
-      let rows = [
-        [ 'Name', item.name ],
-        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
-        [ 'Properties', (
-          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.properties } />
-          </WBAccordion>
-        ) ],
-        [ 'State', item.state ],
-        [ 'Requesting Container', (
-          <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
-        ) ],
-        [ 'Container', (
-          <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
-        ) ],
-        [ 'Container Count Max', item.container_count_max ],
-        [ 'Mounts', (
-          <WBAccordion names={ Object.keys(item.mounts) }
-            cardHeaderClass="card-header-sm">
-            { Object.keys(item.mounts).map(k => (
-              <WBJsonViewer app={ app } value={ item.mounts[k] } />
-            )) }
-          </WBAccordion>
-        ) ],
-        [ 'Runtime Constraints', (
-          <WBAccordion names={ ['Runtime Constraints'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.runtime_constraints } />
-          </WBAccordion>
-        ) ],
-        [ 'Scheduling Parameters', (
-          <WBAccordion names={ ['Scheduling Parameters'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
-          </WBAccordion>
-        ) ],
-        [ 'Container Image', (
-          <WBNameAndUuid app={ app } uuid={ item.container_image } />
-        ) ],
-        [ 'Environment', (
-          <WBAccordion names={ ['Environment'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.environment } />
-          </WBAccordion>
-        ) ],
-        [ 'Working Directory', item.cwd ],
-        [ 'Command', (
-          <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
-        ) ],
-        [ 'Output Path', item.output_path ],
-        [ 'Output Name', item.output_name ],
-        [ 'Output TTL', item.output_ttl ],
-        [ 'Priority', item.priority ],
-        [ 'Expires At', wbFormatDate(item.expires_at) ],
-        [ 'Use Existing', String(item.use_existing) ],
-        [ 'Log', (
-          <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
-        ) ],
-        [ 'Output', (
-          <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
-        ) ],
-        [ 'Filters', (
-          item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
-        ) ],
-        [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
-        [ 'Runtime User', (
-          <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
-        ) ],
-        [ 'Runtime Auth Scopes', (
-          item.runtime_auth_scopes ? (
-            <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
-          ) : (
-            <i>{ String(item.runtime_auth_scopes) }</i>
-          )
-        ) ]
-      ];
-      rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
-      this.setState({ 'rows': rows });
-    });
+    prom = prom.then(xhr => this.prepareRows(xhr.response));
   }
 
   render({}, { rows }) {

From eb6d797455cbe015bae8f7bc09fca322ef81d701 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 16:38:34 +0200
Subject: [PATCH 161/170] Added properties editor to WBProjectFields.

---
 .../src/js/component/wb-project-fields.js     | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/frontend/src/js/component/wb-project-fields.js b/frontend/src/js/component/wb-project-fields.js
index f859fcf..db36b7e 100644
--- a/frontend/src/js/component/wb-project-fields.js
+++ b/frontend/src/js/component/wb-project-fields.js
@@ -6,46 +6,51 @@ import WBJsonViewer from 'wb-json-viewer';
 import wbFormatSpecialValue from 'wb-format-special-value';
 import WBLazyInlineName from 'wb-lazy-inline-name';
 import wbFormatDate from 'wb-format-date';
+import wbUpdateField from 'wb-update-field';
+import WBJsonEditor from 'wb-json-editor';
 
 class WBProjectFields extends Component {
   componentDidMount() {
-    this.prepareRows();
+    this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.prepareRows();
+    this.fetchData();
   }
 
-  prepareRows() {
+  prepareRows(item) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    const rows = [
+      [ 'Name', wbFormatSpecialValue(item.name) ],
+      [ 'Description', wbFormatSpecialValue(item.description) ],
+      [ 'Properties', (
+        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
+          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
+            .then(() => { item.properties = value; this.prepareRows(item); }) } />
+      ) ],
+      [ 'Writable by', item.writable_by
+        .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
+        .reduce((a, b) => [].concat(a).concat(', ').concat(b))
+      ],
+      [ 'Trash At', wbFormatDate(item.trash_at) ],
+      [ 'Delete At', wbFormatDate(item.delete_at) ],
+      [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
+    ];
+
+    this.setState({ rows });
+  }
+
+  fetchData() {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/groups/' + uuid);
 
-    prom = prom.then(xhr => {
-      const item = xhr.response;
-
-      const rows = [
-        [ 'Name', wbFormatSpecialValue(item.name) ],
-        [ 'Description', wbFormatSpecialValue(item.description) ],
-        [ 'Properties', (
-          <WBAccordion names={[ 'Properties' ]} cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.properties } />
-          </WBAccordion>
-        ) ],
-        [ 'Writable by', item.writable_by
-          .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
-          .reduce((a, b) => [].concat(a).concat(', ').concat(b))
-        ],
-        [ 'Trash At', wbFormatDate(item.trash_at) ],
-        [ 'Delete At', wbFormatDate(item.delete_at) ],
-        [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
-      ];
-
-      this.setState({ 'rows': rows });
-    });
+    prom = prom.then(xhr => this.prepareRows(xhr.response));
   }
 
   render({}, { rows }) {

From 95f0d9ba81fe8e4ef81d77534bb28ee19135361f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 17:14:15 +0200
Subject: [PATCH 162/170] Error box spacing in WBJsonEditor.

---
 frontend/src/js/component/wb-json-editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-json-editor.js b/frontend/src/js/component/wb-json-editor.js
index c77400e..0fe39b8 100644
--- a/frontend/src/js/component/wb-json-editor.js
+++ b/frontend/src/js/component/wb-json-editor.js
@@ -25,7 +25,7 @@ class WBJsonEditor extends Component {
             <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
               onChange={ e => this.setState({ editValue: e.target.value }) } />
             { parseError ? (
-              <div class="alert alert-danger" role="alert">
+              <div class="alert alert-danger mt-2" role="alert">
                 { parseError }
               </div>
             ) : null }

From 040f9063aea77dad4dee3885a0bf99870a56f01c Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 17:38:25 +0200
Subject: [PATCH 163/170] Added a What's New link in the navbar.

---
 frontend/src/js/component/wb-navbar-common.js | 3 ++-
 frontend/src/js/page/wb-app.js                | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index 9bb3ef0..fa849fb 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -11,7 +11,8 @@ class WBNavbarCommon extends Component {
           { 'name': 'All Projects', 'id': 'all-projects' },
           { 'name': 'All Users', 'id': 'all-users' },
           { 'name': 'Shared with Me', 'id': 'shared-with-me' },
-          { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+          { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]},
+          { name: (<span>What's New <sup><span class="badge badge-info">Info</span></sup></span>), id: 'whatsnew' }
         ].concat(items) }
         rhs={ textSearchNavigate ? (
           <WBInlineSearch textSearch={ textSearch } navigate={ textSearchNavigate } />
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 14aeb76..3788033 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -38,6 +38,8 @@ class WBApp extends Component {
       return ('/users');
     } else if (item['id'] === 'shared-with-me') {
       return ('/shared-with-me');
+    } else if (item['id'] === 'whatsnew') {
+      return ('https://sites.google.com/roche.com/workbenchadvanced');
     }
   }
 

From d4f9067b279ae18eb62c1c62089377bcd08597aa Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 18:38:50 +0200
Subject: [PATCH 164/170] Avoid accordion folding in WBJsonEditor but not when
 properties updated.

---
 frontend/src/js/component/wb-json-editor.js | 60 +++++++++++++--------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/frontend/src/js/component/wb-json-editor.js b/frontend/src/js/component/wb-json-editor.js
index 0fe39b8..52f6011 100644
--- a/frontend/src/js/component/wb-json-editor.js
+++ b/frontend/src/js/component/wb-json-editor.js
@@ -3,6 +3,41 @@ import WBJsonViewer from 'wb-json-viewer';
 import WBAccordion from 'wb-accordion';
 import WBDialog from 'wb-dialog';
 
+class WbJsonEditorDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+  }
+
+  render({ name, onChange }, { editValue, parseError }) {
+    return (
+      <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
+        accept={ () => {
+          onChange(JSON.parse(editValue));
+        } }
+        canAccept={ () => {
+          try { JSON.parse(editValue) }
+          catch (exc) { this.setState({ parseError: exc.message }); return false; }
+          return true;
+        } }>
+        <div>
+          <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
+            onChange={ e => this.setState({ editValue: e.target.value }) } />
+          { parseError ? (
+            <div class="alert alert-danger mt-2" role="alert">
+              { parseError }
+            </div>
+          ) : null }
+        </div>
+      </WBDialog>
+    );
+  }
+
+  show() {
+    this.dialogRef.current.show();
+  }
+}
+
 class WBJsonEditor extends Component {
   constructor(...args) {
     super(...args);
@@ -12,33 +47,16 @@ class WBJsonEditor extends Component {
   render({ app, name, value, stringify, pretty, onChange }, { editValue, parseError }) {
     return (
       <div>
-        <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
-          accept={ () => {
-            onChange(JSON.parse(editValue));
-          } }
-          canAccept={ () => {
-            try { JSON.parse(editValue) }
-            catch (exc) { this.setState({ parseError: exc.message }); return false; }
-            return true;
-          } }>
-          <div>
-            <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
-              onChange={ e => this.setState({ editValue: e.target.value }) } />
-            { parseError ? (
-              <div class="alert alert-danger mt-2" role="alert">
-                { parseError }
-              </div>
-            ) : null }
-          </div>
-        </WBDialog>
+        <WbJsonEditorDialog name={ name } onChange={ onChange } ref={ this.dialogRef } />
         <WBAccordion names={ [ name ] } extraHeaderUi={ [ (
           <button class="btn btn-link px-0" title="Edit"
             onclick={ () => {
-              this.setState({ parseError: null,
+              const dlg = this.dialogRef.current;
+              dlg.setState({ parseError: null,
                   editValue: stringify ?
                   pretty ? JSON.stringify(value, null, 2)
                   : JSON.stringify(value) : value });
-              this.dialogRef.current.show();
+              dlg.show();
             } }>
             <i class="fas fa-edit text-secondary" />
           </button>

From 877ef7fde3392881310081d45674922612ed59e0 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 18:51:29 +0200
Subject: [PATCH 165/170] Added a workaround to WBAccordion so that it doesn't
 fold so easily. To be seen if this is fine in practice.

---
 frontend/src/js/widget/wb-accordion.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index 7bd6d71..462b263 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -19,6 +19,8 @@ class WBAccordion extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    if (JSON.stringify(nextProps.names) === JSON.stringify(this.props.names))
+      return;
     this.props = nextProps;
     this.setupIds();
   }

From 80429683e9893accae240f91b7283903fef0f9df Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 17 Apr 2020 18:27:43 +0200
Subject: [PATCH 166/170] Fix in parseKeepRef.

---
 frontend/src/js/arvados/process/wb-process-misc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/js/arvados/process/wb-process-misc.js b/frontend/src/js/arvados/process/wb-process-misc.js
index 9cd06e6..7673ae2 100644
--- a/frontend/src/js/arvados/process/wb-process-misc.js
+++ b/frontend/src/js/arvados/process/wb-process-misc.js
@@ -3,7 +3,7 @@ function encodeURIComponentIncludingDots(s) {
 }
 
 function parseKeepRef(value) {
-  if (typeof(value) === 'object' && 'location' in value && value.location.startsWith('keep:'))
+  if (value && typeof(value) === 'object' && 'location' in value && value.location.startsWith('keep:'))
     return value.location.substr(5);
   return value;
 }

From 05256089fcdd8fbf11925bb103d9f97ce4598038 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 29 May 2020 18:16:24 +0200
Subject: [PATCH 167/170] Add package-lock.json for frontend.

---
 .gitignore                 |   2 +-
 frontend/package-lock.json | 731 +++++++++++++++++++++++++++++++++++++
 2 files changed, 732 insertions(+), 1 deletion(-)
 create mode 100644 frontend/package-lock.json

diff --git a/.gitignore b/.gitignore
index ba101d0..be4f6f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,9 @@
 __pycache__
 *.pyc
 node_modules
-package-lock.json
 /frontend/dist/
 /backend/server.pem
 /testdata/
 /backend/supervisord/supervisord.log
 /dockerfiles/wba/files/wba/dist
+/package-lock.json
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..e671a40
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,731 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+      "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+      "requires": {
+        "@babel/highlight": "7.8.3"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz",
+      "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==",
+      "requires": {
+        "chalk": "2.4.2",
+        "esutils": "2.0.3",
+        "js-tokens": "4.0.0"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+      "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+      "requires": {
+        "regenerator-runtime": "0.13.3"
+      }
+    },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
+      "integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ=="
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
+    "@types/node": {
+      "version": "13.7.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.2.tgz",
+      "integrity": "sha512-uvilvAQbdJvnSBFcKJ2td4016urcGvsiR+N4dHGU87ml8O2Vl6l+ErOi9w0kXSPiwJ1AYlIW+0pDXDWWMOiWbw=="
+    },
+    "acorn": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
+      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw=="
+    },
+    "acorn-dynamic-import": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
+    },
+    "acorn-jsx": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
+      "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw=="
+    },
+    "align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+      "requires": {
+        "kind-of": "3.2.2",
+        "longest": "1.0.1",
+        "repeat-string": "1.6.1"
+      }
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "1.9.3"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "1.0.3"
+      }
+    },
+    "bootstrap": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+    },
+    "buble": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.8.tgz",
+      "integrity": "sha512-IoGZzrUTY5fKXVkgGHw3QeXFMUNBFv+9l8a4QJKG1JhG3nCMHTdEX1DCOg8568E2Q9qvAQIiSokv6Jsgx8p2cA==",
+      "requires": {
+        "acorn": "6.4.0",
+        "acorn-dynamic-import": "4.0.0",
+        "acorn-jsx": "5.1.0",
+        "chalk": "2.4.2",
+        "magic-string": "0.25.6",
+        "minimist": "1.2.0",
+        "os-homedir": "2.0.0",
+        "regexpu-core": "4.6.0"
+      }
+    },
+    "builtin-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz",
+      "integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg=="
+    },
+    "camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
+    },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+      "requires": {
+        "align-text": "0.1.4",
+        "lazy-cache": "1.0.4"
+      }
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "3.2.1",
+        "escape-string-regexp": "1.0.5",
+        "supports-color": "5.5.0"
+      }
+    },
+    "cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+      "requires": {
+        "center-align": "0.1.3",
+        "right-align": "0.1.3",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "commenting": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/commenting/-/commenting-1.0.5.tgz",
+      "integrity": "sha512-U7qGbcDLSNpOcV3RQRKHp7hFpy9WUmfawbkPdS4R2RhrSu4dOF85QQpx/Zjcv7uLF6tWSUKEKUIkxknPCrVjwg=="
+    },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "exec-sh": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz",
+      "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==",
+      "requires": {
+        "merge": "1.2.1"
+      }
+    },
+    "filesize": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
+      "integrity": "sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg=="
+    },
+    "fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
+      "requires": {
+        "graceful-fs": "4.2.3",
+        "jsonfile": "3.0.1",
+        "universalify": "0.1.2"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "7.8.4",
+        "loose-envify": "1.4.0",
+        "resolve-pathname": "3.0.0",
+        "tiny-invariant": "1.1.0",
+        "tiny-warning": "1.0.3",
+        "value-equal": "1.0.1"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
+    },
+    "jest-worker": {
+      "version": "24.9.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
+      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
+      "requires": {
+        "merge-stream": "2.0.0",
+        "supports-color": "6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-uuid": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/js-uuid/-/js-uuid-0.0.6.tgz",
+      "integrity": "sha1-uxb2gkeOnvrCYrRczCqa31Mypb4="
+    },
+    "js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "requires": {
+        "argparse": "1.0.10",
+        "esprima": "4.0.1"
+      }
+    },
+    "jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+    },
+    "jsonfile": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
+      "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
+      "requires": {
+        "graceful-fs": "4.2.3"
+      }
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "requires": {
+        "is-buffer": "1.1.6"
+      }
+    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
+    },
+    "linkstate": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/linkstate/-/linkstate-1.1.1.tgz",
+      "integrity": "sha512-5SICdxQG9FpWk44wSEoM2WOCUNuYfClp10t51XAIV5E7vUILF/dTYxf0vJw6bW2dUd2wcQon+LkNtRijpNLrig=="
+    },
+    "lodash": {
+      "version": "4.17.9",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.9.tgz",
+      "integrity": "sha512-vuRLquvot5sKUldMBumG0YqLvX6m/RGBBOmqb3CWR/MC/QvvD1cTH1fOqxz2FJAQeoExeUdX5Gu9vP2EP6ik+Q=="
+    },
+    "longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "4.0.0"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.6.tgz",
+      "integrity": "sha512-3a5LOMSGoCTH5rbqobC2HuDNRtE2glHZ8J7pK+QZYppyWA36yuNpsX994rIY2nCuyP7CZYy7lQq/X2jygiZ89g==",
+      "requires": {
+        "sourcemap-codec": "1.4.8"
+      }
+    },
+    "merge": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "minimist": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        }
+      }
+    },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
+    "os-homedir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-2.0.0.tgz",
+      "integrity": "sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q=="
+    },
+    "papaya-viewer": {
+      "version": "1.0.1449",
+      "resolved": "https://registry.npmjs.org/papaya-viewer/-/papaya-viewer-1.0.1449.tgz",
+      "integrity": "sha512-LdbvmsXlPkKfKB/BiHHdmtutHnps+erm81tnwBr2sNnise65o9T2td8pMGqRfV4FxFScuMEawCNUALLj2+qAKg=="
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "preact": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-8.5.3.tgz",
+      "integrity": "sha512-O3kKP+1YdgqHOFsZF2a9JVdtqD+RPzCQc3rP+Ualf7V6rmRDchZ9MJbiGTT7LuyqFKZqlHSOyO/oMFmI2lVTsw=="
+    },
+    "preact-router": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-2.6.1.tgz",
+      "integrity": "sha512-Ql3fptQ8hiioIw5zUcWUq5NShl7yFR4e6KBUzLbGI7+HKMIgBnH+aOITN5IrY1rbr2vhKXBdHdd9nLbbjcJTOQ=="
+    },
+    "regenerate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz",
+      "integrity": "sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==",
+      "requires": {
+        "regenerate": "1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+    },
+    "regexpu-core": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.6.0.tgz",
+      "integrity": "sha512-YlVaefl8P5BnFYOITTNzDvan1ulLOiXJzCNZxduTIosN17b87h3bvG9yHMoHaRuo88H4mQ06Aodj5VtYGGGiTg==",
+      "requires": {
+        "regenerate": "1.4.0",
+        "regenerate-unicode-properties": "8.1.0",
+        "regjsgen": "0.5.1",
+        "regjsparser": "0.6.2",
+        "unicode-match-property-ecmascript": "1.0.4",
+        "unicode-match-property-value-ecmascript": "1.1.0"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
+      "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg=="
+    },
+    "regjsparser": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.2.tgz",
+      "integrity": "sha512-E9ghzUtoLwDekPT0DYCp+c4h+bvuUpe6rRHCTYn6eGoqj1LgKXxT6I0Il4WbjhQkOghzi/V+y03bPKvbllL93Q==",
+      "requires": {
+        "jsesc": "0.5.0"
+      }
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+    },
+    "resolve": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz",
+      "integrity": "sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==",
+      "requires": {
+        "path-parse": "1.0.6"
+      }
+    },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+      "requires": {
+        "align-text": "0.1.4"
+      }
+    },
+    "rollup": {
+      "version": "0.66.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz",
+      "integrity": "sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "@types/node": "13.7.2"
+      }
+    },
+    "rollup-plugin-buble": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-buble/-/rollup-plugin-buble-0.19.8.tgz",
+      "integrity": "sha512-8J4zPk2DQdk3rxeZvxgzhHh/rm5nJkjwgcsUYisCQg1QbT5yagW+hehYEW7ZNns/NVbDCTv4JQ7h4fC8qKGOKw==",
+      "requires": {
+        "buble": "0.19.8",
+        "rollup-pluginutils": "2.8.2"
+      }
+    },
+    "rollup-plugin-copy": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-0.2.3.tgz",
+      "integrity": "sha1-2sGrgdHyILrrmOXEwBCCUuHtu5g=",
+      "requires": {
+        "colors": "1.4.0",
+        "fs-extra": "3.0.1"
+      }
+    },
+    "rollup-plugin-includepaths": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-includepaths/-/rollup-plugin-includepaths-0.2.3.tgz",
+      "integrity": "sha512-4QbSIZPDT+FL4SViEVCRi4cGCA64zQJu7u5qmCkO3ecHy+l9EQBsue15KfCpddfb6Br0q47V/v2+E2YUiqts9g=="
+    },
+    "rollup-plugin-license": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-license/-/rollup-plugin-license-0.7.0.tgz",
+      "integrity": "sha512-KoZxV+UxBUaubo3mu7IHjMFryCuZIU8Q9tm8GLUl/lz6DQCEJUEgcp+urItEuux8xa7M0Qx7Fjoe4g3s9hsUFg==",
+      "requires": {
+        "commenting": "1.0.5",
+        "lodash": "4.17.9",
+        "magic-string": "0.25.0",
+        "mkdirp": "0.5.1",
+        "moment": "2.22.2"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.25.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.0.tgz",
+          "integrity": "sha512-Msbwa9oNYNPjwVh9ury5X2BHbTFWoirTlzuf4X+pIoSOQVKNRJHXTx1WmKYuXzRM4QZFv8dGXyZvhDMmWhGLPw==",
+          "requires": {
+            "sourcemap-codec": "1.4.8"
+          }
+        }
+      }
+    },
+    "rollup-plugin-minify": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-minify/-/rollup-plugin-minify-1.0.3.tgz",
+      "integrity": "sha1-PGTb4ytVJXDrJg+gIflAEOWRkLI=",
+      "requires": {
+        "uglify-js": "2.8.29"
+      }
+    },
+    "rollup-plugin-node-resolve": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz",
+      "integrity": "sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==",
+      "requires": {
+        "builtin-modules": "2.0.0",
+        "is-module": "1.0.0",
+        "resolve": "1.15.0"
+      }
+    },
+    "rollup-plugin-uglify": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.4.tgz",
+      "integrity": "sha512-ddgqkH02klveu34TF0JqygPwZnsbhHVI6t8+hGTcYHngPkQb5MIHI0XiztXIN/d6V9j+efwHAqEL7LspSxQXGw==",
+      "requires": {
+        "@babel/code-frame": "7.8.3",
+        "jest-worker": "24.9.0",
+        "serialize-javascript": "2.1.2",
+        "uglify-js": "3.8.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "uglify-js": {
+          "version": "3.8.0",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.0.tgz",
+          "integrity": "sha512-ugNSTT8ierCsDHso2jkBHXYrU8Y5/fY2ZUprfrJUiD7YpuFvV4jODLFmb3h4btQjqr5Nh4TX4XtgDfCU1WdioQ==",
+          "requires": {
+            "commander": "2.20.3",
+            "source-map": "0.6.1"
+          }
+        }
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "requires": {
+        "estree-walker": "0.6.1"
+      }
+    },
+    "serialize-javascript": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "streamsaver": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/streamsaver/-/streamsaver-2.0.3.tgz",
+      "integrity": "sha512-IpXeZ67YxcsrfZHe3yg/IyZ5KPfRSn1teDy5mRX2e8M6K410NcJNcR+SFQ2Z92DO36VBUArQP4Vy3Qu33MwIOQ=="
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "3.0.0"
+      }
+    },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
+    "uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+      "requires": {
+        "source-map": "0.5.7",
+        "uglify-to-browserify": "1.0.2",
+        "yargs": "3.10.0"
+      }
+    },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+      "optional": true
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "1.0.4",
+        "unicode-property-aliases-ecmascript": "1.0.5"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g=="
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz",
+      "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
+    "watch": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz",
+      "integrity": "sha1-NApxe952Vyb6CqB9ch4BR6VR3ww=",
+      "requires": {
+        "exec-sh": "0.2.2",
+        "minimist": "1.2.0"
+      }
+    },
+    "web-streams-polyfill": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-2.0.6.tgz",
+      "integrity": "sha512-nXOi4fBykO4LzyQhZX3MAGib635KGZBoNTkNXrNIkz0zthEf2QokEWxRb0H632xNLDWtHFb1R6dFGzksjYMSDw=="
+    },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0="
+    },
+    "wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
+    },
+    "yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+      "requires": {
+        "camelcase": "1.2.1",
+        "cliui": "2.1.0",
+        "decamelize": "1.2.0",
+        "window-size": "0.1.0"
+      }
+    }
+  }
+}

From 172287996f687f839680b7df3d936ac26c2b1cd5 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 29 May 2020 18:33:17 +0200
Subject: [PATCH 168/170] Copyright fix for public release.

---
 frontend/rollup.config.js      | 2 +-
 frontend/src/js/page/wb-app.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index 9adbd0f..e630229 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -60,7 +60,7 @@ export default {
     buble({jsx: 'h', objectAssign: 'Object.assign'}),
     resolve({}),
     license({
-      banner: 'Copyright (C) F. Hoffmann-La Roche AG, 2020.\nAuthor: stanislaw.adaszewski@roche.com\nAll Rights Reserved.',
+      banner: 'Copyright (C) Stanislaw Adaszewski, 2020.\nContact: stanislaw.adaszewski@gmail.com\nAll Rights Reserved.',
     }),
     // uglify()
   ]
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 3788033..09a275a 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -39,7 +39,7 @@ class WBApp extends Component {
     } else if (item['id'] === 'shared-with-me') {
       return ('/shared-with-me');
     } else if (item['id'] === 'whatsnew') {
-      return ('https://sites.google.com/roche.com/workbenchadvanced');
+      return ('https://adared.ch/wba');
     }
   }
 

From 8c455da24ed847b77044604bd41cdbdb3780d985 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 29 May 2020 18:44:38 +0200
Subject: [PATCH 169/170] Add copyright notes.

---
 frontend/src/js/arvados/base/arvados-object-name.js      | 7 +++++++
 frontend/src/js/arvados/base/arvados-type-name.js        | 7 +++++++
 frontend/src/js/arvados/base/detect-hashes.js            | 7 +++++++
 frontend/src/js/arvados/base/detect-uuids.js             | 9 ++++++++-
 frontend/src/js/arvados/base/fetch-object-parents.js     | 7 +++++++
 frontend/src/js/arvados/base/make-arvados-request.js     | 7 +++++++
 frontend/src/js/arvados/base/url-for-object.js           | 7 +++++++
 frontend/src/js/arvados/base/wb-delete-object.js         | 7 +++++++
 frontend/src/js/arvados/base/wb-fetch-objects.js         | 7 +++++++
 frontend/src/js/arvados/base/wb-id-tools.js              | 7 +++++++
 frontend/src/js/arvados/base/wb-move-object.js           | 7 +++++++
 frontend/src/js/arvados/base/wb-rename-object.js         | 7 +++++++
 frontend/src/js/arvados/base/wb-update-field.js          | 7 +++++++
 frontend/src/js/arvados/collection/wb-copy-collection.js | 7 +++++++
 frontend/src/js/arvados/collection/wb-download-file.js   | 7 +++++++
 .../js/arvados/collection/wb-manifest-worker-wrapper.js  | 7 +++++++
 frontend/src/js/arvados/process/wb-input-spec-info.js    | 7 +++++++
 frontend/src/js/arvados/process/wb-parse-workflow-def.js | 7 +++++++
 frontend/src/js/arvados/process/wb-process-misc.js       | 7 +++++++
 frontend/src/js/arvados/process/wb-process-state-name.js | 7 +++++++
 .../js/arvados/process/wb-submit-container-request.js    | 9 ++++++++-
 frontend/src/js/arvados/process/wb-uuids-to-cwl.js       | 7 +++++++
 frontend/src/js/component/wb-arvados-crumbs.js           | 7 +++++++
 frontend/src/js/component/wb-collection-content.js       | 7 +++++++
 frontend/src/js/component/wb-collection-fields.js        | 9 ++++++++-
 frontend/src/js/component/wb-collection-listing.js       | 7 +++++++
 frontend/src/js/component/wb-common-fields.js            | 7 +++++++
 frontend/src/js/component/wb-container-fields.js         | 7 +++++++
 frontend/src/js/component/wb-container-request-fields.js | 7 +++++++
 frontend/src/js/component/wb-inline-search.js            | 7 +++++++
 frontend/src/js/component/wb-json-editor.js              | 7 +++++++
 frontend/src/js/component/wb-json-viewer.js              | 7 +++++++
 frontend/src/js/component/wb-lazy-inline-name.js         | 7 +++++++
 frontend/src/js/component/wb-live-logs.js                | 7 +++++++
 frontend/src/js/component/wb-name-and-uuid.js            | 7 +++++++
 frontend/src/js/component/wb-navbar-common.js            | 7 +++++++
 frontend/src/js/component/wb-path-display.js             | 7 +++++++
 frontend/src/js/component/wb-process-dashboard.js        | 7 +++++++
 frontend/src/js/component/wb-process-listing.js          | 7 +++++++
 frontend/src/js/component/wb-process-state.js            | 7 +++++++
 frontend/src/js/component/wb-project-fields.js           | 7 +++++++
 frontend/src/js/component/wb-project-listing.js          | 7 +++++++
 frontend/src/js/component/wb-user-listing.js             | 7 +++++++
 frontend/src/js/component/wb-workflow-fields.js          | 7 +++++++
 frontend/src/js/component/wb-workflow-input.js           | 7 +++++++
 frontend/src/js/component/wb-workflow-listing.js         | 7 +++++++
 frontend/src/js/deprecated/fetch-project-parents.js      | 7 +++++++
 frontend/src/js/deprecated/wb-arvados-collection.js      | 7 +++++++
 frontend/src/js/deprecated/wb-browse-dialog.js           | 7 +++++++
 frontend/src/js/deprecated/wb-collection-manifest.js     | 7 +++++++
 frontend/src/js/deprecated/wb-download-file.js           | 7 +++++++
 frontend/src/js/deprecated/wb-manifest-reader.js         | 7 +++++++
 frontend/src/js/deprecated/wb-project-crumbs.js          | 7 +++++++
 frontend/src/js/deprecated/wb-rootdir-wrapper.js         | 7 +++++++
 .../src/js/dialog/wb-browse-dialog-collection-content.js | 7 +++++++
 .../src/js/dialog/wb-browse-dialog-collection-list.js    | 7 +++++++
 frontend/src/js/dialog/wb-browse-dialog-project-list.js  | 7 +++++++
 frontend/src/js/dialog/wb-browse-dialog-user-list.js     | 7 +++++++
 frontend/src/js/dialog/wb-browse-dialog.js               | 7 +++++++
 frontend/src/js/dialog/wb-delete-dialog.js               | 7 +++++++
 frontend/src/js/dialog/wb-edit-description-dialog.js     | 7 +++++++
 frontend/src/js/dialog/wb-new-project-dialog.js          | 7 +++++++
 frontend/src/js/dialog/wb-pick-object-dialog.js          | 7 +++++++
 frontend/src/js/dialog/wb-rename-dialog.js               | 7 +++++++
 frontend/src/js/dialog/wb-toolbox-dialog.js              | 7 +++++++
 frontend/src/js/index.js                                 | 7 +++++++
 frontend/src/js/misc/wb-apply-promise-ordering.js        | 7 +++++++
 frontend/src/js/misc/wb-disable-controls.js              | 7 +++++++
 frontend/src/js/misc/wb-format-date.js                   | 7 +++++++
 frontend/src/js/misc/wb-format-special-value.js          | 7 +++++++
 frontend/src/js/page/wb-app.js                           | 7 +++++++
 frontend/src/js/page/wb-browse.js                        | 7 +++++++
 frontend/src/js/page/wb-collection-browse.js             | 7 +++++++
 frontend/src/js/page/wb-collection-view.js               | 7 +++++++
 frontend/src/js/page/wb-container-view.js                | 7 +++++++
 frontend/src/js/page/wb-download-page.js                 | 7 +++++++
 frontend/src/js/page/wb-image-viewer-page.js             | 7 +++++++
 frontend/src/js/page/wb-landing-page.js                  | 7 +++++++
 frontend/src/js/page/wb-launch-workflow-page.js          | 7 +++++++
 frontend/src/js/page/wb-process-view.js                  | 7 +++++++
 frontend/src/js/page/wb-project-view.js                  | 7 +++++++
 frontend/src/js/page/wb-sharing-page.js                  | 7 +++++++
 frontend/src/js/page/wb-sign-in.js                       | 7 +++++++
 frontend/src/js/page/wb-sign-out.js                      | 7 +++++++
 frontend/src/js/page/wb-users-page.js                    | 7 +++++++
 frontend/src/js/page/wb-workflow-view.js                 | 7 +++++++
 frontend/src/js/widget/wb-accordion.js                   | 7 +++++++
 frontend/src/js/widget/wb-breadcrumbs.js                 | 7 +++++++
 frontend/src/js/widget/wb-checkboxes.js                  | 7 +++++++
 frontend/src/js/widget/wb-dialog.js                      | 7 +++++++
 frontend/src/js/widget/wb-navbar.js                      | 7 +++++++
 frontend/src/js/widget/wb-pagination.js                  | 7 +++++++
 frontend/src/js/widget/wb-select.js                      | 7 +++++++
 frontend/src/js/widget/wb-table.js                       | 7 +++++++
 frontend/src/js/widget/wb-tabs.js                        | 7 +++++++
 frontend/src/js/worker/wb-manifest-worker.js             | 7 +++++++
 96 files changed, 675 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/arvados/base/arvados-object-name.js b/frontend/src/js/arvados/base/arvados-object-name.js
index 7aad7fd..d39bb02 100644
--- a/frontend/src/js/arvados/base/arvados-object-name.js
+++ b/frontend/src/js/arvados/base/arvados-object-name.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import arvadosTypeName from 'arvados-type-name';
 
 function arvadosObjectName(item) {
diff --git a/frontend/src/js/arvados/base/arvados-type-name.js b/frontend/src/js/arvados/base/arvados-type-name.js
index f547dc1..19750ce 100644
--- a/frontend/src/js/arvados/base/arvados-type-name.js
+++ b/frontend/src/js/arvados/base/arvados-type-name.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 const typeIdToName = {
   'tpzed': 'user',
   'j7d0g': 'group',
diff --git a/frontend/src/js/arvados/base/detect-hashes.js b/frontend/src/js/arvados/base/detect-hashes.js
index cffce2e..4b94ae2 100644
--- a/frontend/src/js/arvados/base/detect-hashes.js
+++ b/frontend/src/js/arvados/base/detect-hashes.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function detectHashes(obj) {
   let Q = [ obj ];
   let matches = {};
diff --git a/frontend/src/js/arvados/base/detect-uuids.js b/frontend/src/js/arvados/base/detect-uuids.js
index 3b72248..600c284 100644
--- a/frontend/src/js/arvados/base/detect-uuids.js
+++ b/frontend/src/js/arvados/base/detect-uuids.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function detectUuids(obj) {
   let Q = [ obj ];
   let matches = {};
@@ -7,7 +14,7 @@ function detectUuids(obj) {
 
     if (!item)
       continue;
-      
+
     if (typeof(item) === 'string') {
       // use regexes
       let rx = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/g;
diff --git a/frontend/src/js/arvados/base/fetch-object-parents.js b/frontend/src/js/arvados/base/fetch-object-parents.js
index ea1d1c9..64bc0f0 100644
--- a/frontend/src/js/arvados/base/fetch-object-parents.js
+++ b/frontend/src/js/arvados/base/fetch-object-parents.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 import arvadosObjectName from 'arvados-object-name';
diff --git a/frontend/src/js/arvados/base/make-arvados-request.js b/frontend/src/js/arvados/base/make-arvados-request.js
index 046ab68..1da9d77 100644
--- a/frontend/src/js/arvados/base/make-arvados-request.js
+++ b/frontend/src/js/arvados/base/make-arvados-request.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import wbApplyPromiseOrdering from 'wb-apply-promise-ordering';
 
 const requestPromiseOrdering = {};
diff --git a/frontend/src/js/arvados/base/url-for-object.js b/frontend/src/js/arvados/base/url-for-object.js
index fce5424..d8f208a 100644
--- a/frontend/src/js/arvados/base/url-for-object.js
+++ b/frontend/src/js/arvados/base/url-for-object.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import arvadosTypeName from 'arvados-type-name';
 
 function urlForObject(item, mode='primary') {
diff --git a/frontend/src/js/arvados/base/wb-delete-object.js b/frontend/src/js/arvados/base/wb-delete-object.js
index af2ac4e..6492ce3 100644
--- a/frontend/src/js/arvados/base/wb-delete-object.js
+++ b/frontend/src/js/arvados/base/wb-delete-object.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 
diff --git a/frontend/src/js/arvados/base/wb-fetch-objects.js b/frontend/src/js/arvados/base/wb-fetch-objects.js
index 64e5a5a..627bb65 100644
--- a/frontend/src/js/arvados/base/wb-fetch-objects.js
+++ b/frontend/src/js/arvados/base/wb-fetch-objects.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import arvadosTypeName from 'arvados-type-name';
 import makeArvadosRequest from 'make-arvados-request';
 
diff --git a/frontend/src/js/arvados/base/wb-id-tools.js b/frontend/src/js/arvados/base/wb-id-tools.js
index 400a32e..6d7b58c 100644
--- a/frontend/src/js/arvados/base/wb-id-tools.js
+++ b/frontend/src/js/arvados/base/wb-id-tools.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import arvadosTypeName from 'arvados-type-name';
 
 const UUID_PATTERN = '[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}';
diff --git a/frontend/src/js/arvados/base/wb-move-object.js b/frontend/src/js/arvados/base/wb-move-object.js
index a5b08fe..96f1521 100644
--- a/frontend/src/js/arvados/base/wb-move-object.js
+++ b/frontend/src/js/arvados/base/wb-move-object.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 
diff --git a/frontend/src/js/arvados/base/wb-rename-object.js b/frontend/src/js/arvados/base/wb-rename-object.js
index bbd5a8a..379ef60 100644
--- a/frontend/src/js/arvados/base/wb-rename-object.js
+++ b/frontend/src/js/arvados/base/wb-rename-object.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 
diff --git a/frontend/src/js/arvados/base/wb-update-field.js b/frontend/src/js/arvados/base/wb-update-field.js
index b5c2362..537a834 100644
--- a/frontend/src/js/arvados/base/wb-update-field.js
+++ b/frontend/src/js/arvados/base/wb-update-field.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 
diff --git a/frontend/src/js/arvados/collection/wb-copy-collection.js b/frontend/src/js/arvados/collection/wb-copy-collection.js
index df53f13..3b6a7bd 100644
--- a/frontend/src/js/arvados/collection/wb-copy-collection.js
+++ b/frontend/src/js/arvados/collection/wb-copy-collection.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import arvadosTypeName from 'arvados-type-name';
 
diff --git a/frontend/src/js/arvados/collection/wb-download-file.js b/frontend/src/js/arvados/collection/wb-download-file.js
index 6010736..4b85a4b 100644
--- a/frontend/src/js/arvados/collection/wb-download-file.js
+++ b/frontend/src/js/arvados/collection/wb-download-file.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 
 function wbDownloadFile(arvHost, arvToken,
diff --git a/frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js b/frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js
index 891ad55..30672f9 100644
--- a/frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js
+++ b/frontend/src/js/arvados/collection/wb-manifest-worker-wrapper.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 class WBManifestWorkerWrapper {
   constructor() {
     this.worker = new Worker('/js/wb-manifest-worker.js');
diff --git a/frontend/src/js/arvados/process/wb-input-spec-info.js b/frontend/src/js/arvados/process/wb-input-spec-info.js
index 338b707..12e421a 100644
--- a/frontend/src/js/arvados/process/wb-input-spec-info.js
+++ b/frontend/src/js/arvados/process/wb-input-spec-info.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function wbInputSpecInfo(inputSpec) {
   const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
     (inputSpec.type.type === 'array' && [].concat(inputSpec.type.items).indexOf('File') !== -1));
diff --git a/frontend/src/js/arvados/process/wb-parse-workflow-def.js b/frontend/src/js/arvados/process/wb-parse-workflow-def.js
index 2644c9f..a6f5b8c 100644
--- a/frontend/src/js/arvados/process/wb-parse-workflow-def.js
+++ b/frontend/src/js/arvados/process/wb-parse-workflow-def.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function wbParseWorkflowDef(text) {
   let definition;
   try {
diff --git a/frontend/src/js/arvados/process/wb-process-misc.js b/frontend/src/js/arvados/process/wb-process-misc.js
index 7673ae2..86169d5 100644
--- a/frontend/src/js/arvados/process/wb-process-misc.js
+++ b/frontend/src/js/arvados/process/wb-process-misc.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function encodeURIComponentIncludingDots(s) {
   return encodeURIComponent(s).replace('.', '%2E');
 }
diff --git a/frontend/src/js/arvados/process/wb-process-state-name.js b/frontend/src/js/arvados/process/wb-process-state-name.js
index 2ecf5a3..d1f89c4 100644
--- a/frontend/src/js/arvados/process/wb-process-state-name.js
+++ b/frontend/src/js/arvados/process/wb-process-state-name.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function wbProcessStateName(containerRequest, container) {
   const cr = containerRequest;
   const c = container;
diff --git a/frontend/src/js/arvados/process/wb-submit-container-request.js b/frontend/src/js/arvados/process/wb-submit-container-request.js
index 9b15459..0f41515 100644
--- a/frontend/src/js/arvados/process/wb-submit-container-request.js
+++ b/frontend/src/js/arvados/process/wb-submit-container-request.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 import wbUuidsToCwl from 'wb-uuids-to-cwl';
 
@@ -62,7 +69,7 @@ function ensureSubProject(arvHost, arvToken, projectUuid) {
       [ 'properties.type', '=', 'daily_process_subproject' ],
       [ 'properties.date', '=', date ]
     ];
-    
+
     return makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters_1)));
   });
diff --git a/frontend/src/js/arvados/process/wb-uuids-to-cwl.js b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
index cb1df7c..73aa1ef 100644
--- a/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
+++ b/frontend/src/js/arvados/process/wb-uuids-to-cwl.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function wbUuidsToCwl(obj) {
   if (obj instanceof Array) {
     const res = [];
diff --git a/frontend/src/js/component/wb-arvados-crumbs.js b/frontend/src/js/component/wb-arvados-crumbs.js
index 26640bb..de741ff 100644
--- a/frontend/src/js/component/wb-arvados-crumbs.js
+++ b/frontend/src/js/component/wb-arvados-crumbs.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import fetchObjectParents from 'fetch-object-parents';
diff --git a/frontend/src/js/component/wb-collection-content.js b/frontend/src/js/component/wb-collection-content.js
index e31f860..c68fdb5 100644
--- a/frontend/src/js/component/wb-collection-content.js
+++ b/frontend/src/js/component/wb-collection-content.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBBreadcrumbs from 'wb-breadcrumbs';
diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
index 45a7ae0..bdaf69d 100644
--- a/frontend/src/js/component/wb-collection-fields.js
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
@@ -25,7 +32,7 @@ class WBCollectionFields extends Component {
   prepareRows(item) {
     const { app } = this.props;
     const { arvHost, arvToken } = app.state;
-    
+
     let rows = [
       [ 'Name', item.name ],
       [ 'Description', wbFormatSpecialValue(item.description) ],
diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 4e34a9a..1c743e6 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index da75ad7..4b76f0c 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-container-fields.js b/frontend/src/js/component/wb-container-fields.js
index 5f0644d..b4b3eaa 100644
--- a/frontend/src/js/component/wb-container-fields.js
+++ b/frontend/src/js/component/wb-container-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-container-request-fields.js b/frontend/src/js/component/wb-container-request-fields.js
index 8d3b23d..13e666d 100644
--- a/frontend/src/js/component/wb-container-request-fields.js
+++ b/frontend/src/js/component/wb-container-request-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-inline-search.js b/frontend/src/js/component/wb-inline-search.js
index ff028e5..457017c 100644
--- a/frontend/src/js/component/wb-inline-search.js
+++ b/frontend/src/js/component/wb-inline-search.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBInlineSearch extends Component {
diff --git a/frontend/src/js/component/wb-json-editor.js b/frontend/src/js/component/wb-json-editor.js
index 52f6011..2f6798a 100644
--- a/frontend/src/js/component/wb-json-editor.js
+++ b/frontend/src/js/component/wb-json-editor.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBJsonViewer from 'wb-json-viewer';
 import WBAccordion from 'wb-accordion';
diff --git a/frontend/src/js/component/wb-json-viewer.js b/frontend/src/js/component/wb-json-viewer.js
index 02e0368..a77c8dd 100644
--- a/frontend/src/js/component/wb-json-viewer.js
+++ b/frontend/src/js/component/wb-json-viewer.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBIdTools from 'wb-id-tools';
 import urlForObject from 'url-for-object';
diff --git a/frontend/src/js/component/wb-lazy-inline-name.js b/frontend/src/js/component/wb-lazy-inline-name.js
index 3b5ec47..295736c 100644
--- a/frontend/src/js/component/wb-lazy-inline-name.js
+++ b/frontend/src/js/component/wb-lazy-inline-name.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import WBIdTools from 'wb-id-tools';
diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js
index 256ca24..99d4c6c 100644
--- a/frontend/src/js/component/wb-live-logs.js
+++ b/frontend/src/js/component/wb-live-logs.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import WBPagination from 'wb-pagination';
diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 2e9cc45..e63c166 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import urlForObject from 'url-for-object';
diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index fa849fb..c691eec 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbar from 'wb-navbar';
 import WBInlineSearch from 'wb-inline-search';
diff --git a/frontend/src/js/component/wb-path-display.js b/frontend/src/js/component/wb-path-display.js
index 91706c3..e61780c 100644
--- a/frontend/src/js/component/wb-path-display.js
+++ b/frontend/src/js/component/wb-path-display.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import { encodeURIComponentIncludingDots } from 'wb-process-misc';
diff --git a/frontend/src/js/component/wb-process-dashboard.js b/frontend/src/js/component/wb-process-dashboard.js
index c9b60b5..1114101 100644
--- a/frontend/src/js/component/wb-process-dashboard.js
+++ b/frontend/src/js/component/wb-process-dashboard.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 45e8b8a..355fc90 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-process-state.js b/frontend/src/js/component/wb-process-state.js
index 3aab5a4..a1446d6 100644
--- a/frontend/src/js/component/wb-process-state.js
+++ b/frontend/src/js/component/wb-process-state.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import wbProcessStateName from 'wb-process-state-name';
diff --git a/frontend/src/js/component/wb-project-fields.js b/frontend/src/js/component/wb-project-fields.js
index db36b7e..f821c9c 100644
--- a/frontend/src/js/component/wb-project-fields.js
+++ b/frontend/src/js/component/wb-project-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 83bc254..b3b6557 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-user-listing.js b/frontend/src/js/component/wb-user-listing.js
index a232ed1..acf5257 100644
--- a/frontend/src/js/component/wb-user-listing.js
+++ b/frontend/src/js/component/wb-user-listing.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBPagination from 'wb-pagination';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-workflow-fields.js b/frontend/src/js/component/wb-workflow-fields.js
index 4e74eba..92a53f0 100644
--- a/frontend/src/js/component/wb-workflow-fields.js
+++ b/frontend/src/js/component/wb-workflow-fields.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/component/wb-workflow-input.js b/frontend/src/js/component/wb-workflow-input.js
index 473a611..633c0a5 100644
--- a/frontend/src/js/component/wb-workflow-input.js
+++ b/frontend/src/js/component/wb-workflow-input.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import wbInputSpecInfo from 'wb-input-spec-info';
 import WBPathDisplay from 'wb-path-display';
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 84f2d14..6e5c806 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
diff --git a/frontend/src/js/deprecated/fetch-project-parents.js b/frontend/src/js/deprecated/fetch-project-parents.js
index 57127bd..2106eb7 100644
--- a/frontend/src/js/deprecated/fetch-project-parents.js
+++ b/frontend/src/js/deprecated/fetch-project-parents.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 
 function fetchProjectParents(arvHost, arvToken, uuid) {
diff --git a/frontend/src/js/deprecated/wb-arvados-collection.js b/frontend/src/js/deprecated/wb-arvados-collection.js
index 430376c..e54b291 100644
--- a/frontend/src/js/deprecated/wb-arvados-collection.js
+++ b/frontend/src/js/deprecated/wb-arvados-collection.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 
 class WBArvadosCollection {
diff --git a/frontend/src/js/deprecated/wb-browse-dialog.js b/frontend/src/js/deprecated/wb-browse-dialog.js
index 7e97ce6..4009914 100644
--- a/frontend/src/js/deprecated/wb-browse-dialog.js
+++ b/frontend/src/js/deprecated/wb-browse-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBBrowseDialog extends Component {
diff --git a/frontend/src/js/deprecated/wb-collection-manifest.js b/frontend/src/js/deprecated/wb-collection-manifest.js
index 6734995..17f892e 100644
--- a/frontend/src/js/deprecated/wb-collection-manifest.js
+++ b/frontend/src/js/deprecated/wb-collection-manifest.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 //
 // Directory: Hash[string, [Directory, File]]
 // File = [blockRefs, size]
diff --git a/frontend/src/js/deprecated/wb-download-file.js b/frontend/src/js/deprecated/wb-download-file.js
index c64cfca..37b0586 100644
--- a/frontend/src/js/deprecated/wb-download-file.js
+++ b/frontend/src/js/deprecated/wb-download-file.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import makeArvadosRequest from 'make-arvados-request';
 
 function rdvHash(serviceId, locator) {
diff --git a/frontend/src/js/deprecated/wb-manifest-reader.js b/frontend/src/js/deprecated/wb-manifest-reader.js
index cc7fbd7..c407002 100644
--- a/frontend/src/js/deprecated/wb-manifest-reader.js
+++ b/frontend/src/js/deprecated/wb-manifest-reader.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function mkdir(parent, name) {
   if (name in parent && (parent[name] instanceof Array))
     throw Error('File with the same name already exists');
diff --git a/frontend/src/js/deprecated/wb-project-crumbs.js b/frontend/src/js/deprecated/wb-project-crumbs.js
index d1c4652..8ae625d 100644
--- a/frontend/src/js/deprecated/wb-project-crumbs.js
+++ b/frontend/src/js/deprecated/wb-project-crumbs.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBBreadcrumbs from 'wb-breadcrumbs';
 import fetchProjectParents from 'fetch-project-parents';
diff --git a/frontend/src/js/deprecated/wb-rootdir-wrapper.js b/frontend/src/js/deprecated/wb-rootdir-wrapper.js
index 6fc5fcd..c527710 100644
--- a/frontend/src/js/deprecated/wb-rootdir-wrapper.js
+++ b/frontend/src/js/deprecated/wb-rootdir-wrapper.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 class WBRootDirWrapper {
   constructor(rootDir, streams) {
     this.rootDir = rootDir;
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
index b7131d5..a8470bf 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-content.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBManifestWorkerWrapper from 'wb-manifest-worker-wrapper';
 import makeArvadosRequest from 'make-arvados-request';
diff --git a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
index 0536cb1..190d4ff 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-collection-list.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
index 641db66..c6b3f74 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import WBPagination from 'wb-pagination';
diff --git a/frontend/src/js/dialog/wb-browse-dialog-user-list.js b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
index ab128c9..9ab6d56 100644
--- a/frontend/src/js/dialog/wb-browse-dialog-user-list.js
+++ b/frontend/src/js/dialog/wb-browse-dialog-user-list.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js
index 566bd5d..f804fa5 100644
--- a/frontend/src/js/dialog/wb-browse-dialog.js
+++ b/frontend/src/js/dialog/wb-browse-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
 import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
diff --git a/frontend/src/js/dialog/wb-delete-dialog.js b/frontend/src/js/dialog/wb-delete-dialog.js
index 838c201..518f7b7 100644
--- a/frontend/src/js/dialog/wb-delete-dialog.js
+++ b/frontend/src/js/dialog/wb-delete-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBDialog from 'wb-dialog';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/dialog/wb-edit-description-dialog.js b/frontend/src/js/dialog/wb-edit-description-dialog.js
index b2f920c..9c047fd 100644
--- a/frontend/src/js/dialog/wb-edit-description-dialog.js
+++ b/frontend/src/js/dialog/wb-edit-description-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBDialog from 'wb-dialog';
 import linkState from 'linkstate';
diff --git a/frontend/src/js/dialog/wb-new-project-dialog.js b/frontend/src/js/dialog/wb-new-project-dialog.js
index c1ffa3a..c4dafa6 100644
--- a/frontend/src/js/dialog/wb-new-project-dialog.js
+++ b/frontend/src/js/dialog/wb-new-project-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBDialog from 'wb-dialog';
 import linkState from 'linkstate';
diff --git a/frontend/src/js/dialog/wb-pick-object-dialog.js b/frontend/src/js/dialog/wb-pick-object-dialog.js
index 07d3b5c..1222a96 100644
--- a/frontend/src/js/dialog/wb-pick-object-dialog.js
+++ b/frontend/src/js/dialog/wb-pick-object-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBDialog from 'wb-dialog';
 import WBTable from 'wb-table';
diff --git a/frontend/src/js/dialog/wb-rename-dialog.js b/frontend/src/js/dialog/wb-rename-dialog.js
index af31897..8a3ef4f 100644
--- a/frontend/src/js/dialog/wb-rename-dialog.js
+++ b/frontend/src/js/dialog/wb-rename-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBDialog from 'wb-dialog';
 import linkState from 'linkstate';
diff --git a/frontend/src/js/dialog/wb-toolbox-dialog.js b/frontend/src/js/dialog/wb-toolbox-dialog.js
index d5f4527..896c799 100644
--- a/frontend/src/js/dialog/wb-toolbox-dialog.js
+++ b/frontend/src/js/dialog/wb-toolbox-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBTable from 'wb-table';
 import WBNameAndUuid from 'wb-name-and-uuid';
diff --git a/frontend/src/js/index.js b/frontend/src/js/index.js
index a030442..e6565bc 100755
--- a/frontend/src/js/index.js
+++ b/frontend/src/js/index.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, render } from 'preact';
 import WBApp from 'wb-app';
 
diff --git a/frontend/src/js/misc/wb-apply-promise-ordering.js b/frontend/src/js/misc/wb-apply-promise-ordering.js
index 855ebb9..97c6cfc 100644
--- a/frontend/src/js/misc/wb-apply-promise-ordering.js
+++ b/frontend/src/js/misc/wb-apply-promise-ordering.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 const defaultOrderRegistry = {};
 
 /* function notify(orderRegistry) {
diff --git a/frontend/src/js/misc/wb-disable-controls.js b/frontend/src/js/misc/wb-disable-controls.js
index 251d260..95d525b 100644
--- a/frontend/src/js/misc/wb-disable-controls.js
+++ b/frontend/src/js/misc/wb-disable-controls.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 function wbDisableControls() {
   $('input, select, button').attr('disabled', 'disabled');
   $('a').each(function() { $(this).data('old_href', $(this).attr('href')); });
diff --git a/frontend/src/js/misc/wb-format-date.js b/frontend/src/js/misc/wb-format-date.js
index 467b571..ebf268a 100644
--- a/frontend/src/js/misc/wb-format-date.js
+++ b/frontend/src/js/misc/wb-format-date.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h } from 'preact';
 
 function wbFormatDate(dateStr) {
diff --git a/frontend/src/js/misc/wb-format-special-value.js b/frontend/src/js/misc/wb-format-special-value.js
index ef14033..e7f4386 100644
--- a/frontend/src/js/misc/wb-format-special-value.js
+++ b/frontend/src/js/misc/wb-format-special-value.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h } from 'preact';
 
 function wbFormatSpecialValue(value) {
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 09a275a..c4254ba 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { Router, route } from 'preact-router';
 import WBBrowse from 'wb-browse';
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 6743b38..25a0098 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
diff --git a/frontend/src/js/page/wb-collection-browse.js b/frontend/src/js/page/wb-collection-browse.js
index 0d1f386..b4fd418 100644
--- a/frontend/src/js/page/wb-collection-browse.js
+++ b/frontend/src/js/page/wb-collection-browse.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-collection-view.js b/frontend/src/js/page/wb-collection-view.js
index deedd14..ebd1043 100644
--- a/frontend/src/js/page/wb-collection-view.js
+++ b/frontend/src/js/page/wb-collection-view.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-container-view.js b/frontend/src/js/page/wb-container-view.js
index 3ca5a4b..446e2a7 100644
--- a/frontend/src/js/page/wb-container-view.js
+++ b/frontend/src/js/page/wb-container-view.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-download-page.js b/frontend/src/js/page/wb-download-page.js
index c41c4b6..1dc4907 100644
--- a/frontend/src/js/page/wb-download-page.js
+++ b/frontend/src/js/page/wb-download-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 
diff --git a/frontend/src/js/page/wb-image-viewer-page.js b/frontend/src/js/page/wb-image-viewer-page.js
index d2b2054..cc67217 100644
--- a/frontend/src/js/page/wb-image-viewer-page.js
+++ b/frontend/src/js/page/wb-image-viewer-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 
diff --git a/frontend/src/js/page/wb-landing-page.js b/frontend/src/js/page/wb-landing-page.js
index ac78ef3..f261d24 100644
--- a/frontend/src/js/page/wb-landing-page.js
+++ b/frontend/src/js/page/wb-landing-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
 import { route } from 'preact-router';
diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js
index 9403a3a..492227f 100644
--- a/frontend/src/js/page/wb-launch-workflow-page.js
+++ b/frontend/src/js/page/wb-launch-workflow-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
diff --git a/frontend/src/js/page/wb-process-view.js b/frontend/src/js/page/wb-process-view.js
index f4bc3f3..ea426a5 100644
--- a/frontend/src/js/page/wb-process-view.js
+++ b/frontend/src/js/page/wb-process-view.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-project-view.js b/frontend/src/js/page/wb-project-view.js
index 44695ad..19b0221 100644
--- a/frontend/src/js/page/wb-project-view.js
+++ b/frontend/src/js/page/wb-project-view.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js
index 4a4562d..c05d511 100644
--- a/frontend/src/js/page/wb-sharing-page.js
+++ b/frontend/src/js/page/wb-sharing-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/page/wb-sign-in.js b/frontend/src/js/page/wb-sign-in.js
index 822de80..cd55303 100644
--- a/frontend/src/js/page/wb-sign-in.js
+++ b/frontend/src/js/page/wb-sign-in.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import WBNavbar from 'wb-navbar';
diff --git a/frontend/src/js/page/wb-sign-out.js b/frontend/src/js/page/wb-sign-out.js
index 0ecae35..5b781be 100644
--- a/frontend/src/js/page/wb-sign-out.js
+++ b/frontend/src/js/page/wb-sign-out.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 
diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js
index 360cff4..dce190b 100644
--- a/frontend/src/js/page/wb-users-page.js
+++ b/frontend/src/js/page/wb-users-page.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import { route } from 'preact-router';
 import WBNavbarCommon from 'wb-navbar-common';
diff --git a/frontend/src/js/page/wb-workflow-view.js b/frontend/src/js/page/wb-workflow-view.js
index a3a4aab..5a0f986 100644
--- a/frontend/src/js/page/wb-workflow-view.js
+++ b/frontend/src/js/page/wb-workflow-view.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
diff --git a/frontend/src/js/widget/wb-accordion.js b/frontend/src/js/widget/wb-accordion.js
index 462b263..69659e6 100644
--- a/frontend/src/js/widget/wb-accordion.js
+++ b/frontend/src/js/widget/wb-accordion.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBAccordion extends Component {
diff --git a/frontend/src/js/widget/wb-breadcrumbs.js b/frontend/src/js/widget/wb-breadcrumbs.js
index d2887ac..ce1037e 100644
--- a/frontend/src/js/widget/wb-breadcrumbs.js
+++ b/frontend/src/js/widget/wb-breadcrumbs.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBBreadcrumbs extends Component {
diff --git a/frontend/src/js/widget/wb-checkboxes.js b/frontend/src/js/widget/wb-checkboxes.js
index 48792ab..36db0ab 100644
--- a/frontend/src/js/widget/wb-checkboxes.js
+++ b/frontend/src/js/widget/wb-checkboxes.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBCheckboxes extends Component {
diff --git a/frontend/src/js/widget/wb-dialog.js b/frontend/src/js/widget/wb-dialog.js
index 257b7a4..71abeae 100644
--- a/frontend/src/js/widget/wb-dialog.js
+++ b/frontend/src/js/widget/wb-dialog.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, createRef } from 'preact';
 
 class WBDialog extends Component {
diff --git a/frontend/src/js/widget/wb-navbar.js b/frontend/src/js/widget/wb-navbar.js
index cbdef5c..ccea039 100644
--- a/frontend/src/js/widget/wb-navbar.js
+++ b/frontend/src/js/widget/wb-navbar.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBNavbar extends Component {
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
index 9c0d901..68692a4 100644
--- a/frontend/src/js/widget/wb-pagination.js
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBPagination extends Component {
diff --git a/frontend/src/js/widget/wb-select.js b/frontend/src/js/widget/wb-select.js
index 2ce89b1..9ba0c33 100644
--- a/frontend/src/js/widget/wb-select.js
+++ b/frontend/src/js/widget/wb-select.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBSelect extends Component {
diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js
index f590278..bb64ed3 100644
--- a/frontend/src/js/widget/wb-table.js
+++ b/frontend/src/js/widget/wb-table.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component } from 'preact';
 
 class WBTable extends Component {
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 0ae016d..ea9a5dd 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 import { h, Component, VNode } from 'preact';
 
 class WBTabs extends Component {
diff --git a/frontend/src/js/worker/wb-manifest-worker.js b/frontend/src/js/worker/wb-manifest-worker.js
index d9138ce..cd99733 100644
--- a/frontend/src/js/worker/wb-manifest-worker.js
+++ b/frontend/src/js/worker/wb-manifest-worker.js
@@ -1,3 +1,10 @@
+//
+// Copyright (C) Stanislaw Adaszewski, 2020
+// Contact: s.adaszewski@gmail.com
+// Website: https://adared.ch/wba
+// License: GPLv3
+//
+
 const rx = /^[a-f0-9]{32}\+[0-9]+/;
 const rootDir = {};
 const streams = [];

From df6f40b92d1faf4aabc7095061f8090718f4bac9 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 29 May 2020 18:52:41 +0200
Subject: [PATCH 170/170] Email fix.

---
 frontend/rollup.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index e630229..e23c411 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -60,7 +60,7 @@ export default {
     buble({jsx: 'h', objectAssign: 'Object.assign'}),
     resolve({}),
     license({
-      banner: 'Copyright (C) Stanislaw Adaszewski, 2020.\nContact: stanislaw.adaszewski@gmail.com\nAll Rights Reserved.',
+      banner: 'Copyright (C) Stanislaw Adaszewski, 2020.\nContact: s.adaszewski@gmail.com\nAll Rights Reserved.',
     }),
     // uglify()
   ]