pipe-storyboard = require \pipe-storyboard
Layout = create-factory pipe-storyboard.Layout
Story = create-factory pipe-storyboard.Story
Storyboard = create-factory pipe-storyboard.Storyboard
 
# used for creating custom componenets
LabelledComponent = create-factory pipe-storyboard.LabelledComponent
 
Storyboard do 
 
    # the pipe-server to get queries from
    url: \http://localhost:4081
 
    # a list of ui controls corresponding to the parameters of the child queries
    controls: 
        * name: \conversions
          label: \Conversions
          type: \number
          default-value: 0
          client-side: true
        ...
 
    # this tells the Storyboard component to load the ui-values from query-string
    state: @props.location.query
 
    # this function is invoked whenever a ui-value changes & updates the state
    on-change: (new-state) ~> 
        react-router.hash-history.replace-state null, (update-querystring window.location.href, new-state)
 
    # A layout component is used to position queries in a Storyboard
    Layout do 
        style: width: \100%
 
        # A Story component takes a query-id or branch-id and renders it
        # the values from the ui-controls (passed as controls prop above) will be mapped to parameters
        # and passed to each child query / layout
        Story branch-id: \pztAHkd
        Story branch-id: \pqucBWe

Control :: {
    
    # name of the control, used for fetching and updating value from state
    name :: String 
 
    # optional parameter, enum of standard html input types, used internally to render the ui-control
    # if undefined the render method must be implemented
    type :: String 
    label :: String
 
    # optional parameter works in conjunction with type, for example, if type is text and placeholder is 'hello'
    # a html input element with type text and placeholder 'hello' will be rendered in the form
    placeholder :: String
 
    # optional parameter works in conjunction with the type value 'select'
    options :: [String]
    multi :: Boolean
    tether :: Boolean
 
    # the default ui value
    default-value :: a
 
    # optional parameter, false by default. 
    # A value of true implies that only the transformation and presentaiton function will be executed (no ajax request will be made),
    # whereas a value of false implies that an ajax request will be made to the pipe api server to re-execute the query before running the transformation & presentation functions
    client-side: true
 
    # optional parameter, specifies how to extract the value of the ui-control from the `State`
    # the `State` object is passed as a prop to the `Storyboard` component, 
    # default-implementation = (state) ~> state[name]
    ui-value-from-state :: State -> UIValue
 
    # optional parameter, specifies how to update the state using the new value of the ui-control
    # the result of this function is folded (with the result from other controls) to obtain the full `State` object
    # default implementation = (new-ui-value) ~> "#{name}" : new-ui-value
    state-from-ui-value :: UIValue -> State' 
 
    # optional parameter, specifies how to convert the ui-value into a parameter for the query
    # default implementation = (ui-value) ~> "#{name}" : ui-value
    # the result of this function is folded (with the result from other controls) to obtain the full `Parameters` object
    # example usage: converting between local and gmt timezones
    parameters-from-ui-value :: UIValue -> Parameters', where Parameters' :: Map Name, Value
 
    # optional parameter, allows you to provide a custom implementation for rendering the ui-control, 
    # the default implementation uses a combination of type, placeholder & options props
    render? :: UIValue -> (UIValue -> ()) -> ReactElement
}