Hylograph.Internal.Behavior.Types

data Behavior datum

Behaviors that can be attached to selections

Parameterized by datum type to enable typed event handlers.

Tier 1 (element-local):

• Zoom: Pan and zoom with mouse/touch
• Drag: Drag elements with mouse/touch (simple or simulation-aware)
• Click: Click handler without datum access
• ClickWithDatum: Click handler with typed datum access
• MouseEnter/MouseLeave: Hover handlers with datum access
• Highlight: Simple style changes on hover (Tier 1)

Tier 2 (coordinated across views):

• CoordinatedHighlight: Cross-view synchronized highlighting

Constructors

• Zoom ZoomConfig
• Drag DragConfig
• Click (Effect Unit)
• ClickWithDatum (datum -> Effect Unit)
• MouseEnter (datum -> Effect Unit)
• MouseLeave (datum -> Effect Unit)
• Highlight HighlightStyle
• CoordinatedHighlight (CoordinatedHighlightConfig datum)
• MouseMoveWithInfo (MouseEventInfo datum -> Effect Unit)
• MouseEnterWithInfo (MouseEventInfo datum -> Effect Unit)
• MouseLeaveWithInfo (MouseEventInfo datum -> Effect Unit)
• MouseDown (Effect Unit)
• MouseDownWithInfo (MouseEventInfo datum -> Effect Unit)

Instances

• Show (Behavior datum)

newtype ZoomConfig

Zoom behavior configuration

The target is the selection that will be transformed when zooming. Typically this is an inner <g> element, while the zoom behavior is attached to the outer <svg> element.

Example:

zoomConfig = ZoomConfig
  { scaleExtent: ScaleExtent 0.5 4.0  -- 50% to 400%
  , targetSelector: ".zoom-group"      -- What to transform
  }

Constructors

• ZoomConfig { scaleExtent :: ScaleExtent, targetSelector :: String }

Instances

• Eq ZoomConfig
• Ord ZoomConfig
• Show ZoomConfig

data DragConfig

Drag behavior configuration

• SimpleDrag: Basic dragging with transform
• SimulationDrag: Drag with force simulation reheat (datum IS the simulation node)
• SimulationDragNested: Drag where datum has a .node field containing the simulation node

Constructors

• SimpleDrag
• SimulationDrag String
• SimulationDragNested String

Instances

• Eq DragConfig
• Ord DragConfig
• Show DragConfig

data ScaleExtent

Scale extent for zoom (min and max zoom levels)

Example:

• ScaleExtent 0.5 4.0 allows zooming from 50% to 400%
• ScaleExtent 1.0 1.0 disables zoom (fixed at 100%)

Constructors

• ScaleExtent Number Number

Instances

• Eq ScaleExtent
• Ord ScaleExtent
• Show ScaleExtent

simulationDragNested :: String -> DragConfig

Simulation-aware drag for nested datum structures

Like simulationDrag, but for when the bound datum has a .node field containing the actual simulation node. This is useful when you're binding a wrapper type (like RenderNode) that contains the simulation node.

The drag behavior will set datum.node.fx/fy instead of datum.fx/fy.

Example:

-- RenderNode has { node :: SimulationNode, ... }
_ <- on (Drag $ simulationDragNested "lesmis-gup") nodeCircles

defaultDrag :: DragConfig

Default drag configuration

Enables simple drag on the element with default D3 settings.

simulationDrag :: String -> DragConfig

Simulation-aware drag configuration

Enables drag with force simulation reheat. When dragging starts, simulation alpha is increased to reheat. When dragging ends, simulation cools back down.

Example:

nodeCircles <- append Circle [...] nodeEnter
_ <- on (Drag $ simulationDrag "lesmis") nodeCircles

defaultZoom :: ScaleExtent -> String -> ZoomConfig

Default zoom configuration

Requires you to specify:

• Scale extent (min/max zoom)
• Target selector (what element to transform)

Example:

zoom <- on (Zoom $ defaultZoom (ScaleExtent 0.5 4.0) ".zoom-group") svg

onClick :: forall datum. Effect Unit -> Behavior datum

Click handler without datum access

Use when you don't need the data bound to the clicked element.

Example:

button <- append Circle [radius 20.0] container
_ <- on (onClick (log "Button clicked!")) button

onClickWithDatum :: forall datum. (datum -> Effect Unit) -> Behavior datum

Click handler with typed datum access

The datum is recovered from the DOM element using D3's __data__ property. Type safety is preserved through the Selection's phantom type parameter.

Example:

type CircleData = { id :: Int, color :: String }

circles <- append Circle [...] (joinData data)
_ <- on (onClickWithDatum \d -> log ("Clicked circle: " <> show d.id)) circles

onMouseEnter :: forall datum. (datum -> Effect Unit) -> Behavior datum

Mouse enter handler with typed datum access

Fires when mouse enters the element. Does not bubble. Useful for hover effects like highlighting.

Example:

lines <- joinData "lines" "path" series (\s -> ...)
_ <- on (onMouseEnter \s -> log ("Hovered: " <> s.division)) lines

onMouseLeave :: forall datum. (datum -> Effect Unit) -> Behavior datum

Mouse leave handler with typed datum access

Fires when mouse leaves the element. Does not bubble. Pair with onMouseEnter for hover effects.

Example:

_ <- on (onMouseLeave \_ -> resetHighlight) lines

type HighlightStyle = { enter :: Array { attr :: String, value :: String }, leave :: Array { attr :: String, value :: String } }

Style changes for hover highlight effect

Specifies attribute name-value pairs to apply on enter and leave. Uses String values for simplicity (works with any attribute type).

Example:

