Merge branch 'staging'

* staging: (21 commits)
  temporarily remove the option to use MC without authentication, until we get sessions working properly
  use null in place of empty string for missing parameters
  only show "add model/test" button when authenticated
  fix bug when adding new model or test from table
  fix bug introduced in 53357c3
  Fix download links for data in CSCS containers
  move filtering of editable projects to the server
  Set back-end server for staging at Docker build time
  Remove warnings from more recent versions of dependencies
  avoid reloading page when clicking on featured models; allow login when try to access model detail page directly
  update names of featured models
  Add support for using Model Catalog when not logged in
  Update keycloak config, based on HumanBrainProject/hbp-validation-framework#319 by @appukuttan-shailesh
  update EBRAINS logo for link-outs
  Add ModelDB linkouts
  fix a not-so-obvious issue with using autocomplete
  fix dumb mistake in autocomplete
  Add search/autocomplete to single-select drop-down lists
  only show project ID (collab name) for private models, it is not relevant for public ones
  debug ci build failure
  ...

apps/deployment/Dockerfile.staging

@@ -10,9 +10,10 @@ WORKDIR /model-catalog
 ENV PATH /model-catalog/node_modules/.bin:$PATH
 COPY model_catalog/package.json ./
 COPY model_catalog/package-lock.json ./
-RUN npm ci --silent --legacy-peer-deps
+RUN npm ci --legacy-peer-deps
 
 COPY model_catalog ./
+COPY model_catalog/src/globals-staging.js ./src/globals.js
 RUN node --max-old-space-size=4096 `which npm` run build
 
 WORKDIR /curation-dashboard

apps/model_catalog/package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "@material-ui/core": "^4.11.1",
         "@material-ui/icons": "^4.5.1",
+        "@material-ui/lab": "^4.0.0-alpha.61",
         "axios": "^0.21.1",
         "eslint-config-react-app": "^5.2.1",
         "eslint-plugin-flowtype": "^5.2.0",
@@ -14,7 +15,7 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "filesize": "^6.1.0",
         "humanparser": "^1.11.0",
-        "keycloak-js": "^8.0.1",
+        "keycloak-js": "^12.0.2",
         "lodash": "^4.17.20",
         "material-ui-chip-input": "^2.0.0-beta.2",
         "moment": "^2.29.1",

apps/model_catalog/src/AuthWidget.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import PersonIcon from '@material-ui/icons/Person';
+import Tooltip from "@material-ui/core/Tooltip";
+import ContextMain from "./ContextMain";
+
+
+function AuthWidget(props) {
+
+    const context = React.useContext(ContextMain);
+    const [auth] = context.auth;
+
+    if (auth.authenticated || props.currentUser) {
+
+        if (!props.currentUser) {
+            auth.loadUserInfo().then((userInfo) => {
+                console.log(userInfo);
+                props.setCurrentUser(userInfo.preferred_username);
+            });
+        };
+
+        return (
+            <Tooltip title={props.currentUser || "anonymous"}>
+                <IconButton variant="outlined">
+                    <PersonIcon />
+                </IconButton>
+            </Tooltip>
+        );
+    } else {
+        return (
+            <Button
+                variant="outlined"
+                color="primary"
+                disableElevation
+                size="small"
+                onClick={auth.login} // todo: login with scopes
+            >
+                Login
+            </Button>
+        );
+    }
+}
+
+export default AuthWidget;

apps/model_catalog/src/CompareMultiResults.js

