Could you please expand the #organizing-options in the API reference doc?

[cpulcini]

In particular, I can't find the documentation to:

1. Organize options in "sub-section" (e.g. Hide Legend and Legend Align, in native Line chart Looker visualization, have a nice "LEGEND---------" above them, making the options inside the Plot section tidier.
2. Make an option appear / disappear depending on a boolean option (e.g., once again the native Line chart, where if Hide Legend is toggled, then the Align Legend disappear).

[cpulcini]

[cpulcini]

And here is where I expected to find that information

https://github.com/looker/custom_visualizations_v2/blob/master/docs/api_reference.md#organizing-options

[RichardCzechowski]

Hey @cpulcini!

I'm going to leave this issue open even after I answer your questions because I think that the core issue here is that our docs for vis config options need a lot of love.

The native looker visualizations, though largely using the same code path as custom vis, use one or two APIs that are not accessible to the custom vis library since we don't run our visualizations inside a sandbox. So in respect to subsections and hiding and showing options, we aren't really eating our own dog food.

But I poked around a bit and I think you can do what you want with the tools we've provided.

1. For subsections the only thing I could think of is very hacky. If you create an option with a label, but give it a "display" property that we don't recognize, it will just fail to render the option except for the label.

2. For hiding and showing we do allow a boolean property called "hidden" which I don't know if we've documented. People typically use it as a way to store arbitrary json on the vis config that doesn't need to be exposed to the user. For your case we just need to be able to toggle "hidden" between true and false for a given option. Since we have the "registerOptions" ability we should be able to watch for a certain value to change and set our "hidden" property accordingly.

I've written an example vis that shows how this works in practice.

looker.plugins.visualizations.add({
  options: {
    // This is the value we'll watch to hide or show our chart type dropdown
    hide_chart_type: {
      type: "boolean",
      label: "flip me to hide the chart type",
      order: 1
    },
    // I've set a divider between the two options with a label
    my_section: {
      type: "string",
      label: "------------ I'm a section -----------",
      display: "divider", // This string is arbitrary it's just choosing an option that doesn't exist
      order: 2
    },
    // We've started this option as hidden and can toggle it on with the above option
    chart_type: {
      type: "string",
      label: "Chart type",
      values: [
        {"Bar": "Bar"},
        {"Line": "Line"},
        {"Pie": "Pie"}
      ],
      display: "radio",
      default: "Bar",
      order: 3,
      hidden: true
    },
  },
  create: function(element, _config) {
       // Set up the initial state of the visualization (noop in this case)
  },
  updateAsync: function(data, element, config, queryResponse, details, done) {
    const options = { ...this.options }
    options.chart_type.hidden = !config.hide_chart_type
    this.trigger('registerOptions', options)

    done()
  }
});