// USE ONE FROM lifelib-to-calculang

REACTIVE FORMULAS:

REACTIVE INPUTS:

Fizz Buzz

💡 Click/drag to see & highlight workings

const spec = ({
  // vega-lite
    encoding: {
    x: { field: 'formula', type: 'nominal', "axis": {"labelAngle": -30, "orient": "top", title:null, "labelLimit": 300, labelFontSize: 16} },
    y: { field: 'i_in'/*, axis: {titleFontSize:20, labelFontSize: 30, } */ },
    color: {field: 'value', legend: false},
    text: {field: 'value', /*, format:',.2f'*/},
    size: {value: 12}
  },
  layer: [

    {
      mark: {type:'text', fontWeight:'bold', dx:2, dy:2},
      transform: [{filter: "datum.highlight"}],
      encoding: {
            size: {value: 15},
        color: {value:'yellow'}
      }
    },
    {
      mark: {type:'text', tooltip:false, from: 'data'},
            //transform: [{filter: "!datum.current"}], // messes selection; better out or using conditional size
      encoding: {
        size: { value: 16, condition: {test: 'datum.current', value: 1} }
      },
        params: [
    {
      name: "formula",
      //value: { ray_angle_in: 0 },
      select: {
        type: "point",
        //on: "mousemove{0,50}",
        on: "[touchdown, touchup] > touchmove, mouseup, touchup, [mousedown, mouseup] > mousemove",
        //on: "[touchdown, touchup] > touchmove, [mousedown, mouseup] > mousemove", //{10, 100}",
        //        on: "[mousedown, mouseup] > mousemove",
        nearest: true,
        toggle: false,
        clear: false,
        encodings: ["x", "y"]
      }
    }
  ]

    },
    {
      mark: {type:'text', fontWeight:'bold', dx:0, dy:0},
      transform: [{filter: "datum.current"}],
      encoding: {
        color: {value:'black'},
        size: {value: 20}
      }
    },
  ],

  data: { name: "data" },
  autosize: { "type": "fit", "contains": "padding"},
  // no reactive w/h due to https://github.com/observablehq/framework/issues/1194
  width: 450,//Math.min(500,content_width-30),//Math.min(400,content_width),
  height: 600,//Math.min(500,content_width-30)/1.2,//Math.min(400,content_width-30),
  background:'rgba(0,0,0,0)',
})

// interactivity via vega signals and listeners
const viz = embed('#viz', spec)

// is this data_source_with_highlights data flow ok ... ?
viz.view.data("data", data_source_with_highlights).resize().run(); // turn off resize

const data_source = calcuvegadata({
  models: [model],
  spec,
  domains: {
    formula: formulae_not_inputs,
    i_in: _.range(1,31),
  },
  input_cursors: [
    cursor
  ]
})

viz.view.addSignalListener("formula", (a, b) => {
  // no modularity here:
  //const newScope = +(fns_fromDefinition.find(d => (d.cul_scope_id == 0 && d.name == b.formula[0])).fromDefinition.split('_')[0])
  //if (newScope !== editor.scope)
    //editor.setScope(+(fns_fromDefinition.find(d => (d.cul_scope_id == 0 && d.name == b.formula[0])).fromDefinition.split('_')[0]))
  setCursor('i_in', b.i_in[0])
  setFormula(b.formula[0])
  set_formulae_visible([b.formula[0]])
  document.querySelector('.calculang_f_'+b.formula[0]).scrollIntoView(scrollIntoViewOpts)
});