Integrate reporting on Awatif

[madil4]

Similar to what we have done for the truss designer:

Requirements

• Should be generic
• Should have a simple example in the examples page
• Should have inputs such as the html template and the reactive data so that the report is rerendered each time the data changes
• Should render math formulas as we did before in the truss designer

[madil4]

1. Add a report example to the examples folder

// in examples/src/report/main.ts 

// Define the report function, which takes any data as input (in this case, the nodes) and outputs the TemplateResult type, as shown below:
const template: (nodes: Structure["nodes"]) => TemplateResult = (nodes) => {
  return html`<p>Number of nodes: ${nodes.val.length}</p>`;
};

// Then, when creating the viewer element, add the report along with the data used so the report can render it.
document.body.append(
  viewer({
    structure: {
      nodes,
      elements,
    },
    report: {
      template: template,
      data: nodes,
    },
  })
);

2. Extend the viewer object to accept the two inputs defined above

// in awatif-ui/src/viewer/viewer.ts 

export function viewer({
  structure,
  settingsObj,
  objects3D,
  drawingObj,
  reportObj,
}: {
  structure?: Structure;
  settingsObj?: SettingsObj;
  objects3D?: State<THREE.Object3D[]>;
  drawingObj?: Drawing;
  reportObj: {
    template: (data: object) => HTMLDivElement;
    data: object;
  };
}) {
  // Append the report function to the viewer element
  if (reportObj) viewerElm.appendChild(report(reportObj));
}

3. Create the report function to generate the report and canvas

// in awatif-ui/src/viewer/report/report.ts

export function report({
  template,
  data,
}: {
  template: (data: object) => HTMLDivElement;
  data: object;
}): HTMLElement {
  // Create a container element where you can append two elements: Button and Dialog
  const container = document.createElement("div"); // Refer to the settings element to see how to style with CSS (awatif-ui/src/viewer/setting/)

  // Create the Button and Dialog, then append them to the container
  // Refer to the old implementation to see how these elements were created: https://github.com/madil4/awatif/blob/3cb79f5b01c056ee6b18960bf657a027041a8ba2/awatif-ui/src/report.ts
  
  // Create an event handler; on each data change, it will render the elements
  van.derive(() => {
    render(template(data), dialogBodyElm.value);
  });

  return container;
}

Notes

• These are the main ideas and structure. You can use them as a starting point to make the implementation fully functional.
• Feel free to ask any questions if you need further clarification.