@yuneta/gobj-ui 7.23.43 → 7.23.45

package/src/c_g6_nodes_tree.js

@@ -3348,6 +3348,25 @@ function create_popover_base(left, top, className, borderColor, minWidth)
         'min-width:' + minWidth + 'px;font-size:13px;';
     popover.addEventListener('click', (e) => e.stopPropagation());
     popover.addEventListener('pointerdown', (e) => e.stopPropagation());
+    /*
+     *  AND THE WHEEL, or a popover that overflows cannot be scrolled with
+     *  the wheel at all -- the scrollbar has to be dragged.
+     *
+     *  G6's zoom behavior binds a wheel listener on the CONTAINER and
+     *  calls preventDefault() on every notch, whatever the target is;
+     *  then it declines to zoom because the target is not the canvas. So
+     *  the gesture is cancelled and nobody uses it: the graph does not
+     *  zoom AND the box does not scroll. Measured on a live node: with
+     *  the popover overflowing (scrollHeight 674 over 357 visible),
+     *  scrollTop stayed at 0 and the zoom readout stayed at 50%.
+     *
+     *  Stopping it here -- in the bubble phase, where the click and the
+     *  pointerdown above are already stopped -- is enough: G6 sees
+     *  nothing and the browser scrolls the box normally. Not
+     *  preventDefault: cancelling it ourselves would be the same bug
+     *  from our side.
+     */
+    popover.addEventListener('wheel', (e) => e.stopPropagation());
     return popover;
 }
 
@@ -5492,6 +5511,9 @@ function show_node_detail_popover(gobj, node_id)
     popover.style.maxWidth = '320px';
     popover.style.maxHeight = '60%';
     popover.style.overflow = 'auto';
+    /*  The sticky head spans the full width, so the side padding moves
+     *  to the rows; `create_popover_base` put 12px on the box itself. */
+    popover.style.padding = '0 12px 12px';
     popover.style.fontFamily =
         "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, " +
         "Helvetica, Arial, sans-serif";
@@ -5514,29 +5536,33 @@ function show_node_detail_popover(gobj, node_id)
             vs = vs.slice(0, 240) + '…';
         }
         rows +=
-            `<div style="display:flex;gap:10px;padding:5px 0;` +
-            `border-top:1px solid ${rowbd};">` +
-            `<div style="flex:0 0 38%;color:${sub};font-size:12px;` +
-            `word-break:break-word;">${escapeHtml(key)}</div>` +
-            `<div style="flex:1 1 auto;font-size:12px;` +
-            `word-break:break-word;">${escapeHtml(vs)}</div>` +
+            `<div class="g6-detail-row" style="border-top:1px solid ${rowbd};">` +
+            `<div class="g6-detail-key" style="color:${sub};">` +
+            `${escapeHtml(key)}</div>` +
+            `<div class="g6-detail-val">${escapeHtml(vs)}</div>` +
             `</div>`;
     }
 
+    /*
+     *  The head is STICKY: the box scrolls, and with the head scrolling
+     *  away the ✕ left the screen -- on a phone, where the box is most
+     *  of the screen, that is a popover you cannot close without
+     *  scrolling back up for the button. Its background is the
+     *  popover's own, or the rows would show through it.
+     */
     popover.innerHTML =
-        `<div style="display:flex;align-items:flex-start;gap:8px;` +
-        `margin-bottom:6px;">` +
+        `<div class="g6-detail-head" style="background:${bg};">` +
             `<div style="flex:1 1 auto;min-width:0;">` +
-                `<div style="font-size:14px;font-weight:600;` +
-                `word-break:break-word;">${escapeHtml(id)}</div>` +
-                `<div style="font-size:11px;color:${sub};` +
-                `margin-top:2px;">${escapeHtml(topic)}</div>` +
+                `<div class="g6-detail-id">${escapeHtml(id)}</div>` +
+                `<div class="g6-detail-topic" style="color:${sub};">` +
+                `${escapeHtml(topic)}</div>` +
             `</div>` +
