feat(graph): options for agg graph

dataesr · Dec 6, 2023 · fce51dd · fce51dd
1 parent 31bb89b
commit fce51dd
Show file tree

Hide file tree

Showing 11 changed files with 316 additions and 144 deletions.
diff --git a/client/src/layout/Graph.jsx b/client/src/layout/Graph.jsx
@@ -1,5 +1,5 @@
 import '@react-sigma/core/lib/react-sigma.min.css';
-import { Container, Col, Row, Alert } from '@dataesr/react-dsfr';
+import { Container, Col, Row, Alert, Radio, RadioGroup } from '@dataesr/react-dsfr';
 import {
   ControlsContainer,
   FullScreenControl,
@@ -57,20 +57,24 @@ const highlightGraph = (graph, selectedNode) => {
 
 export default function Graph({ data }) {
   console.log('data', data);
-  const graph = UndirectedGraph.from(data.graph);
+
+  const graphOptions = Object.keys(data.graph);
   const { publications, structures } = data;
 
   const [selectedNode, setSelectedNode] = useState(null);
+  const [selectedOption, setSelectedOption] = useState(graphOptions[0]);
+
+  const graph = UndirectedGraph.from(data.graph[selectedOption]);
 
   // 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.nodes, ({ attributes }) => attributes.community);
-  console.log('communities', communities);
+  const communities = groupBy(data.graph[selectedOption].nodes, ({ attributes }) => attributes.community);
+  // console.log('communities', communities);
 
-  // Update nodes
+  // Update nodes color
   graph.updateEachNodeAttributes(
     (node, attr) => ({
       ...attr,
@@ -81,6 +85,21 @@ export default function Graph({ data }) {
 
   return (
     <Container fluid className="fr-my-3w">
+      {(graphOptions.length > 1) && (
+        <RadioGroup
+          isInline
+          label={selectedOption}
+        >
+          {graphOptions.map((option) => (
+            <Radio
+              label={option}
+              value={option}
+              defaultChecked={option === selectedOption}
+              onChange={(event) => setSelectedOption(event.target.value)}
+            />
+          ))}
+        </RadioGroup>
+      )}
       <Row gutters>
         <Col n="12">
           <SigmaContainer

diff --git a/client/src/layout/NodePanel.jsx b/client/src/layout/NodePanel.jsx
@@ -5,41 +5,46 @@ import { publicationsGetTopicsCount } from '../utils/publicationUtils';
 import { COMMUNTIY_COLORS } from '../styles/colors';
 
 export default function NodePanel({ selectedNode, graph, publications }) {
-  if (!selectedNode || !graph.order || Object.keys(publications).length === 0) return null;
+  if (!selectedNode || !graph.order) return null;
+  console.log('selectedNode', selectedNode);
 
   return (
     <div className="fr-card fr-card--shadow">
       <div className="fr-my-2w fr-card__body">
         <Title look="h6" as="p" className="fr-mb-1v">
-          {selectedNode.name}
+          {selectedNode.label}
         </Title>
-        <BadgeGroup className="fr-mt-1w">
-          <Badge colorFamily="yellow-tournesol" text={`${selectedNode.id}`} />
-          <Badge
-            colorFamily="orange-terre-battue"
-            text={`Last publication: ${Math.max(
-              ...graph.getNodeAttribute(selectedNode.id, 'publications').map((publicationId) => publications[publicationId].year),
-            )}`}
-          />
-          <Badge
-            colorFamily="blue-cumulus"
-            text={`Community ${GetColorName(COMMUNTIY_COLORS[selectedNode.community])} (${selectedNode.community})`}
-          />
-        </BadgeGroup>
-        <Accordion className="fr-mt-1w">
-          <AccordionItem title={`${selectedNode.degree} co-authors`}>
-            {graph.mapNeighbors(selectedNode.id, (node, attr) => attr.name).join(', ')}
-          </AccordionItem>
-          <AccordionItem title={`${selectedNode.weight} publications`}>
-            {graph.getNodeAttribute(selectedNode.id, 'publications').map((publicationId) => (
-              <p>{publications[publicationId]?.title}</p>
-            ))}
-          </AccordionItem>
-        </Accordion>
-        <BadgeGroup className="fr-mt-2w">
-          {publicationsGetTopicsCount(publications, graph.getNodeAttribute(selectedNode.id, 'publications'), 10)
-            .map((topic) => <Badge type="info" text={`${topic[0]} (${topic[1]})`} />)}
-        </BadgeGroup>
+        {(Object.keys(publications).length !== 0) && (
+          <Container>
+            <BadgeGroup className="fr-mt-1w">
+              <Badge colorFamily="yellow-tournesol" text={`${selectedNode.id}`} />
+              <Badge
+                colorFamily="orange-terre-battue"
+                text={`Last publication: ${Math.max(
+                  ...graph.getNodeAttribute(selectedNode.id, 'publications').map((publicationId) => publications[publicationId].year),
+                )}`}
+              />
+              <Badge
+                colorFamily="blue-cumulus"
+                text={`Community ${GetColorName(COMMUNTIY_COLORS[selectedNode.community])} (${selectedNode.community})`}
+              />
+            </BadgeGroup>
+            <Accordion className="fr-mt-1w">
+              <AccordionItem title={`${selectedNode.degree} co-authors`}>
+                {graph.mapNeighbors(selectedNode.id, (node, attr) => attr.name).join(', ')}
+              </AccordionItem>
+              <AccordionItem title={`${selectedNode.weight} publications`}>
+                {graph.getNodeAttribute(selectedNode.id, 'publications').map((publicationId) => (
+                  <p>{publications[publicationId]?.title}</p>
+                ))}
+              </AccordionItem>
+            </Accordion>
+            <BadgeGroup className="fr-mt-2w">
+              {publicationsGetTopicsCount(publications, graph.getNodeAttribute(selectedNode.id, 'publications'), 10)
+                .map((topic) => <Badge type="info" text={`${topic[0]} (${topic[1]})`} />)}
+            </BadgeGroup>
+          </Container>
+        )}
       </div>
     </div>
   );