Chart div is nested with toolbar bar

[RackweLLizm]

First of all, thank you very much for sharing the GraphInsight solution with us and for your efforts. It is a really successful and very useful library. I am installing the package from GraphInsight SDK export options (提供 NPM 包，支持 Tree Shaking，原生集成到 React 项目中). When I press the (ant-tabs-extra-content) menu button, the toolbar shrinks, but it is nested with the (chart-container) div. It does not provide a responsive appearance. Thanks in advance for your interest and concern.

[pomelo-nwu]

I'm so happy to see that you like this product. I just tried "Export HTML" and found that the style is correct, "Export NPM", it may be a problem of missing CSS. This depends on how your local code is built. Some build tools will automatically load the CSS files in the package, while others need to manually add CSS files, such as import '@antv/gi-assets-basic/dist/index.css'

[RackweLLizm]

First of all, thanks for your quick reply. When I export the SDK as HTML file there is really no problem and everything works as it should and is very smooth. I'm facing some issues when I export it as an NPM package.

We are working on an existing react project and I am already using graphin and G6 as npm package in my project, so I think it will be a bit of a problem to import GraphInsight into the existing project via cdnjs.

https://codesandbox.io/s/zxq9dh?file=/src/index.tsx:553-554

NPM packages and imports I am pulling the same example from the address above, maybe I missed it here, but there is no CSS file, any help on this would be very helpful.

Thank you from now

[pomelo-nwu]

@RackweLLizm Due to the network problem, it was difficult for me to load your demo on codesandbox, but I copied it locally and started it with umi. Everything was fine

[RackweLLizm]

@pomelo-nwu I rebuilt the project as a clean install. Package.json as below, all packages are same as SDK's npm packages and the entity properties problem on the right still persists. I think it might be because I'm starting the project with react-scripts start as you mentioned. I couldn't get the project up and running over UmiJS because I don't know how to use it and I didn't design my current project according to umi :(

Package.Json { "name": "gideneme", "version": "0.1.0", "private": true, "dependencies": { "@antv/g6": "4.7.10", "@antv/gi-assets-advance": "1.1.1", "@antv/gi-assets-algorithm": "1.0.0", "@antv/gi-assets-basic": "1.2.1", "@antv/gi-assets-graphscope": "1.0.2", "@antv/gi-assets-neo4j": "1.1.2", "@antv/gi-assets-scene": "1.0.0", "@antv/gi-assets-tugraph": "1.1.0", "@antv/gi-sdk": "1.1.2", "@antv/gi-theme-antd": "0.3.0", "@antv/graphin": "2.7.13", "@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.18.11", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", "antd": "4.24.3", "localforage": "1.10.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" }, "devDependencies": { "typescript": "^3" }, "resolutions": { "@antv/gi-sdk": "latest" }, "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" ] } }

[RackweLLizm]

Hi @pomelo-nwu days later I figured out what caused the problem. I think that when creating a react application with CRA, it does not run ".less" files directly with react-scripts.

\node_modules\@antv\gi-assets-basic\lib\components\UIComponents\DivContainer/index.less When I converted the file to a css file with less to css and added it to index.css in the main directory, the problem disappeared.

So, in summary, it is necessary to change the .less files to .css files.

[RackweLLizm]

For those who have the same problem as me, if the src/index.css file is updated as follows, all the problems seen in the photo above will disappear.

.gi-panel-div {
     color: var(--text-color);
     background: var(--background-color);
     overflow: auto;
}
 .gi-panel-div.open.left {
     display: block;
     width: 300px;
     transition: all 0.3s;
}
 .gi-panel-div.open.right {
     display: block;
     width: 300px;
     transition: all 0.3s;
}
 .gi-panel-div.close.left {
     width: 0px !important;
     transition: all 0.3s;
}
 .gi-panel-div.close.right {
     width: 0px !important;
     transition: all 0.3s;
}
 .gi-panel-div .header {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 24px;
     border-bottom: 1px solid var(--border-color-base);
     border-radius: 2px 2px 0 0;
}
 .gi-panel-div .close {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 10;
     display: block;
     padding: 10px;
     font-weight: 700;
     font-size: 16px;
     font-style: normal;
     line-height: 1;
     text-align: center;
     text-transform: none;
     text-decoration: none;
     background: transparent;
     border: 0;
     outline: 0;
     cursor: pointer;
     transition: color 0.3s;
     text-rendering: auto;
}
 .gi-panel-div .title {
     margin: 0;
     font-weight: 500;
     font-size: 16px;
     line-height: 22px;
}
 .gi-panel-div .body {
     flex-grow: 1;
     padding: 12px;
     overflow: auto;
     font-size: 14px;
     line-height: 1.5715;
     word-wrap: break-word;
}
 .gi-grail-layout {
     position: absolute;
     z-index: 100;
     display: flex;
     box-sizing: border-box;
     border: var(--border-color);
     background: var(--background-color);
     color: var(--text-color);
}
 .gi-grail-layout-left {
     background: var(--background-color);
     border-right: 1px solid var(--border-color);
     color: var(--text-color);
     top: 0;
     left: 0;
     flex-direction: column;
     height: 100%;
     overflow-x: visible;
     transition: all 0.2s ease;
}
 .gi-grail-layout-right {
     background: var(--background-color);
     border-left: 1px solid var(--border-color);
     color: var(--text-color);
     top: 0;
     right: 0;
     flex-direction: column;
     height: 100%;
     overflow-x: visible;
     transition: all 0.2s ease;
}
 .gi-grail-layout-bottom {
     background: var(--background-color);
     border-top: 1px solid var(--border-color);
     color: var(--text-color);
     bottom: 0;
     flex-direction: row;
     overflow-y: visible;
     border-right: none;
     border-left: none;
     transition: all 0.2s ease;
}
 .gi-grail-layout-top {
     background: var(--background-color);
     border-bottom: 1px solid var(--border-color);
     color: var(--text-color);
     top: 0;
     flex-direction: row;
     overflow-y: visible;
     border-right: none;
     border-left: none;
     transition: all 0.2s ease;
}
 .gi-grail-layout-component-container {
     width: 100%;
     margin-top: 10px;
     overflow: auto;
     box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.1);
}
 .gi-grail-layout-component-container header {
     box-sizing: border-box;
     height: 35px;
     padding: 4px 12px;
     font-weight: bold;
     font-size: 16px;
     border-left: 3px solid var(--primary-color);
}
 .gi-grail-layout-component-container .gi-grail-layout-component-body {
     width: 100%;
     height: calc(65%);
}

final version of my project

[pomelo-nwu]

@RackweLLizm you might need this: https://github.com/facebook/create-react-app/issues/3457

[RackweLLizm]

@RackweLLizm you might need this: facebook/create-react-app#3457

Yes, I did a lot of research, but unfortunately there is no easy way, I will handle it this way for now, thank you.