install cola
This commit is contained in:
parent
64be5973b0
commit
2f52d34ad4
|
@ -34,6 +34,7 @@
|
|||
"cross-fetch": "^3.0.4",
|
||||
"cytoscape": "^3.5.3",
|
||||
"lodash": "^4.17.14",
|
||||
"cytoscape-cola": "^2.3.0",
|
||||
"moment": "^2.22.2",
|
||||
"normalize.css": "^8.0.0",
|
||||
"react": "^16.4.2",
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import cytoscape from "cytoscape";
|
||||
import cola from "cytoscape-cola";
|
||||
import * as React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
|
@ -25,7 +26,7 @@ class GraphImpl extends React.Component<IGraphProps, IGraphState> {
|
|||
|
||||
public constructor(props: IGraphProps) {
|
||||
super(props);
|
||||
this.state = { layoutAlgorithm: "cose", isLayouting: false };
|
||||
this.state = { layoutAlgorithm: "cola", isLayouting: false };
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
@ -65,6 +66,7 @@ class GraphImpl extends React.Component<IGraphProps, IGraphState> {
|
|||
}
|
||||
|
||||
public componentDidMount() {
|
||||
cytoscape.use(cola as any);
|
||||
this.initGraph();
|
||||
}
|
||||
|
||||
|
@ -80,19 +82,21 @@ class GraphImpl extends React.Component<IGraphProps, IGraphState> {
|
|||
if (!this.cy) {
|
||||
return;
|
||||
}
|
||||
this.layout = this.cy.layout({
|
||||
name: this.state.layoutAlgorithm,
|
||||
animate: true,
|
||||
randomize: true,
|
||||
nodeRepulsion: 400000,
|
||||
edgeElasticity: 100,
|
||||
nestingFactor: 5,
|
||||
gravity: 80,
|
||||
numIter: 1000,
|
||||
initialTemp: 200,
|
||||
coolingFactor: 0.95,
|
||||
minTemp: 1.0
|
||||
});
|
||||
const options = {
|
||||
cose: {
|
||||
name: "cose",
|
||||
animate: false,
|
||||
numIter: 100,
|
||||
idealEdgeLength: (edge: any) => 1 / edge.data("weight")
|
||||
},
|
||||
cola: {
|
||||
name: "cola",
|
||||
animate: true,
|
||||
edgeLength: (edge: any) => 1 / edge.data("weight"),
|
||||
convergenceThreshold: 0.1
|
||||
}
|
||||
};
|
||||
this.layout = this.cy.layout(options[this.state.layoutAlgorithm] as any);
|
||||
this.layout.run();
|
||||
};
|
||||
|
||||
|
@ -109,7 +113,6 @@ class GraphImpl extends React.Component<IGraphProps, IGraphState> {
|
|||
return;
|
||||
}
|
||||
this.cy = cytoscape({
|
||||
// autolock: true,
|
||||
autoungrabify: true,
|
||||
container: document.getElementById("cytoscape"),
|
||||
elements: {
|
||||
|
@ -117,7 +120,8 @@ class GraphImpl extends React.Component<IGraphProps, IGraphState> {
|
|||
data: {
|
||||
id: edge.id || `${edge.source}${edge.target}`,
|
||||
source: edge.source,
|
||||
target: edge.target
|
||||
target: edge.target,
|
||||
weight: edge.size
|
||||
},
|
||||
group: "edges" as "edges"
|
||||
})),
|
||||
|
|
|
@ -14,6 +14,7 @@ interface ILayoutToDisplayName {
|
|||
[key: string]: string;
|
||||
}
|
||||
const layouts: ILayoutToDisplayName = {
|
||||
cola: "COLA",
|
||||
cose: "CoSE"
|
||||
};
|
||||
const LayoutSelect = Select.ofType<string>();
|
||||
|
@ -28,29 +29,31 @@ interface IFloatingLayoutSelectProps {
|
|||
startLayout: () => void;
|
||||
stopLayout: () => void;
|
||||
}
|
||||
const getLayoutKey = (layoutDisplayName: string) => layouts[layoutDisplayName];
|
||||
export const FloatingLayoutSelect: React.FC<IFloatingLayoutSelectProps> = ({
|
||||
currentLayoutKey,
|
||||
onItemSelect,
|
||||
startLayout,
|
||||
stopLayout
|
||||
}) => (
|
||||
<FloatingCard elevation={Elevation.TWO}>
|
||||
<H6>Layout</H6>
|
||||
<LayoutSelect
|
||||
items={Object.keys(layouts).map(key => layouts[key])}
|
||||
itemRenderer={LayoutItemRenderer}
|
||||
filterable={false}
|
||||
onItemSelect={(layout: string) => onItemSelect(getLayoutKey(layout))}
|
||||
>
|
||||
<Button
|
||||
icon="film"
|
||||
rightIcon="caret-down"
|
||||
text={currentLayoutKey ? layouts[currentLayoutKey] : "(No selection)"}
|
||||
/>
|
||||
</LayoutSelect>
|
||||
<br />
|
||||
<Button icon={IconNames.PLAY} onClick={startLayout} />
|
||||
<Button icon={IconNames.STOP} onClick={stopLayout} />
|
||||
</FloatingCard>
|
||||
);
|
||||
}) => {
|
||||
return (
|
||||
<FloatingCard elevation={Elevation.TWO}>
|
||||
<H6>Layout</H6>
|
||||
<LayoutSelect
|
||||
items={Object.keys(layouts)}
|
||||
itemRenderer={LayoutItemRenderer}
|
||||
filterable={false}
|
||||
onItemSelect={onItemSelect}
|
||||
popoverProps={{ minimal: true }}
|
||||
>
|
||||
<Button
|
||||
icon="film"
|
||||
rightIcon="caret-down"
|
||||
text={currentLayoutKey ? layouts[currentLayoutKey] : "(No selection)"}
|
||||
/>
|
||||
</LayoutSelect>
|
||||
<br />
|
||||
<Button icon={IconNames.PLAY} onClick={startLayout} />
|
||||
<Button icon={IconNames.STOP} onClick={stopLayout} />
|
||||
</FloatingCard>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
declare module "cytoscape-cola" {
|
||||
const prototype: {};
|
||||
}
|
|
@ -4,10 +4,7 @@
|
|||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "preserve",
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
],
|
||||
"lib": ["esnext", "dom"],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": true,
|
||||
|
@ -23,15 +20,11 @@
|
|||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"typeRoots": ["./node_modules/@types", "./src/typings"],
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"build"
|
||||
],
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"exclude": ["node_modules", "build"],
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
@ -3281,6 +3281,13 @@ cyclist@~0.2.2:
|
|||
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
|
||||
integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
|
||||
|
||||
cytoscape-cola@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape-cola/-/cytoscape-cola-2.3.0.tgz#24104eaab46e0a88dfeedb02199610450525208d"
|
||||
integrity sha512-xblxlCH8JXGLdH6XMUBJY3xBUJuL1rLy8bLMGvqkvoPHSbBfV+/klMWoqwervVKWOmFHPwUdihtxy8stG4RM5g==
|
||||
dependencies:
|
||||
webcola "^3.3.6"
|
||||
|
||||
cytoscape@^3.5.3:
|
||||
version "3.5.3"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.5.3.tgz#1caaab5aeba06f6abdc66a81976efcf57133108f"
|
||||
|
@ -3289,6 +3296,29 @@ cytoscape@^3.5.3:
|
|||
heap "^0.2.6"
|
||||
lodash.debounce "^4.0.8"
|
||||
|
||||
d3-dispatch@1, d3-dispatch@^1.0.3:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015"
|
||||
integrity sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g==
|
||||
|
||||
d3-drag@^1.0.4:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.3.tgz#46e206ad863ec465d88c588098a1df444cd33c64"
|
||||
integrity sha512-8S3HWCAg+ilzjJsNtWW1Mutl74Nmzhb9yU6igspilaJzeZVFktmY6oO9xOh5TDk+BM2KrNFjttZNoJJmDnkjkg==
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-selection "1"
|
||||
|
||||
d3-selection@1:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
|
||||
integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
|
||||
|
||||
d3-timer@^1.0.5:
|
||||
version "1.0.9"
|
||||
resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
|
||||
integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==
|
||||
|
||||
damerau-levenshtein@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
|
||||
|
@ -11032,6 +11062,15 @@ web-namespaces@^1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
|
||||
integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
|
||||
|
||||
webcola@^3.3.6:
|
||||
version "3.3.9"
|
||||
resolved "https://registry.yarnpkg.com/webcola/-/webcola-3.3.9.tgz#a54cae07478f1b25968d280b0d4a369c0b4352b3"
|
||||
integrity sha512-hjE23yiRU+7AGajxuDdUDW8txyMVgXHCW71erA0UVKYx0lruqs1o4QFQ0OSpSdNS6wlAwgk0IPxhuEiQq1MXfQ==
|
||||
dependencies:
|
||||
d3-dispatch "^1.0.3"
|
||||
d3-drag "^1.0.4"
|
||||
d3-timer "^1.0.5"
|
||||
|
||||
webidl-conversions@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
|
||||
|
|
Loading…
Reference in New Issue