add finos perspective

[Khalilsqu]

I would like to add the finos perspective into the wave app using the following code.

from h2o_wave import main, app, Q, ui

script = '''
const worker = window.perspective.worker();
    const table = await worker.table({ A: [1, 2, 3] });
    const view = await table.view({ sort: [["A", "desc"]] });

    const viewer = document.createElement("perspective-viewer");
    viewer.load(table);
    document.body.appendChild(viewer);
'''

html = '''
<perspective-viewer></perspective-viewer>
'''


@app('/demo')
async def serve(q: Q):

    q.page['meta'] = ui.meta_card(
        box='',
        scripts=[
            ui.script(
                path='https://unpkg.com/@finos/perspective@latest/dist/umd/perspective.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer@latest/dist/umd/perspective-viewer.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer-datagrid@latest/dist/umd/perspective-viewer-datagrid.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer-d3fc@latest/dist/umd/perspective-viewer-d3fc.js'),
        ],
        script=ui.inline_script(
            content=script,
            targets=['perspective-viewer'],
        ),
    )

    q.page['example'] = ui.markup_card(
        box='1 1 10 8',
        title='Perspective',
        content=html,
    )

    await q.page.save()

I only see an empty table not being populated by the initial table data { A: [1, 2, 3] }. I have almost zero knowledge of JS. I like to add the pivot table method into the wave app which is possible among others through Perspective.

Can someone please help me?

[mturoci]

Hi @Khalilsqu!

First, you need to correctly define your targets in ui.inline_script. It needs an ID of element into which you would like to render your table. perspective-viewer is not an ID, so the script cannot continue. So the fix is using

html = '''
<div id="perspective-viewer-id"></div>
'''

instead of

html = '''
<perspective-viewer></perspective-viewer>
'''

Once done, the next problem is with your JS code. I see that you just copy-pasted it from the perspective docs, but the code makes use of modern top level await feature, which requires a script to be loaded as module. Wave doesn't allow loading scripts as modules yet (tracked in #1697). No worries though, there is a simple workaround - wrapping your code into an async JS function:

script = '''
(async () => {
  const worker = window.perspective.worker();
  const table = await worker.table({ A: [1, 2, 3] });
  const view = await table.view({ sort: [["A", "desc"]] });

  const viewer = document.createElement("perspective-viewer");
  viewer.load(table);
  document.getElementById("perspective-viewer-id").appendChild(viewer);
})();
'''

Also note that

• Instead of appending the newly created perspective-viewer element to document body, I appended it to our prepared container with an ID of perspective-viewer-id.
• I added a default height of 300px for the viewer via viewer.style.height = '300px' as it's 0 by default

Lastly, you need to first render your container element (ui.markup_card) and only after then call the JS. Full code:

from h2o_wave import main, app, Q, ui

script = '''
(async () => {
  const worker = window.perspective.worker();
  const table = await worker.table({ A: [1, 2, 3] });
  const view = await table.view({ sort: [["A", "desc"]] });

  const viewer = document.createElement("perspective-viewer");
  viewer.load(table);
  viewer.style.height = '300px'
  document.getElementById("perspective-viewer-id").appendChild(viewer);
})();
'''

html = '''
<div id="perspective-viewer-id"></div>
'''


@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.markup_card(
        box='1 1 10 8',
        title='Perspective',
        content=html,
    )

    # Render the markup card which serves as a container for perspective prior to loading scripts
    # so that it's already present once scripts arrive.
    await q.page.save()

    q.page['meta'] = ui.meta_card(
        box='',
        scripts=[
            ui.script(
                path='https://unpkg.com/@finos/perspective@latest/dist/umd/perspective.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer@latest/dist/umd/perspective-viewer.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer-datagrid@latest/dist/umd/perspective-viewer-datagrid.js'),
            ui.script(
                path='https://unpkg.com/@finos/perspective-viewer-d3fc@latest/dist/umd/perspective-viewer-d3fc.js'),
        ],
        script=ui.inline_script(
            content=script,
            # Do not start script execution until window.perspective is available.
            requires=['perspective'],
            # Do not start script execution until div with ID 'perspective-viewer-id' is available.
            targets=['perspective-viewer-id'],
        ),
    )

    await q.page.save()

That yields

I have almost zero knowledge of JS

Well, then I recommend avoiding JS and instead wait for #1038. I plan to build it at the beginning of the next calendar year.

[Khalilsqu]

Thank you a ton. This is awesome.