Merge pull request #42 from bento-platform/qa/v0.6

v0.7.0 rc-1

.github/workflows/build.yml

@@ -0,0 +1,84 @@
+name: Build and push bento_public
+
+on:
+  release:
+    types: [ published ]
+  pull_request:
+    branches:
+      - master
+  push:
+    branches:
+      - master
+
+jobs:
+  build-push:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log into the container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+
+      - name: Set up development image metadata
+        id: meta-dev
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ghcr.io/bento-platform/bento_public
+          flavor: |
+            latest=false
+          tags: |
+            type=raw,value=latest-dev,enable={{is_default_branch}}
+            type=ref,event=pr
+            type=sha,prefix=sha-
+
+      - name: Build and push development image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: Dockerfile
+          push: true
+          tags: ${{ steps.meta-dev.outputs.tags }}
+          labels: ${{ steps.meta-dev.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set up production image metadata
+        id: meta
+        uses: docker/metadata-action@v4
+        if: ${{ github.event_name == 'release' }}
+        with:
+          images: |
+            ghcr.io/bento-platform/bento_public
+          flavor: |
+            latest=true
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+
+      - name: Build and push production image
+        uses: docker/build-push-action@v3
+        if: ${{ github.event_name == 'release' }}
+        with:
+          context: .
+          file: Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64

.gitignore

@@ -6,4 +6,5 @@ node_modules/*
 package-lock.json
 .DS_Store
 .prettierrc
-.idea/
+.idea/
+.vscode/

README.md

@@ -10,7 +10,6 @@ A publicly accessible portal for clinical datasets, where users are able to see
 
 First, run
 ```
-    cp etc/example.client.env client.env
     cp etc/example.server.env server.env
 ```
 and modify the contents according to your needs.

buildandrun.sh

@@ -12,7 +12,7 @@ go build -o ../build/reactapp
 
 # build react bundle.js
 cd ../
-npm run build
+npm run build-dev
 
 # start go http server
 cd build

docker-compose.yaml

@@ -10,6 +10,7 @@ services:
     networks: 
       - bridge-net
     environment:
+      - BENTO_PUBLIC_CLIENT_NAME=${BENTO_PUBLIC_CLIENT_NAME}
       - BENTO_PUBLIC_KATSU_URL=${BENTO_PUBLIC_KATSU_URL}
       - BENTO_PUBLIC_MAX_QUERY_PARAMETERS=${BENTO_PUBLIC_MAX_QUERY_PARAMETERS}
       - BENTO_PUBLIC_PORTAL_URL=${BENTO_PUBLIC_PORTAL_URL}

etc/example.server.env

@@ -1,3 +1,6 @@
+BENTO_PUBLIC_DEBUG=true
+BENTO_PUBLIC_CLIENT_NAME=BentoPublicDev
+
 BENTO_PUBLIC_IMAGE=bentov2-public
 BENTO_PUBLIC_VERSION=0.0.1
 BENTO_PUBLIC_CONTAINER_NAME=bentov2-public

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --mode=production",
+    "build-dev": "webpack --mode=development",
     "watch": "webpack --mode=development --watch",
     "gobuild": "./buildandrun.sh",
     "lint": "npx eslint src/js/**"
@@ -47,11 +48,13 @@
     "@webpack-cli/serve": "^1.6.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "dotenv-webpack": "^7.0.3",
     "eslint": "^8.21.0",
     "eslint-plugin-react": "^7.30.1",
     "file-loader": "^6.2.0",
+    "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "prettier": "2.7.1",
     "redux": "^4.1.0",

src/js/components/Overview/PublicOverview.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Button, Divider, Row, Col } from 'antd';
+import { Divider, Row, Col, FloatButton, Card } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
 import { convertSequenceAndDisplayData, saveValue } from '../../utils/localStorage';
@@ -9,6 +9,9 @@ import { LOCALSTORAGE_CHARTS_KEY } from '../../constants/overviewConstants';
 import OverviewSection from './OverviewSection';
 import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
 
+import about from '../../../public/about.html';
+const aboutTemplate = { __html: about };
+
 const PublicOverview = () => {
   const { sections } = useSelector((state) => state.data);
 
@@ -21,6 +24,9 @@ const PublicOverview = () => {
       <div className="container">
         <Row justify="center">
           <Col>
+            <Card style={{ borderRadius: '11px' }}>
+              <div dangerouslySetInnerHTML={aboutTemplate} />
+            </Card>
             {sections.map(({ sectionTitle, charts }, i) => (
               <div key={i} className="overview">
                 <OverviewSection index={i} title={sectionTitle} chartData={charts} />
@@ -33,12 +39,11 @@ const PublicOverview = () => {
 
       {/* Drawer & Button */}
       <ManageChartsDrawer onManageDrawerClose={() => setDrawerVisible(false)} manageDrawerVisible={drawerVisible} />
-      <Button
+      <FloatButton
         type="primary"
-        shape="circle"
         icon={<PlusOutlined />}
-        size="large"
-        className="floating-button"
+        tooltip="Manage Charts"
+        style={{ right: '5em', bottom: '1.5em', transform: 'scale(125%)' }}
         onClick={() => setDrawerVisible(true)}
       />
     </>

src/js/components/SiteFooter.js

@@ -34,6 +34,9 @@ const SiteFooter = () => {
             </Link>
             .
           </Text>
+          <Link href="/public/TermsofUse.html" target="_blank">
+            Terms of Use
+          </Link>
         </Space>
       </Row>
     </Footer>

src/js/components/SiteHeader.js

@@ -6,13 +6,13 @@ import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 
 import bentoLogo from '../../public/assets/bento.svg';
-import { client } from '../constants/configConstants';
 
 const SiteHeader = () => {
   const { t } = useTranslation();
 
+  const clientName = useSelector((state) => state.config.clientName);
   useEffect(() => {
-    document.title = 'Bento-Public : ' + client;
+    document.title = 'Bento-Public : ' + clientName;
   }, []);
 
   const [language, setLanguage] = useState(i18n.language);
@@ -32,7 +32,7 @@ const SiteHeader = () => {
           <Space align="start">
             <img style={{ marginTop: '11px', height: '35px' }} src={bentoLogo} alt="logo" />
             <Typography.Title style={{ transform: 'translateY(-10px)' }} level={4} type="secondary">
-              {client}
+              {clientName}
             </Typography.Title>
           </Space>
         </Col>

src/js/constants/configConstants.js

@@ -1,12 +1,7 @@
-const { CLIENT, HOST, DEBUG } = process.env;
-
-export const debug = DEBUG.toLowerCase() === 'true';
-export const client = CLIENT;
-
 export const MAX_CHARTS = 3;
 
-export const configUrl = HOST + '/config';
-export const publicOverviewUrl = HOST + '/overview';
-export const searchFieldsUrl = HOST + '/fields';
-export const katsuUrl = HOST + '/katsu';
-export const provenanceUrl = HOST + '/provenance';
+export const configUrl = '/config';
+export const publicOverviewUrl = '/overview';
+export const searchFieldsUrl = '/fields';
+export const katsuUrl = '/katsu';
+export const provenanceUrl = '/provenance';

src/js/features/config/config.js

@@ -12,6 +12,7 @@ export const makeGetConfigRequest = createAsyncThunk('config/getConfigData', asy
 
 const initialState = {
   isFetchingConfig: false,
+  clientName: '',
   portalUrl: '',
   maxQueryParameters: 0,
 };
@@ -25,6 +26,7 @@ const config = createSlice({
       state.isFetchingConfig = true;
     },
     [makeGetConfigRequest.fulfilled]: (state, { payload }) => {
+      state.clientName = payload.clientName;
       state.portalUrl = payload.portalUrl;
       state.maxQueryParameters = payload.maxQueryParameters;
       state.isFetchingConfig = false;

src/main.go

@@ -14,6 +14,7 @@ import (
 )
 
 type BentoConfig struct {
+	ClientName         string `envconfig:"BENTO_PUBLIC_CLIENT_NAME"`
 	KatsuUrl           string `envconfig:"BENTO_PUBLIC_KATSU_URL"`
 	MaxQueryParameters int    `envconfig:"BENTO_PUBLIC_MAX_QUERY_PARAMETERS"`
 	BentoPortalUrl     string `envconfig:"BENTO_PUBLIC_PORTAL_URL"`
@@ -41,10 +42,11 @@ func main() {
 	}
 
 	fmt.Println(fmt.Sprintf(`Config --
+		Client Name: %s
 		Katsu URL: %v
 		Maximum no. Query Parameters: %d
 		Bento Portal Url: %s
-	`, cfg.KatsuUrl, cfg.MaxQueryParameters, cfg.BentoPortalUrl))
+	`, cfg.ClientName, cfg.KatsuUrl, cfg.MaxQueryParameters, cfg.BentoPortalUrl))
 
 	// Begin Echo
 
@@ -79,6 +81,7 @@ func main() {
 	e.GET("/config", func(c echo.Context) error {
 		// make some server-side configurations available to the front end
 		return c.JSON(http.StatusOK, map[string]interface{}{
+			"clientName":         cfg.ClientName,
 			"maxQueryParameters": cfg.MaxQueryParameters,
 			"portalUrl":          cfg.BentoPortalUrl,
 		})