11import { useEffect , useState , useRef } from "react" ;
22import classNames from "classnames" ;
3- import "../../../../App.css" ;
4- import { useNotification } from "../../../../components/NotificationProvider" ;
5- import { fetchAssembliesByTaxonIDs , fetchTaxonTree } from "../../../../api" ;
6- import SpeciesProfilePictureViewer from "../../../../components/SpeciesProfilePictureViewer" ;
3+ import "../../../../../../ App.css" ;
4+ import { useNotification } from "../../../../../../ components/NotificationProvider" ;
5+ import { fetchTaxonTree } from "../../ ../../../../api" ;
6+ import SpeciesProfilePictureViewer from "../../../../../../ components/SpeciesProfilePictureViewer" ;
77import { Expand , Vulnerability } from "grommet-icons" ;
88
99import Tree from "react-d3-tree" ;
10- import LoadingSpinner from "../../../../components/LoadingSpinner" ;
11- import Button from "../../../../components/Button" ;
12- import AssembliesGridElement from "../AssembliesList/components/ AssembliesGridElement" ;
10+ import LoadingSpinner from "../../../../../../ components/LoadingSpinner" ;
11+ import Button from "../../../../../../ components/Button" ;
12+ import AssembliesGridElement from "../AssembliesGridElement" ;
1313
14- const AssembliesTreeViewer = ( ) => {
14+ const AssembliesTreeViewer = ( { filter , setFilter , assemblies , loading } ) => {
1515 const [ tree , setTree ] = useState ( { } ) ;
1616 const [ fullTree , setFullTree ] = useState ( { } ) ;
17- const [ taxa , setTaxa ] = useState ( [ ] ) ;
1817 const [ height , setHeight ] = useState ( 0 ) ;
1918 const [ width , setWidth ] = useState ( 0 ) ;
2019 const [ expandTree , setExpandTree ] = useState ( false ) ;
2120 const [ loadingTree , setLoadingTree ] = useState ( false ) ;
22- const [ showElements , setShowElements ] = useState ( 10 ) ;
23- const [ currentNode , setCurrentNode ] = useState ( "" ) ;
21+ const [ currentNode , setCurrentNode ] = useState ( "root" ) ;
2422 const ref = useRef ( null ) ;
2523 const cardsRef = useRef ( null ) ;
2624
@@ -31,6 +29,12 @@ const AssembliesTreeViewer = () => {
3129 // eslint-disable-next-line react-hooks/exhaustive-deps
3230 } , [ ] ) ;
3331
32+ useEffect ( ( ) => {
33+ if ( ! filter || ! filter . taxonIDs ) {
34+ setCurrentNode ( "root" ) ;
35+ }
36+ } , [ filter ] ) ;
37+
3438 // notifications
3539 const dispatch = useNotification ( ) ;
3640
@@ -83,18 +87,9 @@ const AssembliesTreeViewer = () => {
8387 } ;
8488
8589 const loadTaxa = async ( nodeDatum ) => {
86- const userID = JSON . parse ( sessionStorage . getItem ( "userID" ) || "" ) ;
87- const token = JSON . parse ( sessionStorage . getItem ( "token" ) || "" ) ;
88-
89- const response = await fetchAssembliesByTaxonIDs ( getChildrenTaxIds ( nodeDatum ) , userID , token ) ;
90-
91- if ( response && response . payload ) {
92- setTaxa ( response . payload ) ;
93- }
94-
95- if ( response && response . notification && response . notification . length > 0 ) {
96- response . notification . map ( ( not ) => handleNewNotification ( not ) ) ;
97- }
90+ setFilter ( ( prevState ) => {
91+ return { ...prevState , taxonIDs : getChildrenTaxIds ( nodeDatum ) . sort ( ) } ;
92+ } ) ;
9893 } ;
9994
10095 const getChildrenTaxIds = ( nodeDatum ) => {
@@ -139,7 +134,6 @@ const AssembliesTreeViewer = () => {
139134 onClick = { ( ) => {
140135 loadTaxa ( nodeDatum ) ;
141136 executeScroll ( ) ;
142- setShowElements ( 10 ) ;
143137 setCurrentNode ( nodeDatum . name ) ;
144138 // toggleNode();
145139 } }
@@ -231,65 +225,37 @@ const AssembliesTreeViewer = () => {
231225 </ div >
232226 < div className = "mt-8 min-h-1/2" ref = { cardsRef } >
233227 < div className = "flex" >
234- < div className = "w-full bg-gray-500 rounded-lg px-4 p-2 text-white font-bold mb-4" >
228+ < div className = "w-full bg-gray-500 rounded-lg px-4 p-2 text-white font-bold mb-4 flex " >
235229 Results:
230+ { loading && (
231+ < div className = "px-4" >
232+ < LoadingSpinner label = "Loading..." />
233+ </ div >
234+ ) }
236235 </ div >
237236 < div className = "w-32 ml-4" >
238237 < Button label = "Scroll to top" color = "secondary" onClick = { ( ) => executeScrollTree ( ) } />
239238 </ div >
240239 </ div >
241- { taxa && taxa . length > 0 ? (
240+ { assemblies && assemblies . length > 0 ? (
242241 < div >
243242 < div className = "ml-12" >
244243 < span > Last common ancestor:</ span >
245244 < span className = "font-bold text-xl ml-2" > { currentNode } </ span >
246245 </ div >
247246 < hr className = "m-8 mt-2 shadow" />
248247 < div className = "animate-grow-y rounded-lg grid gap-8 grid-cols-2 mt-8 px-8" >
249- { taxa . map ( ( assembly , index ) => {
250- if ( index < showElements ) {
251- return (
252- < div key = { assembly . id } className = "animate-fade-in" >
253- < AssembliesGridElement
254- assembly = { assembly }
255- fcatMode = { 1 }
256- renderDelay = { index + 1 }
257- />
258- </ div >
259- ) ;
260- } else {
261- return < div key = { assembly . id } /> ;
262- }
263- } ) }
264- </ div >
265- < hr className = "m-8 shadow" />
266- < div className = "flex justify-around" >
267- { showElements > 10 && (
268- < div className = "mt-2" >
269- < div className = "flex justify-center" >
270- < div className = "w-32" >
271- < Button
272- color = "nav"
273- label = "View less..."
274- onClick = { ( ) => setShowElements ( ( prevState ) => prevState - 10 ) }
275- />
276- </ div >
277- </ div >
278- </ div >
279- ) }
280- { showElements < taxa . length && (
281- < div className = "mt-2" >
282- < div className = "flex justify-center" >
283- < div className = "w-32" >
284- < Button
285- color = "nav"
286- label = "View more..."
287- onClick = { ( ) => setShowElements ( ( prevState ) => prevState + 10 ) }
288- />
289- </ div >
248+ { assemblies . map ( ( assembly , index ) => {
249+ return (
250+ < div key = { assembly . id } className = "animate-fade-in" >
251+ < AssembliesGridElement
252+ assembly = { assembly }
253+ fcatMode = { 1 }
254+ renderDelay = { index + 1 }
255+ />
290256 </ div >
291- </ div >
292- ) }
257+ ) ;
258+ } ) }
293259 </ div >
294260 </ div >
295261 ) : (
0 commit comments