domparfitt / graphviz-react Goto Github PK

View Code? Open in Web Editor NEW

98.0 98.0 19.0 12.09 MB

React component for displaying Graphviz graphs

License: MIT License

TypeScript 100.00%

graphviz react

graphviz-react's People

Contributors

Stargazers

Watchers

Forkers

saulshanabrook shashankraider alllex philippeters osequi karlhorky japgolly cyberixae cyberxcorp sdjalft anhmike renqiang1998 nickjoshi777 18chiatt ishan-aws kriffe stillmatic revoluzionecosystem sequencemedia

graphviz-react's Issues

Invalid asm.js: Function definition doesn't match use

an worning on console:

and viz.js?ab64:33 :

how do you background color of graph?

is it possible through css?

useWorker warning

I'm using graphviz-react as follows, but I still get a console warning "No script tag of type "javascript/worker" was found and "useWorker" is true. Not using web worker."

What is the correct way to fix or suppress this warning?

import { Graphviz } from "graphviz-react";
 //  ...
    <Graphviz
      className="Graph"
      options={{
        width: "100%",
        zoom: true,
        useWorker: false,
      }}
      dot={dot}
    />

graphviz-react 1.2.3 not resolved correctly with create-react-app

I am unable to set up a create-react-app project using graphviz-react 1.2.3.

Steps to reproduce:

npx create-react-app graphviz-test --template typescript
cd graphviz-test
npm install graphviz-react
Amend the default App.tsx file as follows

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Graphviz } from "graphviz-react";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                <Graphviz dot={`graph {
                  grandparent -- "parent A";
                  child;
                  "parent B" -- child;
                  grandparent --  "parent B";
                }`}/>
            </header>
        </div>
    );
}

export default App;

Output of npm run build:

npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'graphviz-react' in 'path-to-project/graphviz-test/src'

This gives a package.json of:

{
  "name": "graphviz-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.64",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "graphviz-react": "^1.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Is the issue caused by using React 18? I wonder if it might work if I was using an older version of create-react-app. I'm currently using create-react-app version 5.0.1.

can't disable zoom after it has been enabled

I am trying to create a button to enable/disable zoom because if you're trying to scroll down the page, the zoom will sometimes get triggered instead depending on where your mouse is.

Here's a component which reproduces this.

function GraphWithLockButton() {
    const [locked, setLocked] = useState(true);
    return (
        <div id={'graph-container'} style={{position: 'relative'}}>
            <button onClick={e => setLocked(!locked)}
                    style={{position: 'absolute', left: 5, top: 5}}>
                {locked ? 'locked' : 'unlocked'}
            </button>
            <Graphviz options={{zoom: !locked, width: 300, height: 300}} dot={`digraph {a -> b}`}/>
        </div>
    )
}

If the initial state of locked is true,

Zoom starts off disabled (as expected).
When you click the button, zoom becomes enabled (as expected)
When you click the button a second time, state flips to locked, but zoom is still enabled

If the initial state of locked is false,

Zoom starts off enabled (as expected).
When you click the button, state flips to locked, but zoom is still enabled

Tested on both 1.0.6 and 1.1.1

Thanks! - I ported this to Angular

Really was helpful!

Here's the code:
offscale/glaucoma-risk-calculator-analytics-web-frontend@88569b2#diff-8

If you—or anyone—cares I can put it into its own repository and upload it to npmjs.

PS: Also on the license side how do you want me to attribute this to you? - Docstring at top of file?

d3-color severe vulnerability

The d3-color dependency is out of date. What should I do about this?

HTML-like Labels support?

Does this allow nodes to be defined with HTML-like labels? I dont seem to get it to work in the demo. For example:

graph { 
a [label=<<b>Test</b>>]
}

it throws Parse Error: Cannot read property '3' of null.

The current release package seems to be broken. I did manage to use the package with TypeScript since it somehow miraculously transforms the code. However, I couldn't get my tests to work with ts-jest which made me research the issue.

In its current form Node.js crashes when you try to import the module.

$ node
Welcome to Node.js v16.13.0.
Type ".help" for more information.
> await import('graphviz-react')
(node:13519) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/XXXXX/node_modules/graphviz-react/lib/Graphviz.js:1
import * as React from 'react';
^^^^^^

The Node.js crash can be fixed by adding "type": "module", to package.json. That will make basic importing work.

$ node
Welcome to Node.js v16.13.0.
Type ".help" for more information.
> await import('graphviz-react')
[Module: null prototype] {
  Graphviz: [class Graphviz extends Component] {
    count: 0,
    defaultOptions: { fit: true, height: 500, width: 500, zoom: false }
  },
  default: [class Graphviz extends Component] {
    count: 0,
    defaultOptions: { fit: true, height: 500, width: 500, zoom: false }
  }
}

However, fixing the package.json file did not fix my tests, so I continued my research.
Even after the fix, importing the package in ts-node still fails for some reason.

$ ts-node
> await import('graphviz-react')
Uncaught:
Error [ERR_REQUIRE_ESM]: require() of ES Module /XXXXX/node_modules/graphviz-react/lib/Graphviz.js not supported.
Instead change the require of Graphviz.js in null to a dynamic import() which is available in all CommonJS modules.
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /XXXXX/<repl>.ts:4:14
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1128:19)
    at new NodeError (node:internal/errors:371:5)
    at __node_internal_captureLargerStackTrace (node:internal/errors:464:5) {
  code: 'ERR_REQUIRE_ESM'
}

Trouble installing

