feat(openalex): Add color information modal with color representation…

… details
dataesr · Dec 4, 2024 · ab855e7 · ab855e7
1 parent d1279ca
commit ab855e7
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 13 deletions.
diff --git a/client/src/pages/openalex-affiliations/results/list-view.jsx b/client/src/pages/openalex-affiliations/results/list-view.jsx
@@ -24,6 +24,7 @@ export default function ListView({
   toggleRemovedRor,
 }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isColorInfoModalOpen, setIsColorInfoModalOpen] = useState(false);
   const [selectSortOnNumberOfRors, setSelectSortOnNumberOfRors] = useState('default');
   const [selectShowAffiliations, setSelectShowAffiliations] = useState('all');
   const [selectRorCountry, setSelectRorCountry] = useState('all');
@@ -139,6 +140,68 @@ export default function ListView({
                 {Object.values(sortsAndFilters).filter((value) => value !== 'default' && value !== 'all').length}
               </Badge>
             </Button>
+            <Button
+              aria-label="Open colors info modal"
+              color="beige-gris-galet"
+              onClick={() => setIsColorInfoModalOpen((prev) => !prev)}
+              size="sm"
+              icon="palette-fill"
+            />
+            <Modal isOpen={isColorInfoModalOpen} hide={() => setIsColorInfoModalOpen((prev) => !prev)} size="md">
+              <ModalTitle>
+                Additional information for colors
+              </ModalTitle>
+              <ModalContent>
+                <Text>
+                  RORs are grouped, summed and sorted for all the affiliations displayed. A colour is assigned to the most represented
+                  <br />
+                  <br />
+                  A colour is assigned to a single ROR
+                  <br />
+                  <br />
+                  Here is the order of colours from most to least represented
+                  <br />
+                  <i>Most represented</i>
+                  <span
+                    className="wm-dot fr-mr-2w fr-ml-1w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--green-archipel'),
+                    }}
+                  />
+                  <span
+                    className="wm-dot fr-mr-2w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--purple-glycine'),
+                    }}
+                  />
+                  <span
+                    className="wm-dot fr-mr-2w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--pink-tuile'),
+                    }}
+                  />
+                  <span
+                    className="wm-dot fr-mr-2w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--green-menthe'),
+                    }}
+                  />
+                  <span
+                    className="wm-dot fr-mr-2w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--brown-cafe-creme'),
+                    }}
+                  />
+                  <span
+                    className="wm-dot fr-mr-1w"
+                    style={{
+                      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--beige-gris-galet'),
+                    }}
+                  />
+                  <i>Less represented</i>
+                </Text>
+              </ModalContent>
+            </Modal>
           </Col>
         </Row>
       </div>

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -125,6 +125,7 @@ html, body {
   // background: linear-gradient(to right, #0e0e31, #1a1add);
   background-color: #fff;
 }
+
 .wm-message{
   background-color: #eee;
   padding: 15px;
@@ -161,31 +162,41 @@ html, body {
   .wm-text{
     color: white;
     padding: 5px;
-    & span{font-size: 1.5em; font-weight: bold;
+    & span{
+      font-size: 1.5em; 
+      font-weight: bold;
+    }
   }
-}
-  .wm-button{
+  
+  .wm-button {
     width: 90%;
     border-top-right-radius: 15px;
     border-bottom-right-radius: 15px;
   }
 }
 
+.wm-dot {
+  border-radius: 10px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+}
+
 .wm-content {
   padding: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px;
-
-
-  .wm-external-actions{
+
+  .wm-external-actions {
     border: #777 1px solid;
     background-color: #eee;
     padding: 10px 0 0  10px;
     border-top-right-radius: 15px;
     border-top-left-radius: 15px;
     border-bottom: 1px solid #ddd;
   }
-  .wm-internal-actions{
+  .wm-internal-actions {
     border-bottom: #777 1px solid;
     border-left: #777 1px solid;
     border-right: #777 1px solid;
@@ -233,12 +244,6 @@ html, body {
 }
 
 :root {
-  --ror-1: #006A6F;
-  --ror-2: #5c006f;
-  --ror-3: #e99700;
-  --ror-4: #6f0018;
-  --ror-5: #046f00;
-  --ror-x: #fff;
   --green-archipel: #00a99d;
   --purple-glycine: #8a2be2;
   --pink-tuile: #ff69b4;