fix: restore phenogrid iframe pages for IMPC

frontend/src/pages/explore/PagePhenogridMulticompare.vue

@@ -0,0 +1,116 @@
+<!--
+  phenogrid on blank page to be used as iframe widget
+-->
+
+<template>
+  <TheSnackbar />
+  <link :href="stylesheetHref" rel="stylesheet" />
+
+  <!-- analysis status -->
+  <AppStatus v-if="isLoading" code="loading">Running analysis</AppStatus>
+  <AppStatus v-else-if="isError" code="error">Error running analysis</AppStatus>
+  <AppStatus v-else-if="isEmpty(comparison.phenogrid.cells)" code="warning"
+    >No results</AppStatus
+  >
+
+  <!-- results -->
+  <template v-else>
+    <ThePhenogrid :data="comparison.phenogrid" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { isEmpty } from "lodash";
+import { useEventListener } from "@vueuse/core";
+import { compareSetToSets, metricOptions } from "@/api/phenotype-explorer";
+import ThePhenogrid from "@/components/ThePhenogrid.vue";
+import TheSnackbar from "@/components/TheSnackbar.vue";
+import { useQuery } from "@/composables/use-query";
+
+/** route info */
+const route = useRoute();
+
+/** input params */
+const aPhenotypes = ref<Parameters<typeof compareSetToSets>[0]>([]);
+const bPhenotypes = ref<Parameters<typeof compareSetToSets>[1]>([]);
+const similarityMetric = ref(metricOptions[0]);
+const stylesheetHref = ref("");
+
+/** comparison analysis */
+const {
+  query: runAnalysis,
+  data: comparison,
+  isLoading,
+  isError,
+} = useQuery(
+  async function () {
+    return await compareSetToSets(
+      aPhenotypes.value,
+      bPhenotypes.value,
+      similarityMetric.value.id,
+    );
+  },
+
+  /** default value */
+  { phenogrid: { cols: [], rows: [], cells: {}, unmatched: [] } },
+);
+
+/** re-rerun analysis when inputs change */
+watch([aPhenotypes, bPhenotypes, similarityMetric], runAnalysis);
+
+/** get input url params */
+watch(
+  () => route.query,
+  () => {
+    let {
+      subjects = "",
+      "object-sets": objectSets = "",
+      metric = "",
+      stylesheet = "",
+    } = route.query;
+
+    if (stylesheet && typeof stylesheet === "string")
+      stylesheetHref.value = window.decodeURIComponent(stylesheet);
+
+    if (subjects && typeof subjects === "string" && objectSets) {
+      const flatObjectSets = [objectSets].flat();
+      aPhenotypes.value = subjects.split(",");
+      bPhenotypes.value = flatObjectSets.filter(Boolean).map((object) => ({
+        phenotypes: object?.split(",") || [],
+      }));
+    }
+    if (metric && typeof metric === "string")
+      similarityMetric.value =
+        metricOptions.find((option) => option.id === metric) ||
+        metricOptions[0];
+  },
+  { immediate: true, deep: true },
+);
+
+/** listen for message from parent window */
+useEventListener("message", (event: MessageEvent) => {
+  if ("subjects" in event.data && "object-sets" in event.data) {
+    aPhenotypes.value = event.data.subjects;
+    bPhenotypes.value = event.data["object-sets"];
+  }
+  if ("metric" in event.data)
+    similarityMetric.value =
+      metricOptions.find((option) => option.id === event.data.metric) ||
+      metricOptions[0];
+  if ("stylesheet" in event.data) stylesheetHref.value = event.data.stylesheet;
+});
+</script>
+
+<style scoped>
+:global(html),
+:global(body) {
+  width: 100%;
+  height: 100%;
+}
+
+:global(#app) {
+  display: contents;
+}
+</style>

frontend/src/pages/explore/PagePhenogridSearch.vue

