Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🔨Refactor code: retrieve ndex tooltip information dynamically #4847

Merged
merged 6 commits into from
Feb 26, 2024
Merged

🔨Refactor code: retrieve ndex tooltip information dynamically #4847

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c7902ae
🔨Refactor code: retrieve ndex tooltip information dynamically
SAHU-01 Feb 13, 2024
d450217
🔨Refactor code: Fix code for codebase consistency
SAHU-01 Feb 16, 2024
db99da3
🔨Refactor code: Fix code, implement requested changes
SAHU-01 Feb 17, 2024
d874b1a
🔨Refactor code: Fixing minor code modifications
SAHU-01 Feb 20, 2024
c60df87
🔨Refactor code: Check if protocol exsists in url , if not add protocol
SAHU-01 Feb 21, 2024
5985f27
Adjust loading style and error text
alisman Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 86 additions & 58 deletions src/pages/resultsView/pathwayMapper/PathWayMapperContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,98 @@ 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';

interface IPathwayMapperContainerProps {
resultsViewPageStore: ResultsViewPageStore;
appStore: AppStore;
urlWrapper: ResultsViewURLWrapper;
}

interface ResultItem {
databases: DatabaseItem[];
}
interface DatabaseItem {
name: string;
numberOfNetworks: string;
url: string;
}
interface ApiResponse {
results: ResultItem[];
}

function makeRemoteData() {
return remoteData<DatabaseItem[]>({
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: [],
});
}

const TooltipContent: React.FC = observer(() => {
const store = useLocalObservable(() => ({
tooltipContent: null as DatabaseItem[] | null,
tooltipData: makeRemoteData(),
}));

return (
<div style={{ maxWidth: 400 }}>
<a href="https://www.ndexbio.org/" target="_blank">
NDEx
</a>{' '}
shows 1,352 pathways:
{store.tooltipData.isPending ? (
<div>Loading tooltip content...</div>
) : (
<div>
{store.tooltipData.result && (
<ul>
{store.tooltipData.result.map(
(item: DatabaseItem, index: number) => (
<li key={index}>
{item.numberOfNetworks} from{' '}
<a
href={`https://${item.url}`}
SAHU-01 marked this conversation as resolved.
Show resolved Hide resolved
target="_blank"
>
{item.name}
</a>
</li>
)
)}
</ul>
)}
{store.tooltipData.isError && (
<div>Error: Failed to load tooltip content.</div>
)}
</div>
)}
</div>
);
});

const PathWayMapperContainer: React.FunctionComponent<IPathwayMapperContainerProps> = observer(
function({
resultsViewPageStore,
Expand Down Expand Up @@ -84,64 +169,7 @@ const PathWayMapperContainer: React.FunctionComponent<IPathwayMapperContainerPro
key={ResultsViewPathwaysSubTab.NDEX}
id={ResultsViewPathwaysSubTab.NDEX}
linkText={ResultsViewPathwaysSubTab.NDEX}
linkTooltip={
<div style={{ maxWidth: 400 }}>
<a
href="https://www.ndexbio.org/"
target="_blank"
>
NDEx
</a>{' '}
shows 1,352 pathways:
<ul>
<li>
207 from{' '}
<a
href="https://www.nlm.nih.gov/research/umls/sourcereleasedocs/current/NCI_PID/index.html"
target="_blank"
>
NCI-PID
</a>
</li>
<li>
83 from{' '}
<a
href="https://signor.uniroma2.it/"
target="_blank"
>
Signor
</a>
</li>
<li>
675 from{' '}
<a
href="https://www.wikipathways.org/"
target="_blank"
>
WikiPathways
</a>
<li>
11 from{' '}
<a
href="http://cptac.wikipathways.org/"
target="_blank"
>
CPTAC
</a>
</li>
<li>
30 from{' '}
<a
href="http://cptac.wikipathways.org/"
target="_blank"
>
CCMI
</a>
</li>
</li>
</ul>
</div>
}
linkTooltip={<TooltipContent />}
hide={
!getServerConfig().show_ndex ||
!resultsViewPageStore.remoteNdexUrl.isComplete ||
Expand Down