Merge pull request #46 from bento-platform/changes-4

Changes 4
bento-platform · Dec 12, 2022 · 789b684 · 789b684
2 parents 1761bc0 + 86829fa
commit 789b684
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -48,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",

diff --git a/src/js/components/Overview/PublicOverview.js b/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)}
       />
     </>

diff --git a/src/js/components/SiteFooter.js b/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>

diff --git a/src/public/TermsofUse.html b/src/public/TermsofUse.html
@@ -0,0 +1,47 @@
+<html>
+<head>
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+  <style type="text/css">ol.lst-kix_jcnqiid6kta5-6.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-6 0}.lst-kix_jcnqiid6kta5-6>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-6}.lst-kix_jcnqiid6kta5-5>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-5}ol.lst-kix_jcnqiid6kta5-2.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-2 0}.lst-kix_jcnqiid6kta5-4>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-4,lower-latin) ". "}.lst-kix_jcnqiid6kta5-2>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-2,lower-roman) ". "}.lst-kix_jcnqiid6kta5-3>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-3,decimal) ". "}ul.lst-kix_vmxc5wij8tiv-6{list-style-type:none}.lst-kix_jcnqiid6kta5-0>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-0,decimal) ". "}.lst-kix_jcnqiid6kta5-1>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-1,lower-latin) ". "}ul.lst-kix_vmxc5wij8tiv-5{list-style-type:none}ul.lst-kix_vmxc5wij8tiv-4{list-style-type:none}ul.lst-kix_vmxc5wij8tiv-3{list-style-type:none}.lst-kix_jcnqiid6kta5-7>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-7}ul.lst-kix_vmxc5wij8tiv-8{list-style-type:none}ul.lst-kix_vmxc5wij8tiv-7{list-style-type:none}.lst-kix_jcnqiid6kta5-1>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-1}ol.lst-kix_jcnqiid6kta5-0.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-0 0}.lst-kix_jcnqiid6kta5-4>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-4}ol.lst-kix_jcnqiid6kta5-3.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-3 0}ul.lst-kix_s430n3hwdn6o-2{list-style-type:none}ul.lst-kix_s430n3hwdn6o-3{list-style-type:none}ul.lst-kix_s430n3hwdn6o-0{list-style-type:none}ul.lst-kix_s430n3hwdn6o-1{list-style-type:none}ul.lst-kix_s430n3hwdn6o-6{list-style-type:none}ul.lst-kix_s430n3hwdn6o-7{list-style-type:none}ul.lst-kix_s430n3hwdn6o-4{list-style-type:none}.lst-kix_vmxc5wij8tiv-2>li:before{content:"\0025a0  "}ul.lst-kix_s430n3hwdn6o-5{list-style-type:none}ul.lst-kix_vmxc5wij8tiv-2{list-style-type:none}.lst-kix_vmxc5wij8tiv-3>li:before{content:"\0025cf  "}ul.lst-kix_vmxc5wij8tiv-1{list-style-type:none}ul.lst-kix_s430n3hwdn6o-8{list-style-type:none}ul.lst-kix_vmxc5wij8tiv-0{list-style-type:none}.lst-kix_vmxc5wij8tiv-5>li:before{content:"\0025a0  "}.lst-kix_vmxc5wij8tiv-4>li:before{content:"\0025cb  "}.lst-kix_vmxc5wij8tiv-6>li:before{content:"\0025cf  "}ol.lst-kix_jcnqiid6kta5-1.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-1 0}.lst-kix_vmxc5wij8tiv-1>li:before{content:"\0025cb  "}.lst-kix_s430n3hwdn6o-0>li:before{content:"\0025cf  "}ol.lst-kix_jcnqiid6kta5-8.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-8 0}.lst-kix_vmxc5wij8tiv-0>li:before{content:"\0025cf  "}.lst-kix_vmxc5wij8tiv-8>li:before{content:"\0025a0  "}ol.lst-kix_jcnqiid6kta5-4.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-4 0}.lst-kix_vmxc5wij8tiv-7>li:before{content:"\0025cb  "}.lst-kix_s430n3hwdn6o-4>li:before{content:"\0025cb  "}.lst-kix_s430n3hwdn6o-2>li:before{content:"\0025a0  "}.lst-kix_s430n3hwdn6o-6>li:before{content:"\0025cf  "}.lst-kix_s430n3hwdn6o-1>li:before{content:"\0025cb  "}.lst-kix_s430n3hwdn6o-5>li:before{content:"\0025a0  "}.lst-kix_jcnqiid6kta5-2>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-2}ol.lst-kix_jcnqiid6kta5-7.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-7 0}.lst-kix_s430n3hwdn6o-3>li:before{content:"\0025cf  "}.lst-kix_jcnqiid6kta5-8>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-8}ol.lst-kix_jcnqiid6kta5-0{list-style-type:none}ol.lst-kix_jcnqiid6kta5-1{list-style-type:none}ol.lst-kix_jcnqiid6kta5-2{list-style-type:none}ol.lst-kix_jcnqiid6kta5-3{list-style-type:none}.lst-kix_s430n3hwdn6o-8>li:before{content:"\0025a0  "}ol.lst-kix_jcnqiid6kta5-8{list-style-type:none}.lst-kix_jcnqiid6kta5-5>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-5,lower-roman) ". "}ol.lst-kix_jcnqiid6kta5-5.start{counter-reset:lst-ctn-kix_jcnqiid6kta5-5 0}ol.lst-kix_jcnqiid6kta5-4{list-style-type:none}ol.lst-kix_jcnqiid6kta5-5{list-style-type:none}.lst-kix_jcnqiid6kta5-6>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-6,decimal) ". "}.lst-kix_jcnqiid6kta5-7>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-7,lower-latin) ". "}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}.lst-kix_s430n3hwdn6o-7>li:before{content:"\0025cb  "}ol.lst-kix_jcnqiid6kta5-6{list-style-type:none}ol.lst-kix_jcnqiid6kta5-7{list-style-type:none}.lst-kix_jcnqiid6kta5-8>li:before{content:"" counter(lst-ctn-kix_jcnqiid6kta5-8,lower-roman) ". "}.lst-kix_jcnqiid6kta5-3>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-3}.lst-kix_jcnqiid6kta5-0>li{counter-increment:lst-ctn-kix_jcnqiid6kta5-0}ol{margin:0;padding:0}table td,table th{padding:0}.c0{margin-left:36pt;padding-top:12pt;padding-left:0pt;padding-bottom:12pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c6{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c8{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left;height:11pt}.c7{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c11{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:13pt;font-family:"Arial";font-style:normal}.c2{padding-top:12pt;padding-bottom:2pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c4{padding-top:11pt;padding-bottom:2pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c3{padding-top:12pt;padding-bottom:12pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c5{padding-top:14pt;padding-bottom:4pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c10{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c9{padding:0;margin:0}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style>
+</head>
+<body class="c10 doc-content">
+<h1 class="c4" id="h.q7w67w8szxin"><span class="c7">Bento platform Terms of Use</span></h1>
+<p class="c3"><span class="c1">In proceeding to the Bento platform you are agreeing to the following terms of use:</span></p>
+<h3 class="c5" id="h.thfpo8li6yf"><span class="c11">Data Confidentiality</span></h3>
+<ol class="c9 lst-kix_jcnqiid6kta5-0 start" start="1">
+  <li class="c0 li-bullet-0"><span class="c1">You agree that the information you have provided for the purposes of accessing and using the Bento platform are true to the best of your knowledge.</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">You agree not to attempt to re-identify Research Participants. This includes trying to link the Data provided through the Bento platform to other sources of information or available archive data, even if access to that data has been formally granted to you, or it is freely available without restriction, without specific permission being sought from the Bento platform.</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">You agree to protect the confidentiality of Research Participants in any research papers or publications that they prepare by taking all reasonable care to limit the possibility of identification.</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">You agree to contact the Bento team at [email protected]. within 10 days if you detect any personally identifiable research data on the Bento platform. Personally identifiable data is defined as information that can reasonably be used to identify an individual either alone or in combination with other available information.</span></li>
+</ol>
+<h3 class="c5" id="h.h0o8s9qhdd6x"><span class="c11">Website Privacy policy</span></h3>
+<p class="c3"><span class="c1">The Bento platform is committed to protecting the privacy and security of the personal information and data of its users to the greatest extent possible subject to Canada&rsquo;s provincial/territorial and federal laws. Personal information is defined as information that can reasonably be used to identify an individual either alone or in combination with other available information. The Bento platform will only use your personal information for specific and consented purposes. This policy will be maintained except in circumstances required by law to provide access, or in response to subpoenas or other legal instruments to authorize access to personal information. Except for these scenarios, personal information will not be shared outside of Bento platform and its associated personnel or contractors without your explicit consent. When collected, personal information will only be retained for as long as necessary to fulfill its purposes subject to the applicable Canadian legal requirements.</span></p>
+<h4 class="c2" id="h.kyylp7hradhs"><span class="c6">Purpose, use, and collection of information</span></h4>
+<p class="c3"><span class="c1">The purpose of the Bento platform is to facilitate scientific research by providing researchers and other interested parties access to clinical, epigenetic and genetic data, and certain associated contextual metadata.</span></p>
+<p class="c3"><span class="c1">Personal information is not required to view this website, although certain key features will require some personal information to function optimally. We may collect this personal information in the form of webforms in connection with your account and services provided to you. The level of information collected will also be subject to the type of services and account used. Providing us with your information where required is strictly voluntary. Any personal information collected will be appropriately protected through physical and electronic means such as user authentication, and other data security practices.</span></p>
+<p class="c3"><span class="c1">By providing your personal information, you are consenting to its use for the purposes listed below:</span></p>
+<ul class="c9 lst-kix_s430n3hwdn6o-0 start">
+  <li class="c0 li-bullet-0"><span class="c1">Communicate with you regarding our services such as an event notification, a change of policy, or to follow-up regarding the terms and conditions of the Bento platform,</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Provide you with a service (e.g., help data access),</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Communicate and troubleshoot with you regarding any Bento platform functionalities and or services.</span></li>
+</ul>
+<p class="c3"><span class="c1">The Bento platform and its associated servers also collect the following analytics for the purposes of web presentation, troubleshooting, and web functionality. This information will not be associated with individual user identities, and will not be used to re-identify any users as subject to this privacy policy:</span></p>
+<ul class="c9 lst-kix_vmxc5wij8tiv-0 start">
+  <li class="c0 li-bullet-0"><span class="c1">Internet Protocol (IP) address of the computer being used,</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Web pages requested,</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Referring web page,</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Browser used,</span></li>
+  <li class="c0 li-bullet-0"><span class="c1">Date and time of activities.</span></li>
+</ul>
+<h4 class="c2" id="h.gkti5z64ekax"><span class="c6">Distribution of information to third parties</span></h4>
+<p class="c3"><span class="c1">Third-party contractors and or agents may be involved in maintaining and improving the functions (e.g., IT services) of the Bento platform. In these scenarios, if any associated third party should be provided access to any personal information, personal information will be kept secure, private, and confidential in accordance with Canadian Provincial/territorial and Federal legislation, and that of the Bento platform Privacy Policy. Such parties are only permitted to use such personal information for lawful purposes authorized by the Bento platform.</span></p>
+<h4 class="c2" id="h.bk2q0xk7aj2b"><span class="c6">Cookies</span></h4>
+<p class="c3"><span class="c1">This website uses &lsquo;Cookies&rsquo;. Cookies may collect information such as your email address, username, or keep track of pages visited and documents downloaded. The Bento platform may use &lsquo;cookies&rsquo; to deliver web content specific to a user&rsquo;s interests or to keep users logged in when such a feature is enabled. You may choose to enable or disable cookies on this website, and such information will not be collected. Disabling cookies will not restrict your access to the Bento platform but may affect the normal functioning of various features.</span></p>
+<h4 class="c2" id="h.o3bwfszeatwa"><span class="c6">Hyperlinks and other privacy policies</span></h4>
+<p class="c3"><span class="c1">If you follow a hyperlink from the Bento platform onto the website(s) of another entity, that entity may have/uphold a different privacy policy. The Bento platform bears no responsibility for the privacy of the user in such a scenario, and we advise you to appropriately consult the privacy policies of these other entities.</span></p>
+<h4 class="c2" id="h.1m8ipo2m02xc"><span class="c6">Right to be &ldquo;forgotten&rdquo;</span></h4>
+<p class="c3"><span class="c1">Users may request the erasure/deletion of any personal information they have provided to the Bento platform. If possible, Bento platform will work to promptly erase/delete this personal information, except for where required by law (e.g., for records for auditing records). To request the erasure/deletion of your personal information, you may contact us at [email protected].</span></p>
+<h4 class="c2" id="h.wpjhiapvz357"><span class="c6">Privacy policy revisions</span></h4>
+<p class="c3"><span class="c1">This privacy policy was last revised on December 6th, 2022. These policies are subject to change, and we encourage you to review this Privacy Policy each time you visit the website. If any significant changes are made to this policy, a notice will be posted on the homepage for a reasonable period of time after the change is implemented, so that the user may be fully aware of any changes before using the Bento platform.</span></p>
+<p class="c8"><span class="c1"></span></p>
+</body>
+</html>
diff --git a/src/public/about.html b/src/public/about.html
@@ -0,0 +1 @@
+Welcome to Bento, a web platform to explore and share clinical and -omics data.
diff --git a/src/public/locales/en/translation.js b/src/public/locales/en/translation.js
@@ -1,5 +1,7 @@
 import def_trans_en from './default_translation_en.json';
-import trans_en from './translation_en.json';
+import axios from 'axios';
+
+const trans_en = await axios.get('/public/locales/en/translation_en.json').then((response) => response.data);
 
 const translation = {
   // Default Translation

diff --git a/src/public/locales/fr/translation.js b/src/public/locales/fr/translation.js
@@ -1,5 +1,7 @@
 import def_fr_trans from './default_translation_fr.json';
-import fr_trans from './translation_fr.json';
+import axios from 'axios';
+
+const fr_trans = await axios.get('/public/locales/fr/translation_fr.json').then((response) => response.data);
 
 const translation = {
   // Default Translation

diff --git a/src/styles.css b/src/styles.css
@@ -5,13 +5,6 @@ body {
     margin: 0;
 }
 
-.floating-button {
-    position:fixed;
-    right:5em;
-    bottom:1.5em;
-    transform: scale(125%);
-}
-
 .floating-search {
     position:fixed !important;
     right:5em !important;

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 const webpack = require('webpack'); // only add this if you don't have yet
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const config = {
   module: {
@@ -20,6 +21,10 @@ const config = {
         test: /\.(png|jpe?g|gif|svg)$/i,
         use: [{ loader: 'file-loader' }],
       },
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+      },
     ],
   },
   entry: {
@@ -40,10 +45,16 @@ const config = {
       title: 'Development',
       inject: false,
     }),
+    new CopyWebpackPlugin({
+      patterns: [{ from: 'src/public', to: 'public' }],
+    }),
   ],
   optimization: {
     runtimeChunk: 'single',
   },
+  experiments: {
+    topLevelAwait: true,
+  },
 };
 
 module.exports = (_env, argv) => {