DORIS ICD-API Visualization Sample

ICD-API DORIS samples in Vanilla JavaScript

This project is a sample case scenario showing how to use the DORIS system through the ICD-API and how to transform the output into multiple visualizations.

The example demonstrates how to:

• Send a JSON death certificate payload to the ICD API endpoint for DORIS.
• Retrieve the tabularReport (CSV) from the API response.
• Parse the report and generate three different outputs:
  1. Tabular Report – CSV data parsed and displayed as an HTML table.
  2. Rule Flow Report – rendered as a Mermaid flowchart.
  3. Rule Sequence Report – rendered as a Mermaid sequence diagram.

---

Project Files

• sample.html
  Main HTML file with UI:

  • JSON request body input area
  • Buttons to call the API, load examples, and render outputs
  • Containers for the Flowchart, Sequence Diagram, and Tabular table
  • Integration with Mermaid

• report-mermaid.js
  JavaScript utilities that:

  • Parse the CSV tabularReport returned by the API
  • Define the Report structure and helpers
  • Generate Mermaid-compatible strings for flowchart and sequence diagrams

---

Workflow

1. Input
   Paste or load a JSON death certificate payload.

2. API Call

   • The proper way to use the ICD-API endpoint is by first fetching an OAuth2 token from the WHO Identity Server and then sending the authorized request.
   • In this sample, for demonstration purposes, the call is made directly against the developer test API endpoint.
   • The response includes JSON with a tabularReport.

3. Parsing

   • The CSV tabularReport is parsed into structured JavaScript objects.

4. Visualizations

   • Table: renders selected columns directly in HTML.
   • Flow: uses generateMermaidFlow to output Mermaid flowchart syntax.
   • Sequence: uses generateMermaidSequence to output Mermaid sequence diagram syntax.
   • Both diagrams are rendered into SVG via Mermaid.

---

Mermaid Integration

The sample shows how to import and initialize Mermaid:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script> mermaid.initialize({ startOnLoad: false, theme: 'default' }); </script>

When a visualization is generated:

1. A Mermaid diagram string is produced (e.g., graph TD ... or sequenceDiagram ...).
2. The string is injected into the HTML container.
3. Mermaid renders the diagram into an interactive SVG.

---

Notes

• This project is for demonstration and testing.
• Direct calls to the WHO OAuth2 server from the browser may fail due to CORS.
  In production, use a backend proxy to handle token requests securely.
• ICD content from the developer test server may not be complete or up to date.

---

References

• DORIS system documentation
• ICD API
• Mermaid.js