final version of html/json

data/smallhyperbolicgrp.jl

@@ -55,6 +55,15 @@ function _sanitize_group_name(s::AbstractString)
     return s
 end
 
+function _delatexify(dict)
+    map(dict) do (key, val)
+        key = _sanitize_group_name(key)
+        key = replace(key, r"_{(\d+)}"=>s"\1")
+        key = replace(key, "{}^"=>"")
+        key => val
+    end |> Dict
+end
+
 function TriangleGrp(half_girth_type::NTuple{3,Int}, generators, relations, nt::NamedTuple)
     # @assert fieldnames(SmallHyperbolicGrp) == propertynames(nt)
     hyperbolic, witness = _ishyperbolic(half_girth_type, nt)
@@ -134,6 +143,8 @@ function show_json(io::StructuralContext, ::TriangleGrpSerialization, G::Triangl
         D[fname] = getfield(G, fname)
     end
     D[:L2_quotients_utf8] = _to_utf8.(D[:L2_quotients])
-    D[:quotients_utf8] = [Pair(_to_utf8(k), v) for (k,v) in D[:quotients]]
+    D[:quotients_utf8] = Dict(_to_utf8(k) => v for (k,v) in D[:quotients])
+    D[:quotients_plain] =  _delatexify(D[:quotients])
+    D[:quotients] = Dict(D[:quotients])
     return show_json(io, StandardSerialization(), D)
 end

docs/create_table.js

@@ -0,0 +1,125 @@
+function columnName(key) {
+    let words = key.split("_");
+    for (let i = 0; i < words.length; i++) {
+        words[i][0] = words[i][0].toUpperCase();
+    }
+    return words.join(" ");
+}
+
+function generateTableHead(table, keys) {
+    let thead = table.createTHead();
+    let row = thead.insertRow();
+    for (let key of keys) {
+        let th = document.createElement("th");
+        let text = document.createTextNode(columnName(key));
+        th.appendChild(text);
+        row.appendChild(th);
+    }
+}
+
+function createDetails(object, summary_text = "show…", open = false) {
+    let details = document.createElement("details");
+
+    let summary = document.createElement("summary");
+    summary.textContent = summary_text;
+
+    details.appendChild(summary);
+    details.appendChild(object);
+    return details;
+}
+
+function createListFromJson(json, ismath = false) {
+    let list = document.createElement("ul");
+    for (let [k, v] of Object.entries(json)) {
+        let item = document.createElement("li");
+        if (ismath) {
+            let math = createMathSpan(k + " : " + v);
+            item.appendChild(math);
+        } else {
+            item.innerText = k + " : " + v;
+        }
+        list.appendChild(item);
+    }
+    return list
+}
+
+function createSpansFromArray(arr, ismath = false) {
+    let list = document.createElement("span");
+    if (arr == null) {
+        return list;
+    }
+    for (let i = 0; i < arr.length; i++) {
+        let item;
+        if (ismath) {
+            item = createMathSpan(arr[i]);
+        } else {
+            item = document.createElement("span");
+            item.innerText = String(arr[i]);
+        }
+
+        list.appendChild(item);
+        if (i != arr.length - 1) {
+            let comma = document.createElement("span");
+            comma.innerText = ", ";
+            list.appendChild(comma);
+        }
+    }
+    return list;
+}
+
+function fillRow(row, group_json) {
+    for (let key of Object.keys(group_json)) {
+        let cell = row.insertCell();
+        let cell_content;
+        let val = group_json[key];
+        switch (key) {
+            case "name":
+                cell_content = createMathSpan(val);
+                break;
+            case "quotients":
+                cell_content = createDetails(createListFromJson(val, ismath = true));
+                break;
+            case "quotients_utf8":
+                cell_content = createDetails(createListFromJson(val));
+                break;
+            case "quotients_plain":
+                cell_content = createListFromJson(val);
+                break;
+            case "generators":
+                cell_content = createSpansFromArray(val,);
+                break;
+            case "relations":
+                cell_content = createDetails(createSpansFromArray(val, ismath = true));
+                break;
+            case "witnesses_non_hyperbolictity":
+                cell_content = createSpansFromArray(val, ismath = true);
+                break;
+            case "L2_quotients":
+                cell_content = createSpansFromArray(val, ismath = true);
+                break;
+            case "alternating_quotients":
+                cell_content = createDetails(createSpansFromArray(val));
+                break;
+            default:
+                cell_content = document.createTextNode(val);
+        }
+        cell.appendChild(cell_content);
+    }
+    return row
+}
+
+function fillTableFromJson(table, json) {
+    let keys = Object.keys(json[0]);
+    for (let group of json) {
+        let row = table.insertRow();
+        fillRow(row, group);
+    }
+    generateTableHead(table, keys);
+}
+
+async function setup_table(data) {
+    let table = document.querySelector("table");
+    fillTableFromJson(table, data);
+    console.log("created table of length " + table.rows.length);
+    return table;
+}

docs/data.js

@@ -1,171 +0,0 @@
-const groups_url = new URL("https://raw.githubusercontent.com/kalmarek/SmallHyperbolic/mk/json/data/triangle_groups.json")
-
-async function fetch_json(url) {
-    try {
-        let response = await fetch(url);
-        let json = await response.json();
-        return json;
-    } catch(err) {
-        console.log("Error while fetching json:" + err);
-    }
-}
-
-function filter_group_json(obj) {
-    for (let key of Object.keys(obj)) {
-        if (key.match(/utf8/) != null) {
-            delete obj[key];
-        }
-    }
-    return obj
-}
-
-function columnName(key) {
-    let words = key.split("_");
-    for (let i = 0; i < words.length; i++) {
-        words[i][0].toUpperCase();
-    }
-    return words.join(" ");
-}
-
-function generateTableHead(table, keys) {
-    let thead = table.createTHead();
-    let row = thead.insertRow();
-    for (let key of keys) {
-//         if (key.match("utf8") != null) { continue; }
-        let th = document.createElement("th");
-        let text = document.createTextNode(columnName(key));
-        th.appendChild(text);
-        row.appendChild(th);
-    }
-}
-
-function fillRow(row, group_json) {
-    for (let key of Object.keys(group_json)) {
-        let cell = row.insertCell();
-        let cell_content;
-        // swtich(key){
-        let value = group_json[key]
-        if (key == "quotients" || key == "quotients_utf8") {
-            cell_content = JSON.stringify(value);
-        } else if (key == "name") {
-            cell_content = value
-        } else if ( key == "generators" || key == "relations") {
-            cell_content = value.join(",");
-        } else {
-            cell_content = group_json[key];
-        }
-        let text = document.createTextNode(cell_content);
-        cell.appendChild(text);
-    }
-}
-
-function fillTableFromJson(table, json) {
-    for (let i=0; i<json.length; i++) {
-        json[i] = filter_group_json(json[i]);
-    }
-    let keys = Object.keys(json[0]);
-    for (let group of json) {
-        let row = table.insertRow();
-        fillRow(row, group);
-    }
-    generateTableHead(table, keys);
-}
-
-function rerender_with_katex(elt) {
-    let txt = elt.textContent;
-    if (txt != null && txt != ""  && txt != "null") {
-        let txt = elt.textContent
-            .replace(/\*/g, "")
-            .replace(/-1/g, "{-1}")
-            .replace(/inf/g, "\\infty")
-            ;
-        katex.render(txt, elt);
-    }
-}
-
-function rerender_columns_katex(table, columns = [
-        "name",
-        "generators",
-        "relations",
-        "witnesses non hyperbolictity",
-        "L2 quotients",
-    ]) {
-    let header = table.rows[0];
-    let column_indices = [];
-
-    for (let col_idx = 0; col_idx < header.cells.length; col_idx++) {
-        let label = header.cells[col_idx].textContent;
-        let found = columns.indexOf(label);
-        if (found >= 0) {
-            column_indices.push(col_idx);
-            columns.splice(found, 1);
-        }
-    }
-
-    if (columns.length != 0) {
-        console.log("In Katexify: some columns were not found! " + columns);
-    }
-
-    for (let col_idx of column_indices) {
-        // we're skipping the header row
-        for (let row of table.rows) {
-            if ( row == header ) { continue; }
-            rerender_with_katex(row.cells[col_idx]);
-        }
-    }
-
-    return table
-}
-
-const filtersConfig = {
-    base_path: 'tablefilter/',
-    auto_filter: {
-                    delay: 400
-                },
-    filters_row_index: 1,
-    highlight_keywords: true,
-    responsive: true,
-    state: true,
-    sticky_headers: true,
-    // popup_filters: true,
-    no_results_message: true,
-    alternate_rows: true,
-    mark_active_columns: true,
-    rows_counter: true,
-    btn_reset: true,
-    status_bar: true,
-    msg_filter: 'Filtering...',
-    extensions: [{
-        name: 'colsVisibility',
-        at_start: [2,4,5,6,7,15],
-        text: 'Hidden Columns: ',
-        enable_tick_all: true
-    }, {
-        name: 'sort'
-    }]
-};
-
-async function setup_table(data) {
-    fillTableFromJson(table, data);
-    console.log("created table of length " + table.rows.length);
-    return table;
-}
-async function setup_filter(table) {
-    console.log("filtered table of length " + table.rows.length);
-    const filter = new TableFilter(table, filtersConfig);
-    filter.init();
-    return filter;
-}
-
-let table = document.querySelector("table");
-
-let filtered_table = fetch_json(groups_url)
-    .then(setup_table)
-    .then(setup_filter)
-;
-
-let button = document.getElementById("katexify");
-button.addEventListener("click", ()=>{
-    rerender_columns_katex(table);
-    button.disabled = true;
-});

docs/details.css

@@ -0,0 +1,26 @@
+details {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: .4em .4em 0;
+    align-content: center;
+}
+
+summary {
+    font-weight: bold;
+    margin: -0.4em -.2em 0;
+    padding: .0em;
+    display: revert;
+}
+
+details[open] {
+    padding: .5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: .5em;
+}
+
+.math-tex {
+    display: none;
+}

docs/filter_table.js

@@ -0,0 +1,34 @@
+const filtersConfig = {
+    base_path: 'tablefilter/',
+    auto_filter: {
+                    delay: 400
+                },
+    filters_row_index: 1,
+    highlight_keywords: true,
+    responsive: true,
+    state: true,
+    sticky_headers: true,
+    // popup_filters: true,
+    no_results_message: true,
+    alternate_rows: true,
+    mark_active_columns: true,
+    rows_counter: true,
+    btn_reset: true,
+    status_bar: true,
+    msg_filter: 'Filtering...',
+    extensions: [{
+        name: 'colsVisibility',
+        at_start: [1,3,5,6,7,8,18,19,20,21],
+        text: 'Hidden Columns: ',
+        enable_tick_all: true
+    }, {
+        name: 'sort'
+    }]
+};
+
+async function setup_filter(table) {
+    console.log("filtered table of length " + table.rows.length);
+    const filter = new TableFilter(table, filtersConfig);
+    filter.init();
+    return filter;
+}

docs/index.html

@@ -6,7 +6,7 @@
         <title>Generalized Triangle Groups</title>
 
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
+        <link rel="stylesheet" href="details.css">
 
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
             integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">
@@ -26,13 +26,25 @@
                 Generalized Triangle Groups of <a href="https://arxiv.org/abs/2011.09276">2011.09276</a>
             </h3>
             by Pierre-Emmanuel Caprace, Marston Conder, Marek Kaluba and Stefan Witzel.
-            <br>
+
-            <button type="button" id="katexify">Katexify!</button>
+            <div class="form-check">
-            <table id='GeneralizedTriangleGroups' border=0 class="dataframe"></table>
+                <input class="form-check-input" type="checkbox" value="" id="renderWithKatex">
+                <label class="form-check-label" for="renderWithKatex">
+                    Render with KaTeX
+                </label>
+            </div>
+
+            <div>
+                <table id='GeneralizedTriangleGroups' border=0 class="table"></table>
+            </div>
         </div>
     </body>
 
-    <script src="tablefilter/tablefilter.js"></script>
+    <script type="text/javascript" src="tablefilter/tablefilter.js"></script>
-    <script src="data.js"></script>
+
+    <script type="text/javascript" src="math_render.js"></script>
+    <script type="text/javascript" src="create_table.js"></script>
+    <script type="text/javascript" src="filter_table.js"></script>
+    <script type="text/javascript" src="main.js"></script>
 
 </html>

docs/main.js

@@ -0,0 +1,15 @@
+const groups_url = new URL("https://raw.githubusercontent.com/kalmarek/SmallHyperbolic/mk/json/data/triangle_groups.json")
+
+async function fetch_json(url) {
+    try {
+        let response = await fetch(url);
+        let json = await response.json();
+        return json;
+    } catch (err) {
+        console.log("Error while fetching json:" + err);
+    }
+}
+let table = fetch_json(groups_url)
+    .then(setup_table)
+    .then(setup_filter)
+    ;

docs/math_render.js

@@ -0,0 +1,55 @@
+function prepareTextForKatex(string) {
+    return string.replace(/ /g, "")
+        .replace(/\*/g, "")
+        .replace(/\^-1/g, "^{-1}")
+        .replace(/inf/g, "\\infty");
+}
+
+function createMathSpan(content) {
+    let item = document.createElement("span");
+    item.className = "math";
+
+    let math_text = document.createElement("span");
+    let math_tex = document.createElement("span");
+
+    math_text.className = "math-text";
+    math_text.innerText = content.toString().replace(/\*/g, "").replace(/ /g, "")
+
+    math_tex.className = "math-tex";
+    katex.render(prepareTextForKatex(math_text.innerText), math_tex);
+
+    item.appendChild(math_text);
+    item.appendChild(math_tex);
+
+    return item;
+}
+
+function toggleKaTeX(elt, toggle) {
+    let display_text = toggle ? "none" : "revert";
+    let display_tex = toggle ? "revert" : "none";
+    for (let child of elt.childNodes) {
+        switch (child.className) {
+            case "math-text":
+                child.style.display = display_text;
+                break;
+            case "math-tex":
+                child.style.display = display_tex;
+                break;
+            default:
+            // nothing
+        }
+    }
+}
+
+let math_objects = document.getElementsByClassName("math");
+let katex_switch = document.getElementById("renderWithKatex");
+katex_switch.checked = false;
+katex_switch.addEventListener(
+    "change",
+    function () {
+        let toggle = this.checked;
+        for (let element of math_objects) {
+            toggleKaTeX(element, toggle);
+        }
+    }
+);