@gemx-dev/clarity-visualize 0.8.46 → 0.8.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.46",
+  "version": "0.8.48",
   "description": "Clarity visualize",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "unpkg": "build/clarity.visualize.min.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@gemx-dev/clarity-decode": "^0.8.46"
+    "@gemx-dev/clarity-decode": "^0.8.48"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",
@@ -21,7 +21,6 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.1.0",
     "rollup": "^3.0.0",
-    "ts-node": "^10.1.0",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   },

package/src/custom/README.md

@@ -0,0 +1,60 @@
+# Custom Clarity Visualize Modules
+
+This directory contains custom rendering modules that extend the base Clarity visualization for GemX.
+
+## Structure
+
+All custom modules follow the functional module pattern:
+- Pure functions for testability
+- No side effects in utility functions
+- Clear separation of concerns
+- Type-safe interfaces
+
+## Modules
+
+### Dialog Module (`dialog.ts`)
+
+Renders HTML `<dialog>` elements with proper top-layer and backdrop support.
+
+**Functions:**
+
+- `getDialogRenderOptions(attributes, dialogElement)` - Extracts rendering options from attributes
+- `showDialog(dialogElement, isModal, onError)` - Shows dialog with proper modal/non-modal handling
+- `closeDialog(dialogElement)` - Safely closes a dialog
+- `renderDialog(dialogElement, options, onError)` - Main entry point for dialog rendering
+- `cleanDialogAttributes(attributes)` - Removes internal tracking attributes
+
+**Usage:**
+
+```typescript
+import * as dialogCustom from "./custom/dialog";
+
+const renderOptions = dialogCustom.getDialogRenderOptions(node.attributes, dialogElement);
+node.attributes = dialogCustom.cleanDialogAttributes(node.attributes);
+
+dialogCustom.renderDialog(
+    dialogElement,
+    renderOptions,
+    this.state.options.logerror
+);
+```
+
+**Features:**
+
+- Automatic detection of modal vs non-modal dialogs
+- Proper top-layer rendering via `showModal()`
+- Backdrop support for modal dialogs
+- Handles dialogs already open from HTML attributes
+- Error handling and logging
+
+## Adding New Custom Modules
+
+1. Create a new file in this directory (e.g., `my-feature.ts`)
+2. Follow the functional module pattern
+3. Export functions with clear type signatures
+4. Add exports to `index.ts`
+5. Document the module in this README
+
+## Testing
+
+Custom modules should be unit tested separately from the main Clarity codebase.

package/src/custom/dialog.ts

@@ -0,0 +1,129 @@
+/**
+ * Custom module for rendering HTML Dialog elements
+ * Handles proper visualization of modal dialogs in the top-layer
+ */
+
+export interface DialogRenderOptions {
+    isModal: boolean;
+    shouldBeOpen: boolean;
+    isExistingDialog: boolean;
+}
+
+/**
+ * Extracts dialog rendering options from node attributes
+ *
+ * @param attributes - Node attributes containing dialog state
+ * @param dialogElement - The dialog element being rendered
+ * @returns Dialog render options
+ */
+export function getDialogRenderOptions(
+    attributes: { [key: string]: string },
+    dialogElement: HTMLDialogElement | null
+): DialogRenderOptions {
+    return {
+        isModal: attributes["data-clarity-modal"] === "true",
+        shouldBeOpen: attributes["open"] !== undefined,
+        isExistingDialog: !!dialogElement
+    };
+}
+
+/**
+ * Shows a dialog element with proper modal/non-modal handling
+ * Modal dialogs are shown via showModal() to render in top-layer with backdrop
+ * Non-modal dialogs are shown via show() method
+ *
+ * @param dialogElement - The dialog element to show
+ * @param isModal - Whether this is a modal dialog
+ * @param onError - Optional error callback
+ */
+export function showDialog(
+    dialogElement: HTMLDialogElement,
+    isModal: boolean,
+    onError?: (error: Error) => void
+): void {
+    try {
+        if (!dialogElement.isConnected) {
+            console.warn('⚠️ Dialog not connected to DOM, skipping show');
+            return;
+        }
+
+        // IMPORTANT: If dialog is already open (from HTML attribute),
+        // we need to close and reopen to ensure showModal() is called
+        // and dialog enters top-layer properly
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+
+        if (isModal) {
+            dialogElement.showModal();
+        } else {
+            dialogElement.show();
+        }
+    } catch (e) {
+        console.error('❌ Error showing dialog:', e);
+        if (onError) {
+            onError(e as Error);
+        }
+    }
+}
+
+/**
+ * Closes a dialog element safely
+ *
+ * @param dialogElement - The dialog element to close
+ */
+export function closeDialog(dialogElement: HTMLDialogElement): void {
+    try {
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+    } catch (e) {
+        console.warn('⚠️ Error closing dialog:', e);
+    }
+}
+
+/**
+ * Handles dialog rendering based on its state
+ * This is the main entry point for dialog rendering logic
+ *
+ * @param dialogElement - The dialog element to render
+ * @param options - Dialog render options
+ * @param onError - Optional error callback
+ */
+export function renderDialog(
+    dialogElement: HTMLDialogElement,
+    options: DialogRenderOptions,
+    onError?: (error: Error) => void
+): void {
+    const { isModal, shouldBeOpen, isExistingDialog } = options;
+
+    if (shouldBeOpen) {
+        const doShow = () => showDialog(dialogElement, isModal, onError);
+
+        if (isExistingDialog) {
+            // Dialog already exists, call immediately
+            doShow();
+        } else {
+            // New dialog, wait for DOM insertion
+            setTimeout(doShow, 0);
+        }
+    } else if (dialogElement.open) {
+        // Dialog should be closed
+        closeDialog(dialogElement);
+    }
+}
+
+/**
+ * Removes custom tracking attributes before rendering
+ * These attributes are only for internal use
+ *
+ * @param attributes - Attributes object to clean
+ * @returns Cleaned attributes
+ */
+export function cleanDialogAttributes(
+    attributes: { [key: string]: string }
+): { [key: string]: string } {
+    const cleaned = { ...attributes };
+    delete cleaned["data-clarity-modal"];
+    return cleaned;
+}

