Stub in eda scatterplot for phenotype dataset

Author: dmfalke

packages/libs/web-common/src/components/DatasetGraph.jsx

@@ -8,6 +8,7 @@ import {
 import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
 import ExternalResource from './ExternalResource';
 import { JbrowseIframe } from './JbrowseIframe';
+import { EdaScatterPlot } from './eda/EdaScatterPlot';
 
 /**
  * Renders an Dataset graph with the provided rowData.
@@ -223,6 +224,25 @@ export default class DatasetGraph extends React.PureComponent {
         <div className="eupathdb-DatasetGraphContainer">
           <div className="eupathdb-DatasetGraph">
             {visibleGraphs.map((index) => {
+              // Hardcoded to render an EDA Scatterplot
+              // TODO Replace hardcoded values with rowData attributes.
+              if (dataset_id === 'DS_d4745ea297') {
+                return (
+                  <EdaScatterPlot
+                    datasetId={dataset_id}
+                    xAxisVariable={{
+                      entityId: 'genePhenotypeData',
+                      // Phenotype rank
+                      variableId: 'VAR_9f0d6627',
+                    }}
+                    yAxisVariable={{
+                      entityId: 'genePhenotypeData',
+                      // Mean Phenotype score
+                      variableId: 'VAR_40829b7e',
+                    }}
+                  />
+                );
+              }
               let { height, width, visible_part } = graphs[index];
               let fullUrl = `${imgUrl}&vp=${visible_part}`;
               return (

packages/libs/web-common/src/components/eda/EdaScatterPlot.tsx

@@ -0,0 +1,86 @@
+import ScatterPlot from '@veupathdb/components/lib/plots/ScatterPlot';
+import { isFaceted } from '@veupathdb/components/lib/types/guards';
+import {
+  useDataClient,
+  useFindEntityAndVariable,
+  useStudyMetadata,
+} from '@veupathdb/eda/lib/core';
+import { DocumentationContainer } from '@veupathdb/eda/lib/core/components/docs/DocumentationContainer';
+import { scatterplotResponseToData } from '@veupathdb/eda/lib/core/components/visualizations/implementations/ScatterplotVisualization';
+import { useCachedPromise } from '@veupathdb/eda/lib/core/hooks/cachedPromise';
+import { VariableDescriptor } from '@veupathdb/eda/lib/core/types/variable';
+import { WorkspaceContainer } from '@veupathdb/eda/lib/workspace/WorkspaceContainer';
+import { edaServiceUrl } from '../../config';
+
+interface Props {
+  datasetId: string;
+  xAxisVariable: VariableDescriptor;
+  yAxisVariable: VariableDescriptor;
+}
+
+/**
+ * A simplified EDA ScatterPlot component.
+ *
+ * This will render a plot and a legend.
+ */
+export function EdaScatterPlot(props: Props) {
+  const { datasetId } = props;
+  return (
+    <DocumentationContainer>
+      <WorkspaceContainer studyId={datasetId} edaServiceUrl={edaServiceUrl}>
+        <ScatterPlotAdapter {...props} />
+      </WorkspaceContainer>
+    </DocumentationContainer>
+  );
+}
+
+interface AdapterProps {
+  xAxisVariable: VariableDescriptor;
+  yAxisVariable: VariableDescriptor;
+}
+
+function ScatterPlotAdapter(props: AdapterProps) {
+  const { xAxisVariable, yAxisVariable } = props;
+  const { id: studyId } = useStudyMetadata();
+  const dataClient = useDataClient();
+  const findEntityAndVariable = useFindEntityAndVariable();
+  const data = useCachedPromise(
+    async function getData() {
+      const response = await dataClient.getScatterplot('xyrelationships', {
+        studyId,
+        filters: [],
+        config: {
+          outputEntityId: xAxisVariable.entityId,
+          valueSpec: 'raw',
+          xAxisVariable,
+          yAxisVariable,
+          // maxAllowedDataPoints: 1_000,
+        },
+      });
+      return scatterplotResponseToData(response).dataSetProcess;
+    },
+    ['ScatterPlotAdapter', studyId, xAxisVariable, yAxisVariable]
+  );
+
+  const xAxisEntityAndVariable = findEntityAndVariable(xAxisVariable);
+  const yAxisEntityAndVariable = findEntityAndVariable(yAxisVariable);
+
+  if (isFaceted(data.value)) {
+    throw new Error('Received unexpected faceted data.');
+  }
+
+  if (data.error) {
+    return <div>Error: {String(data.error)}</div>;
+  }
+
+  return (
+    <ScatterPlot
+      interactive
+      showSpinner={data.pending}
+      markerBodyOpacity={0.5}
+      data={data.value}
+      dependentAxisLabel={yAxisEntityAndVariable?.variable.displayName}
+      independentAxisLabel={xAxisEntityAndVariable?.variable.displayName}
+    />
+  );
+}