23.07 (#121)

* GA4 added * Add Orcid User Info Api Fix biocompute-objects/playbook-partnership#16 Changes to be committed: modified: server/authentication/apis.py modified: server/authentication/services.py modified: server/authentication/urls.py * Typo fix Changes to be committed: modified: client/src/components/bcodbs/SearchOptions.js * Update services.py move `now = make_aware(datetime.utcnow())` to top * Security fixes (#115) * Add Orcid User Info Api Fix biocompute-objects/playbook-partnership#16 Changes to be committed: modified: server/authentication/apis.py modified: server/authentication/services.py modified: server/authentication/urls.py * Typo fix Changes to be committed: modified: client/src/components/bcodbs/SearchOptions.js * Update services.py move `now = make_aware(datetime.utcnow())` to top * 1st round of changes Changes to be committed: modified: client/src/components/builder/index.js modified: client/src/components/builder/preview.js modified: client/src/components/viewer/cardViews.js modified: client/src/components/viewer/index.js modified: client/src/layouts/MainLayout/index.js * GA4 added * Add resetToken API for server For biocompute-objects/bco_api#158 Changes to be committed: modified: server/bcodb/apis.py modified: server/bcodb/services.py modified: server/bcodb/urls.py * Token reset button for the client Fix biocompute-objects/bco_api#158 * Add functions for ORCID authentication Changes to be committed: modified: server/authentication/apis.py modified: server/authentication/services.py modified: server/authentication/urls.py modified: server/bcodb/services.py modified: server/users/apis.py * Add/Remove ORCID for UI Fix #90 Changes to be committed: modified: client/src/components/account/Profile.js modified: client/src/services/auth.service.js modified: client/src/slices/accountSlice.js * Add/Remove ORCID for server Fix #90 Changes to be committed: modified: server/authentication/apis.py modified: server/authentication/urls.py modified: server/bcodb/services.py --------- Co-authored-by: tianywan819 <[email protected]> * Icons portalupdate (#107) * GA4 added * For demostration use, updated GA4, updated Navigation header icons --------- Co-authored-by: tianywan819 <[email protected]> * Derive from Published Fix #118 Changes to be committed: modified: client/src/components/viewer/index.js modified: client/src/slices/bcoSlice.js * Implement Derive From Function Builder Fix #117 Changes to be committed: modified: client/src/components/builder/index.js modified: client/src/components/builder/provenanceDomain.js modified: client/src/components/viewer/index.js --------- Co-authored-by: tianywan819 <[email protected]>
biocompute-objects · Jun 9, 2023 · fcc9792 · fcc9792
1 parent cc95697
commit fcc9792
Show file tree

Hide file tree

Showing 18 changed files with 495 additions and 72 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -3,11 +3,12 @@ import React from "react";
 import "./App.css";
 import { BrowserRouter } from "react-router-dom";
 import Router from "./routes";
-import TagManager from "react-gtm-module";
+import ReactGA from "react-ga4";
 
-function initializeReactGA() {
-    TagManager.initialize({gtmId:'GTM-TD6W6Q2'});
-  }
+function initializeReactGA(){
+  ReactGA.initialize("G-RP8P4D7VWX");
+  ReactGA.send({ hitType: "pageview", page: window.location.pathname });
+}
 
 function App() {
   initializeReactGA();

diff --git a/client/src/components/account/Profile.js b/client/src/components/account/Profile.js
@@ -1,20 +1,43 @@
-import React from "react";
-import { Navigate } from "react-router-dom";
+import React, { useEffect} from "react";
+import { Navigate, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Card, CardContent, CardHeader, Grid } from "@material-ui/core";
+import { Button, Card, CardContent, CardHeader, Grid, Typography } from "@material-ui/core";
 import { Formik, Form, } from "formik";
 import { MyTextField } from "../builder/specialFeilds";
 import { account } from "../../slices/accountSlice";
 import * as Yup from "yup";
+import { useSearchParams } from "react-router-dom";
+import { orcidAdd, orcidRemove } from "../../slices/accountSlice";
 
 const Profile = () => {
+  const navigate = useNavigate();
   const dispatch = useDispatch()
   const currentUser = useSelector((state) => state.account.user);
+  const orcidUrl = process.env.REACT_APP_ORCID_URL
+  const orcid_id = process.env.REACT_APP_ORCID_CLIENT_ID
+  const serverUrl = process.env.REACT_APP_SERVER_URL
+  const [searchParams, setSearchParams] = useSearchParams();
+  const code = searchParams.get("code")
 
   if (!currentUser) {
     return <Navigate to="/login" />;
   }
 
+  useEffect(() => {
+    if (code !== null) {
+      console.log("response", code);
+      dispatch(orcidAdd(code))
+        .unwrap()
+        .then(() => {
+          navigate("/profile");
+        })
+        .catch((error) => {
+          console.log(error)
+          navigate("/profile");
+        })
+    }
+  }, [])
+
   return (
     <Card>
       <CardHeader title="User Profile"/>
@@ -26,6 +49,7 @@ const Profile = () => {
           justifyContent="center"
         >
           <Formik
+            enableReinitialize
             initialValues={{
               username: currentUser.userinfo.username,
               first_name: currentUser.userinfo.first_name,
@@ -69,7 +93,34 @@ const Profile = () => {
                     <MyTextField name='affiliation' label='Affiliation'/>
                   </Grid>
                   <Grid item>
-                    <MyTextField name='orcid' label='ORCID'/>
+                    { (values.orcid.length > 3)
+                      ? (<Typography>
+                        <MyTextField name='orcid' label='ORCID' isDisabled/>
+                        <Button
+                          variant="outlined"
+                          onClick={()=> {
+                            dispatch(orcidRemove())
+                          }}
+                        >
+                          <img  
+                            alt="Remove ORCID"
+                            src="https://orcid.org/assets/vectors/orcid.logo.icon.svg"
+                            width="25"
+                          />
+                          <Typography variant="subtitle1" > Remove ORCID</Typography>
+                        </Button>
+                      </Typography>)
+                      : ( <a href={`${orcidUrl}/oauth/authorize?client_id=${orcid_id}&response_type=code&scope=/authenticate&redirect_uri=${serverUrl}/profile`}>
+                        <Button variant="outlined">
+                          <img  
+                            alt="ORCID Sign in"
+                            src="https://orcid.org/assets/vectors/orcid.logo.icon.svg"
+                            width="25"
+                          />
+                          <Typography variant="subtitle1" > Add ORCID</Typography>
+                        </Button>
+                      </a> )
+                    }
                   </Grid>
                 </Grid>
                 <div style={{padding: 20}}> 

diff --git a/client/src/components/account/Servers.js b/client/src/components/account/Servers.js
@@ -5,7 +5,7 @@ import {
   Button, Card, CardContent, CardHeader, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Grid, makeStyles, TextField, Typography
 } from "@material-ui/core"
 import { useSelector, useDispatch } from "react-redux";
-import { removeBcoDb, groupsPermissions, groupInfo } from "../../slices/accountSlice";
+import { removeBcoDb, resetToken } from "../../slices/accountSlice";
 import AddServer from "./AddServer";
 import { useNavigate } from "react-router-dom";
 
@@ -64,6 +64,16 @@ export default function Servers() {
     setOpen(false);
   };
 
+  const handleTokenReset = (index) => {
+    const { public_hostname, token } = bcodbs[index]
+    console.log("Dispatch", public_hostname, token)
+    dispatch(resetToken({public_hostname, token}))
+      .unwrap()
+      .catch((error) =>{
+        console.log(error);
+      })
+  }
+
   return (
     <Container elevation={2}>
       <Typography className={classes.title}>BCO databases</Typography>
@@ -151,6 +161,11 @@ export default function Servers() {
                   >Cancel</Button>
                 </DialogActions>
               </Dialog>
+              <Button
+                variant="outlined"
+                onClick={() => handleTokenReset(index)}
+                disabled={database.recent_status !== "200"}
+              >Reset API Token</Button>
             </CardContent>
           </Card>
         ))

diff --git a/client/src/components/builder/index.js b/client/src/components/builder/index.js
@@ -38,6 +38,7 @@ import {
   getDraftBco,
   publishDraftBco,
   validateBco,
+  deriveBco,
   setPrefix,
   updateETag,
 } from "../../slices/bcoSlice";
@@ -206,7 +207,6 @@ export const  BuilderColorCode = () => {
     if (validURL(bco["object_id"]) === true) {
       navigate(`/builder?${bco["object_id"]}`);
     }
-    console.log("ELSE")
   }, [bco])
 
   useEffect(()=> {
@@ -219,8 +219,8 @@ export const  BuilderColorCode = () => {
         .then(() => {
           console.log(bcoStatus)
         })
-        .catch(() => {
-          console.log("Error");
+        .catch((error) => {
+          console.log("Error", error);
         });
     }
 
@@ -235,6 +235,11 @@ export const  BuilderColorCode = () => {
     setValue(value+1)
   }
 
+  const  handleDerive = (jsonData) => {
+    navigate("/builder")
+    dispatch(deriveBco(jsonData))
+  };
+
   function a11yProps(index) {
     return {
       id: `simple-tab-${index}`,
@@ -423,6 +428,16 @@ export const  BuilderColorCode = () => {
                       <label htmlFor="bcoUpload">Upload a BCO</label>
                       <FileUpload />
                     </Grid>
+                    <br/>
+                    <Grid item>
+                      <Button 
+                        className="derive-button"
+                        type='submit'
+                        variant="contained"
+                        color="primary"
+                        onClick={() => {handleDerive(jsonData)}}
+                      > Derive BCO </Button>
+                    </Grid>
                   </Collapse>
                 </div>
               </Grid>

diff --git a/client/src/components/builder/provenanceDomain.js b/client/src/components/builder/provenanceDomain.js
@@ -15,6 +15,7 @@ export const  ProvenanceDomain = ({onSave} ) => {
   let has_obsolete = "obsolete_after" in provenanceDomain;
   let has_embargo = "embargo" in provenanceDomain;
   let has_review = "review" in provenanceDomain;
+  let is_derived = "derived_from" in provenanceDomain;
   const [obsolete, setObsolete] = useState("obsolete_after" in provenanceDomain)
   const [embargo, setEmbargo] = useState("embargo" in provenanceDomain)
   return (
@@ -33,6 +34,7 @@ export const  ProvenanceDomain = ({onSave} ) => {
                 "license": provenanceDomain["license"],
                 "created": provenanceDomain["created"],
                 "modified": provenanceDomain["modified"],
+                "derived_from": is_derived ? provenanceDomain["derived_from"] : [], 
                 "obsolete_after": has_obsolete ? provenanceDomain["obsolete_after"] : [],
                 "contributors": provenanceDomain["contributors"],
                 "review": has_review ? provenanceDomain["review"] : [],

diff --git a/client/src/components/viewer/index.js b/client/src/components/viewer/index.js
@@ -2,19 +2,29 @@
 
 import React, { useEffect, useState } from "react";
 import {
-  Button, Card, CardActions, CardHeader, CardContent, Collapse, Container, Grid, ListItem, ListItemText, Paper,
+  Button,
+  Card,
+  CardActions,
+  CardHeader,
+  CardContent,
+  Collapse,
+  Container,
+  Grid,
+  ListItem,
+  ListItemText,
   Typography
 } from "@material-ui/core";
+import { useNavigate } from "react-router-dom";
 import DataObjectIcon from "@mui/icons-material/DataObject";
 import { useDispatch, useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import {
   ProvenanceView, UsabilityView, DescriptionView, ExtensionView,
   ExecutionView, ParametricView, IoView, ErrorView
 } from "./cardViews";
-import { FileUpload, handleDownloadClick } from "../fileHandeling";
+import { handleDownloadClick } from "../fileHandeling";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { getPubBco } from "../../slices/bcoSlice";
+import { getPubBco, deriveBco } from "../../slices/bcoSlice";
 import { styled } from "@mui/material/styles";
 import IconButton from "@mui/material/IconButton";
 
@@ -65,6 +75,7 @@ const ExpandMore = styled((props) => {
 }));
 
 export default function BcoViewer () {
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const [value, setValue] = React.useState(0);
   const bco = useSelector(state => state.bco.data)
@@ -79,6 +90,11 @@ export default function BcoViewer () {
     setValue(newValue);
   };
 
+  const  handleDerive = (jsonData) => {
+    navigate("/builder")
+    dispatch(deriveBco(jsonData))
+  };
+
   function a11yProps(index) {
     return {
       id: `simple-tab-${index}`,
@@ -167,6 +183,16 @@ export default function BcoViewer () {
                   onClick={() => {handleDownloadClick(jsonData)}}
                 > Download BCO</Button>
               </Grid>
+              <br/>
+              <Grid item>
+                <Button 
+                  className="derive-button"
+                  type='submit'
+                  variant="contained"
+                  color="primary"
+                  onClick={() => {handleDerive(jsonData)}}
+                > Derive BCO </Button>
+              </Grid>
             </Collapse>
           </Grid>
         </Card>

diff --git a/client/src/images/DBicon.svg b/client/src/images/DBicon.svg