Hi there,

after installing from npm and importing into my react project I'm seeing the following error:

SyntaxError: Cannot use import statement outside a module

Have others reported this?

Graphviz-react not imported correctly with create-react-app default jest configuration

I am unable to run jest tests in a create-react-app project using graphviz-react 1.2.5.

Steps to reproduce:

npx create-react-app graphviz-test --template typescript
cd graphviz-test
npm install graphviz-react
Amend the default App.tsx file as follows

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Graphviz } from "graphviz-react";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                <Graphviz dot={`graph {
                  grandparent -- "parent A";
                  child;
                  "parent B" -- child;
                  grandparent --  "parent B";
                }`}/>
            </header>
        </div>
    );
}

export default App;

Output of npm run test:

> [email protected] test
> react-scripts test
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    path-to-project/graphviz-test/node_modules/graphviz-react/lib/Graphviz.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as React from 'react';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import logo from './logo.svg';
      3 | import './App.css';
    > 4 | import { Graphviz } from "graphviz-react";
        | ^
      5 |
      6 | function App() {
      7 |   return (

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/App.tsx:4:1)
      at Object.<anonymous> (src/App.test.tsx:3:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Possibly I could change something in the configuration but I wasn't able to work it out.

Note: The project does run correctly now when running npm run start so the issue is definitely with the jest config particularly. Thanks!

Fill and resize with parent container

This component is very useful. One question is that if I want to resize the canvas (Graphviz component) with its parent container rather than setting a fixed width and height., do you have any idea how to archive this ?

BTW, it might worth to mention that one needs to add --max_old_space_size=4096 option in their start script to make the component run properly in the documentation because it takes me quit some time to figure this out at very beginning.

onClick event handler with graphviz-react

I've been using this react library for a few weeks so far and I think it's just as great for rendering DOT graphs as the vanilla d3-graphviz library. However, one question I have regarding this library is whether it has the ability to support onClick events. Is it possible to achieve click interactivity with this library alone or do I have to use React's D3 library? If so, do enlighten me on how click interactivity can be achieved. Thanks!

Update D3-Graphviz

D3-Graphviz has been updated to major release 3.
This lib should get there as well

Transitions and Webworker

Are smooth transitions possible with this? Or are these d3-graphviz v3 features?

Furthermore, I am receiving warnings in my react app and not quite sure what they mean or how to fix them. I assume this also causes a noticeable freeze in my application when a graph is being generated.

viz.js:60779 Invalid asm.js: Undefined global variable```

Invalid hook call `useMemo`

the version 1.2.1 has no this problem, however after upgrading to 1.2.2, 1.2.3, or 1.2.4, the problem occurs.

Add Tests

Currently there are no tests for this component. There is a demo which potentially allows for easier testing of changes but nothing automated.

A lot of the actual functionality of the component comes from the underlying d3-graphviz library so there should be no need to test the actual graph drawing capabilities. It should be sufficient, for example, to test that the component is rendering an svg element rather than testing that the details of the svg are correct.

Add Styling to Demo

The demo for this component is functional but lacking in any kind of styling.

It would be nice to add a bit of styling and perhaps tweak the layout to make it a bit more visually appealing.

FATAL ERROR: heap out of memory

New project created with create-react-app --typescript. Working ok.

When I add some <Graphiz ...> component from examples like this:
App.tsx:

import React from 'react';
import './App.css';
import { Graphviz } from 'graphviz-react';

const App: React.FC = () => {
  return (
    <div className="App">
      <Graphviz dot={`graph {
        grandparent -- "parent A";
        child;
        "parent B" -- child;
        grandparent --  "parent B";
      }`} />
    </div>
  );
}

export default App;

It compiles ok but gives error on start:

$ yarn start
yarn run v1.17.3
Starting the development server...


<--- Last few GCs --->

[83254:0x102654000]    24456 ms: Mark-sweep 1319.0 (1443.7) -> 1307.6 (1445.2) MB, 1568.6 / 0.0 ms  (average mu = 0.134, current mu = 0.032) allocation failure scavenge might not succeed
[83254:0x102654000]    26318 ms: Mark-sweep 1320.5 (1445.7) -> 1308.8 (1448.2) MB, 1727.9 / 0.0 ms  (average mu = 0.102, current mu = 0.072) allocation failure scavenge might not succeed


<--- JS stacktrace --->

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x26d6e2adbe3d]
    1: StubFrame [pc: 0x26d6e2add3c6]
Security context: 0x0769b919e6e9 <JSObject>
    2: endsWith [0x7696e326121] [/Users/uruk/job/genealogy-fe/node_modules/react-scripts/node_modules/@babel/generator/lib/buffer.js:~143] [pc=0x26d6e31866f9](this=0x07690af094c9 <Buffer map = 0x76916208d99>,suffix=0x076935af7891 <String[2]\: {\n>)
    3: printJoin [0x7690af08709] [/Users/uruk/job/genealogy-fe/node_modul...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003c597 node::Abort() [/usr/local/bin/node]
 2: 0x10003c7a1 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001ad575 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x100579242 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 5: 0x10057bd15 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
 6: 0x100577bbf v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 7: 0x100575d94 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x10058262c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0x1005826af v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x100551ff4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
11: 0x1007da044 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x26d6e2adbe3d 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Env and configs:

OS: MacOS Mojave 10.14.6

node -v
v10.15.3

package.json:

{
  "name": "genealogy-fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.5",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "graphviz-react": "^1.0.4",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "typescript": "3.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}