Graph not rendering with layout

[matt-gribben-sv]

Describe the bug

When running a basic graph with the below setup

const data = Utils.mock(11).circle().graphin();
const layout = {
  type: "concentric",
  nodeSize: 250
};

The graph renders badly and doesn't utilise the specified layout, however the same code renders correctly in CodewSandbox

This is the same code but one running locally and one running in CodeSandbox

Your Example Website or App

https://codesandbox.io/s/graphin-example-mg1-ovrzj1

Steps to Reproduce the Bug or Issue

1. Download my example from CodeSandbox
2. Run npm install
3. Run npm run start
4. Graphin example starts and displays graph badly rendered

Expected behavior

As a user I would expect the rendering to be correct

Screenshots or Videos

vs

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[Johnbin89]

Hello, I am a new user of Graphin and trying it out for a project. I have the exact same problem as OP. My graph looks the same as in the screenshot of above post as layout is not getting recognized. I have tried another layout too with same result. Any insights into this?

Code for Graph is exactly the same as in the demo source code for custom interactive components at: https://graphin.antv.vision/en-US/graphin/register/behaviors/

My setup for React is the following using webpack:

package.json:

{
  "description": "Action-Tasks Diagrams",
  "main": "graph.js",
  "dependencies": {
    "@antv/graphin": "2.6.7",
    "@antv/graphin-components": "~2.4.0",
    "@antv/graphin-icons": "~1.0.0",
    "@antv/g6": "~4.6.12",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "~7.17.12",
    "babel-loader": "^8.2.2",
    "style-loader": "~3.3.1",
    "css-loader": "~6.7.1",
    "webpack": "^5.21.2",
    "webpack-dev-server": "~4.9.2",
    "webpack-cli": "^4.5.0",
    "html-webpack-plugin": "~5.5.0"
  },
  "devDependencies": {
    "typescript": "~4.7.4",
    "@types/react": "~17.0.2"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --hot",
    "build": "webpack --mode production"
  }
}

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");

module.exports = {
    entry: './graph.js',
    output: {
        path:  path.resolve("buildGraphin"),
        filename: 'index.js'
    },
    resolve: {
        extensions: ['*','.tsx', '.js', '.css']
    },
    devServer: {
        port: 8001,
        open: false
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.(js|tsx)$/,
                loader: 'babel-loader',
                options: { presets: ['@babel/env','@babel/preset-react', '@babel/preset-typescript'] },
                exclude: /node_modules/
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: '../../graph.html'
        })
    ]
}

Platform

• OS: Linux
• Browser: [Chrome, Firefox]

[pomelo-nwu]

@Johnbin89 @matt-gribben-sv It seems to be a problem caused by the upgrade of the G6 minor version. I reproduced the problem locally([email protected]) and solved it by locking the G6 version 4.6.4. We will solve this problem later.

[Johnbin89]

@pomelo-nwu Thank you! I confirm that with G6 version 4.6.4 the layout works correctly.

[Johnbin89]

@pomelo-nwu Ι confirm that this is now fixed with latest updates. I run it in my project with G6: 4.7.7 and Graphin: 2.7.12 and layout works fine