-            `<div class="g6-detail-close" style="flex:0 0 auto;` +
-            `cursor:pointer;font-size:16px;line-height:1;` +
-            `color:${sub};padding:0 2px;">×</div>` +
+            `<div class="g6-detail-close" role="button" tabindex="0"` +
+            ` aria-label="${escapeHtml(t('close'))}"` +
+            ` title="${escapeHtml(t('close'))}"` +
+            ` style="color:${sub};">×</div>` +
         `</div>` +
-        (rows || `<div style="font-size:12px;color:${sub};">` +
+        (rows || `<div class="g6-detail-empty" style="color:${sub};">` +
             `${escapeHtml(t('no fields'))}</div>`);
 
     let close_el = popover.querySelector('.g6-detail-close');

package/src/c_yui_form.js

@@ -71,6 +71,7 @@ import "tabulator-tables/dist/css/tabulator.min.css"; // Import Tabulator CSS
 import "tabulator-tables/dist/css/tabulator_bulma.css";
 
 import "./tabulator.css";
+import {is_time_field} from "./json_view_helpers.js";
 import { TabulatorFull as Tabulator } from "tabulator-tables"; // Import Full Tabulator JS
 // import { Tabulator } from "tabulator-tables";  // Import light Tabulator JS
 
@@ -1365,12 +1366,12 @@ function create_form_field(
                     onChange: function() {
                         gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
                     },
+                    /*  La lista vive en json_view_helpers.js: el visor de
+                     *  JSON y este editor tienen que reconocer los MISMOS
+                     *  campos, y tener cada uno su copia es como dejaron de
+                     *  hacerlo.  */
                     timestampTag: function({field, value, path}) {
-                        return field === '__t__' || field === '__tm__' ||
-                            field === 'tm' || field === 't' || field === 'time' ||
-                            field === 'from_t' || field === 'to_t' ||
-                            field === 't_input' || field === 't_output' ||
-                            field === 'from_tm' || field === 'to_tm';
+                        return is_time_field(field);
                     },
                 }
             });

package/src/json_view_helpers.js

@@ -183,18 +183,34 @@ export function subtree_matches(value, term)
 
 /************************************************************
  *   Fields whose numeric value is an epoch timestamp.
- *   Mirrors the timestampTag list wired into C_YUI_FORM's
- *   jsoneditor control, so the two viewers agree.
+ *
+ *   THE ONE LIST.  C_YUI_FORM's jsoneditor takes its
+ *   `timestampTag` from here: it used to carry its own copy,
+ *   and a copy is how the two stopped agreeing.
+ *
+ *   TWO SPELLINGS, AND LAS DOS SON DEL BACKEND.  timeranger2
+ *   writes `from_t`/`from_tm` in the match_cond of a query and
+ *   `fr_t`/`fr_tm` in the metadata of a topic and of a file --
+ *   which is what a Raw JSON of a treedb actually shows.  With
+ *   only the long pair listed, `to_t` got its date and the
+ *   `fr_t` right above it did not, which reads as a broken
+ *   annotator rather than a missing name.
  ************************************************************/
+const TIME_FIELDS = [
+    "__t__", "__tm__",
+    "t", "tm", "time",
+    "from_t", "to_t", "from_tm", "to_tm",
+    "fr_t", "fr_tm",
+    "t_input", "t_output"
+];
+
 export function is_time_field(field)
 {
-    return field === "__t__" || field === "__tm__" ||
-        field === "tm" || field === "t" || field === "time" ||
-        field === "from_t" || field === "to_t" ||
-        field === "t_input" || field === "t_output" ||
-        field === "from_tm" || field === "to_tm";
+    return TIME_FIELDS.indexOf(field) >= 0;
 }
 
+export {TIME_FIELDS};
+
 /************************************************************
  *   Format an epoch value as a local wall-clock string.
  *   Accepts seconds or milliseconds; returns null when the

package/src/json_view_helpers.test.js

@@ -310,3 +310,36 @@ test("is_pure_collection: the schema this came from", () => {
     /*  A column has content, so it keeps its card. */
     expect(is_pure_collection(col)).toBe(false);
 });
