The node circles enclose title elements, and, if hovered, will display the node name and the nested set left and right.

The problem is that everytime the graph is regenerated the viewBox is set to the bounding box of the image, so, theoretically, everything should be in frame. It causes the graph to wiggle some; enough that you can't hover to see the title.

I added the ability to pause updates while the mouse button is down, but the titles won't appear until the button is released.

So this request is to enable navigation with a combination of the alternate, control, and shift keys combined with the mouse wheel.

• Wheel: Directionally the same as this window. Up/Down the page.
• Wheel + Shift: Directionally the same Inkscape. Left/Right the page.
• Wheel + Control: Perspectively the same as Inkscape. Zoom in/out.
• Wheel + Alt + (Control ∨ Shift): The speed of change is reduced by 90%.

Bug Description

When the button is clicked on https://dysbulic.github.io/xml-to-ipld/#/ceramic the application crashes with the following error:

Uncaught (in promise) Error: Failed to resolve did:3:kjzl6cwe1jw14936apxr6lxhewn3srcpxjwjtu777mkfio7718ue8alc7pfr717?version-id=0#pn1iiYhhzD3kUev: invalidDid, TypeError: Cannot call a class as a function
    at A.<anonymous> (index.ts:303)
    at c (runtime.js:63)

The value of DID before the error is:

This issue does not occur in development. In development, the value of DID at the same location is:

The code being run is:

  const connect = async () => {
    ⋮
    const ceramic = (
      new Ceramic('https://ceramic-clay.3boxlabs.com')
    )
    await ceramic.setDIDProvider(didProvider)
    setCeramic(ceramic)
  }

Then in @ceramicnetwork/http-client:

  async setDIDProvider(provider: DIDProvider): Promise<void> {
    this.context.provider = provider;
    this.context.did = new DID({ provider, resolver: this.context.resolver })
    if (!this.context.did.authenticated) {
      await this.context.did.authenticate()
    }
  }

It dies calling new DID().

To Reproduce

1. Go to https://dysbulic.github.io/xml-to-ipld/#/ceramic.
2. Click on the "Connect Your Wallet" button.
3. View the error in the console.
4. git clone https://github.com/dysbulic/xml-to-ipld.git
5. cd xml-to-ipld && yarn && yarn start
6. No error and the program completes satisfactorily.

Expected Behavior

I would like the behavior in production to be the same as development.

Ceramic Versions

• @ceramicnetwork/3id-did-resolver@^1.1.1
• @ceramicnetwork/common@^0.17.0
• @ceramicnetwork/docid@^0.5.1
• @ceramicnetwork/doctype-caip10-link@^0.13.4
• @ceramicnetwork/doctype-tile@^0.14.1
• @ceramicnetwork/http-client@^0.10.1
• @ceramicstudio/idx@^0.7.0
• @ceramicstudio/[email protected]

Machine, OS, Browser Information

• Linux fenrir 5.8.0-48-generic #54~20.04.1-Ubuntu SMP Sat Mar 20 13:40:25 UTC 2021 x86_64 GNU/Linux
• Browsers:
  • Chrome 89.0: Works in development, not in production.
  • Firefox 87.0: Works in development, not in production.
  • Opera: Crashes b/c accounts[0] is not defined.
  • Brave: Crashes b/c window.ethereum is not defined.

Additional Information

It looks to me like the minimizer made a mistake, but that just seems so unlikely.