Skip to content

Commit e512102

Browse files
bdls-jamalbdls-jamal
committed
Changes to grey out links if unavailable
1 parent 6871c6d commit e512102

2 files changed

Lines changed: 100 additions & 39 deletions

File tree

‎Eplant/views/NavigatorViewer/NavigatorView.tsx‎

Lines changed: 100 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
22
import React from "react";
33
import * as d3 from "d3";
44

5+
import { useConfig } from "@eplant/config";
6+
import { useSpecies } from "@eplant/state";
57
import { useTheme } from '@mui/material/styles';
68

79
import { LoadingImage } from '../../UI/Layout/ViewContainer/LoadingPage'
@@ -633,6 +635,9 @@ export const NavigatorViewObject = () => {
633635
const gRef = useRef<SVGGElement | null>(null);
634636
const theme = useTheme();
635637
const { switchViewAndGene } = useViewSwitch();
638+
const { userViews } = useConfig();
639+
const [speciesList] = useSpecies();
640+
const speciesAPI = speciesList.length ? speciesList[0] : undefined;
636641

637642
/** Initialize dimensions with default calculation */
638643
const [dimensions, setDimensions] = useState(calculateDimensions());
@@ -824,6 +829,7 @@ useEffect(() => {
824829
isHidden = false; /** Reset the hidden state */
825830
});
826831
};
832+
827833

