function/static/js/mithril/FunctionHistory.js

const FunctionHistory = {
  oninit: function (vnode) {
    const versions = vnode.attrs.versions;
    vnode.state.mode = "view"; // 'view' or 'diff'
    vnode.state.selectedVersion = versions[0];
    vnode.state.leftVersion = versions.length > 1 ? versions[1] : versions[0];
    vnode.state.rightVersion = versions[0];
    vnode.state.editor = null;
    vnode.state.aceDiffer = null;
  },

  view: function (vnode) {
    const { versions } = vnode.attrs;
    const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;

    return m(".flex.flex-col.md:flex-row.h-full", [
      // Vertical Timeline
      m(".w-full.md:w-64.border-b.md:border-r.md:border-b-0.overflow-y-auto", [
        m("div.p-4.border-b.flex.justify-between.items-center", [
          m("h3.text-lg.font-semibold", "History"),
          m(
            "button.text-sm.bg-gray-200.hover:bg-gray-300.text-gray-800.font-semibold.py-1.px-2.rounded",
            {
              onclick: () => {
                vnode.state.mode = mode === "view" ? "diff" : "view";
              },
            },
            mode === "view" ? "Compare" : "View"
          ),
        ]),
        m(
          "ul.p-2",
          versions.map((version) => {
            const isActive =
              selectedVersion &&
              version.version_number === selectedVersion.version_number;
            return m(
              "li.p-2.cursor-pointer",
              {
                class: isActive
                  ? "bg-gray-200 rounded"
                  : "hover:bg-gray-100 rounded",
                onclick: () => {
                  vnode.state.selectedVersion = version;
                  if (mode === "diff") {
                    vnode.state.rightVersion = version;
                  }
                },
              },
              [
                m("div.font-bold", `Version ${version.version_number}`),
                m(
                  "div.text-sm.text-gray-600",
                  new Date(version.versioned_at).toLocaleString()
                ),
              ]
            );
          })
        ),
      ]),

      // Code Viewer or Differ
      m(".flex-1.p-4", [
        mode === "view"
          ? m("div", [
              m(
                "h3.text-lg.font-semibold.mb-2",
                `Version ${selectedVersion.version_number}`
              ),
              m("div#editor-history", { style: "height: 600px;" }),
            ])
          : m("div", [
              m(".flex.flex-col.md:flex-row.gap-4.mb-4", [
                m(".flex-1", [
                  m("label.block.text-sm.font-medium.text-gray-700", "Left"),
                  m(
                    "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
                    {
                      onchange: (e) =>
                        (vnode.state.leftVersion = versions.find(
                          (v) => v.version_number == e.target.value
                        )),
                      value: leftVersion.version_number,
                    },
                    versions.map((v) =>
                      m(
                        "option",
                        { value: v.version_number },
                        `Version ${v.version_number}`
                      )
                    )
                  ),
                ]),
                m(".flex-1", [
                  m("label.block.text-sm.font-medium.text-gray-700", "Right"),
                  m(
                    "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
                    {
                      onchange: (e) =>
                        (vnode.state.rightVersion = versions.find(
                          (v) => v.version_number == e.target.value
                        )),
                      value: rightVersion.version_number,
                    },
                    versions.map((v) =>
                      m(
                        "option",
                        { value: v.version_number },
                        `Version ${v.version_number}`
                      )
                    )
                  ),
                ]),
              ]),
              m("#diff-container", { style: "height: 600px;" }),
            ]),
      ]),
    ]);
  },

  oncreate: function (vnode) {
    this.updateEditorOrDiffer(vnode);
  },

  onupdate: function (vnode) {
    this.updateEditorOrDiffer(vnode);
  },

  updateEditorOrDiffer: function (vnode) {
    const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;

    if (mode === "view") {
      if (vnode.state.aceDiffer) {
        vnode.state.aceDiffer.destroy();
        vnode.state.aceDiffer = null;
      }
      if (!vnode.state.editor) {
        vnode.state.editor = ace.edit("editor-history");
        vnode.state.editor.setTheme("ace/theme/monokai");
        vnode.state.editor.session.setMode("ace/mode/javascript");
        vnode.state.editor.setReadOnly(true);
      }
      vnode.state.editor.setValue(selectedVersion.script, -1);
    } else {
      // diff mode
      if (vnode.state.editor) {
        vnode.state.editor.destroy();
        vnode.state.editor = null;
      }
      if (vnode.state.aceDiffer) {
        vnode.state.aceDiffer.destroy();
      }
      vnode.state.aceDiffer = new AceDiff({
        element: "#diff-container",
        mode: "ace/mode/javascript",
        left: { content: leftVersion.script, editable: false },
        right: { content: rightVersion.script, editable: false },
      });
    }
  },

  onremove: function (vnode) {
    if (vnode.state.editor) {
      vnode.state.editor.destroy();
    }
    if (vnode.state.aceDiffer) {
      vnode.state.aceDiffer.destroy();
    }
  },
};