fix: missing legend title for visualisation map

researchdata-sheffield · Nov 23, 2021 · 15d556a · 15d556a
1 parent 8fbe278
commit 15d556a
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 60 deletions.
diff --git a/content/visualisation/2021-10-20-Marine-Fishes-Near-Extinction/extinctionMap.jsx b/content/visualisation/2021-10-20-Marine-Fishes-Near-Extinction/extinctionMap.jsx
@@ -68,8 +68,8 @@ const ExtinctionMap = () => {
       id="visualisation"
       style={{
         backgroundImage: `linear-gradient(215deg, #d0d0d0 20%, #c6c6c6 60%, #000 100%)`,
-        minWidth: "640px",
-        minHeight: "640px",
+        minWidth: "800px",
+        minHeight: "800px",
         maxWidth: "1100px",
         maxHeight: "1100px",
         borderRadius: "20px",
@@ -126,7 +126,7 @@ const ExtinctionMap = () => {
               direction: "column",
               justify: true,
               translateX: 30,
-              translateY: -70,
+              translateY: -80,
               itemsSpacing: 0,
               itemWidth: 92,
               itemHeight: 18,
@@ -215,6 +215,18 @@ const ExtinctionMap = () => {
           }}
         />
       </div>
+      <h3
+        style={{
+          fontSize: ".75rem",
+          color: "white",
+          position: "absolute",
+          left: 0,
+          bottom: "2.5%",
+          margin: "1.5rem"
+        }}
+      >
+        Predicted probability of extinction
+      </h3>
       <img
         src={Shark}
         alt="Shark image"

diff --git a/src/components/home/searchHome.jsx b/src/components/home/searchHome.jsx
@@ -125,7 +125,7 @@ class SearchHome extends Component {
                 <Link
                   className={quickLink}
                   to="/#explore"
-                  data-tip="#Data and visualisation"
+                  data-tip="#What is Data visualisation"
                 >
                   Data visualisation
                 </Link>
@@ -174,10 +174,10 @@ class SearchHome extends Component {
               <li>
                 <Link
                   className={quickLink}
-                  data-tip="#The latest from TUoS"
+                  data-tip="#InfoVis - The latest from TUoS"
                   to="/visualisation"
                 >
-                  InfoVis
+                  Visualisation
                 </Link>
               </li>
               <ReactTooltip

diff --git a/src/components/shared/__tests__/__snapshots__/footer.spec.js.snap b/src/components/shared/__tests__/__snapshots__/footer.spec.js.snap
@@ -64,6 +64,15 @@ Object {
                   Events
                 </a>
               </li>
+              <li>
+                <a
+                  class="text-gray-400 hover:text-brand-blue"
+                  gatsby="true"
+                  href="/visualisation"
+                >
+                  Visualisation
+                </a>
+              </li>
               <li>
                 <a
                   class="undefined text-gray-400 hover:text-brand-blue"
@@ -450,6 +459,15 @@ Object {
                 Events
               </a>
             </li>
+            <li>
+              <a
+                class="text-gray-400 hover:text-brand-blue"
+                gatsby="true"
+                href="/visualisation"
+              >
+                Visualisation
+              </a>
+            </li>
             <li>
               <a
                 class="undefined text-gray-400 hover:text-brand-blue"

diff --git a/src/components/shared/__tests__/__snapshots__/header.spec.js.snap b/src/components/shared/__tests__/__snapshots__/header.spec.js.snap
@@ -95,7 +95,7 @@ exports[`Header renders correctly 1`] = `
         className="mt-5 justify-end flex flex-wrap items-center"
       >
         <a
-          className="transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/"
           mobile="true"
@@ -104,7 +104,7 @@ exports[`Header renders correctly 1`] = `
           Home
         </a>
         <a
-          className="transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/community"
           mobile="true"
@@ -113,7 +113,7 @@ exports[`Header renders correctly 1`] = `
           Community
         </a>
         <a
-          className="transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/events"
           mobile="true"
@@ -122,7 +122,7 @@ exports[`Header renders correctly 1`] = `
           Events
         </a>
         <a
-          className="transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/blog"
           mobile="true"
@@ -131,7 +131,16 @@ exports[`Header renders correctly 1`] = `
           Blog
         </a>
         <a
-          className="sc-crHmcD ixmMsE transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          gatsby="true"
+          href="/visualisation"
+          mobile="true"
+          type="Link"
+        >
+          InfoVis
+        </a>
+        <a
+          className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           href="https://orda.shef.ac.uk/visualisations/"
           rel="noopener noreferrer"
           style={
@@ -145,7 +154,7 @@ exports[`Header renders correctly 1`] = `
           Showcase
         </a>
         <a
-          className="transition duration-300 text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-600 hover:text-brand-blue block w-full text-2xl transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/about"
           mobile="true"
@@ -157,7 +166,7 @@ exports[`Header renders correctly 1`] = `
           className="flex flex-wrap w-full justify-center space-x-4 mt-8 pt-6 border-t-2 border-gray-200"
         >
           <a
-            className="sc-crHmcD ixmMsE transition duration-300 text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
+            className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
             href="https://groups.google.com/a/sheffield.ac.uk/g/shef_dataviz-group"
             rel="noopener noreferrer"
             style={
@@ -193,7 +202,7 @@ exports[`Header renders correctly 1`] = `
             </div>
           </a>
           <a
-            className="sc-crHmcD ixmMsE transition duration-300 text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
+            className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
             href="https://shef-dataviz.slack.com/join/signup#/domain-signup"
             rel="noopener noreferrer"
             style={
@@ -229,7 +238,7 @@ exports[`Header renders correctly 1`] = `
             </div>
           </a>
           <a
-            className="transition duration-300 text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
+            className="transition duration-300 relative text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
             gatsby="true"
             id="rssMobile"
             mobile="true"
@@ -259,20 +268,10 @@ exports[`Header renders correctly 1`] = `
                   d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"
                 />
               </svg>
-              <span
-                className="invisible group-hover:visible absolute top-0 right-0 bg-red-500 text-white rounded-md text-xs -mt-4 -mr-2"
-                style={
-                  Object {
-                    "padding": "2px 5px",
-                  }
-                }
-              >
-                new
-              </span>
             </button>
           </a>
           <a
-            className="transition duration-300 text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
+            className="transition duration-300 relative text-gray-600 hover:text-brand-blue block mt-3 flex items-center"
             gatsby="true"
             href="/search"
             mobile="true"
@@ -323,31 +322,39 @@ exports[`Header renders correctly 1`] = `
         className="justify-end flex flex-wrap items-center"
       >
         <a
-          className="transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/community"
           type="Link"
         >
           Community
         </a>
         <a
-          className="transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/events"
           type="Link"
         >
           Events
         </a>
         <a
-          className="transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/blog"
           type="Link"
         >
           Blog
         </a>
         <a
-          className="sc-crHmcD ixmMsE transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          gatsby="true"
+          href="/visualisation"
+          type="Link"
+        >
+          InfoVis
+        </a>
+        <a
+          className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           href="https://orda.shef.ac.uk/visualisations/"
           rel="noopener noreferrer"
           style={
@@ -361,15 +368,15 @@ exports[`Header renders correctly 1`] = `
           Showcase
         </a>
         <a
-          className="transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined transition duration-500 ease-in-out md:mr-2 no-underline px-4 py-1"
           gatsby="true"
           href="/about"
           type="Link"
         >
           About
         </a>
         <a
-          className="sc-crHmcD ixmMsE transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
+          className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
           href="https://groups.google.com/a/sheffield.ac.uk/g/shef_dataviz-group"
           rel="noopener noreferrer"
           style={
@@ -405,7 +412,7 @@ exports[`Header renders correctly 1`] = `
           </div>
         </a>
         <a
-          className="sc-crHmcD ixmMsE transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
+          className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
           href="https://shef-dataviz.slack.com/join/signup#/domain-signup"
           rel="noopener noreferrer"
           style={
@@ -441,7 +448,7 @@ exports[`Header renders correctly 1`] = `
           </div>
         </a>
         <a
-          className="sc-crHmcD ixmMsE transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
+          className="sc-crHmcD ixmMsE transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
           id="rssDesktop"
           onClick={[Function]}
           rel="noopener noreferrer"
@@ -475,22 +482,10 @@ exports[`Header renders correctly 1`] = `
                 d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"
               />
             </svg>
-            <span
-              className="invisible group-hover:visible absolute top-0 right-0 bg-red-500 text-white rounded-md -mt-4 -mr-4"
-              style={
-                Object {
-                  "fontSize": ".7rem",
-                  "lineHeight": "1rem",
-                  "padding": "1px 3px",
-                }
-              }
-            >
-              new
-            </span>
           </button>
         </a>
         <a
-          className="transition duration-300 text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
+          className="transition duration-300 relative text-gray-100 group-hover:text-black hover:text-brand-blue undefined flex items-center"
           gatsby="true"
           href="/search"
           title="Search"

diff --git a/src/components/shared/footer.jsx b/src/components/shared/footer.jsx
@@ -43,7 +43,7 @@ const Footer = React.memo(({ className }) => {
               },
               {
                 route: `/visualisation`,
-                title: `InfoVis`
+                title: `Visualisation`
               },
               {
                 route: `https://orda.shef.ac.uk/visualisations/`,

diff --git a/src/components/shared/header.jsx b/src/components/shared/header.jsx
@@ -301,7 +301,7 @@ const Header = () => {
                   to={link.route}
                 >
                   {link.title}
-                  {link.title == "InfoVis" && (
+                  {link.title == "Visualisation" && (
                     <span
                       className="absolute top-0 right-0 bg-red-500 text-white rounded-md text-xs -mr-2"
                       style={{ padding: "2px 5px" }}
@@ -416,7 +416,7 @@ const Header = () => {
                   to={link.route}
                 >
                   {link.title}
-                  {link.title == "InfoVis" && (
+                  {link.title == "Visualisation" && (
                     <span
                       className="invisible group-hover:visible absolute top-0 right-0 bg-red-500 text-white rounded-md -mr-3"
                       style={{

diff --git a/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap b/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap
@@ -204,6 +204,15 @@ Object {
                       Events
                     </a>
                   </li>
+                  <li>
+                    <a
+                      class="text-gray-400 hover:text-brand-blue"
+                      gatsby="true"
+                      href="/visualisation"
+                    >
+                      Visualisation
+                    </a>
+                  </li>
                   <li>
                     <a
                       class="undefined text-gray-400 hover:text-brand-blue"
@@ -870,6 +879,15 @@ Object {
                     Events
                   </a>
                 </li>
+                <li>
+                  <a
+                    class="text-gray-400 hover:text-brand-blue"
+                    gatsby="true"
+                    href="/visualisation"
+                  >
+                    Visualisation
+                  </a>
+                </li>
                 <li>
                   <a
                     class="undefined text-gray-400 hover:text-brand-blue"

diff --git a/src/components/visualisation/visEmbed.jsx b/src/components/visualisation/visEmbed.jsx
@@ -24,6 +24,7 @@ const visEmbed = (props) => {
 
   // process content in <EmbedCode>
   useEffect(() => {
+    // find the <EmbedCode> element
     const filtered = React.Children.toArray(props.children).filter((child) => {
       return child.props.mdxType == "EmbedCode";
     });
@@ -106,17 +107,17 @@ const visEmbed = (props) => {
       </button>
       <div
         id="embedMenu"
-        className={`${
-          embedMenu ? "z-20" : "hidden z-0"
-        } fixed rounded-lg py-5 px-6 text-left text-gray-700`}
+        className={`fixed rounded-lg py-5 px-6 text-left text-gray-700`}
         style={{
           left: "50%",
           top: "50%",
           transform: "translate(-50%, -50%)",
           maxWidth: "800px",
           userSelect: "text",
           backgroundColor: "#f7f7f7",
-          boxShadow: "0 10px 50px -5px #00aeef"
+          boxShadow: "0 10px 50px -5px #00aeef",
+          zIndex: embedMenu ? "999" : "0",
+          display: embedMenu ? "" : "none"
         }}
       >
         {!embedCode && (