@@ -0,0 +1,122 @@
+<!--
+  phenogrid on blank page to be used as iframe widget
+-->
+
+<template>
+  <TheSnackbar />
+  <link :href="stylesheetHref" rel="stylesheet" />
+
+  <!-- analysis status -->
+  <AppStatus v-if="isLoading" code="loading">Running analysis</AppStatus>
+  <AppStatus v-else-if="isError" code="error">Error running analysis</AppStatus>
+  <AppStatus v-else-if="isEmpty(comparison.phenogrid.cells)" code="warning"
+    >No results</AppStatus
+  >
+
+  <!-- results -->
+  <template v-else>
+    <ThePhenogrid :data="comparison.phenogrid" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { isEmpty } from "lodash";
+import { useEventListener } from "@vueuse/core";
+import {
+  compareSetToGroup,
+  metricOptions,
+  type Group,
+} from "@/api/phenotype-explorer";
+import ThePhenogrid from "@/components/ThePhenogrid.vue";
+import TheSnackbar from "@/components/TheSnackbar.vue";
+import { useQuery } from "@/composables/use-query";
+
+/** route info */
+const route = useRoute();
+
+/** input params */
+const aPhenotypes = ref<Parameters<typeof compareSetToGroup>[0]>([]);
+const bGroup = ref<Parameters<typeof compareSetToGroup>[1]>("Human Diseases");
+const similarityMetric = ref(metricOptions[0]);
+const stylesheetHref = ref("");
+
+/** comparison analysis */
+const {
+  query: runAnalysis,
+  data: comparison,
+  isLoading,
+  isError,
+} = useQuery(
+  async function () {
+    return await compareSetToGroup(
+      aPhenotypes.value,
+      bGroup.value,
+      similarityMetric.value.id,
+    );
+  },
+
+  /** default value */
+  { summary: [], phenogrid: { cols: [], rows: [], cells: {}, unmatched: [] } },
+);
+
+/** re-rerun analysis when inputs change */
+watch([aPhenotypes, bGroup, similarityMetric], runAnalysis);
+
+/** get input url params */
+watch(
+  () => route.query,
+  () => {
+    const {
+      subjects = "",
+      "object-group": objectGroup = "",
+      metric = "",
+      stylesheet = "",
+    } = route.query;
+
+    if (stylesheet && typeof stylesheet === "string")
+      stylesheetHref.value = window.decodeURIComponent(stylesheet);
+
+    if (
+      subjects &&
+      typeof subjects === "string" &&
+      objectGroup &&
+      typeof objectGroup === "string"
+    ) {
+      aPhenotypes.value = subjects.split(",");
+      bGroup.value = objectGroup as Group;
+    }
+    if (metric && typeof metric === "string")
+      similarityMetric.value =
+        metricOptions.find((option) => option.id === metric) ||
+        metricOptions[0];
+  },
+  { immediate: true, deep: true },
+);
+
+/** listen for message from parent window */
+useEventListener("message", (event: MessageEvent) => {
+  if ("subjects" in event.data && "object-group" in event.data) {
+    aPhenotypes.value = event.data.subjects;
+    bGroup.value = event.data["object-group"];
+  }
+  if ("metric" in event.data)
+    similarityMetric.value =
+      metricOptions.find((option) => option.id === event.data.metric) ||
+      metricOptions[0];
+  if ("stylesheet" in event.data) stylesheetHref.value = event.data.stylesheet;
+});
+</script>
+
+<style scoped>
+:global(html),
+:global(body) {
+  width: 100%;
+  height: 100%;
+}
+
+:global(#app) {
+  display: contents;
+}
+</style>

frontend/src/router/index.ts

@@ -98,20 +98,20 @@ export const routes: RouteRecordRaw[] = [
   },
 
   /** phenogrid compare iframe widget page */
-  // {
-  //   path: "/phenogrid-search",
-  //   name: "Phenogrid",
-  //   component: asyncRoute("explore/PagePhenogridSearch"),
-  //   meta: { bare: true },
-  // },
+  {
+    path: "/phenogrid-search",
+    name: "Phenogrid",
+    component: asyncRoute("explore/PagePhenogridSearch"),
+    meta: { bare: true },
+  },
 
-  // /** phenogrid multi-compare iframe widget page */
-  // {
-  //   path: "/phenogrid-multi-compare",
-  //   name: "PhenogridMultiCompare",
-  //   component: asyncRoute("explore/PagePhenogridMulticompare"),
-  //   meta: { bare: true },
-  // },
+  /** phenogrid multi-compare iframe widget page */
+  {
+    path: "/phenogrid-multi-compare",
+    name: "PhenogridMultiCompare",
+    component: asyncRoute("explore/PagePhenogridMulticompare"),
+    meta: { bare: true },
+  },
 
   /** test pages (comment this out when we release app) */
   {