perf(dataset): defer UVL load to async fetch on DOI view

The DOI landing page used to read the first UVL file from disk
synchronously and embed its full contents into the rendered HTML,
which made 20 MB datasets take ~5 minutes to render. Page now ships
empty with both skeletons visible, fetches the file via the existing
/hubfiles/<id>/workbench-content endpoint after DOMContentLoaded, and
applies it to CodeMirror without syntax highlighting when the file
is over 1 MB. Also drops viewportMargin: Infinity, which was forcing
CodeMirror to render every line of large files at once.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: drorganvidez

app/modules/dataset/routes.py

@@ -562,7 +562,7 @@ def subdomain_index(doi):
 
     # HTML fallback (default for browsers and crawlers)
     hubfiles = [file for fm in dataset.feature_models for file in fm.hubfiles]
-    selected_file, uvl_content = _preload_first_file(dataset, hubfiles)
+    selected_file = hubfiles[0] if hubfiles else None
 
     user_cookie = ds_view_record_service.create_cookie(dataset=dataset)
 
@@ -587,7 +587,7 @@ def subdomain_index(doi):
             dataset=dataset,
             hubfiles=hubfiles,
             selected_file=selected_file,
-            uvl_content=uvl_content,
+            uvl_content=None,
             fair_meta=fair_meta,
         )
     )
@@ -597,20 +597,6 @@ def subdomain_index(doi):
     return resp
 
 
-def _preload_first_file(dataset, hubfiles):
-    """Pick the first hubfile (if any) and return (file, uvl_content)."""
-    if not hubfiles:
-        return None, None
-    first = hubfiles[0]
-    directory_path = os.path.join("uploads", f"user_{dataset.user_id}", f"dataset_{dataset.id}", "uvl")
-    file_path = os.path.join(current_app.root_path, "..", directory_path, first.name)
-    try:
-        with open(file_path, "r") as f:
-            return first, f.read()
-    except Exception as e:
-        return first, f"[Error reading file: {e}]"
-
-
 @dataset_bp.route("/doi/<path:doi>/files/raw/<path:filename>", methods=["GET"])
 @dataset_bp.route("/doi/<path:doi>/files/raw/<path:filename>/", methods=["GET"])
 def doi_file_raw(doi, filename):
@@ -670,14 +656,14 @@ def get_unsynchronized_dataset(dataset_id):
         abort(404)
 
     hubfiles = [file for fm in dataset.feature_models for file in fm.hubfiles]
-    selected_file, uvl_content = _preload_first_file(dataset, hubfiles)
+    selected_file = hubfiles[0] if hubfiles else None
 
     return render_template(
         "dataset/view_dataset.html",
         dataset=dataset,
         hubfiles=hubfiles,
         selected_file=selected_file,
-        uvl_content=uvl_content,
+        uvl_content=None,
     )
 
 

app/modules/dataset/templates/dataset/view_dataset.html

@@ -307,7 +307,7 @@ <h5 class="mb-2">No models in this dataset yet</h5>
                 </div>
                 <div class="card-body p-0 panel-body position-relative">
                     <textarea id="uvlEditor" class="d-none">{% if uvl_content %}{{ uvl_content }}{% endif %}</textarea>
-                    <div id="uvlSkeleton" class="uvl-skeleton d-none p-4">
+                    <div id="uvlSkeleton" class="uvl-skeleton {% if not selected_file %}d-none {% endif %}p-4">
                         <span class="skeleton skeleton-line" style="width: 25%;"></span>
                         <span class="skeleton skeleton-line" style="width: 55%; margin-left: 1rem;"></span>
                         <span class="skeleton skeleton-line" style="width: 40%; margin-left: 2rem;"></span>
@@ -380,7 +380,7 @@ <h5 class="mb-2">No models in this dataset yet</h5>
                 <div class="card-body panel-body">
                     <div id="FMFactLabelWrapper" class="w-100 position-relative">
                         <svg id="FMFactLabelChart" class="chart w-100" preserveAspectRatio="xMinYMin meet"></svg>
-                        <div id="factLabelSkeleton" class="factlabel-skeleton d-none">
+                        <div id="factLabelSkeleton" class="factlabel-skeleton {% if not selected_file %}d-none{% endif %}">
                             <span class="skeleton skeleton-line xl mb-3" style="width: 50%;"></span>
                             <span class="skeleton skeleton-line" style="width: 80%;"></span>
                             <span class="skeleton skeleton-line" style="width: 65%;"></span>
@@ -617,6 +617,12 @@ <h5 class="fw-bold text-primary mb-0" id="metricModalLabel">Metric Details</h5>
     .uvl-skeleton { min-height: 360px; }
     .uvl-skeleton .skeleton-line { font-family: monospace; }
     .workbench-panels .CodeMirror.is-loading { visibility: hidden; }
+    /* Overlay the UVL skeleton on top of the (hidden) CodeMirror so the
+       panel doesn't double its height while the file is loading. */
+    .panel-section[data-panel-key="uvl"] .panel-body { min-height: 360px; }
+    .panel-section[data-panel-key="uvl"] #uvlSkeleton {
+        position: absolute; inset: 0; z-index: 2;
+    }
 </style>
 
 <script>
