diff --git a/src/pages/resultsView/pathwayMapper/PathWayMapperContainer.tsx b/src/pages/resultsView/pathwayMapper/PathWayMapperContainer.tsx index 4467ae540d7..13d08ed420c 100644 --- a/src/pages/resultsView/pathwayMapper/PathWayMapperContainer.tsx +++ b/src/pages/resultsView/pathwayMapper/PathWayMapperContainer.tsx @@ -10,6 +10,9 @@ import ResultsViewURLWrapper from 'pages/resultsView/ResultsViewURLWrapper'; import { AppStore } from 'AppStore'; import { useLocalObservable } from 'mobx-react-lite'; import { runInAction } from 'mobx'; +import request from 'superagent'; +import { remoteData } from 'cbioportal-frontend-commons'; +import LoadingIndicator from 'shared/components/loadingIndicator/LoadingIndicator'; interface IPathwayMapperContainerProps { resultsViewPageStore: ResultsViewPageStore; @@ -17,6 +20,107 @@ interface IPathwayMapperContainerProps { urlWrapper: ResultsViewURLWrapper; } +interface ResultItem { + databases: DatabaseItem[]; +} +interface DatabaseItem { + name: string; + numberOfNetworks: string; + url: string; +} +interface ApiResponse { + results: ResultItem[]; +} + +function makeRemoteData() { + return remoteData({ + await: () => [], + invoke: async () => { + const getResponse = await request + .get( + 'https://iquery-cbio-dev.ucsd.edu/integratedsearch/v1/source' + ) + .set('Accept', 'application/json') + .timeout(60000) + .redirects(0); + + const jsonData: ApiResponse = getResponse.body; + const extractedData: DatabaseItem[] = jsonData.results[0]?.databases.map( + result => ({ + name: result.name, + numberOfNetworks: parseInt( + result.numberOfNetworks, + 10 + ).toString(), + url: result.url, + }) + ); + + return extractedData; + }, + default: [], + }); +} + +function formatUrl(url: string) { + if (url.startsWith('http://') || url.startsWith('https://')) { + return url; + } else { + return 'http://' + url; + } +} + +const TooltipContent: React.FC = observer(() => { + const store = useLocalObservable(() => ({ + tooltipContent: null as DatabaseItem[] | null, + tooltipData: makeRemoteData(), + })); + + return ( +
+ + NDEx + {' '} + shows 1,352 pathways: + {store.tooltipData.isPending ? ( +
+ {' '} + Loading networks +
+ ) : ( +
+ {store.tooltipData.result && ( +
    + {store.tooltipData.result.map( + (item: DatabaseItem, index: number) => ( +
  • + {item.numberOfNetworks} from{' '} + + {item.name} + +
  • + ) + )} +
+ )} + {store.tooltipData.isError && ( +
+ Error: Failed to load tooltip content. +
+ )} +
+ )} +
+ ); +}); + const PathWayMapperContainer: React.FunctionComponent = observer( function({ resultsViewPageStore, @@ -84,64 +188,7 @@ const PathWayMapperContainer: React.FunctionComponent - - NDEx - {' '} - shows 1,352 pathways: - - - } + linkTooltip={} hide={ !getServerConfig().show_ndex || !resultsViewPageStore.remoteNdexUrl.isComplete ||