Spaces:

mr4
/

model-explorer

Running

App Files Files Community

mr4 commited on Apr 25

Commit

8ff6981

verified ·

1 Parent(s): 9bd422a

Upload 65 files

Browse files

Files changed (4) hide show

css/styles.css +114 -0
index.html +10 -1
js/app.js +7 -0
js/ui/printHandler.js +320 -0

css/styles.css CHANGED Viewed

@@ -31,6 +31,12 @@ body {
 header {
     box-shadow: var(--shadow);
     margin-bottom: 2rem;
 }
 header .navbar-brand {
@@ -188,3 +194,111 @@ header .navbar-brand {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }

 header {
     box-shadow: var(--shadow);
     margin-bottom: 2rem;
+    z-index: 1030;
+}
+/* Offset body content below the fixed header */
+body {
+    padding-top: 56px;
 }
 header .navbar-brand {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+/* Print Header - hidden in normal view */
+.print-header {
+    display: none;
+}
+/* Print Styles */
+@media print {
+    /* Hide navbar header */
+    header.navbar {
+        display: none !important;
+    }
+    /* Hide left sidebar */
+    .col-lg-3.col-md-4 {
+        display: none !important;
+    }
+    /* Main content takes full width */
+    .col-lg-9.col-md-8 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    /* Hide hidden panels */
+    .hidden {
+        display: none !important;
+    }
+    /* Remove box-shadow and hover effects */
+    .card,
+    .card:hover,
+    .btn,
+    .btn:hover,
+    .list-group-item,
+    .list-group-item:hover {
+        box-shadow: none !important;
+        transform: none !important;
+    }
+    /* White background, black text */
+    body {
+        background-color: #fff;
+        color: #000;
+    }
+    /* Page-break for cards */
+    .card {
+        page-break-inside: avoid;
+        break-inside: avoid;
+    }
+    /* Show print header */
+    .print-header {
+        display: block;
+        font-size: 1.5rem;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    /* Hide interactive buttons not needed in print */
+    #graphExportContainer,
+    .fullscreen-btn,
+    #fullscreenBtn,
+    #sidebarToggleBtn,
+    #copyLinkBtn,
+    #uploadBtn,
+    #exportBtn,
+    #printBtn,
+    .graph-controls,
+    .graph-search-container,
+    .graph-layout-switcher,
+    .node-grouping-controls,
+    .graph-annotation-controls,
+    .minimap-container,
+    .guided-tour-btn,
+    #tourBtn {
+        display: none !important;
+    }
+    /* Graph container: allow auto height for print image */
+    #graphContainer {
+        height: auto !important;
+        overflow: visible !important;
+        border: none !important;
+    }
+    /* Static graph image */
+    #graph-print-image {
+        max-width: 100%;
+        height: auto;
+        display: block !important;
+        page-break-inside: avoid;
+        break-inside: avoid;
+    }
+    /* Graph card: allow page break and full width for graph column */
+    .col-md-8:has(#graphContainer) {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    /* Hide node detail panel in print (it's beside the graph) */
+    .col-md-4:has(#nodeDetailContainer) {
+        display: none !important;
+    }
+}

index.html CHANGED Viewed

@@ -22,7 +22,7 @@
 <body>
     <div id="app" class="container-fluid">
         <!-- Header -->
-        <header class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
             <div class="container-fluid">
                 <a class="navbar-brand" href="#">
                     <i class="fas fa-cube"></i> ONNX Model Explorer
@@ -37,10 +37,16 @@
                     <button id="exportBtn" class="btn btn-success btn-sm" disabled>
                         <i class="fas fa-download"></i> Export
                     </button>
                 </div>
             </div>
         </header>
         <!-- Main Content -->
         <div class="row">
             <!-- Left Sidebar -->
@@ -231,6 +237,9 @@
     <script src="js/ui/tfliteViewer.js"></script>
     <script src="js/ui/conversionGuideManager.js"></script>
     <!-- 8. Application integration hub (depends on everything above) -->
     <script src="js/app.js"></script>
 </body>

 <body>
     <div id="app" class="container-fluid">
         <!-- Header -->
+        <header class="navbar navbar-expand-lg navbar-dark bg-dark mb-4 fixed-top">
             <div class="container-fluid">
                 <a class="navbar-brand" href="#">
                     <i class="fas fa-cube"></i> ONNX Model Explorer
                     <button id="exportBtn" class="btn btn-success btn-sm" disabled>
                         <i class="fas fa-download"></i> Export
                     </button>
+                    <button id="printBtn" class="btn btn-outline-light btn-sm ms-2" disabled>
+                        <i class="fas fa-print"></i> Print PDF
+                    </button>
                 </div>
             </div>
         </header>
+        <!-- Print Header - only visible in @media print -->
+        <div id="print-header" class="print-header" aria-hidden="true"></div>
         <!-- Main Content -->
         <div class="row">
             <!-- Left Sidebar -->
     <script src="js/ui/tfliteViewer.js"></script>
     <script src="js/ui/conversionGuideManager.js"></script>
+    <!-- 7e. Print Handler -->
+    <script src="js/ui/printHandler.js"></script>
     <!-- 8. Application integration hub (depends on everything above) -->
     <script src="js/app.js"></script>
 </body>

js/app.js CHANGED Viewed

@@ -44,6 +44,7 @@
     let safeTensorsViewer = null;
     let tfliteParser = null;
     let tfliteViewer = null;
     // ─── Performance: In-Memory Parsed Model Cache ────────────────────────────
     // Keyed by model path; avoids re-parsing the same model on repeated selection.
@@ -301,6 +302,11 @@
             tfliteViewer = new window.TFLiteViewer('modelDetailsContainer');
         }
         // Subscribe ModelListDisplay to filteredModelList changes
         if (modelListDisplay && window.StateManager) {
             window.StateManager.subscribe('filteredModelList', function (filteredList) {
@@ -927,6 +933,7 @@
         getSafeTensorsViewer: () => safeTensorsViewer,
         getTFLiteParser:      () => tfliteParser,
         getTFLiteViewer:      () => tfliteViewer,
         getParsedModelCache:  () => _parsedModelCache,
         clearParsedModelCache:() => _parsedModelCache.clear(),
         _pendingZoom: null,

     let safeTensorsViewer = null;
     let tfliteParser = null;
     let tfliteViewer = null;
+    let printHandler = null;
     // ─── Performance: In-Memory Parsed Model Cache ────────────────────────────
     // Keyed by model path; avoids re-parsing the same model on repeated selection.
             tfliteViewer = new window.TFLiteViewer('modelDetailsContainer');
         }
+        // PrintHandler
+        if (window.PrintHandler) {
+            printHandler = new window.PrintHandler('printBtn', 'print-header');
+        }
         // Subscribe ModelListDisplay to filteredModelList changes
         if (modelListDisplay && window.StateManager) {
             window.StateManager.subscribe('filteredModelList', function (filteredList) {
         getSafeTensorsViewer: () => safeTensorsViewer,
         getTFLiteParser:      () => tfliteParser,
         getTFLiteViewer:      () => tfliteViewer,
+        getPrintHandler:      () => printHandler,
         getParsedModelCache:  () => _parsedModelCache,
         clearParsedModelCache:() => _parsedModelCache.clear(),
         _pendingZoom: null,

js/ui/printHandler.js ADDED Viewed

	@@ -0,0 +1,320 @@

+/**
+ * PrintHandler - Manages Print to PDF functionality
+ * Converts Cytoscape canvas to static image for printing,
+ * prepares layout for @media print, and restores after printing.
+ * Requirements: 61.1, 61.5, 62.1-62.7, 63.1-63.5, 64.1, 64.2, 65.1
+ */
+window.PrintHandler = (function () {
+  'use strict';
+  /**
+   * @param {string} printBtnId - ID of the Print PDF button
+   * @param {string} printHeaderId - ID of the print header element
+   */
+  function PrintHandler(printBtnId, printHeaderId) {
+    /** @type {HTMLButtonElement|null} */
+    this._printBtn = document.getElementById(printBtnId) || null;
+    /** @type {HTMLElement|null} */
+    this._printHeader = document.getElementById(printHeaderId) || null;
+    /** @type {Function|null} Unsubscribe from StateManager */
+    this._unsubscribeModel = null;
+    /** @type {Function|null} Bound beforeprint handler */
+    this._boundBeforePrint = null;
+    /** @type {Function|null} Bound afterprint handler */
+    this._boundAfterPrint = null;
+    /** @type {Function|null} Bound click handler */
+    this._boundClickHandler = null;
+    this._init();
+  }
+  // ─── Initialization ───────────────────────────────────────────────────────
+  /**
+   * Bind click handler, subscribe to state changes, register print events.
+   * @private
+   */
+  PrintHandler.prototype._init = function () {
+    try {
+      // Bind click handler for Print PDF button
+      if (this._printBtn) {
+        this._boundClickHandler = this.print.bind(this);
+        this._printBtn.addEventListener('click', this._boundClickHandler);
+      }
+      // Subscribe to StateManager.currentModel to enable/disable button
+      if (window.StateManager && typeof window.StateManager.subscribe === 'function') {
+        this._unsubscribeModel = window.StateManager.subscribe('currentModel', function (model) {
+          try {
+            this._setButtonEnabled(!!model);
+          } catch (e) {
+            console.error('[PrintHandler] Error in currentModel subscriber:', e);
+          }
+        }.bind(this));
+      }
+      // Register beforeprint / afterprint window events
+      this._boundBeforePrint = this._prepareForPrint.bind(this);
+      this._boundAfterPrint = this._restoreAfterPrint.bind(this);
+      window.addEventListener('beforeprint', this._boundBeforePrint);
+      window.addEventListener('afterprint', this._boundAfterPrint);
+    } catch (err) {
+      console.error('[PrintHandler] Initialization error:', err);
+    }
+  };
+  // ─── Button State ─────────────────────────────────────────────────────────
+  /**
+   * Enable or disable the Print PDF button.
+   * @param {boolean} enabled
+   * @private
+   */
+  PrintHandler.prototype._setButtonEnabled = function (enabled) {
+    try {
+      if (this._printBtn) {
+        this._printBtn.disabled = !enabled;
+      }
+    } catch (err) {
+      console.error('[PrintHandler] _setButtonEnabled error:', err);
+    }
+  };
+  // ─── Print Preparation ────────────────────────────────────────────────────
+  /**
+   * Prepare the page for printing:
+   * - Update print header with current model file name
+   * - Convert Cytoscape canvas → static PNG image
+   * - Hide original canvas, insert static image into graphContainer
+   * - If no graph, show placeholder
+   * @private
+   */
+  PrintHandler.prototype._prepareForPrint = function () {
+    try {
+      // Update print header with model file name
+      var modelName = this._getCurrentModelFileName();
+      if (this._printHeader) {
+        this._printHeader.textContent = modelName
+          ? 'ONNX Model Explorer — ' + modelName
+          : 'ONNX Model Explorer';
+      }
+      // Get Cytoscape instance
+      var cy = this._getCytoscapeInstance();
+      var graphContainer = document.getElementById('graphContainer');
+      if (cy && graphContainer) {
+        try {
+          // Convert canvas to PNG data URL
+          var pngDataUrl = cy.png({ full: true, scale: 2, bg: '#ffffff' });
+          // Hide ALL direct children of graphContainer (Cytoscape wrapper, canvases, etc.)
+          var children = graphContainer.children;
+          for (var i = 0; i < children.length; i++) {
+            children[i].setAttribute('data-print-hidden', 'true');
+            children[i].style.display = 'none';
+          }
+          // Override the fixed height so the image can size naturally
+          this._origHeight = graphContainer.style.height;
+          graphContainer.style.height = 'auto';
+          graphContainer.style.overflow = 'visible';
+          // Create and insert static image
+          var img = document.createElement('img');
+          img.id = 'graph-print-image';
+          img.src = pngDataUrl;
+          img.alt = 'Model Graph';
+          img.style.maxWidth = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
+          graphContainer.appendChild(img);
+        } catch (canvasErr) {
+          console.error('[PrintHandler] Canvas to PNG conversion error:', canvasErr);
+          this._insertPlaceholder(graphContainer);
+        }
+      } else if (graphContainer) {
+        // No Cytoscape instance — show placeholder
+        this._insertPlaceholder(graphContainer);
+      }
+    } catch (err) {
+      console.error('[PrintHandler] _prepareForPrint error:', err);
+    }
+  };
+  /**
+   * Insert a "no graph" placeholder into the graph container.
+   * @param {HTMLElement} container
+   * @private
+   */
+  PrintHandler.prototype._insertPlaceholder = function (container) {
+    try {
+      var placeholder = document.createElement('p');
+      placeholder.id = 'graph-print-placeholder';
+      placeholder.textContent = 'Không có đồ thị để hiển thị';
+      placeholder.style.textAlign = 'center';
+      placeholder.style.color = '#6c757d';
+      placeholder.style.padding = '2rem 0';
+      container.appendChild(placeholder);
+    } catch (err) {
+      console.error('[PrintHandler] _insertPlaceholder error:', err);
+    }
+  };
+  // ─── Print Restoration ────────────────────────────────────────────────────
+  /**
+   * Restore the page after printing:
+   * - Remove static print image
+   * - Remove placeholder
+   * - Restore Cytoscape canvas visibility
+   * @private
+   */
+  PrintHandler.prototype._restoreAfterPrint = function () {
+    try {
+      // Remove static print image
+      var printImage = document.getElementById('graph-print-image');
+      if (printImage && printImage.parentNode) {
+        printImage.parentNode.removeChild(printImage);
+      }
+      // Remove placeholder
+      var placeholder = document.getElementById('graph-print-placeholder');
+      if (placeholder && placeholder.parentNode) {
+        placeholder.parentNode.removeChild(placeholder);
+      }
+      // Restore all hidden children of graphContainer
+      var graphContainer = document.getElementById('graphContainer');
+      if (graphContainer) {
+        var children = graphContainer.querySelectorAll('[data-print-hidden]');
+        for (var i = 0; i < children.length; i++) {
+          children[i].style.display = '';
+          children[i].removeAttribute('data-print-hidden');
+        }
+        // Restore original fixed height
+        if (this._origHeight !== undefined) {
+          graphContainer.style.height = this._origHeight;
+          graphContainer.style.overflow = '';
+          this._origHeight = undefined;
+        }
+      }
+    } catch (err) {
+      console.error('[PrintHandler] _restoreAfterPrint error:', err);
+    }
+  };
+  // ─── Helpers ──────────────────────────────────────────────────────────────
+  /**
+   * Get the current model file name from StateManager, SafeTensorsViewer, or TFLiteViewer.
+   * @returns {string|null}
+   * @private
+   */
+  PrintHandler.prototype._getCurrentModelFileName = function () {
+    try {
+      // 1. Try StateManager (ONNX models)
+      if (window.StateManager && typeof window.StateManager.getCurrentModel === 'function') {
+        var model = window.StateManager.getCurrentModel();
+        if (model && model.metadata && model.metadata.fileName) {
+          return model.metadata.fileName;
+        }
+      }
+      // 2. Try SafeTensorsViewer
+      if (window._onnxApp && typeof window._onnxApp.getSafeTensorsViewer === 'function') {
+        var stViewer = window._onnxApp.getSafeTensorsViewer();
+        if (stViewer && stViewer._fileName) {
+          return stViewer._fileName;
+        }
+      }
+      // 3. Try TFLiteViewer
+      if (window._onnxApp && typeof window._onnxApp.getTFLiteViewer === 'function') {
+        var tflViewer = window._onnxApp.getTFLiteViewer();
+        if (tflViewer && tflViewer._fileName) {
+          return tflViewer._fileName;
+        }
+      }
+      return null;
+    } catch (err) {
+      console.error('[PrintHandler] _getCurrentModelFileName error:', err);
+      return null;
+    }
+  };
+  /**
+   * Get the Cytoscape instance from GraphVisualizer.
+   * @returns {cytoscape.Core|null}
+   * @private
+   */
+  PrintHandler.prototype._getCytoscapeInstance = function () {
+    try {
+      if (window._onnxApp && typeof window._onnxApp.getGraphVisualizer === 'function') {
+        var gv = window._onnxApp.getGraphVisualizer();
+        if (gv && gv._cy) {
+          return gv._cy;
+        }
+      }
+      return null;
+    } catch (err) {
+      console.error('[PrintHandler] _getCytoscapeInstance error:', err);
+      return null;
+    }
+  };
+  // ─── Public API ───────────────────────────────────────────────────────────
+  /**
+   * Trigger the browser print dialog.
+   */
+  PrintHandler.prototype.print = function () {
+    try {
+      window.print();
+    } catch (err) {
+      console.error('[PrintHandler] print() error:', err);
+    }
+  };
+  /**
+   * Destroy the PrintHandler: unsubscribe, remove event listeners.
+   */
+  PrintHandler.prototype.destroy = function () {
+    try {
+      // Unsubscribe from StateManager
+      if (this._unsubscribeModel) {
+        this._unsubscribeModel();
+        this._unsubscribeModel = null;
+      }
+      // Remove window event listeners
+      if (this._boundBeforePrint) {
+        window.removeEventListener('beforeprint', this._boundBeforePrint);
+        this._boundBeforePrint = null;
+      }
+      if (this._boundAfterPrint) {
+        window.removeEventListener('afterprint', this._boundAfterPrint);
+        this._boundAfterPrint = null;
+      }
+      // Remove click handler
+      if (this._printBtn && this._boundClickHandler) {
+        this._printBtn.removeEventListener('click', this._boundClickHandler);
+        this._boundClickHandler = null;
+      }
+    } catch (err) {
+      console.error('[PrintHandler] destroy() error:', err);
+    }
+  };
+  return PrintHandler;
+})();