skymass-analyst-ui-1.js

import { SkyMass } from "@skymass/skymass";

const sm = new SkyMass({ key: "XXX" });

sm.page("/hello_world", (ui) => {
  const name = ui.string("name", {
    label: "Please type your name",
  });

  ui.show(`Hello, ${name.val || "World"}!`);
});


sm.page("/guis", async (ui) => {
  // ~ means blank column.  So {company} is taking up 1/3 of the full width
  ui.md`
  {company} ~ ~
  {text} {fields}
  `;

  ui.select("company", { options: "Apple,Google,Microsoft".split(",") });

  ui.region("text", (ui) => {
    // need to load the text dynamically from somewhere.
    // eg: const text = await fetch(...);
    // ui.show(text);
    ui.show(`Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut 
    labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat.`);
  });

  ui.region("fields", (ui) => {
    const list = Array(10).fill(0);
    // data is 10 element array like: [ { text:..., metric:..., value:...}, ...]
    const data = list.map((i) => {
      // ui.record's .val is going to be { text:..., metric:..., value: ... }
      const row = ui.record(
        "x" + i, // we need a unique key for each record
        {
          text: ui.string("text"),
          metric: ui.select("metric", { options: "A,B,C".split(",") }),
          value: ui.string("value"),
        },
        {
          // we are saying put each fields next to each other in a row
          display: md`{text} {metric} {value}`,
        }
      );
      // returning ui.record's val
      return row.val;
    });
    if (ui.button("save", { label: "Save" }).didClick) {
      // do something with data
      ui.toast("Saved!");
    }
  });
  
});