package/src/custom/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Custom modules for GemX Clarity Visualize extensions
+ * Contains custom rendering logic that extends the base Clarity visualization
+ */
+
+export * from "./dialog";

package/src/heatmap.ts

@@ -20,7 +20,7 @@ export class HeatmapHelper {
         this.state = state;
         this.layout = layout;
     }
-
+    
     public reset = (): void => {
         this.data = null;
         this.scrollData = null;
@@ -43,7 +43,7 @@ export class HeatmapHelper {
         }
     }
 
-    public clear = (): void => {
+    public clear = () : void => {
         let doc = this.state.window.document;
         let win = this.state.window;
         let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
@@ -68,8 +68,8 @@ export class HeatmapHelper {
         let doc = this.state.window.document;
         var body = doc.body;
         var de = doc.documentElement;
-        var height = Math.max(body.scrollHeight, body.offsetHeight,
-            de.clientHeight, de.scrollHeight, de.offsetHeight);
+        var height = Math.max( body.scrollHeight, body.offsetHeight, 
+            de.clientHeight, de.scrollHeight, de.offsetHeight );
         canvas.height = Math.min(height, Setting.ScrollCanvasMaxHeight);
         canvas.style.top = 0 + Constant.Pixel;
         if (canvas.width > 0 && canvas.height > 0) {
@@ -148,7 +148,7 @@ export class HeatmapHelper {
                 // For each pixel, we have 4 entries in data array: (r,g,b,a)
                 // To pick the right color from gradient pixels, we look at the alpha value of the pixel
                 // Alpha value ranges from 0-255
-                let alpha = pixels.data[i + 3];
+                let alpha = pixels.data[i+3];
                 if (alpha > 0) {
                     let offset = (alpha - 1) * 4;
                     pixels.data[i] = gradient.data[offset];
@@ -177,7 +177,7 @@ export class HeatmapHelper {
             win.addEventListener("scroll", this.redraw, true);
             win.addEventListener("resize", this.redraw, true);
             this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
-
+            
             if (this.observer) { this.observer.observe(doc.body); }
         }
 
@@ -253,7 +253,7 @@ export class HeatmapHelper {
                 let v = this.visible(el, r, height);
                 // Process clicks for only visible elements
                 if (this.max === null || v) {
-                    for (let i = 0; i < element.points; i++) {
+                    for(let i = 0; i < element.points; i++) {
                         let x = Math.round(r.left + (element.x[i] / Data.Setting.ClickPrecision) * r.width);
                         let y = Math.round(r.top + (element.y[i] / Data.Setting.ClickPrecision) * r.height);
                         let k = `${x}${Constant.Separator}${y}${Constant.Separator}${v ? 1 : 0}`;
@@ -281,7 +281,8 @@ export class HeatmapHelper {
         let doc: Document | ShadowRoot = this.state.window.document;
         let visibility = r.height > height ? true : false;
         if (visibility === false && r.width > 0 && r.height > 0) {
-            while (!visibility && doc) {
+            while (!visibility && doc)
+            {
                 let shadowElement = null;
                 let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
                 for (let e of elements) {

package/src/layout.ts

@@ -5,6 +5,7 @@ import { StyleSheetOperation } from "@gemx-dev/clarity-js/types/layout";
 import { AnimationOperation } from "@gemx-dev/clarity-js/types/layout";
 import { Constant as LayoutConstants } from "@gemx-dev/clarity-js/types/layout";
 import sharedStyle from "./styles/shared.css";
+import * as dialogCustom from "./custom/dialog";
 
 /* BEGIN blobUnavailableSvgs */
 import blobUnavailableSvgEnglish from "./styles/blobUnavailable/english.svg";
@@ -452,6 +453,38 @@ export class LayoutHelper {
                     this.setAttributes(iframeElement, node);
                     insert(node, parent, iframeElement, pivot);
                     break;
+                case "SCRIPT":
+                    {
+                        node.id = -1; // We want to ensure children of script tags are not processed
+                        node.value = null; // We don't want to set any potential script content
+                        this.insertDefaultElement(node, parent, pivot, doc, insert);
+                        break;
+                    }
+                case "DIALOG":
+                    {
+                        // Use custom module for dialog rendering
+                        let dialogElement = this.element(node.id) as HTMLDialogElement;
+                        dialogElement = dialogElement ? dialogElement : this.createElement(doc, node.tag) as HTMLDialogElement;
+                        if (!node.attributes) { node.attributes = {}; }
+
+                        // Extract render options before cleaning attributes
+                        const renderOptions = dialogCustom.getDialogRenderOptions(node.attributes, dialogElement);
+
+                        // Clean custom tracking attributes
+                        node.attributes = dialogCustom.cleanDialogAttributes(node.attributes);
+
+                        // Set attributes and insert into DOM
+                        this.setAttributes(dialogElement, node);
+                        insert(node, parent, dialogElement, pivot);
+
+                        // Render dialog with proper modal/non-modal handling
+                        dialogCustom.renderDialog(
+                            dialogElement,
+                            renderOptions,
+                            this.state.options.logerror
+                        );
+                        break;
+                    }
                 default:
                     this.insertDefaultElement(node, parent, pivot, doc, insert);
                     break;
@@ -634,7 +667,7 @@ export class LayoutHelper {
                             node.setAttribute(Constant.Hide, size);
                         }
                     } else {
-                        node.setAttribute(attribute, v);
+                        node.setAttribute(attribute, this.isSuspiciousAttribute(attribute, v) ? Constant.Empty : v);
                     }
                 } catch (ex) {
                     console.warn("Node: " + node + " | " + JSON.stringify(attributes));
@@ -663,6 +696,23 @@ export class LayoutHelper {
         }
     }
 
+    private isSuspiciousAttribute(name: string, value: string): boolean {
+        // Block event handlers entirely
+        if (name.startsWith('on')) {
+            return true;
+        }
+        
+        // Check for JavaScript protocols and dangerous patterns
+        const dangerous = [
+            /^\s*javascript:/i,
+            /^\s*data:text\/html/i,
+            /^\s*vbscript:/i
+        ];
+        
+        return dangerous.some(pattern => pattern.test(value));
+    }
+
+
     private getMobileCustomStyle = (): string => {
         if(this.isMobile){
             return `*{scrollbar-width: none; scrollbar-gutter: unset;};`

package/src/styles/shared.css

@@ -3,4 +3,22 @@ iframe[data-clarity-unavailable-small], iframe[data-clarity-unavailable], img[da
     border-style: dashed;
     border-width: 6px;
     border-color: #827DFF;
+}
+
+/* Dialog top-layer styles */
+/* Ensure modal dialogs appear in the top-layer with proper z-index */
+dialog[open] {
+    /* Modal dialogs shown via showModal() are automatically placed in top-layer by the browser */
+    /* This ensures proper stacking even during replay */
+    z-index: auto;
+}
+
+/* Style the backdrop for modal dialogs */
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+/* Ensure non-modal dialogs (shown via show()) are positioned correctly */
+dialog:not([open]) {
+    display: none;
 }

package/tsconfig.json

@@ -1,15 +1,6 @@
 {
+    "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "module": "esnext",
-        "target": "es6",
-        "lib": ["es6", "dom", "es2016", "es2017"],
-        "moduleResolution": "node",
-        "forceConsistentCasingInFileNames": true,
-        "noImplicitReturns": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
         "baseUrl": ".",
         "paths": {
             "@src/*": ["src/*"],

package/types/visualize.d.ts

@@ -199,7 +199,7 @@ export const enum Constant {
     NewPassword = "new-password",
     StyleSheet = "stylesheet",
     OriginalBackgroundColor = "data-clarity-background-color",
-    OriginalOpacity = "data-clarity-opacity"
+    OriginalOpacity = "data-clarity-opacity",
 }
 
 export const enum Setting {