import-wizard - new UI

[chrtannus]

General information

Associated issues: #78

Checklist

Author:

• [X] One or more reviewers have been assigned.
• [x] Automated tests have been included in this pull request, if possible, for the new feature(s) or bug fix.
• [X] The associated GitHub issues are included (above).
• [X] Notes have been included (below).

Reviewers:

• [x] All automated checks are passing (green check next to latest commit).
• [x] At least one reviewer has signed off on the pull request. Reviewers have two business days to review the pull request, after which the author may merge in the pull request unilaterally.

Notes

• Changes the first wizard page (the list of wizards are now coloured buttons with SVG logos).
• The Cy3 Import wizard now has only one step.
• Adds the Excel Import wizard.

• It's already using the new UI (dark theme), but there is one issue:

  • In Excel Import, after you drop an "edge table" file, the dialog colours revert to the standard 'white' theme. It seems that this is caused when a cy.js Popper (edge or node data table) is created by doing this (see excel-import-wizard.js):

    div.innerHTML = ReactDOMServer.renderToStaticMarkup(/*...*/)

    See image below:

    

[maxkfranz]

I'm ticking the testing box, since the CX conversion tests should cover import (esp. once we use CX for Cy3 importing as well).

[maxkfranz]

Overall, looks great. Just have to sort out some issues.

For the tooltips, it's probably best to avoid using innerHTML. innerHTML isn't used much anymore for several reasons.

Take a look at how we use Cytoscape Tippy tooltips in Biofactoid: https://github.com/PathwayCommons/factoid/blob/unstable/src/client/components/editor/cy/tippy.js

They're working well there. Basically, the approach is:

const div = document.createElement('div');

const component = <SomeComponent>Some stuff in here</SomeComponent>;

ReactDom.render( component, div );

If that doesn't help, then I suspect that MUI is incompatible with outside components. That's the downside of using a UI framework like that. One workaround may be to create a setup with the Tippy that is like an entirely new app from the perspective of MUI. I suspect that it expects the grid to be owned by a root-level like the network editor is:

<ThemeProvider theme={theme}>
  <CssBaseline />
  <div className="network-editor">
    <Header controller={controller} />
    <div className="network-editor-content">
      <div className="cy">
        <div id="cy" />
        <NetworkBackground controller={controller} />
      </div>
      <ToolPanel controller={controller} />
    </div>
  </div>
</ThemeProvider>

The tippies should be appended to the document.body: https://atomiks.github.io/tippyjs/v6/all-props/#appendto

There seems to be an issue if the MUI dialog is scrollable:

[maxkfranz]

@chrtannus, do you want to merge in your PR before #97? If there are any merge conflicts between the PRs, I can sort them out.

The package lock file conflict can be resolved by deleting the file and then running npm i. That may result in slightly newer patch versions on some dependencies, but that's generally fine.

[chrtannus]

@maxkfranz I merged develop into my branch first and sorted out the conflicts. Also fixed a couple of other issues and refactored it a little bit. I think it's good to merge now.

[maxkfranz]

Great! Let's merge it in