app/static/js/editor.js

let uuid = self.crypto.randomUUID();

let infoDialog = document.getElementById("infoDialog")

let myDiv = document.getElementById("myDiv")

function mdColorToPlotly(color) {
  return "rgb(" + color + ")"
}

const example = document.getElementById("baseContainer");
const navigationDrawer = example.querySelector("mdui-navigation-drawer");
const menuIcon = document.getElementById("menuIcon");
const acceptIcon = document.getElementById("acceptIcon")
const infoIcon = document.getElementById("infoIcon")
const splineDegreeSlider = document.getElementById("splineDegreeSlider")
const splinePointsSlider = document.getElementById("splinePointsSlider")
const modelSelector = document.getElementById("modelSelector")
const loadingDialog = document.getElementById("loadingDialog")
const errorDialog = document.getElementById("errorDialog")
const errorDialogAcceptButton = document.getElementById("errorDialogAcceptButton")

const darcySlider = document.getElementById("darcySlider")
const velocitySlider = document.getElementById("velocitySlider")
const angleSlider = document.getElementById("angleSlider")
const defaultSliderValues = { "d": darcySlider.value, "velocity": velocitySlider.value, "angle": angleSlider.value }


let style = getComputedStyle(document.documentElement)
let backgroundColor = mdColorToPlotly(style.getPropertyValue("--mdui-color-background"))
let primaryColor = mdColorToPlotly(style.getPropertyValue("--mdui-color-primary"))
let secondaryColor = mdColorToPlotly(style.getPropertyValue("--mdui-color-inverse-primary"))
let onSurfaceColor = mdColorToPlotly(style.getPropertyValue("--mdui-color-on-surface"))
let gridcolor = mdColorToPlotly(style.getPropertyPriority("--mdui-color-on-surface-variant"))

let curve = new BSpline(splineDegreeSlider.value, new Array(
  new Point(- 0.1, -0.1),
  new Point(-0.1, 0.1),
  new Point(0.1, 0.1),
  new Point(0.1, -0.1),
  new Point(-0.1, -0.1),
  new Point(- 0.1, 0.1)), true)
let nPoints = splinePointsSlider.value

let curveData = curve.getPlotlyCurve(nPoints)
var curveTrace = {
  x: curveData.x,
  y: curveData.y,
  mode: 'lines+markers',
  line: { color: primaryColor },
  fill: "toself"
};


let controlPoints = curve.getPlotlyControlPoints()
var controlTrace = {
  x: controlPoints.x,
  y: controlPoints.y,
  mode: 'markers',
  marker: {
    color: secondaryColor,
    size: 20
  }
}

var layout = {
  xaxis: {
    title: { text: "x" },
    range: [-0.4, 0.6],
    gridcolor: gridcolor,
    zerolinecolor: onSurfaceColor,
    dtick: 0.1
  },
  yaxis: {
    title: { text: "y" },
    range: [-0.3, 0.3],
    gridcolor: gridcolor,
    zerolinecolor: onSurfaceColor,
    dtick: 0.1
  },
  aspectmode: "equal",
  showlegend: false,
  dragmode: false,
  paper_bgcolor: backgroundColor,
  plot_bgcolor: backgroundColor,
  font: {
    color: onSurfaceColor
  }
}

let config = {
  staticPlot: true,
  responsive: true
}

Plotly.newPlot(myDiv, [curveTrace, controlTrace], layout, config)

let curveEditor = new CurveEditor(myDiv, curve, 0.02)

curveEditor.onupdate = function () {
  let curvePoints = curve.getPlotlyCurve(nPoints)
  let curveData = myDiv.data[0]
  curveData.x = curvePoints.x
  curveData.y = curvePoints.y

  let controlData = myDiv.data[1]
  let controlPoints = curve.getPlotlyControlPoints()
  controlData.x = controlPoints.x
  controlData.y = controlPoints.y
  Plotly.redraw('myDiv')
}

document.getElementById("infoDialogAcceptButton").addEventListener("click", () => {
  infoDialog.open = false
  curveEditor.enabled = true
})

if (sessionStorage.getItem("isFirstLaunch") == null) {
  infoDialog.open = true
  curveEditor.enabled = false
  sessionStorage.setItem("isFirstLaunch", "false")
}

infoIcon.addEventListener("click", () => {
  infoDialog.open = true
  curveEditor.enabled = false
})

menuIcon.addEventListener("click", () => {
  navigationDrawer.open = true
  curveEditor.enabled = false
});

navigationDrawer.addEventListener("close", () => curveEditor.enabled = true)

errorDialog.addEventListener("closed", () => { curveEditor.enabled = true })

errorDialogAcceptButton.addEventListener("click", () => {
  errorDialog.open = false
})

splinePointsSlider.addEventListener("input", () => {
  nPoints = splinePointsSlider.value
  curveEditor.onupdate()
})

splineDegreeSlider.addEventListener("change", () => {
  let cPoints = curve.controlPoints
  cPoints.splice(-curve.degree)

  let newDegree = splineDegreeSlider.value
  for (let i = 0; i < newDegree; i++)
    cPoints.push(JSON.parse(JSON.stringify(cPoints[i])))

  curve = new BSpline(newDegree, cPoints, curve.closed)
  curveEditor.curve = curve
  curveEditor.onupdate()
})

modelSelector.addEventListener("change", (event) => {
  let isPipnSelected = event.target.value.includes("pipn")
  darcySlider.disabled = isPipnSelected
  angleSlider.disabled = isPipnSelected
  velocitySlider.disabled = isPipnSelected

  if (isPipnSelected) {
    darcySlider.value = defaultSliderValues.d
    angleSlider.value = defaultSliderValues.angle
    velocitySlider.value = defaultSliderValues.velocity
  }
})

acceptIcon.addEventListener("click", async () => {
  curveEditor.enabled = false
  loadingDialog.open = true

  let body = {
    "uuid": uuid,
    model: modelSelector.value.toLowerCase(),
    points: curve.getPlotlyCurve(nPoints),
    d: darcySlider.value,
    inlet_angle: angleSlider.value,
    inlet_u: velocitySlider.value
  }

  let response = await fetch("predict",
    {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    })

  let data = await response.json()

  if (response.status >= 300) {
    loadingDialog.open = false

    let errorListener = function () {
      errorDialog.open = true
      loadingDialog.removeEventListener("closed", errorListener)
    }

    loadingDialog.addEventListener("closed", errorListener)
  }
  else {
    sessionStorage.setItem("data", JSON.stringify(data))

    window.frameElement.src = "inference.html"

    loadingDialog.open = false
    curveEditor.enabled = true
  }
})