Fix flow

src/components/InteractionLayer.js

@@ -140,7 +140,7 @@ class InteractionLayer extends React.Component<Props, State> {
           : [yScale.invert(0), yScale.invert(size[1])]
     } = interaction
 
-    if (extent.indexOf(undefined) !== -1) {
+    if (extent.indexOf && extent.indexOf(undefined) !== -1) {
       return <g />
     }
 

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<Props, State> {
     const customEdgeIcon = determineEdgeIcon(
       baseCustomEdgeIcon,
       networkSettings,
-      adjustedSize
+      adjustedSize,
+      graph
     )
 
     networkSettings.graphSettings.nodes = nodes
@@ -685,7 +686,7 @@ class NetworkFrame extends React.Component<Props, State> {
       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<Props, State> {
         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<Props, State> {
         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<Props, State> {
           ? currentProps.edgeRenderKey
           : d => d._NWFEdgeKey || `${d.source.id}-${d.target.id}`,
         behavior: drawEdges,
+        projection: networkSettings.projection,
         type: edgeType,
         customMark: customEdgeIcon,
         networkType: networkSettings.type,

src/components/OrdinalFrame.js

@@ -116,6 +116,10 @@ type SummaryTypes =
   | "boxplot"
   | "contour"
 
+type OExtentObject = { extent?: Array<string>, onChange?: Function }
+
+type OExtentSettingsType = Array<string> | OExtentObject
+
 type SummaryTypeSettings = { type: SummaryTypes, amplitude?: number }
 
 type PieceTypes = "none" | "bar" | "clusterbar" | "point" | "swarm" | "timeline"
@@ -132,7 +136,7 @@ export type OrdinalFrameProps = {
   downloadFields: Array<string>,
   rAccessor?: accessorType,
   oAccessor?: accessorType,
-  oExtent?: ExtentSettingsType | Array<number>,
+  oExtent?: OExtentSettingsType,
   rExtent?: ExtentSettingsType | Array<number>,
   name?: string,
   download: boolean,
@@ -211,11 +215,11 @@ type State = {
   rAccessor: Array<Function>,
   oScaleType: Function,
   rScaleType: Function,
-  oExtent: Array<number>,
+  oExtent: Array<string>,
   rExtent: Array<number>,
   oScale: Function,
   rScale: Function,
-  calculatedOExtent: Array<number>,
+  calculatedOExtent: Array<string>,
   calculatedRExtent: Array<number>,
   projectedColumns: Object,
   margin: MarginType,
@@ -261,7 +265,7 @@ class OrdinalFrame extends React.Component<OrdinalFrameProps, State> {
       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<OrdinalFrameProps, State> {
       projection
     })
 
-    const oExtentSettings: ExtentSettingsType =
+    const oExtentSettings: OExtentObject =
       baseOExtent === undefined || Array.isArray(baseOExtent)
         ? { extent: baseOExtent }
         : baseOExtent
@@ -1665,7 +1669,7 @@ class OrdinalFrame extends React.Component<OrdinalFrameProps, State> {
         interaction={
           interaction && {
             ...interaction,
-            brush: "oBrush",
+            brush: interaction.columnsBrush !== true && "oBrush",
             projection,
             projectedColumns
           }

src/components/svg/SvgHelper.js

@@ -276,21 +276,13 @@ 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)
           currentPoints = leftHandInflatedRibbon
             .reverse()
             .filter(d => d.direction === "back")
             .reduce(dedupeRibbonPoints(), [])
-
-          if (pathData.multiple[0].color === "red") {
-            console.log("currentPoints", currentPoints)
-          }
         }
       })
 

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 }) => (
+    <Mark
+      {...baseMarkProps}
+      key={key}
+      transform={`translate(${50},${size[1] / 2 - 50})`}
+      markType="path"
+      d={radialCurve(d)}
+      style={styleFn(d, i)}
+      renderMode={renderMode ? renderMode(d, i) : undefined}
+      className={className}
+      aria-label={`Node ${d.id}`}
+      tabIndex={-1}
+    />
+  )
+}
+
 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) => {

src/docs/components/CreatingLineChart.js

@@ -1255,7 +1255,7 @@ Switch to lines
     </div>
     `
     })
-    console.log("movies", movies)
+
     const manyMovies = [
       ...movies,
       ...movies.map(m => ({

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,