🌲 tree widget, for a self referencing table?

[MK_2109]

Can you point me in the direction on how GPT can fix this code?
After 2 hours, Claude and ChatGPT got this far:

doctype html
html(lang="en")
  head
    link(href="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/css/jquery.dataTables.min.css", rel="stylesheet")
    link(href="https://cdn.jsdelivr.net/npm/treetables@1.2.1/tree-table.min.css", rel="stylesheet")
    script(src="/grist-plugin-api.js")
    script(src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js")
    script(type="text/javascript", src="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/js/jquery.dataTables.min.js")
    script(type="text/javascript", src="https://cdn.jsdelivr.net/npm/treetables@1.2.1/treeTable.min.js")
  
  body
    #err
    button#collapse Collapse
    table#tree(style="display:none;")
      thead
        tr#columns
      script.
        const TABLE = "YourTable"
        const COLUMNS = ["description", "customSku", "MfnSku", "MfnName", "qoh", "Price", "upc", "ImageURL"]
        const REF = "MfnName"
        const COLLAPSED = false

        const cols = $("#columns")
        let selected_line

        COLUMNS.forEach(col => cols.append($("<th></th>").text(col)))

        grist.docApi.fetchTable(TABLE).then(data => {
          const tree = data.id.map((id, i) => {
            return {
              tt_key: id,
              tt_parent: data[REF][i],
              ...Object.fromEntries(COLUMNS.map(col => [col, data[col][i]]))
            }
          }).sort((a, b) => {
            if (a.tt_key < b.tt_parent) return -1
            if (a.tt_key > b.tt_parent) return 1
            if (a.tt_parent < b.tt_key) return 1
            if (a.tt_parent > b.tt_key) return -1
            return 0
          })

          try {
            $('#tree').treeTable({
              "data": tree,
              "columns": COLUMNS.map(col => ({ data: col })),
              "order": [[1, "asc"]],
              "collapsed": COLLAPSED,
            }).show()

            const lines = $('#tree').children("tbody").eq(0).children()
            const select_line = (line_id, selected) => {
              if (line_id) {
                selected_line = $(`#${line_id}`)
                if (!selected) grist.setCursorPos({"rowId": parseInt(line_id)})
                lines.css("background-color", "")
                selected_line.css("background-color", "lightgray")
              }
            }

            $(document).keydown((e) => {
              console.log("KEY", e.which)
              if (selected_line) {
                switch (e.which) {
                  case 38: select_line(selected_line.prev()[0].id); break
                  case 40: select_line(selected_line.next()[0].id); break
                  case 37: case 39:
                    if (e.ctrlKey) $('#collapse').trigger("click")
                    else selected_line.children("td.tt-details-control").trigger("click")
                    break
                }
              } else select_line(lines[0].id)
            })

            lines.on('click', (evt) => select_line($(evt.target).parent()[0].id))

            grist.onRecord((rec) => select_line(rec.id, true))

            let collapse, expand
            collapse = () => {
              $('#tree').data('treeTable').collapseAllRows().redraw()
              $('#collapse').html("Expand").on("click", expand)
            }

            expand = () => {
              $('#tree').data('treeTable').expandAllRows().redraw()
              $('#collapse').html("Collapse").on("click", collapse)
            }

            $('#collapse').on("click", collapse)

          } catch (e) {
            console.error(e)
            $('#err').html("Infinite recursion: there should be a chief who doesn’t depend on anyone!")
          }
        })

        grist.onRecords(() => location.reload())

Thank you

[jperon]

Sorry, I never use any GPT engine… But why do you want one in first place? To use Tree widget, you should only have to adapt the TABLE, COLUMNS, REF and COLLAPSED variables:

TABLE: the table name;
COLUMNS: which columns should be shown within the widget;
REF: which field contains the reference to the parent record;
COLLAPSED: wether the view should be collapsed by default.

[Lorenzo_Giraudi]

Hi there, I think the links are broken now. @jperon could you provide a new one? Or now it has been moved somewhere else?

[jperon]

Sorry, it’s quite a while since I last looked at this document… And I’m quite surprised to see that the most part was deleted (Sure, I had made it world-writable…). I don’t have a copy neither of it, nor of the widget itself (as I used something similar to Fiddle widget, whose code is integrated within the document itself). Perhaps @Emanuele_Gissi would have some copy anywhere?

[Lorenzo_Giraudi]

Do you still have a snapshot?
In a previous post you said you retrieved a working version from there

[jperon]

It’s the first thing I checked, but no, sorry: the problem is too old.

[Lorenzo_Giraudi]

Thank you for checking, I appreciate it