From 301d8a5dd4c9df742102694b5b55ab3bd4ac0506 Mon Sep 17 00:00:00 2001 From: Elijah Meeks Date: Wed, 29 Aug 2018 20:22:28 -0700 Subject: [PATCH] Fix flow --- src/components/InteractionLayer.js | 2 +- src/components/NetworkFrame.js | 14 +++---- src/components/OrdinalFrame.js | 16 +++++--- src/components/svg/SvgHelper.js | 8 ---- src/components/svg/networkDrawing.js | 47 ++++++++++++++++++++++-- src/docs/components/CreatingLineChart.js | 2 +- src/docs/components/DendrogramRaw.js | 7 ++-- 7 files changed, 67 insertions(+), 29 deletions(-) diff --git a/src/components/InteractionLayer.js b/src/components/InteractionLayer.js index 08cb7a9d..271078bd 100644 --- a/src/components/InteractionLayer.js +++ b/src/components/InteractionLayer.js @@ -140,7 +140,7 @@ class InteractionLayer extends React.Component { : [yScale.invert(0), yScale.invert(size[1])] } = interaction - if (extent.indexOf(undefined) !== -1) { + if (extent.indexOf && extent.indexOf(undefined) !== -1) { return } diff --git a/src/components/NetworkFrame.js b/src/components/NetworkFrame.js index 74e69dc0..e33c2de1 100644 --- a/src/components/NetworkFrame.js +++ b/src/components/NetworkFrame.js @@ -211,7 +211,7 @@ function determineNodeIcon(baseCustomNodeIcon, networkSettings, size) { return circleNodeGenerator } -function determineEdgeIcon(baseCustomEdgeIcon, networkSettings, size) { +function determineEdgeIcon(baseCustomEdgeIcon, networkSettings, size, graph) { if (baseCustomEdgeIcon) return baseCustomEdgeIcon switch (networkSettings.type) { case "partition": @@ -225,7 +225,7 @@ function determineEdgeIcon(baseCustomEdgeIcon, networkSettings, size) { case "chord": return chordEdgeGenerator(size) case "dagre": - return dagreEdgeGenerator(networkSettings.dagreGraph.graph().rankdir) + if (graph) return dagreEdgeGenerator(graph.graph().rankdir) } return undefined } @@ -641,7 +641,8 @@ class NetworkFrame extends React.Component { const customEdgeIcon = determineEdgeIcon( baseCustomEdgeIcon, networkSettings, - adjustedSize + adjustedSize, + graph ) networkSettings.graphSettings.nodes = nodes @@ -685,7 +686,7 @@ class NetworkFrame extends React.Component { this.state.graphSettings.edges !== edges || hierarchicalTypeHash[networkSettings.type] - if (networkSettings.type === "dagre") { + if (networkSettings.type === "dagre" && graph) { const dagreGraph = graph projectedNodes = dagreGraph.nodes().map(n => { const baseNode = dagreGraph.node(n) @@ -707,7 +708,6 @@ class NetworkFrame extends React.Component { baseEdge.points.push({ x: baseEdge.target.x, y: baseEdge.target.y }) return baseEdge }) - } else if (changedData) { edgeHash = new Map() nodeHash = new Map() @@ -1443,8 +1443,7 @@ class NetworkFrame extends React.Component { legendSettings.legendGroups = legendGroups } } - console.log("customEdgeIcon", customEdgeIcon) - console.log("projectedEdges", projectedEdges) + const networkFrameRender = { edges: { accessibleTransform: (data, i) => { @@ -1461,6 +1460,7 @@ class NetworkFrame extends React.Component { ? currentProps.edgeRenderKey : d => d._NWFEdgeKey || `${d.source.id}-${d.target.id}`, behavior: drawEdges, + projection: networkSettings.projection, type: edgeType, customMark: customEdgeIcon, networkType: networkSettings.type, diff --git a/src/components/OrdinalFrame.js b/src/components/OrdinalFrame.js index 59a2e810..465f245b 100644 --- a/src/components/OrdinalFrame.js +++ b/src/components/OrdinalFrame.js @@ -116,6 +116,10 @@ type SummaryTypes = | "boxplot" | "contour" +type OExtentObject = { extent?: Array, onChange?: Function } + +type OExtentSettingsType = Array | OExtentObject + type SummaryTypeSettings = { type: SummaryTypes, amplitude?: number } type PieceTypes = "none" | "bar" | "clusterbar" | "point" | "swarm" | "timeline" @@ -132,7 +136,7 @@ export type OrdinalFrameProps = { downloadFields: Array, rAccessor?: accessorType, oAccessor?: accessorType, - oExtent?: ExtentSettingsType | Array, + oExtent?: OExtentSettingsType, rExtent?: ExtentSettingsType | Array, name?: string, download: boolean, @@ -211,11 +215,11 @@ type State = { rAccessor: Array, oScaleType: Function, rScaleType: Function, - oExtent: Array, + oExtent: Array, rExtent: Array, oScale: Function, rScale: Function, - calculatedOExtent: Array, + calculatedOExtent: Array, calculatedRExtent: Array, projectedColumns: Object, margin: MarginType, @@ -261,7 +265,7 @@ class OrdinalFrame extends React.Component { oScale: xScale, rScale: xScale, axes: undefined, - calculatedOExtent: [0, 1], + calculatedOExtent: [], calculatedRExtent: [0, 1], columnOverlays: [], dataVersion: undefined, @@ -375,7 +379,7 @@ class OrdinalFrame extends React.Component { projection }) - const oExtentSettings: ExtentSettingsType = + const oExtentSettings: OExtentObject = baseOExtent === undefined || Array.isArray(baseOExtent) ? { extent: baseOExtent } : baseOExtent @@ -1665,7 +1669,7 @@ class OrdinalFrame extends React.Component { interaction={ interaction && { ...interaction, - brush: "oBrush", + brush: interaction.columnsBrush !== true && "oBrush", projection, projectedColumns } diff --git a/src/components/svg/SvgHelper.js b/src/components/svg/SvgHelper.js index 67585cb1..f7de320a 100644 --- a/src/components/svg/SvgHelper.js +++ b/src/components/svg/SvgHelper.js @@ -276,10 +276,6 @@ export function linearRibbon() { .filter(d => d.direction === "back") .reduce(dedupeRibbonPoints(), []) - if (pathData.multiple[0].color === "red") { - console.log("currentLeftSide", currentLeftSide) - } - _rAccessor = () => nextSibling.weight const leftHandInflatedRibbon = buildRibbon(currentLeftSide) @@ -287,10 +283,6 @@ export function linearRibbon() { .reverse() .filter(d => d.direction === "back") .reduce(dedupeRibbonPoints(), []) - - if (pathData.multiple[0].color === "red") { - console.log("currentPoints", currentPoints) - } } }) diff --git a/src/components/svg/networkDrawing.js b/src/components/svg/networkDrawing.js index 7c272787..87ace0a3 100644 --- a/src/components/svg/networkDrawing.js +++ b/src/components/svg/networkDrawing.js @@ -6,7 +6,15 @@ import { d as glyphD /*, project as glyphProject, mutate as glyphMutate*/ } from "d3-glyphedge" -import { arc, curveMonotoneX, curveMonotoneY, line } from "d3-shape" +import { + arc, + curveMonotoneX, + curveMonotoneY, + line, + linkHorizontal, + linkVertical, + linkRadial +} from "d3-shape" import { linearRibbon } from "./SvgHelper" import { interpolateNumber } from "d3-interpolate" @@ -37,7 +45,18 @@ function sankeyEdgeSort(a, b, direction) { : a.source[first] - b.source[first] } +const sigmoidLinks = { + horizontal: linkHorizontal() + .x(d => d.x) + .y(d => d.y), + vertical: linkVertical() + .x(d => d.x) + .y(d => d.y), + radial: glyphD.lineArc +} + const customEdgeHashD = { + curve: (d, projection = "vertical") => sigmoidLinks[projection](d), linearc: d => glyphD.lineArc(d), ribbon: d => glyphD.ribbon(d, d.width), arrowhead: d => @@ -55,6 +74,27 @@ const customEdgeHashD = { ) } +export const radialCurveGenerator = size => { + const radialCurve = linkRadial() + .angle(d => (d.x / size[0]) * Math.PI * 2) + .radius(d => d.y) + + return ({ d, i, styleFn, renderMode, key, className, baseMarkProps }) => ( + + ) +} + export const circleNodeGenerator = ({ d, i, @@ -444,7 +484,8 @@ export const drawEdges = ({ type, baseMarkProps, networkType, - direction + direction, + projection }) => { const data = networkType === "sankey" @@ -481,7 +522,7 @@ export const drawEdges = ({ if (typeof type === "function") { dGenerator = type } else if (customEdgeHashD[type]) { - dGenerator = d => customEdgeHashD[type](d) + dGenerator = d => customEdgeHashD[type](d, projection) } } data.forEach((d, i) => { diff --git a/src/docs/components/CreatingLineChart.js b/src/docs/components/CreatingLineChart.js index ce23bdf6..796b0cb0 100644 --- a/src/docs/components/CreatingLineChart.js +++ b/src/docs/components/CreatingLineChart.js @@ -1255,7 +1255,7 @@ Switch to lines ` }) - console.log("movies", movies) + const manyMovies = [ ...movies, ...movies.map(m => ({ diff --git a/src/docs/components/DendrogramRaw.js b/src/docs/components/DendrogramRaw.js index 14ed06b8..551fb504 100644 --- a/src/docs/components/DendrogramRaw.js +++ b/src/docs/components/DendrogramRaw.js @@ -25,15 +25,16 @@ export default ({ fillOpacity: 0.25 }), edgeStyle: d => ({ - fill: colors[d.source.depth], + fill: "none" || colors[d.source.depth], stroke: colors[d.source.depth], opacity: 0.5 }), nodeIDAccessor: "name", hoverAnnotation: true, + edgeType: "curve", networkType: { - type, - projection: projection, + type: "dendrogram" || type, + projection: "radial" || projection, nodePadding: 1, forceManyBody: -15, edgeStrength: 1.5,