JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

.flow-session-explorer-window{
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  font-family: helvetica;
  font-size: 10px;
}
.flow-session-explorer-window>ul{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  max-height: 80%;
  overflow: auto;
  background-color: #fff;
  transform: translateX(-50%) translateY(-50%);
  list-style: none;
  padding: 30px;
  margin: 0px;
}
.flow-session-explorer-window>ul>h2{
  margin: 0px;
  text-align: center;
}
.flow-session-explorer-window>ul>li{
  margin: 5px;
  padding: 5px;
  border: solid 1px #999;
  border-radius: 6px;
  position: relative;
}
.flow-session-explorer-window>ul>ol{
  list-style: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
  margin-bottom: 10px;
}
.flow-session-explorer-window>ul>ol>li{
  position: relative;
  margin:3px;
  display: inline-block;
  color: #666;
}

.flow-session-explorer-window>ul>ol>li>span{
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 5px;
  text-align: center;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}
.flow-session-explorer-window>ul>ol>li>span:before{
  content: "X";
  color: #fff;
  line-height: 16px;
  font-size: 12px;
}
.flow-session-explorer-window>ul>ol>li>span.started{
  background-color: darkorange;
}
.flow-session-explorer-window>ul>ol>li>span.completed{
  background-color: green;
}
.flow-session-explorer-window>ul>ol>li>span.started:before{
  content: "--";
  line-height: 16px;
  font-size: 12px;
  color: #fff;
}
.flow-session-explorer-window>ul>ol>li>span.completed:before{
  content: "\2713";
  line-height: 16px;
  font-size: 12px;
  color: #fff;
}

.flow-session-explorer-window>ul>li>span{
  position: absolute;
  right: 5px;
  width: 24px;
  height: 24px;
  top: 5px;
  border: solid 1px #000;
 ...

JavaScript

class FlowSessionExplorer {

  constructor(parentElement,flowSession){

    this.flowSession = flowSession;
    this.parentElement = parentElement;
    this.ui;

    this.build();

  }

  build(){

    this.ui = $(`
    <div class="flow-session-explorer-window">
      <ul>
        <h2>In Flow-Session-${this.flowSession}</h2>
        <ol>
          <li><span></span> Not Started</li>
          <li><span class="started"></span> Started</li>
          <li><span class="completed"></span> Completed</li>
        </ol>
      </ul>
    </div>
    `);

    let data = [
  {
    "form_id": "4228",
    "is_chain": false,
    "session_id": "1762272457-839043ab7d42b7af8cde2512c32a1737",
    "assigned_to": null,
    "assigned_by": null,
    "assigned": false,
    "started": false,
    "completed": false,
    "trigger_form": true,
    "form_name": "Live Document Close Session Test",
    "behavior": "live-document",
    "icon": "https://agrisphere-portal.com/clientPortal/assets/icon-library/1759446729grain-bin-barn-01-color.svg"
  },
  {
    "form_id": "977",
    "is_chain": false,
    "session_id": "",
    "assigned_to": "Michael Prosser",
    "assigned_by": "Michael Prosser",
    "assigned": true,
    "started": false,
    "completed": false,
    "trigger_form": false,
    "form_name": "HD Image Test",
    "behavior": "single-submission",
    "icon": "https://agrisphere-portal.com/clientPortal/assets/icon-library/form-traditional-1-orange.svg"
  },
  {
    "form_id": "162",
    "is_chain": true,
    "session_id": "",
    "assigned_to": "Michael Prosser",
    "assigned_by": "Michael Prosser",
    "assigned": true,
    "started": true,
    "completed": false,
    "trigger_form": false,
    "form_name": "Non-Package Chain",
    "behavior": "form-chain",
    "icon": "https://agrisphere-portal.com/clientPortal/assets/icon-library/form-traditional-2-black.svg"
  },
  {
    "form_id": "1062",
    "is_chain":...