highlightStyle = { enter: [Tuple "stroke" "#333", Tuple "stroke-width" "3"]
                 , leave: [Tuple "stroke" "#ddd", Tuple "stroke-width" "1.5"]
                 }

onHover :: forall datum. HighlightStyle -> Behavior datum

Hover highlight behavior

Applies style changes on mouse enter and resets on mouse leave. Also raises the element to front on hover.

Example:

_ <- on (onHover
  { enter: [{ attr: "stroke", value: "#333" }, { attr: "stroke-width", value: "3" }]
  , leave: [{ attr: "stroke", value: "#ddd" }, { attr: "stroke-width", value: "1.5" }]
  }) lines

type MouseEventInfo datum = { clientX :: Number, clientY :: Number, datum :: datum, offsetX :: Number, offsetY :: Number, pageX :: Number, pageY :: Number }

Mouse event information with position data

Provides both page-relative and element-relative coordinates.

• clientX/clientY: Position relative to viewport
• pageX/pageY: Position relative to document (for tooltip positioning)
• offsetX/offsetY: Position relative to target element

onMouseMoveWithInfo :: forall datum. (MouseEventInfo datum -> Effect Unit) -> Behavior datum

Mouse move handler with full event info

Fires continuously as mouse moves over the element. Provides datum and mouse coordinates for tooltips, crosshairs, etc.

Example:

_ <- on (onMouseMoveWithInfo \info -> do
  -- info.datum is the bound data
  -- info.pageX/pageY for tooltip positioning
  -- info.offsetX/offsetY for data lookup
  updateTooltip info.datum info.pageX info.pageY
) lines

onMouseEnterWithInfo :: forall datum. (MouseEventInfo datum -> Effect Unit) -> Behavior datum

Mouse enter handler with full event info

Like onMouseEnter but also provides mouse coordinates.

onMouseLeaveWithInfo :: forall datum. (MouseEventInfo datum -> Effect Unit) -> Behavior datum

Mouse leave handler with full event info

Like onMouseLeave but also provides mouse coordinates.

onMouseDown :: forall datum. Effect Unit -> Behavior datum

Mouse down handler without datum access

Fires when mouse button is pressed on the element. Useful for starting drag operations.

onMouseDownWithInfo :: forall datum. (MouseEventInfo datum -> Effect Unit) -> Behavior datum

Mouse down handler with full event info

Fires when mouse button is pressed on the element. Provides datum and mouse coordinates for drag operations.

Example:

_ <- on (onMouseDownWithInfo \info -> do
  startDrag info.datum info.clientX
) element

data HighlightClass

Classification of an element's highlight state

When an element is hovered, ALL elements with CoordinatedHighlight behavior are classified based on their relationship to the hovered element.

• Primary: The hovered element itself
• Related: Connected/related to the hovered element
• Upstream: Dependencies (things this element depends on)
• Downstream: Dependents (things that depend on this element)
• Dimmed: Not related (de-emphasized)
• Neutral: No highlight state change (default appearance)

Constructors

• Primary
• Related
• Upstream
• Downstream
• Dimmed
• Neutral

Instances

• Eq HighlightClass
• Show HighlightClass

data TooltipTrigger

When to show a tooltip

• OnHover: Traditional tooltip - only when mouse is directly over element
• WhenPrimary: Show when this element becomes Primary (from any view's hover)
• WhenRelated: Show when this element becomes Related (use judiciously!)

Constructors

• OnHover
• WhenPrimary
• WhenRelated

Instances

• Eq TooltipTrigger
• Show TooltipTrigger

type TooltipConfig datum = { content :: datum -> String, showWhen :: TooltipTrigger }

Tooltip configuration for coordinated highlighting

• content: Function to generate tooltip text from datum
• showWhen: Condition for showing the tooltip

type CoordinatedHighlightConfig datum = { classify :: String -> datum -> HighlightClass, group :: Maybe String, identify :: datum -> String, tooltip :: Maybe (TooltipConfig datum) }

Configuration for coordinated highlighting

• identify: Extract a unique identity string from the datum
• classify: Given the hovered id and this element's datum, return highlight class
• group: Optional group name to scope highlighting (default: global)
• tooltip: Optional tooltip configuration

Example:

config :: CoordinatedHighlightConfig MyNode
config =
  { identify: _.name
  , classify: \hoveredId datum ->
      if datum.name == hoveredId then Primary
      else if hoveredId `elem` datum.connections then Related
      else Dimmed
  , group: Nothing  -- global coordination
  , tooltip: Just { content: _.name, showWhen: OnHover }
  }

onCoordinatedHighlight :: forall datum. CoordinatedHighlightConfig datum -> Behavior datum

Coordinated highlight behavior (Tier 2)

Enables synchronized highlighting across multiple views. When any element with this behavior is hovered, ALL elements with CoordinatedHighlight receive CSS classes based on their relationship to the hovered element.

CSS classes applied:

• .highlight-primary - the hovered element
• .highlight-related - elements related to hovered
• .highlight-dimmed - unrelated elements

Example:

-- Simple same-id highlighting across views
_ <- on (onCoordinatedHighlight
  { identify: _.moduleName
  , classify: \hoveredId d ->
      if d.moduleName == hoveredId then Primary
      else Dimmed
  , group: Nothing
  }) bubblePackNodes

-- Same config on chord arcs - they coordinate automatically
_ <- on (onCoordinatedHighlight config) chordArcs

For relationship-aware highlighting:

_ <- on (onCoordinatedHighlight
  { identify: _.name
  , classify: \hoveredId d ->
      if d.name == hoveredId then Primary
      else if hoveredId `elem` d.dependencies then Related
      else Dimmed
  , group: Nothing
  }) nodes