828834
/** Generate node elements for rendering */
829835
const allNodes = navigator?.descendants().map((node, index: number) => {
@@ -900,18 +906,35 @@ useEffect(() => {
900906
);
901907
}
902908
}}
903-
onClick={() => {
904-
const url = `#`;
905-
window.open(url, "_blank");
909+
onClick={(event) => {
910+
/** Extract the geneName */
911+
const geneName = displayName;
912+
/** Get species from node data or props - default to Arabidopsis */
913+
const species = node.data.metadata?.genome;
914+
915+
/** Validate view and gene */
916+
const isValidView = userViews.some(view => view.id === 'world');
917+
918+
if (isValidView) {
919+
/** Call switch view function with species information */
920+
if (!species || !(species in ePlantLinks)) {
921+
/** Call switch view function to swap the view using designated view id and gene name */
922+
switchViewAndGene('world', geneName);
923+
} else {
924+
/** Handle external species navigation */
925+
switchViewAndGene('world', geneName, ePlantLinks[species]);
926+
}
927+
}
906928
}}
929+
style={{ cursor: (userViews.some(view => view.id === 'world')) ? 'pointer' : 'not-allowed' }}
907930
>
908931
<rect
909932
width={16}
910933
height={16}
911934
fill="transparent"
912935
style={{ cursor: 'pointer' }}
913-
/>
914-
<g style={{ pointerEvents: 'none' }}>
936+
/>
937+
<g style={{ pointerEvents: 'none', opacity: (userViews.some(view => view.id === 'world')) ? 1 : 0.5 }}>
915938
<GeneInfoViewIcon/>
916939
</g>
917940
</g>
@@ -927,31 +950,35 @@ useEffect(() => {
927950
);
928951
}
929952
}}
930-
onClick={(event) => {
953+
onClick={async (event) => {
931954
/** Extract the geneName */
932955
const geneName = displayName;
933956
/** Get species from node data or props - default to Arabidopsis */
934957
const species = node.data.metadata?.genome;
935-
936-
switchViewAndGene('plant', geneName);
937958

938-
/** Call switch view function with species information */
939-
if (!species || !(species in ePlantLinks)) {
940-
/** Call switch view function to swap the view using designated view id and gene name */
941-
switchViewAndGene('plant', geneName);
942-
} else {
943-
/** Handle external species navigation */
944-
switchViewAndGene('plant', geneName, ePlantLinks[species]);
959+
/** Validate view and gene */
960+
const isValidView = userViews.some(view => view.id === 'plant');
961+
962+
if (isValidView) {
963+
/** Call switch view function with species information */
964+
if (!species || !(species in ePlantLinks)) {
965+
/** Call switch view function to swap the view using designated view id and gene name */
966+
switchViewAndGene('plant', geneName);
967+
} else {
968+
/** Handle external species navigation */
969+
switchViewAndGene('plant', geneName, ePlantLinks[species]);
970+
}
945971
}
946972
}}
973+
style={{ cursor: (userViews.some(view => view.id === 'plant')) ? 'pointer' : 'not-allowed' }}
947974
>
948975
<rect
949976
width={16}
950977
height={16}
951978
fill="transparent"
952979
style={{ cursor: 'pointer' }}
953980
/>
954-
<g style={{ pointerEvents: 'none' }}>
981+
<g style={{ pointerEvents: 'none', opacity: (userViews.some(view => view.id === 'plant')) ? 1 : 0.5 }}>
955982
<PlantEFPIcon />
956983
</g>
957984
</g>
@@ -972,26 +999,30 @@ useEffect(() => {
972999
const geneName = displayName;
9731000
/** Get species from node data or props - default to Arabidopsis */
9741001
const species = node.data.metadata?.genome;
975-
976-
switchViewAndGene('Cell eFP', geneName);
9771002

1003+
/** Validate view and gene */
1004+
const isValidView = userViews.some(view => view.id === 'Cell eFP');
1005+
1006+
if (isValidView) {
9781007
/** Call switch view function with species information */
979-
if (!species || !(species in ePlantLinks)) {
980-
/** Call switch view function to swap the view using designated view id and gene name */
981-
switchViewAndGene('Cell eFP', geneName);
982-
} else {
983-
/** Handle external species navigation */
984-
switchViewAndGene('Cell eFP', geneName, ePlantLinks[species]);
985-
}
986-
}}
1008+
if (!species || !(species in ePlantLinks)) {
1009+
/** Call switch view function to swap the view using designated view id and gene name */
1010+
switchViewAndGene('Cell eFP', geneName);
1011+
} else {
1012+
/** Handle external species navigation */
1013+
switchViewAndGene('Cell eFP', geneName, ePlantLinks[species]);
1014+
}
1015+
}
1016+
}}
1017+
style={{ cursor: (userViews.some(view => view.id === 'Cell eFP')) ? 'pointer' : 'not-allowed' }}
9871018
>
9881019
<rect
9891020
width={20}
9901021
height={20}
9911022
fill="transparent"
9921023
style={{ cursor: 'pointer' }}
9931024
/>
994-
<g style={{ pointerEvents: 'none' }}>
1025+
<g style={{ pointerEvents: 'none', opacity: (userViews.some(view => view.id === 'Cell eFP')) ? 1 : 0.5 }}>
9951026
<CellEFPIcon/>
9961027
</g>
9971028
</g>
@@ -1007,18 +1038,34 @@ useEffect(() => {
10071038
);
10081039
}
10091040
}}
1010-
onClick={() => {
1011-
const url = `#`;
1012-
window.open(url, "_blank");
1013-
}}
1041+
onClick={(event) => {
1042+
/** Extract the geneName */
1043+
const geneName = displayName;
1044+
/** Get species from node data or props - default to Arabidopsis */
1045+
const species = node.data.metadata?.genome;
1046+
1047+
/** Validate view and gene */
1048+
const isValidView = userViews.some(view => view.id === 'Molecule');
1049+
1050+
if (isValidView) {
1051+
/** Call switch view function with species information */
1052+
if (!species || !(species in ePlantLinks)) {
1053+
/** Call switch view function to swap the view using designated view id and gene name */
1054+
switchViewAndGene('Molecule', geneName);
1055+
} else {
1056+
/** Handle external species navigation */
1057+
switchViewAndGene('Molecule', geneName, ePlantLinks[species]);
1058+
}
1059+
}
1060+
}}
10141061
>
10151062
<rect
10161063
width={16}
10171064
height={16}
10181065
fill="transparent"
10191066
style={{ cursor: 'pointer' }}
10201067
/>
1021-
<g style={{ pointerEvents: 'none' }}>
1068+
<g style={{ pointerEvents: 'none', opacity: (userViews.some(view => view.id === 'Molecule')) ? 1 : 0.5 }}>
10221069
<GeneInfoViewIcon/>
10231070
</g>
10241071
</g>
@@ -1034,18 +1081,34 @@ useEffect(() => {
10341081
);
10351082
}
10361083
}}
1037-
onClick={() => {
1038-
const url = `#`;
1039-
window.open(url, "_blank");
1040-
}}
1084+
onClick={(event) => {
1085+
/** Extract the geneName */
1086+
const geneName = displayName;
1087+
/** Get species from node data or props - default to Arabidopsis */
1088+
const species = node.data.metadata?.genome;
1089+
1090+
/** Validate view and gene */
1091+
const isValidView = userViews.some(view => view.id === 'Interactions');
1092+
1093+
if (isValidView) {
1094+
/** Call switch view function with species information */
1095+
if (!species || !(species in ePlantLinks)) {
1096+
/** Call switch view function to swap the view using designated view id and gene name */
1097+
switchViewAndGene('Interactions', geneName);
1098+
} else {
1099+
/** Handle external species navigation */
1100+
switchViewAndGene('Interactions', geneName, ePlantLinks[species]);
1101+
}
1102+
}
1103+
}}
10411104
>
10421105
<rect
10431106
width={16}
10441107
height={16}
10451108
fill="transparent"
10461109
style={{ cursor: 'pointer' }}
10471110
/>
1048-
<g style={{ pointerEvents: 'none' }}>
1111+
<g style={{ pointerEvents: 'none', opacity: (userViews.some(view => view.id === 'Interactions')) ? 1 : 0.5 }}>
10491112
<GeneInfoViewIcon/>
10501113
</g>
10511114
</g>

‎Eplant/views/ViewGeneSwitching.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,6 @@ export const createViewSwitchProvider = () => {
144144

145145
if (speciesUrl) {
146146
handleExternalSpecies(speciesUrl, geneName);
147-
return;
148147
}
149148

150149
const geneticElement = await loadGene(geneName);
@@ -165,7 +164,6 @@ export const createViewSwitchProvider = () => {
165164

166165
if (speciesUrl) {
167166
handleExternalSpecies(speciesUrl, geneName);
168-
return;
169167
}
170168

171169
const targetView = validateView(viewId);

0 commit comments

Comments
 (0)