fix(layout): reset page when datasource change

dataesr · Dec 21, 2023 · 2d358c9 · 2d358c9
1 parent 8dee5e9
commit 2d358c9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git a/client/src/layout/Graph.jsx b/client/src/layout/Graph.jsx
@@ -56,21 +56,21 @@ const highlightGraph = (graph, selectedNode) => {
   return graph;
 };
 
-export default function Graph({ data, selectedOption }) {
+export default function Graph({ data, selectedGraph }) {
   console.log('data', data);
   const { publications, structures } = data;
 
   const [selectedNode, setSelectedNode] = useState(null);
 
-  console.log('selectedOption', selectedOption);
-  const graph = UndirectedGraph.from(data.graph[selectedOption]);
+  console.log('selectedGraph', selectedGraph);
+  const graph = UndirectedGraph.from(data.graph[selectedGraph]);
 
   // Return alert if graph empty
   if (graph.order === 0) {
     return <Alert title="No results found" description="Your query returned no results" type="warning" closable />;
   }
 
-  const communities = groupBy(data.graph[selectedOption].nodes, ({ attributes }) => attributes.community);
+  const communities = groupBy(data.graph[selectedGraph].nodes, ({ attributes }) => attributes.community);
   // console.log('communities', communities);
 
   // Update nodes color

diff --git a/client/src/pages/home.jsx b/client/src/pages/home.jsx
@@ -59,6 +59,8 @@ export default function Home() {
   const [formEndYear, setFormEndYear] = useState(searchParams.getAll('endyear')[0] || 2023);
   const [formCountries, setFormCountries] = useState(searchParams.getAll('countries') || ['FR']);
   const [isError, setFormIsError] = useState(false);
+  const [displayGraph, setDisplayGraph] = useState(false);
+  const [selectedGraph, setSelectedGraph] = useState('main');
 
   useEffect(
     () => setSearchParams({
@@ -156,8 +158,12 @@ export default function Home() {
     },
   ];
 
-  const graphOptions = Object.keys(data?.graph || { main: 0 });
-  const [selectedOption, setSelectedOption] = useState(graphOptions[0]);
+  useEffect(() => {
+    if (data?.graph) {
+      setSelectedGraph(Object.keys(data.graph)[0]);
+      setDisplayGraph(true);
+    }
+  }, [data, setSelectedGraph, setDisplayGraph]);
 
   return (
     <Container className="fr-my-15w">
@@ -175,9 +181,11 @@ export default function Home() {
         selected={formDatasource}
         onChange={(e) => {
           setFormDatasource(e.target.value);
-          // setFormType('keyword');
-          // setFormQueries([]);
-          // setFormCondition('OR')
+          setSelectedGraph('main');
+          setDisplayGraph(false);
+          setFormType('keyword');
+          setFormQueries([]);
+          setFormCondition('OR');
         }}
       />
       {formDatasource !== 'scanr-agg' && (
@@ -295,39 +303,41 @@ export default function Home() {
           closable
         />
       )}
-      {!isFetching && data?.graph && (
+      {!isFetching && displayGraph && (
         <Container className="fr-mt-2w">
-          {(graphOptions.length > 1) && (
+          {(Object.keys(data.graph).length > 1) && (
             <RadioGroup
               isInline
-              label={selectedOption}
+              label={selectedGraph}
             >
-              {graphOptions.map((option) => (
+              {Object.keys(data.graph).map((option) => (
                 <Radio
                   label={option}
                   value={option}
-                  defaultChecked={option === selectedOption}
-                  onChange={(event) => setSelectedOption(event.target.value)}
+                  defaultChecked={option === Object.keys(data.graph)[0]}
+                  onChange={(event) => setSelectedGraph(event.target.value)}
                 />
               ))}
             </RadioGroup>
           )}
-          <Row gutters>
-            <Col>
-              <Graph data={data} selectedOption={selectedOption} />
-            </Col>
-            <Col>
-              <div key={selectedOption} style={{ height: '400px' }}>
-                <VOSviewerOnline
-                  data={graphEncodeToJson(data.graph[selectedOption])}
-                  parameters={{ attraction: 1, largest_component: false, simple_ui: true }}
-                />
-              </div>
-            </Col>
-          </Row>
+          {(selectedGraph in data.graph) && (
+            <Row gutters>
+              <Col>
+                <Graph data={data} selectedGraph={selectedGraph} />
+              </Col>
+              <Col>
+                <div key={selectedGraph} style={{ height: '400px' }}>
+                  <VOSviewerOnline
+                    data={graphEncodeToJson(data.graph[selectedGraph])}
+                    parameters={{ attraction: 1, largest_component: false, simple_ui: true }}
+                  />
+                </div>
+              </Col>
+            </Row>
+          )}
           <Button
             className="fr-btn fr-btn--tertiary fr-btn--icon-right fr-icon-download-line"
-            onClick={() => exportJson(graphEncodeToJson(data.graph[selectedOption]))}
+            onClick={() => exportJson(graphEncodeToJson(data.graph[selectedGraph]))}
           >
             Download graph
           </Button>