{"id":15787508,"url":"https://github.com/dunnock/sitegraph","last_synced_at":"2025-03-31T17:49:47.046Z","repository":{"id":99985531,"uuid":"74981218","full_name":"dunnock/sitegraph","owner":"dunnock","description":"Display site graphs generated with exploresite package","archived":false,"fork":false,"pushed_at":"2016-12-27T17:12:56.000Z","size":354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T08:59:56.534Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dunnock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-28T14:31:31.000Z","updated_at":"2016-11-28T14:50:19.000Z","dependencies_parsed_at":"2023-05-11T10:45:14.813Z","dependency_job_id":null,"html_url":"https://github.com/dunnock/sitegraph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Fsitegraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Fsitegraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Fsitegraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunnock%2Fsitegraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dunnock","download_url":"https://codeload.github.com/dunnock/sitegraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246513267,"owners_count":20789871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-04T21:20:39.986Z","updated_at":"2025-03-31T17:49:47.023Z","avatar_url":"https://github.com/dunnock.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## Table of Contents\n\n- [Folder Structure](#folder-structure)\n- [Prerequisites](#prerequisites)\n  - [npm install](#npm-install)\n  - [Enable flow type checking](enable-flow-type-checking)\n- [Available Scripts](#available-scripts)\n  - [npm start](#npm-start)\n  - [npm test](#npm-test)\n  - [npm run build](#npm-run-build)\n  - [npm run flow](#npm-run-flow)\n- [Usage](#usage)\n  - [Sigma component]\n  - \n- [create-react-app](#create-react-app-regards)\n\n## Folder Structure\n\n```\nsitegraph/\n  README.md\n  node_modules/\n  package.json\n  public/ -- static content\n  src/    -- sources\n  types/  -- types for @flow checking\n```\n\n## Prerequisites\n\n- node.js 4+\n- npm\n\n### `npm install`\n\nPlease note, distribution includes 'canvas-node' module suitable for running jsdom tests (sigma.js functionality). This package requires some global libraries dependencies to compile, please refer to [canvas installation](https://github.com/Automattic/node-canvas#installation) page for setup instructions.\n\n### Enable flow type checking\n\nApplication is built with flow type checking embedded. But it requires flow-typed installed globally:\n\n```\nnpm install -g flow-typed\nflow-typed\n```\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr\u003e\nSee the section about [running tests](#running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `npm run flow`\n\nPerforms flow type check, highly recommended before starting build.\nPlease note, all application custom types are stored in Component files (props and state descriptions) as well as under /types/ subdir.\n\n\n# Usage\n\nSigma - React.JS flow-typed interface for Sigma js library - fastest opensource rendering engine for linked graphs.\nSigma makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.\n\n## Sigma component\n\nSigma is the main component which reserves \u003cdiv\u003e area with a given style (default is full width, 500px height), \ninitializes renderer and camera in the given area and starts rendering graph.\n\u003cSigma\u003e be composed with sigma sub-components using JSX syntax, e.g.:\n\n```\n    \u003cSigma renderer=\"webgl\" style={{maxWidth:\"inherit\", height:\"400px\"}}\n           settings={{drawEdges:false}}\n           onOverNode={e =\u003e console.log(\"Mouse over node: \" + e.data.node.label)}\u003e\n           graph={{nodes:[\"id0\", \"id1\"], edges:[{id:\"e0\",source:\"id0\",target:\"id1\"}]}}\u003e\n      \u003cRelativeSize initialSize={8}/\u003e\n    \u003c/Sigma\u003e\n```\n\n### Parameters:\n\n - @style  CSS   CSS style description for main div holding graph, should be specified in React format\n - @settings  Sigma$Settings     js object with sigma initialization options\n                as described on [sigma settings page](https://github.com/jacomyal/sigma.js/wiki/Settings)\n - @renderer   string     can be \"webgl\" or \"canvas\"\n - @graph     Sigma$Graph$Data   js object with array of nodes and edges used to initialize sigma\n - @onClickNode  (e) =\u003e void     set sigma callback for \"clickNode\" event (see below)\n - @onOverNode   (e) =\u003e void     set sigma callback for \"overNode\" event\n - @onOutNode    (e) =\u003e void     set sigma callback for \"outNode\" event\n - @onClickEdge  (e) =\u003e void     set sigma callback for \"clickEdge\" event\n - @onOverEdge   (e) =\u003e void     set sigma callback for \"overEdge\" event\n - @onOutEdge    (e) =\u003e void     set sigma callback for \"outEdge\" event\n\n### Callbacks:\n\n Sigma callback receives [Sigma Event](https://github.com/jacomyal/sigma.js/wiki/Events-API)\n with the following structure (see Sigma$Event type under /types/sigma.js):\n ```\n  .data\n     .captor   -- information about event handler, for instance position on the page {clientX, clientY}\n     .node?     -- for node events is sigma node data\n     .edge?     -- for edge events is sigma edge data\n ```\n\n### Types\n\nAll defined Sigma types stored under /types/sigma.js, can be used as a reference for objects and parameters.\n\n## Extending sigma components\n\n Sigma container will mount any child component with sigma instance under props.sigma. This way sigma\n functionality may be extended indefinitely:\n\n```\ncall MyCustomSigma extends React.Component {\n  constructor(props) {\n    super(props)\n    props.sigma.graph.addNode({id:\"n3\", label:props.label});\n  }\n}\n...\nreturn  \u003cSigma\u003e\n      \u003cMyCustomSigma label=\"Label\"\u003e\n    \u003c/Sigma\u003e\n```\n\n### Asynchronous graph data loading\n\n Component which initializes asynchronously is supposed to mount its children only after initialized\n (for example LoadJSON), which makes possible to build sequential composition in the pure JSX without\n any callbacks or handlers. In the following example RelativeSize will be counted only after loading \n from arctic.json file.\n\n\n```\n    \u003cSigma\u003e\n      \u003cLoadJSON url=\"/arctic.json\"\u003e\n        \u003cRelativeSize initialSize={8}/\u003e\n      \u003c/LoadJSON\u003e\n    \u003c/Sigma\u003e\n```\n\n\n\n# create-react-app regards\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\nBelow you will find some information on how to perform common tasks.\u003cbr\u003e\nYou can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunnock%2Fsitegraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdunnock%2Fsitegraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunnock%2Fsitegraph/lists"}