Merge pull request #1729 from microbiomedata/issue-1707-embed-krona-plots

Make Krona plots viewable in data portal

Author: naglepuff

nmdc_server/api.py

@@ -616,6 +616,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,
+        }
+    raise HTTPException(status_code=400, detail="DataObject has no relevant HTML content")
+
+
 @router.post(
     "/data_object/workflow_summary",
     response_model=schemas.DataObjectAggregation,

tests/test_download.py

@@ -1,3 +1,4 @@
+import pytest
 from fastapi.testclient import TestClient
 from sqlalchemy.orm.session import Session
 
@@ -130,3 +131,42 @@ def test_generate_bulk_download_filtered(
     # Verify that the bulk download cannot be accessed a second time
     resp = client.get(f"/api/bulk_download/{id_}")
     assert resp.status_code == 410
+
+
+@pytest.mark.parametrize(
+    ("data_object_type", "expected_status_code"), [("Kraken2 Krona Plot", 200), ("foo", 400)]
+)
+def test_get_url_for_html_content_unauthenticated(
+    db: Session,
+    client: TestClient,
+    data_object_type: str,
+    expected_status_code: int,
+):
+    data_object = fakes.DataObjectFactory(
+        url="https://data.microbiomedata.org/data/dob",
+        workflow_type=WorkflowActivityTypeEnum.metagenome_assembly.value,
+        file_type=data_object_type,
+    )
+    db.commit()
+    resp = client.get(f"/api/data_object/{data_object.id}/get_html_content_url")
+    assert resp.status_code == expected_status_code
+
+
+@pytest.mark.parametrize(
+    ("data_object_type", "expected_status_code"), [("Kraken2 Krona Plot", 200), ("foo", 400)]
+)
+def test_get_url_for_html_content_authenticated(
+    db: Session,
+    client: TestClient,
+    logged_in_user,
+    data_object_type: str,
+    expected_status_code: int,
+):
+    data_object = fakes.DataObjectFactory(
+        url="https://data.microbiomedata.org/data/dob",
+        workflow_type=WorkflowActivityTypeEnum.metagenome_assembly.value,
+        file_type=data_object_type,
+    )
+    db.commit()
+    resp = client.get(f"/api/data_object/{data_object.id}/get_html_content_url")
+    assert resp.status_code == expected_status_code

web/src/components/DataObjectTable.vue

@@ -2,13 +2,18 @@
 // @ts-ignore
 import NmdcSchema from 'nmdc-schema/nmdc_schema/nmdc_materialized_patterns.yaml';
 import {
-  computed, defineComponent, PropType, reactive,
+  computed, defineComponent, PropType, reactive, ref, Ref, watch,
 } from '@vue/composition-api';
 import { flattenDeep } from 'lodash';
 
 import { DataTableHeader } from 'vuetify';
 import { humanFileSize } from '@/data/utils';
-import { client, BiosampleSearchResult, OmicsProcessingResult } from '@/data/api';
+import {
+  client,
+  BiosampleSearchResult,
+  OmicsProcessingResult,
+  api,
+} from '@/data/api';
 import { stateRefs, acceptTerms } from '@/store';
 import { metaproteomicCategoryEnumToDisplay } from '@/encoding';
 
@@ -87,6 +92,33 @@ export default defineComponent({
       },
     ];
 
+    const selectedHtmlDataObject: Ref<any | null> = ref(null);
+    const dataModal = ref(false);
+    const iframeDataSource = ref('');
+    const iframeLoading = ref(false);
+    function hasHtmlData(fileType: string) {
+      return [
+        'Kraken2 Krona Plot',
+        'GOTTCHA2 Krona Plot',
+        'Centrifuge Krona Plot',
+      ].includes(fileType);
+    }
+    async function openHtmlDataModal(item: any) {
+      iframeLoading.value = true;
+      dataModal.value = true;
+      iframeDataSource.value = await api.getDataObjectHtmlContentUrl(item.id);
+      selectedHtmlDataObject.value = item;
+    }
+    watch(dataModal, () => {
+      if (!dataModal.value) {
+        selectedHtmlDataObject.value = null;
+        iframeDataSource.value = '';
+      }
+    });
+    function onIframeLoaded() {
+      iframeLoading.value = false;
+    }
+
     const termsDialog = reactive({
       item: null as null | OmicsProcessingResult,
       value: false,
@@ -186,6 +218,13 @@ export default defineComponent({
     }
 
     return {
+      dataModal,
+      iframeLoading,
+      hasHtmlData,
+      openHtmlDataModal,
+      selectedHtmlDataObject,
+      iframeDataSource,
+      onIframeLoaded,
       onAcceptTerms,
       handleDownload,
       descriptionMap,
@@ -212,6 +251,52 @@ export default defineComponent({
         @clicked="onAcceptTerms"
       />
     </v-dialog>
+    <v-dialog
+      v-if="selectedHtmlDataObject !== null"
+      v-model="dataModal"
+      scroll-strategy="block"
+      width="80vw"
+      scrollable
+    >
+      <v-card
+        class="d-flex flex-column"
+        width="100%"
+        height="80vh"
+      >
+        <v-card-text class="d-flex flex-grow-1">
+          <span
+            v-if="iframeLoading"
+            class="d-flex align-center justify-center flex-grow-1"
+          >
+            <v-progress-circular
+              class="mr-2"
+              color="primary"
+              size="24"
+              indeterminate
+            />
+            Loading...
+          </span>
+          <iframe
+            :title="selectedHtmlDataObject.description || 'Data object HTML content'"
+            :src="iframeDataSource"
+            :style="{border: 'none' }"
+            :width="iframeLoading ? '0%' : '100%'"
+            class="pa-4"
+            loading="lazy"
+            @load="onIframeLoaded"
+          />
+        </v-card-text>
+        <v-card-actions class="flex-row">
+          <v-spacer />
+          <v-btn
+            text
+            @click="dataModal = false"
+          >
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <v-data-table
       :headers="headers"
       :items="items"
@@ -282,7 +367,17 @@ export default defineComponent({
               <span>This file is included in the currently selected bulk download</span>
             </v-tooltip>
           </td>
-          <td>{{ item.file_type }}</td>
+          <td>
+            {{ item.file_type }}
+            <v-btn
+              v-if="hasHtmlData(item.file_type)"
+              color="primary"
+              icon
+              @click="openHtmlDataModal(item)"
+            >
+              <v-icon>mdi-magnify</v-icon>
+            </v-btn>
+          </td>
           <td>{{ item.file_type_description }}</td>
           <td>{{ humanFileSize(item.file_size_bytes) }}</td>
           <td>{{ item.downloads }}</td>

web/src/data/api.ts

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