+
+
+/*
+ *  DOS ORTOGRAFIAS, Y LAS DOS SON DEL BACKEND.
+ *
+ *  timeranger2 escribe `from_t`/`from_tm` en el match_cond de una consulta y
+ *  `fr_t`/`fr_tm` en los metadatos de un topic y de un fichero -- que es lo
+ *  que enseña el Raw JSON de un treedb.  Con solo la larga en la lista,
+ *  `to_t` salia fechado y el `fr_t` de encima no: se lee como un anotador
+ *  roto y es un nombre que falta.
+ */
+test("is_time_field reconoce la abreviada, la que sale en un Raw JSON", () => {
+    expect(is_time_field("fr_t")).toBe(true);
+    expect(is_time_field("fr_tm")).toBe(true);
+});
+
+test("is_time_field sigue reconociendo la larga, la de las consultas", () => {
+    expect(is_time_field("from_t")).toBe(true);
+    expect(is_time_field("from_tm")).toBe(true);
+});
+
+test("is_time_field: las dos mitades de cada par, o la fila queda a medias", () => {
+    [["fr_t", "to_t"], ["fr_tm", "to_tm"],
+     ["from_t", "to_t"], ["from_tm", "to_tm"]].forEach((pair) => {
+        expect(is_time_field(pair[0])).toBe(is_time_field(pair[1]));
+    });
+});
+
+test("is_time_field no fecha lo que no es una fecha", () => {
+    ["rows", "id", "", undefined, null].forEach((f) => {
+        expect(is_time_field(f)).toBe(false);
+    });
+});

package/src/lib_graph.css

@@ -111,6 +111,116 @@
     background-color: var(--bulma-background, #fff);
 }
 
+/*
+ *  THE NODE DETAIL POPOVER.
+ *
+ *  Sizes live here and not in the inline styles that build it, for one
+ *  reason: a media query cannot reach an inline style, and this box is
+ *  read on a phone as much as on a desk.
+ *
+ *  12px was the size of the rows and 11px of the topic. That is caption
+ *  size, and this popover exists ONLY to be read -- it is the record of
+ *  a node, field by field. Same reasoning as the context menu below:
+ *  12px is a caption, not content.
+ */
+.graph-container .g6-detail-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    /*  Sticky, so the ✕ never scrolls off a box that is most of the
+     *  screen on a phone.  The 12px of side padding the popover used to
+     *  carry moved to the rows, so the head reaches its edges. */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 12px 0 6px;
+}
+
+.graph-container .g6-detail-id {
+    font-size: 15px;
+    font-weight: 600;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-topic {
+    font-size: 12px;
+    margin-top: 2px;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-row {
+    display: flex;
+    gap: 10px;
+    padding: 6px 0;
+}
+
+.graph-container .g6-detail-key,
+.graph-container .g6-detail-val,
+.graph-container .g6-detail-empty {
+    font-size: 13px;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-key {
+    flex: 0 0 38%;
+}
+
+.graph-container .g6-detail-val {
+    flex: 1 1 auto;
+}
+
+/*
+ *  The close button was a 13x16 box: a glyph with 2px of side padding
+ *  and nothing else. That is a mouse target on a good day and not a
+ *  finger target on any. It is a real box now, and a square one, so the
+ *  ✕ has somewhere to be.
+ */
+.graph-container .g6-detail-close {
+    flex: 0 0 auto;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: -4px -4px 0 0;
+    border-radius: 4px;
+}
+
+.graph-container .g6-detail-close:hover {
+    background: var(--bulma-background, rgba(128, 128, 128, 0.15));
+}
+
+/*
+ *  A finger, and the rule the context menu below already follows: the
+ *  target grows to something a thumb hits, and the text to something
+ *  read at arm's length.
+ */
+@media (pointer: coarse) {
+    .graph-container .g6-detail-close {
+        width: 44px;
+        height: 44px;
+        font-size: 22px;
+        margin: -8px -8px 0 0;
+    }
+    .graph-container .g6-detail-id {
+        font-size: 16px;
+    }
+    .graph-container .g6-detail-topic {
+        font-size: 13px;
+    }
+    .graph-container .g6-detail-key,
+    .graph-container .g6-detail-val,
+    .graph-container .g6-detail-empty {
+        font-size: 14px;
+    }
+    .graph-container .g6-detail-row {
+        padding: 8px 0;
+    }
+}
+
 /*
  *  G6 toolbar: larger icons (via className option)
  */