Merge pull request #281 from researchdata-sheffield/development

Fix visualisation issues
researchdata-sheffield · May 18, 2022 · 4bde863 · 4bde863
2 parents c639796 + 9713bf5
commit 4bde863
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 10 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -86,7 +86,58 @@ jobs:
           GATSBY_GH_APP_GITALK_ID: ${{ secrets.GATSBY_GH_APP_GITALK_ID }}
           GATSBY_GH_APP_GITALK_SECRET: ${{ secrets.GATSBY_GH_APP_GITALK_SECRET }}
           GATSBY_ENV: ${{ secrets.GATSBY_ENV }}
-
+
+      - name: Zip artifact for test
+        run: 7z a -t7z e2e.7z ./public/ -r
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: repo-artifact
+          path: e2e.7z
+          retention-days: 1
+
+  E2E-Test:
+    needs: CI-Build
+    runs-on: windows-latest
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'npm'
+
+      # Retrieve gatsby cache
+      # Creates new cache when OS/run_id changes
+      # Skip if the commit message contains text 'skip cache'
+      - name: Gatsby Cache
+        if: "!contains(github.event.head_commit.message, 'skip cache')"
+        id: gatsby-ci-cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            public
+            .cache
+          key: ${{ runner.os }}-gatsby-ci-${{ github.run_id }} 
+          restore-keys: ${{ runner.os }}-gatsby-ci-
+
+      - name: Install playwright dependencies
+        uses: microsoft/playwright-github-action@v1
+
+      - name: Install dependencies
+        run: npm ci
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: repo-artifact
+
+      - name: unzip artifact
+        run: 7z x e2e.7z -aoa
+
       - name: Serve and E2E test
         run: npm run serve & npm run test:e2e; tskill node
 

diff --git a/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx b/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx
@@ -12,6 +12,7 @@ const FairnessVis = () => {
     <VisWrap
       id="visualisation"
       style={{
+        minWidth: "500px",
         maxWidth: "1180px",
         background: "linear-gradient(345deg, #c6e7ff 0%, #fff0a5 100%)",
         padding: "30px",

diff --git a/...t/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/components/datasetResult.jsx b/...t/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/components/datasetResult.jsx
@@ -74,7 +74,6 @@ const DatasetResult = () => {
     );
 
     setDataset(filteredResult[0]);
-    return null;
   };
 
   const formatPublishedDate = (dateString) => {
@@ -95,13 +94,17 @@ const DatasetResult = () => {
     <ResultWrapper style={{ marginTop: "50px" }}>
       <h1 className="title">Assessment result by dataset</h1>
       <div className="searchBar">
-        <CustomInput
-          list="datasets"
-          value={searchValue}
-          onChange={onChangeInput}
-          placeholder="Search by title, DOI, date (yyyy-mm-dd), ..."
-        />
-        &#128269;
+        <div
+          style={{ display: "flex", alignItems: "center", minWidth: "300px" }}
+        >
+          <CustomInput
+            list="datasets"
+            value={searchValue}
+            onChange={onChangeInput}
+            placeholder="Search by title, DOI, date (yyyy-mm-dd), ..."
+          />
+          <span>&#128269;</span>
+        </div>
         <SearchResults className="search-results">
           {searchResults.length != 0 &&
             searchResults.slice(0, 10).map((dataset, idx) => (

diff --git a/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/components/styles.jsx b/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/components/styles.jsx
@@ -56,6 +56,8 @@ export const SummaryBox = styled.div`
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
     0 8px 10px -6px rgba(0, 0, 0, 0.1);
   ${"" /* box-shadow: 2px 2px 5px 2px #000; */}
+  flex-grow: 1;
+  flex-basis: 0;
 
   h1 {
     font-weight: 900;
@@ -94,10 +96,15 @@ export const ResultWrapper = styled.div`
     padding: 0.5rem;
     border-radius: 5px 5px 0 0;
 
+    &:focus-within {
+      .search-results {
+        opacity: 1;
+      }
+    }
+
     :hover {
       .search-results {
         opacity: 1;
-        height: auto;
       }
     }
   }
@@ -122,6 +129,7 @@ export const SearchResults = styled.div`
   height: 0;
   position: absolute;
   z-index: 999;
+  min-height: 200px;
   max-height: 350px;
   width: 100%;
   overflow-y: scroll;
@@ -188,6 +196,7 @@ export const ResultDiv = styled.div`
     font-style: italic;
   }
 
+  ${"" /* Styles for dataset summary */}
   .summary {
     display: flex;
     flex-wrap: wrap;
@@ -201,6 +210,10 @@ export const ResultDiv = styled.div`
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
 
+      @media only screen and (max-width: 850px) {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+      }
+
       & > div {
         max-width: 220px;
         margin: auto;