openobserve/web/src/composables/useStickyColumns.ts

// Copyright 2026 OpenObserve Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { chartColor } from "@/utils/chartTheme";

export function useStickyColumns(props: any, store: any) {
  const stickyColumnOffsets = ref<{ [key: string]: number }>({});
  let styleElement: HTMLStyleElement | null = null;
  // Unique ID to scope injected CSS so multiple panels don't override each other
  const tableId = `sticky-${Math.random().toString(36).slice(2)}`;

  // Watch for columns changes to update sticky offsets
  watch(
    () => props.columns,
    (columns: any[]) => {
      const offsets: { [key: string]: number } = {};
      let cumulativeWidth = 0;

      if (columns) {
        columns.forEach((col: any, idx: number) => {
          // Add index attribute for CSS targeting
          col.__colIndex = idx;

          if (col.sticky) {
            offsets[col.name] = cumulativeWidth;
            cumulativeWidth += col.width ? parseInt(String(col.width)) : 100;
          }
        });
      }

      stickyColumnOffsets.value = offsets;
    },
    { immediate: true, deep: true },
  );

  const getStickyColumnStyle = (column: any) => {
    if (!column?.sticky) return {};

    // Get the precomputed left offset for this column
    const leftOffset = stickyColumnOffsets.value[column.name] ?? 0;

    return {
      position: "sticky",
      left: `${leftOffset}px`,
      "z-index": 2,
      "background-color": chartColor("--color-surface-base"),
      "box-shadow": "var(--shadow-sticky-left)",
    };
  };

  const updateStickyColumnStyles = () => {
    // Remove old style element if it exists
    if (styleElement?.parentNode) {
      styleElement.parentNode.removeChild(styleElement);
    }

    // Create new style element with current offsets
    styleElement = document.createElement("style");
    styleElement.setAttribute("data-sticky-styles", "true");

    const columns = (props.columns || []) as any[];
    const bgColor = chartColor("--color-surface-base");
    let css = "";

    const stickyColTotals = !!props.stickyColTotals;
    const TOTAL_COL_WIDTH = 150;

    const scope = `.my-sticky-virtscroll-table[data-sticky-id="${tableId}"]`;

    // Shadow constants — right-sticky uses inset shadow to match TableRenderer scoped style
    const shadowRight = "var(--shadow-sticky-left)";
    const shadowLeft = "var(--shadow-sticky-right)";
    const shadowBoth = `${shadowRight}, ${shadowLeft}`;

    // Generate CSS rules for each column position
    columns.forEach((col: any, colIndex: number) => {
      if (col.sticky) {
        const offset = stickyColumnOffsets.value[col.name] ?? 0;
        // Left-sticky: shadow on right. If also right-sticky (middle column), shadow on both.
        const shadow = col._isTotalColumn ? shadowBoth : shadowRight;
        css += `
          ${scope} thead tr th:nth-child(${colIndex + 1}) {
            position: sticky !important;
            left: ${offset}px !important;
            z-index: 4 !important;
            background-color: var(--color-sticky-col-header-bg) !important;
            box-shadow: ${shadow} !important;
          }
          ${scope} tbody td:nth-child(${colIndex + 1}).sticky-column {
            left: ${offset}px !important;
          }
        `;
      }

      // Right-sticky total columns (for standard single-row headers)
      if (stickyColTotals && col._isTotalColumn) {
        const rightOffset = (col._totalColRightIndex ?? 0) * TOTAL_COL_WIDTH;
        // Right-sticky: shadow on left. If also left-sticky (middle column), shadow on both.
        const shadow = col.sticky ? shadowBoth : shadowLeft;
        css += `
          ${scope} thead tr:first-child th:nth-child(${colIndex + 1}) {
            position: sticky !important;
            right: ${rightOffset}px !important;
            z-index: 4 !important;
            min-width: ${TOTAL_COL_WIDTH}px !important;
            background-color: var(--color-sticky-col-header-bg) !important;
            box-shadow: ${shadow} !important;
          }
        `;
      }
    });

    // Add base styling for all sticky columns
    css =
      `
      /* Left-sticky body cells: shadow on right */
      ${scope} tbody td.sticky-column {
        position: sticky !important;
        z-index: 2 !important;
        box-shadow: var(--shadow-sticky-left) !important;
      }

      /* Right-sticky total column body cells: shadow on the left edge. The
         original drew an INSET shadow inside the column; the token casts
         outward onto the scrolling cells instead. Same boundary, opposite
         side, and it matches what OTable's sticky cells already do. */
      ${scope} tbody td.pivot-total-col {
        position: sticky !important;
        z-index: 2 !important;
        background-color: ${bgColor} !important;
        box-shadow: var(--shadow-sticky-right) !important;
      }

      /* Middle sticky body cells: outward on both edges */
      ${scope} tbody td.sticky-column.pivot-total-col {
        box-shadow: var(--shadow-sticky-left), var(--shadow-sticky-right) !important;
      }

      /* Sticky total row (bottom sticky). --shadow-sticky-footer, NOT
         --shadow-scroll-bottom: a pinned footer casts OUTWARD and UPWARD onto
         the rows it overlaps. scroll-bottom is an INSET bottom-edge gradient
         meaning "content continues below" — a different affordance entirely. */
      ${scope}.pivot-sticky-totals .pivot-sticky-total-row td {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        background-color: ${bgColor} !important;
        font-weight: bold !important;
        box-shadow: var(--shadow-sticky-footer) !important;
      }

      /* Corner: sticky total row + sticky total column intersection */
      ${scope}.pivot-sticky-totals .pivot-sticky-total-row td.pivot-total-col {
        z-index: 5 !important;
      }

      /* Column-specific positions for headers and body cells */
    ` + css;

    styleElement.textContent = css;
    document.head.appendChild(styleElement);
  };

  // Watch sticky column offsets and update styles
  watch(() => stickyColumnOffsets.value, updateStickyColumnStyles, {
    deep: true,
  });

  // Watch theme changes and update styles
  watch(() => store.state.theme, updateStickyColumnStyles);

  onMounted(() => {
    // Defer to next frame so the synchronous style injection from the watch
    // chain (which already ran during setup) doesn't invalidate the style cache
    // right before other code reads layout properties (e.g. getRect).
    requestAnimationFrame(() => {
      updateStickyColumnStyles();
    });
  });

  onBeforeUnmount(() => {
    if (styleElement?.parentNode) {
      styleElement.parentNode.removeChild(styleElement);
    }
  });

  return {
    stickyColumnOffsets,
    getStickyColumnStyle,
    tableId,
  };
}