Add endpoint to get url for some data object types

For now this includes only Krona plots. This endpoint "bypasses" the
need to log in to get the download URL for these data objects.

Author: naglepuff

nmdc_server/api.py

@@ -613,6 +613,25 @@ async def download_data_object(
     }
 
 
+@router.get("/data_object/{data_object_id}/get_html_content_url")
+async def get_data_object_html_content(data_object_id: str, db: Session = Depends(get_db)):
+    data_object = crud.get_data_object(db, data_object_id)
+    if data_object is None:
+        raise HTTPException(status_code=404, detail="DataObject not found")
+    url = data_object.url
+    if url is None:
+        raise HTTPException(status_code=404, detail="DataObject has no url reference")
+    if data_object.file_type in [
+        "Kraken2 Krona Plot",
+        "GOTTCHA2 Krona Plot",
+        "Centrifuge Krona Plot",
+    ]:
+        return {
+            "url": url,
+        }
+    return HTTPException(status_code=400, detail="DataObject has no relevant HTML content")
+
+
 @router.post(
     "/data_object/workflow_summary",
     response_model=schemas.DataObjectAggregation,

web/src/components/DataObjectTable.vue

@@ -104,7 +104,7 @@ export default defineComponent({
     async function openHtmlDataModal(item: any) {
       iframeLoading.value = true;
       dataModal.value = true;
-      iframeDataSource.value = await api.getDataObjectUrl(item.id);
+      iframeDataSource.value = await api.getDataObjectHtmlContentUrl(item.id);
       selectedHtmlDataObject.value = item;
     }
     watch(dataModal, () => {
@@ -243,7 +243,9 @@ export default defineComponent({
             class="d-flex align-center justify-center flex-grow-1"
           >
             <v-progress-circular
+              class="mr-2"
               color="primary"
+              size="24"
               indeterminate
             />
             Loading...
@@ -257,10 +259,6 @@ export default defineComponent({
             loading="lazy"
             @load="onIframeLoaded"
           />
-          <div
-            class="iframe-blocker"
-            :style="{ position: 'absolute', height: '100%', width: '100%'}"
-          />
         </v-card-text>
         <v-card-actions class="flex-row">
           <v-spacer />

web/src/data/api.ts

@@ -641,8 +641,8 @@ async function createBulkDownload(conditions: Condition[], dataObjectFilter: Dat
   };
 }
 
-async function getDataObjectUrl(dataObjectId: string): Promise<string> {
-  const { data } = await client.get<{ url: string }>(`data_object/${dataObjectId}/download`);
+async function getDataObjectHtmlContentUrl(dataObjectId: string): Promise<string> {
+  const { data } = await client.get<{ url: string }>(`data_object/${dataObjectId}/get_html_content_url`);
   return data.url;
 }
 
@@ -851,7 +851,7 @@ client.interceptors.response.use(undefined, async (error: AxiosError) => {
 
 const api = {
   createBulkDownload,
-  getDataObjectUrl,
+  getDataObjectHtmlContentUrl,
   getBinnedFacet,
   getBulkDownloadSummary,
   getBulkDownloadAggregateSummary,