dunnock / react-sigma

Lightweight React library for drawing network graphs built on top of SigmaJS
https://dunnock.github.io/react-sigma/
MIT License
260 stars 43 forks source link

TypeScript: React-Sigma not rendering #86

Open samuellye98 opened 4 years ago

samuellye98 commented 4 years ago

I installed react-sigma using npm i --save react-sigma

But when importing react sigma using import { Sigma, RelativeSize, RandomizeNodePositions } from 'react-sigma', I received the following error on VSCode. The graph also does not render on my react-app. I'm using js so I don't know what's wrong with it.

Could not find a declaration file for module 'react-sigma'. '/frontend/node_modules/react-sigma/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-sigma if it exists or add a new declaration (.d.ts) file containing declare module 'react-sigma';ts(7016)

Here is my package.json: { "name": "frontend", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/sigmajs": "^1.0.27", "aphrodite": "^2.4.0", "bootstrap": "^4.5.0", "react": "^16.13.1", "react-bootstrap": "^1.0.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-sigma": "^1.2.34", "sigma": "^2.0.0-alpha32" }, "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" ] }, "devDependencies": { "@babel/preset-react": "^7.9.4", "react-hot-loader": "^4.12.21", "webpack-cli": "^3.3.11" } }

dunnock commented 4 years ago

So that's type script, I don't have type script types implementation yet. There is suggestion on stackoverflow to set skipLibcheck to true in tsconfig.js: https://stackoverflow.com/questions/40262513/how-to-disable-suppress-errors-from-libraries-in-typescript

samuellye98 commented 4 years ago

So that's type script, I don't have type script types implementation yet. There is suggestion on stackoverflow to set skipLibcheck to true in tsconfig.js: https://stackoverflow.com/questions/40262513/how-to-disable-suppress-errors-from-libraries-in-typescript

The thing is I'm using normal js and jsx files so it isn't typescript? Is there anyway to make the module recognize that it isn't typescript? Thanks again!

dunnock commented 4 years ago

It might be your local setup, but pretty sure comes from your environment as the error you copied comes from typescript:

Could not find a declaration file for module 'react-sigma'. '/frontend/node_modules/react-sigma/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-sigma if it exists or add a new declaration (.d.ts) file containing declare module 'react-sigma';ts(7016)

jamjar919 commented 3 years ago

If you want to quickly make this go away, just add a type file called react-sigma.d.ts with declare module "react-sigma" somewhere in your project. It doesn't have to be complete to stop the errors and you can update as needed. Here's mine:

declare module "react-sigma";

type SigmaGraph = {
    nodes: SigmaNode[],
    edges: SigmaEdge[]
}

type SigmaNode = {
    id: string;
    label: string;
    x?: number,
    y?: number,
    size?: number,
    color?: string
}

type SigmaEdge = {
    id: string;
    source: string;
    target: string;
    label?: string,
    color?: string;
}
brianjychan commented 2 years ago

@jamjar919 are you able to get the graph to render at all? I'm currently using your suggestion and the below but not seeing anything:

 <Sigma
        renderer="canvas"
        graph={graph}
        style={{ width: "800px", height: "400px" }}
        settings={{ defaultLabelSize: 15, drawEdges: true, clone: false }}
      >
        <RelativeSize initialSize={15} />
        <RandomizeNodePositions />
        <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000} />
        <EdgeShapes default="tapered" />
        <NodeShapes default="star" />
      </Sigma>
jamjar919 commented 2 years ago

@brianjychan I used my solution above in regards to the typing. Are you getting the same error? This was my final type file https://github.com/jamjar919/spotify-network-explore/blob/main/src/client/types/react-sigma.d.ts