Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(network): fix remaining issues after rebasing against master
  • Loading branch information
plouc committed Dec 31, 2021
1 parent b6741dd commit 90edbd0
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 116 deletions.
54 changes: 30 additions & 24 deletions packages/network/src/NetworkLinks.tsx
Expand Up @@ -8,32 +8,38 @@ interface NetworkLinksProps<N extends NetworkInputNode> {
linkComponent: NetworkLinkComponent<N>
}

const getEnterTransition = <N extends NetworkInputNode>() => (link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.source.x,
y2: link.source.y,
color: link.color,
opacity: 0,
})
const getEnterTransition =
<N extends NetworkInputNode>() =>
(link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.source.x,
y2: link.source.y,
color: link.color,
opacity: 0,
})

const getRegularTransition = <N extends NetworkInputNode>() => (link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.target.x,
y2: link.target.y,
color: link.color,
opacity: 1,
})
const getRegularTransition =
<N extends NetworkInputNode>() =>
(link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.target.x,
y2: link.target.y,
color: link.color,
opacity: 1,
})

const getExitTransition = <N extends NetworkInputNode>() => (link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.source.x,
y2: link.source.y,
color: link.color,
opacity: 0,
})
const getExitTransition =
<N extends NetworkInputNode>() =>
(link: ComputedLink<N>) => ({
x1: link.source.x,
y1: link.source.y,
x2: link.source.x,
y2: link.source.y,
color: link.color,
opacity: 0,
})

export const NetworkLinks = <N extends NetworkInputNode>({
links,
Expand Down
60 changes: 33 additions & 27 deletions packages/network/src/NetworkNodes.tsx
Expand Up @@ -17,35 +17,41 @@ interface NetworkNodesProps<N extends NetworkInputNode> {
onMouseLeave?: (node: NetworkComputedNode<N>, event: MouseEvent) => void
}

const getEnterTransition = <N extends NetworkInputNode>() => (node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 0,
})
const getEnterTransition =
<N extends NetworkInputNode>() =>
(node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 0,
})

const getRegularTransition = <N extends NetworkInputNode>() => (node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 1,
})
const getRegularTransition =
<N extends NetworkInputNode>() =>
(node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 1,
})

const getExitTransition = <N extends NetworkInputNode>() => (node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 0,
})
const getExitTransition =
<N extends NetworkInputNode>() =>
(node: NetworkComputedNode<N>) => ({
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderWidth: node.borderWidth,
borderColor: node.borderColor,
scale: 0,
})

