Merge commit 'fce51dd911c75f453abfa7a4209f68f11c6a6517' into staging

dataesr · Dec 7, 2023 · 3e08b14 · 3e08b14
2 parents 2130077 + fce51dd
commit 3e08b14
Show file tree

Hide file tree

Showing 15 changed files with 526 additions and 154 deletions.
diff --git a/client/src/layout/ClustersPanel.jsx b/client/src/layout/ClustersPanel.jsx
@@ -6,7 +6,7 @@ import { fillMainCommunities } from '../utils/communityUtils';
 import { COMMUNTIY_COLORS } from '../styles/colors';
 
 export default function ClustersPanel({ graph, communities, publications, structures }) {
-  if (!graph.order) return null;
+  if (!graph.order || Object.keys(publications).length === 0) return null;
 
   // Fill communities
   const filledCommunities = fillMainCommunities(communities, publications, structures, { communitiesLimit: 6, authorsLimit: 10, institutionsLimit: 5, topicsLimit: 5, typesLimit: 3 });

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
@@ -1,45 +1,50 @@
 import '@react-sigma/core/lib/react-sigma.min.css';
-import { Badge, BadgeGroup, Title, Accordion, AccordionItem } from '@dataesr/react-dsfr';
+import { Badge, BadgeGroup, Title, Accordion, AccordionItem, Container } from '@dataesr/react-dsfr';
 import { GetColorName } from 'hex-color-to-color-name';
 import { publicationsGetTopicsCount } from '../utils/publicationUtils';
 import { COMMUNTIY_COLORS } from '../styles/colors';
 
 export default function NodePanel({ selectedNode, graph, publications }) {
-  if (!selectedNode) 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>
   );

diff --git a/client/src/pages/home.jsx b/client/src/pages/home.jsx
@@ -122,9 +122,8 @@ export default function Home() {
       value: 'openalex',
     },
     {
-      label: 'HAL',
-      value: 'hal',
-      disabled: true,
+      label: 'scanR with aggregations',
+      value: 'scanr-agg',
     },
   ];
 
@@ -175,16 +174,18 @@ export default function Home() {
           // setFormCondition('OR')
         }}
       />
-      <Select
-        label="Choose your graph type"
-        options={types}
-        selected={formType}
-        onChange={(e) => {
-          setFormType(e.target.value);
-          setFormQueries([]);
-          setFormCondition('OR');
-        }}
-      />
+      {formDatasource !== 'scanr-agg' && (
+        <Select
+          label="Choose your graph type"
+          options={types}
+          selected={formType}
+          onChange={(e) => {
+            setFormType(e.target.value);
+            // setFormQueries([]);
+            // setFormCondition('OR');
+          }}
+        />
+      )}
       <Row gutters>
         <Col>
           <TagInput

diff --git a/notebooks/ElasticDataAggreg.ipynb b/notebooks/ElasticDataAggreg.ipynb