@@ -2210,7 +2210,7 @@ class CompareMultiResults extends React.Component {
                             </Typography>
                         </Grid>
                         <Grid item xs={12}>
-                            <Grid container justify="space-around" spacing={3}>
+                            <Grid container justifyContent="space-around" spacing={3}>
                                 {/* Model listing */}
                                 <Grid
                                     item

apps/model_catalog/src/ErrorDialog.js

@@ -6,6 +6,8 @@ import DialogActions from "@material-ui/core/DialogActions";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import { reformatErrorMessage } from "./utils";
+import ContextMain from "./ContextMain";
+
 
 const addLineBreaks = (string) =>
     string.split("\n").map((text, index) => (
@@ -15,8 +17,26 @@ const addLineBreaks = (string) =>
         </React.Fragment>
     ));
 
+
 export default function ErrorDialog(props) {
     console.log("ErrorDialog: " + props.error);
+    const context = React.useContext(ContextMain);
+    const [auth] = context.auth;
+
+    let loginButton = "";
+    if (props.showLoginButton) {
+        loginButton = (
+            <Button
+                color="primary"
+                disableElevation
+                size="small"
+                onClick={() => auth.login({redirectUri: props.redirectUri})} // todo: login with scopes
+            >
+                Login
+            </Button>
+        )
+    }
+
     return (
         <Dialog
             open={props.open}
@@ -32,8 +52,12 @@ export default function ErrorDialog(props) {
                         ? addLineBreaks(props.error)
                         : addLineBreaks(reformatErrorMessage(props.error))}
                 </Typography>
+                <Typography variant="body2" gutterBottom>
+                    {props.additionalMessage}
+                </Typography>
             </DialogContent>
             <DialogActions>
+                {loginButton}
                 <Button onClick={props.handleErrorDialogClose} color="primary">
                     Close
                 </Button>

apps/model_catalog/src/Introduction.js

@@ -21,16 +21,12 @@ import Button from "@material-ui/core/Button";
 import { yellow } from "@material-ui/core/colors";
 import Plotly from "plotly.js";
 import createPlotlyComponent from "react-plotly.js/factory";
-import { updateHash, corsProxy, filterKeys } from "./globals";
+import { corsProxy, filterKeys } from "./globals";
 import { formatLabel } from "./utils";
 import "./App.css";
 
 const ResponsiveEllipsis = responsiveHOC()(LinesEllipsis);
 
-// const openInNewTab = (url) => {
-//   const newWindow = window.open(url, "_blank", "noopener,noreferrer");
-//   if (newWindow) newWindow.opener = null;
-// };
 
 const styles = (theme) => ({
   header: {
@@ -84,8 +80,7 @@ function MediaCard(props) {
       >
         <CardActionArea
           onClick={() => {
-            updateHash("model_id." + props.id);
-            window.location.reload();
+            props.onClick(props.id);
           }}
         >
           <CardMedia
@@ -134,8 +129,7 @@ function MediaCard(props) {
             color="primary"
             style={{ fontWeight: "bolder" }}
             onClick={() => {
-              updateHash("model_id." + props.id);
-              window.location.reload();
+              props.onClick(props.id);
             }}
           >
             View Model
@@ -405,48 +399,50 @@ class Introduction extends React.Component {
               <MediaCard
                 id="3772094a-8e2d-4075-8f05-9be62c8d8a5d"
                 image_title={"Golding_et_al_2001_dichotomy"}
-                title={"Golding_et_al_2001_dichotomy"}
+                title={"Dichotomy of action-potential backpropagation in CA1 pyramidal neuron dendrites (Golding et al 2001)"}
                 citation={
                   "Nace L. Golding, William L. Kath, Nelson Spruston, Sára Sáray"
                 }
+                onClick={this.props.handleSelectFeaturedModel}
               />
               <MediaCard
                 id="528ec0e6-2f21-413c-9abd-d131f7150882"
                 image_title={"CA1_Bianchi_2012"}
-                title={"CA1_Bianchi_2012"}
+                title={"Mechanisms of the depolarization block in CA1 pyramidal neurons - Bianchi et al., 2012"}
                 citation={
                   "Daniela Bianchi, Addolorata Marasco, Alessandro Limongiello, Cristina Marchetti, Hélène Marie, Brunello Tirozzi, Michele Migliore, Sára Sáray"
                 }
+                onClick={this.props.handleSelectFeaturedModel}
               />
               <MediaCard
                 id="09cbcd03-1e39-497a-a34e-090dde3617d8"
                 image_title={"Basal ganglia network model"}
                 title={"Basal ganglia network model"}
                 citation={"Shreyas M Suryanarayana"}
+                onClick={this.props.handleSelectFeaturedModel}
               />
               <MediaCard
                 id="1ccc23ec-d3a6-43b6-b96f-41e9c4221a15"
-                image_title={
-                  "SpiNNCer: Neuromorphic cerebellum implementation on SpiNNaker"
-                }
-                title={
-                  "SpiNNCer: Neuromorphic cerebellum implementation on SpiNNaker"
-                }
+                image_title={"SpiNNCer: Neuromorphic cerebellum implementation on SpiNNaker"}
+                title={"SpiNNCer: Neuromorphic cerebellum implementation on SpiNNaker"}
                 citation={
                   "Petruț Antoniu Bogdan, Beatrice Marcinnò, Claudia Casellato, Stefano Casali, Andrew G. D. Rowley, Michael Hopkins, Francesco Leporati, Egidio D'Angelo, Oliver Rhodes"
                 }
+                onClick={this.props.handleSelectFeaturedModel}
               />
               <MediaCard
                 id="c28c4e1f-0ef3-4ccd-9a81-8e792aa349a4"
                 image_title={"Model of two-photon calcium signals"}
                 title={"Model of two-photon calcium signals"}
                 citation={"Nuria Tort-Colet, Alain Destexhe"}
+                onClick={this.props.handleSelectFeaturedModel}
               />
               <MediaCard
                 id="03d26f01-9197-4fae-97d7-09b33274b76f"
                 image_title={"CA1_int_cNAC_060314AM2_20190328165336"}
                 title={"CA1_int_cNAC_060314AM2_20190328165336"}
                 citation={"Rosanna Migliore"}
+                onClick={this.props.handleSelectFeaturedModel}
               />
             </Slider>
           </Grid>
@@ -470,7 +466,7 @@ class Introduction extends React.Component {
               spacing={2}
               direction="row"
               alignItems="center"
-              justify="center"
+              justifyContent="center"
             >
               {[
                 "species",

apps/model_catalog/src/MUIDataTableCustomToolbar.js

@@ -15,8 +15,9 @@ class CustomToolbar extends React.Component {
 
     render() {
         const [status] = this.context.status;
+        const [auth] = this.context.auth;
         let addNewVersionButton = "";
-        if (!status.includes("read-only")) {
+        if (auth.authenticated && !status.includes("read-only")) {
             addNewVersionButton = (
                 <Tooltip
                     title={

apps/model_catalog/src/ModelAddForm.js

@@ -49,34 +49,39 @@ export default class ModelAddForm extends React.Component {
         const [validFilterValuesContext] = this.context.validFilterValues;
         const [filtersContext] = this.context.filters;
 
+        let sourceData = {instances: [{}]}
+        if (this.props.duplicateData) {
+            sourceData = this.props.duplicateData;
+        }
+
         this.state = {
             // NOTE: cannot use nested state object owing to performance issues:
             // See: https://dev.to/walecloud/updating-react-nested-state-properties-ga6
             errorAddModel: null,
             isAliasNotUnique: true,
             aliasLoading: false,
-            name: this.props.duplicateData.name || "",
-            alias: this.props.duplicateData.alias || "",
-            author: this.props.duplicateData.author || [],
-            owner: this.props.duplicateData.owner || [],
-            private: this.props.duplicateData.private || false,
-            project_id: this.props.duplicateData.project_id || "",
-            description: this.props.duplicateData.description || "",
-            species: this.props.duplicateData.species || "",
-            brain_region: this.props.duplicateData.brain_region || "",
-            cell_type: this.props.duplicateData.cell_type || "",
-            model_scope: this.props.duplicateData.model_scope || "",
-            abstraction_level: this.props.duplicateData.abstraction_level || "",
-            organization: this.props.duplicateData.organization || "",
+            name: sourceData.name || "",
+            alias: sourceData.alias || "",
+            author: sourceData.author || [],
+            owner: sourceData.owner || [],
+            private: sourceData.private || false,
+            project_id: sourceData.project_id || "",
+            description: sourceData.description || "",
+            species: sourceData.species || "",
+            brain_region: sourceData.brain_region || "",
+            cell_type: sourceData.cell_type || "",
+            model_scope: sourceData.model_scope || "",
+            abstraction_level: sourceData.abstraction_level || "",
+            organization: sourceData.organization || "",
             instances: [
                 {
-                    version: this.props.duplicateData.instances[0].version || "",
-                    description: this.props.duplicateData.instances[0].description || "",
-                    parameters: this.props.duplicateData.instances[0].parameters || "",
-                    morphology: this.props.duplicateData.instances[0].morphology || "",
-                    source: this.props.duplicateData.instances[0].source || "",
-                    code_format: this.props.duplicateData.instances[0].code_format || "",
-                    license: this.props.duplicateData.instances[0].license || "",
+                    version: sourceData.instances[0].version || "",
+                    description: sourceData.instances[0].description || "",
+                    parameters: sourceData.instances[0].parameters || null,
+                    morphology: sourceData.instances[0].morphology || "",
+                    source: sourceData.instances[0].source || "",
+                    code_format: sourceData.instances[0].code_format || "",
+                    license: sourceData.instances[0].license || "",
                 },
             ],
             auth: authContext,
@@ -85,6 +90,7 @@ export default class ModelAddForm extends React.Component {
             loading: false,
             projects: [],
         };
+
         this.getProjectList();
         this.handleErrorAddDialogClose =
             this.handleErrorAddDialogClose.bind(this);
@@ -131,6 +137,8 @@ export default class ModelAddForm extends React.Component {
                 this.setState({
                     projects: editableProjects,
                 });
+                console.log("Setting projects");
+                console.log(editableProjects);
             })
             .catch((err) => {
                 console.log("Error: ", err.message);

apps/model_catalog/src/ModelDetail.js

@@ -500,7 +500,7 @@ class ModelDetail extends React.Component {
                                                     .abstraction_level
                                             }
                                             projectID={
-                                                this.props.modelData.project_id
+                                                this.props.private ? this.props.modelData.project_id : null
                                             }
                                             organization={
                                                 this.props.modelData