export const NetworkNodes = <N extends NetworkInputNode>({
nodes,
Expand Down
4 changes: 2 additions & 2 deletions packages/network/src/hooks.ts
Expand Up @@ -125,9 +125,9 @@ export const useNetwork = <N extends NetworkInputNode = NetworkInputNode>({
simulation.tick(iterations)

// d3 mutates data, hence the castings
setCurrentNodes((nodesCopy as unknown) as NetworkComputedNode<N>[])
setCurrentNodes(nodesCopy as unknown as NetworkComputedNode<N>[])
setCurrentLinks(
((linksCopy as unknown) as ComputedLink<N>[]).map(link => {
(linksCopy as unknown as ComputedLink<N>[]).map(link => {
link.previousSource = currentNodes
? currentNodes.find(n => n.id === link.source.id)
: undefined
Expand Down
5 changes: 5 additions & 0 deletions packages/network/tests/.eslintrc.yml
@@ -0,0 +1,5 @@
env:
jest: true

rules:
react/prop-types: 0
Empty file.
69 changes: 6 additions & 63 deletions website/src/data/components/network/props.ts
@@ -1,6 +1,6 @@
import { commonDefaultProps } from '@nivo/network'
import { motionProperties, groupProperties, themeProperty } from '../../../lib/componentProperties'
import { chartDimensions, pixelRatio } from '../../../lib/chart-properties'
import { groupProperties, themeProperty, motionProperties } from '../../../lib/componentProperties'
import { chartDimensions, isInteractive } from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'

const allFlavors: Flavor[] = ['svg', 'canvas']
Expand Down Expand Up @@ -31,7 +31,6 @@ const props: ChartProperty[] = [
`,
},
...chartDimensions(allFlavors),
pixelRatio(),
{
key: 'linkDistance',
group: 'Simulation',
Expand Down Expand Up @@ -74,27 +73,17 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
help: 'Sets the minimum distance between nodes for the many-body force.',
<<<<<<< HEAD
flavors: allFlavors,
defaultValue: NetworkDefaultProps.distanceMin,
=======
flavors: ['svg', 'canvas'],
defaultValue: commonDefaultProps.distanceMin,
>>>>>>> feat(network): types are now valid
},
{
key: 'distanceMax',
group: 'Simulation',
type: 'number',
required: false,
help: 'Sets the maximum disteance between nodes for the many-body force.',
<<<<<<< HEAD
flavors: allFlavors,
defaultValue: NetworkDefaultProps.distanceMax,
=======
flavors: ['svg', 'canvas'],
defaultValue: commonDefaultProps.distanceMax,
>>>>>>> feat(network): types are now valid
},
{
key: 'iterations',
Expand All @@ -106,22 +95,15 @@ const props: ChartProperty[] = [
`,
type: 'number',
required: false,
<<<<<<< HEAD
defaultValue: NetworkDefaultProps.iterations,
flavors: allFlavors,
defaultValue: commonDefaultProps.iterations,
control: {
type: 'range',
=======
defaultValue: commonDefaultProps.iterations,
flavors: ['svg', 'canvas'],
controlType: 'range',
controlOptions: {
>>>>>>> feat(network): types are now valid
min: 60,
max: 260,
},
},
themeProperty(['svg', 'canvas']),
themeProperty(allFlavors),
{
key: 'nodeComponent',
group: 'Nodes',
Expand All @@ -145,45 +127,28 @@ const props: ChartProperty[] = [
type: 'string | (node: InputNode) => string',
required: false,
help: `Control nodes' color.`,
<<<<<<< HEAD
flavors: allFlavors,
defaultValue: NetworkDefaultProps.nodeColor,
=======
flavors: ['svg', 'canvas'],
defaultValue: commonDefaultProps.nodeColor,
>>>>>>> feat(network): types are now valid
},
{
key: 'nodeBorderWidth',
group: 'Nodes',
type: 'number | (node: NetworkComputedNode) => number',
required: false,
help: `Control nodes' border width.`,
<<<<<<< HEAD
defaultValue: NetworkDefaultProps.nodeBorderWidth,
flavors: allFlavors,
control: { type: 'lineWidth' },
=======
defaultValue: commonDefaultProps.nodeBorderWidth,
flavors: ['svg', 'canvas'],
controlType: 'lineWidth',
>>>>>>> feat(network): types are now valid
},
{
key: 'nodeBorderColor',
group: 'Nodes',
type: 'InheritedColorConfig<NetworkComputedNode>',
required: false,
help: `Control nodes' border color.`,
<<<<<<< HEAD
defaultValue: NetworkDefaultProps.nodeBorderColor,
flavors: allFlavors,
control: { type: 'inheritedColor' },
=======
defaultValue: commonDefaultProps.nodeBorderColor,
flavors: ['svg', 'canvas'],
controlType: 'inheritedColor',
>>>>>>> feat(network): types are now valid
},
{
key: 'linkComponent',
Expand All @@ -209,46 +174,24 @@ const props: ChartProperty[] = [
type: 'number | (link: NetworkComputedLink) => number',
required: false,
help: `Control links' thickness.`,
<<<<<<< HEAD
flavors: allFlavors,
defaultValue: NetworkDefaultProps.linkThickness,
control: { type: 'lineWidth' },
=======
flavors: ['svg', 'canvas'],
defaultValue: commonDefaultProps.linkThickness,
controlType: 'lineWidth',
>>>>>>> feat(network): types are now valid
},
{
key: 'linkColor',
group: 'Links',
type: 'InheritedColorConfig<NetworkComputedLink>',
required: false,
help: `Control links' color.`,
<<<<<<< HEAD
defaultValue: NetworkDefaultProps.linkColor,
flavors: allFlavors,
control: {
type: 'inheritedColor',
=======
defaultValue: commonDefaultProps.linkColor,
flavors: ['svg', 'canvas'],
controlType: 'inheritedColor',
controlOptions: {
>>>>>>> feat(network): types are now valid
inheritableProperties: ['source.color', 'target.color'],
},
defaultValue: commonDefaultProps.linkColor,
},
{
key: 'isInteractive',
group: 'Interactivity',
type: 'boolean',
required: false,
help: 'Enable/disable interactivity.',
flavors: ['svg', 'canvas'],
defaultValue: commonDefaultProps.isInteractive,
controlType: 'switch',
},
isInteractive({ flavors: allFlavors, defaultValue: commonDefaultProps.isInteractive }),
{
key: 'nodeTooltip',
group: 'Interactivity',
Expand Down
Empty file.

0 comments on commit 90edbd0

Please sign in to comment.