@@ -675,13 +681,15 @@ <h5 class="fw-bold text-primary mb-0" id="metricModalLabel">Metric Details</h5>
         initDescriptionToggle();
         if (currentFileId) {
             applyFileUi(findModel(currentFileId));
-            renderFactLabelForCurrentFile();
+            fetchAndApplyContent(currentFileId);
         }
     }
     initTooltips();
 });
 
 // ---------- Editor ----------
+const UVL_PLAIN_THRESHOLD_BYTES = 1024 * 1024; // 1 MB: above this, skip syntax highlighting
+
 function initUvlEditor() {
     const ta = document.getElementById('uvlEditor');
     if (!ta || !window.CodeMirror) return;
@@ -694,9 +702,32 @@ <h5 class="fw-bold text-primary mb-0" id="metricModalLabel">Metric Details</h5>
         indentUnit: 2,
         lineWrapping: false,
         foldGutter: true,
-        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-        viewportMargin: Infinity
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
     });
+    // Hide CodeMirror until the async fetch lands content; the skeleton
+    // (rendered visible by the template) carries the visual.
+    if (currentFileId) setUvlLoading(true);
+}
+
+function applyUvlContent(text) {
+    if (!uvlEditorInstance) {
+        setUvlLoading(false);
+        return;
+    }
+    const big = (text || '').length > UVL_PLAIN_THRESHOLD_BYTES;
+    uvlEditorInstance.setOption('mode', big ? null : 'uvl');
+    // Defer setValue so the loading skeleton paints first; CodeMirror's
+    // setValue can block the main thread for several seconds on large files.
+    setTimeout(() => {
+        try {
+            if (uvlEditorInstance) {
+                uvlEditorInstance.setValue(text || '');
+                uvlEditorInstance.refresh();
+            }
+        } finally {
+            setUvlLoading(false);
+        }
+    }, 0);
 }
 
 // ---------- Panel collapsing ----------
@@ -954,11 +985,7 @@ <h5 class="fw-bold text-primary mb-0" id="metricModalLabel">Metric Details</h5>
     fetch(url, { credentials: 'same-origin' })
         .then(r => r.ok ? r.json() : Promise.reject(r.status))
         .then(data => {
-            if (uvlEditorInstance) {
-                uvlEditorInstance.setValue(data.uvl || '');
-                uvlEditorInstance.refresh();
-                setTimeout(() => uvlEditorInstance.refresh(), 0);
-            }
+            applyUvlContent(data.uvl || '');
             const ideLink = document.getElementById('workbench-ide-link');
             if (ideLink) ideLink.href = data.ide_url;
             const fl = document.getElementById('workbench-factlabel-external');
@@ -967,11 +994,8 @@ <h5 class="fw-bold text-primary mb-0" id="metricModalLabel">Metric Details</h5>
         })
         .catch(err => {
             console.error('workbench fetch error', err);
-            if (uvlEditorInstance) uvlEditorInstance.setValue(`[Error loading model: ${err}]`);
+            applyUvlContent(`[Error loading model: ${err}]`);
             setFactLabelLoading(false);
-        })
-        .finally(() => {
-            setUvlLoading(false);
         });
 }
 

app/modules/hubfile/routes.py

@@ -152,24 +152,14 @@ def view_unsynchronized_file(dataset_id, file_id):
     if not dataset or not selected_file:
         abort(404)
 
-    # 4. Build the on-disk path to the file.
-    directory_path = os.path.join("uploads", f"user_{dataset.user_id}", f"dataset_{dataset.id}", "uvl")
-    file_path = os.path.join(current_app.root_path, "..", directory_path, selected_file.name)
-
-    try:
-        with open(file_path, "r") as f:
-            content = f.read()
-    except Exception as e:
-        content = f"[Error reading file: {e}]"
-
     user_cookie = hubfile_view_record_service.create_cookie(hubfile=selected_file)
     resp = make_response(
         render_template(
             "dataset/view_dataset.html",
             selected_file=selected_file,
             hubfiles=dataset.files(),
             dataset=dataset,
-            uvl_content=content,
+            uvl_content=None,
         )
     )
     resp.set_cookie("file_view_cookie", user_cookie)
@@ -201,24 +191,14 @@ def view_uvl_with_doi(doi, filename):
     if not selected_file:
         abort(404)
 
-    # 4. Build the on-disk path to the file.
-    directory_path = os.path.join("uploads", f"user_{dataset.user_id}", f"dataset_{dataset.id}", "uvl")
-    file_path = os.path.join(current_app.root_path, "..", directory_path, selected_file.name)
-
-    try:
-        with open(file_path, "r") as f:
-            content = f.read()
-    except Exception as e:
-        content = f"[Error reading file: {e}]"
-
     user_cookie = hubfile_view_record_service.create_cookie(hubfile=selected_file)
     resp = make_response(
         render_template(
             "dataset/view_dataset.html",
             selected_file=selected_file,
             hubfiles=dataset.files(),
             dataset=dataset,
-            uvl_content=content,
+            uvl_content=None,
         )
     )
     resp.set_cookie("file_view_cookie", user_cookie)