Generalizable creation of reactive inputs and their selected values

[jwilber]

Problem Description

I'm trying to create a generalizable way to generate both input elements and their corresponding reactive selected values in Observable Framework. The goal is to avoid manually declaring each input and its associated reactive value, especially when dealing with a large number of inputs that follow a pattern. In other words, I'd like to generalize the creation of e.g. drop downs for different dashboards.

Current Approach

Currently, I have to manually create each input and its corresponding reactive value like this:

const Pipeline1_ISL_OSL = Inputs.select(["value1", "value2"], {
  label: "ISL_OSL",
  value: null
});
const selectedPipeline1ISL_OSL = Generators.input(Pipeline1_ISL_OSL);

const Pipeline1_Concurrency = Inputs.select(["value1", "value2"], {
  label: "Concurrency",
  value: null
});
const selectedPipeline1Concurrency = Generators.input(Pipeline1_Concurrency);

// ... and so on for each input

What I Tried

I attempted to create a more general solution using an object to store the inputs and their selected values:

const columns = ["ISL_OSL", "Concurrency", "GPU", "Inference_Library", "Precision", "NUM_GPU"];

const pipeline1Inputs = Object.fromEntries(
  columns.map((column) => {
    const key = `Pipeline1-${column}`;
    const values = [null, ...new Set(dataPipeline1.map((d) => d[column.toLowerCase()]))];
    return [
      key,
      Inputs.select(values, {
        value: null,
        label: "",
        multiple: false,
      }),
    ];
  })
);

const selectedValues = {};
columns.forEach((column) => {
  selectedValues[`selectedPipeline1${column}`] = Generators.input(pipeline1Inputs[`Pipeline1-${column}`]);
});

Using this setup, I can correctly render things via:

const pipelineDropdowns = html`
  <div>
    ${Object.entries(pipeline1Inputs).map(
      ([key, input]) => html`
        <div>
          <label>${key}</label>
          ${input}
        </div>
      `
    )}
  </div>
`;

const currentValues = html`
  <div>
    ${Object.entries(selectedValues).map(
      ([key, value]) => html`<div>${key}: ${value}</div>`
    )}
  </div>
`;

However, the values never resolve:

selectedConcurrency: [object AsyncGenerator]

Triggering reactivity via a direct assignment will work, e.g.:

const selectedGPU = selectedValues["selectedPipeline1GPU"];

But of course, this doesn't 'generalize', as I'd need to create a separate selected<Value> for every input.

I also tried using a class to create attributes dynamically, but I'm unsure if this maintains reactivity correctly in Observable Framework.

Is there an approach I'm completely neglecting, or am I just trying to use Observable's reactivity incorrectly.

Thanks for any help/insight!

[Fil]

Have you tried Inputs.form? I think this would be the place to start.

[jwilber]

Thanks! This, indeed, solved the issue.

For any future readers, here's an outline of my generalized solution:

const columns = [...]

function createInputs(pipelineData, pipelineNumber) {
  return Object.fromEntries(
    columns.map((column) => {
      const key = `Pipeline${pipelineNumber}-${column}`;
      const values = [
        null,
        ...new Set(pipelineData.map((d) => d[column.toLowerCase()])),
      ];
      return [
        key,
        Inputs.select(values, {
          value: null,
          multiple: false,
        }),
      ];
    })
  );
}

function createPipelineForm(pipelineData, pipelineNumber) {
  return Inputs.form(createInputs(pipelineData, pipelineNumber), {
    template: (inputs) => html`
      <div
        class="grid grid-rowspan-1"
        style="grid-template-columns: repeat(${Object.keys(inputs)
          .length}, minmax(0,1fr))"
      >
        ${Object.entries(inputs).map(
          ([key, input]) => html`
            <div>
              <label class="pipeline-dropdown">${key}</label>
              ${input}
            </div>
          `
        )}
      </div>
    `,
  });
}
// create inputs and dropdowns
const pipeline1Form = createPipelineForm(dataPipeline1, 1);
const pipeline1FormValues = Generators.input(pipeline1Form);