Hide based on values in .meta/key/restrictions

The DataArrays section of the repo now hides the data instances that are
listed in the .meta/key/restrictions blob in dvid.

src/actions/dvid.js

@@ -201,7 +201,53 @@ export function loadRepoInfoFromAlias(alias) {
     dispatch(loadingRepoInfo(alias));
     return dispatch(loadRepos()).then(() => {
       const repoIDs = Object.values(getState().dvid.get('repos')).filter(repo => repo.Alias === alias).map(repo => repo.Root);
-      return dispatch(loadRepoInfo(repoIDs[0]));
+      dispatch(loadRepoInfo(repoIDs[0]));
+      dispatch(loadRepoRestrictions(repoIDs[0]));
     });
   };
 }
+
+export const LOAD_REPO_RESTRICTIONS = 'LOAD_REPO_RESTRICTIONS';
+export const LOADED_REPO_RESTRICTIONS = 'LOADED_REPO_RESTRICTIONS';
+export const LOAD_REPO_RESTRICTIONS_ERROR = 'LOAD_REPO_RESTRICTIONS_ERROR';
+
+
+function loadingRepoRestrictions(id) {
+  return {
+    type: LOAD_REPO_RESTRICTIONS,
+    id
+  }
+}
+
+function loadedRepoRestrictions(json) {
+  return {
+    type: LOADED_REPO_RESTRICTIONS,
+    json
+  }
+}
+
+function loadRepoRestrictionsError(error) {
+  return {
+    type: LOAD_REPO_RESTRICTIONS_ERROR,
+    error
+  }
+}
+
+export function loadRepoRestrictions(id) {
+  return function loadRestrictionsAsync(dispatch) {
+    dispatch(loadingRepoRestrictions(id));
+    return new Promise((resolve, reject) => {
+      api.node({
+        uuid: id,
+        endpoint: '.meta/key/restrictions',
+        callback: (data) => {
+          resolve(dispatch(loadedRepoRestrictions(data)));
+        },
+        error: (err) => {
+          reject(dispatch(loadRepoRestrictionsError(err)));
+        },
+      });
+    });
+
+  }
+}

src/components/CommitSelection.jsx

@@ -174,6 +174,7 @@ class CommitSelection extends React.Component {
       classes,
       match,
       repoDetail,
+      repoRestrictions,
     } = this.props;
 
     const branchOptions = this.createBranchOptions();
@@ -204,7 +205,7 @@ class CommitSelection extends React.Component {
           <Switch>
             <Route
               path="*"
-              render={props => <RepoHome {...props} repo={repoDetail} branch={selectedBranch.label} commit={selectedCommit.value} />}
+              render={props => <RepoHome {...props} repo={repoDetail} branch={selectedBranch.label} commit={selectedCommit.value} repoRestrictions={repoRestrictions} />}
             />
           </Switch>
         </Grid>
@@ -216,6 +217,7 @@ class CommitSelection extends React.Component {
 CommitSelection.propTypes = {
   classes: PropTypes.object.isRequired,
   repoDetail: PropTypes.object.isRequired,
+  repoRestrictions: PropTypes.array.isRequired,
   match: PropTypes.object.isRequired,
 };
 

src/components/RepoArrays.jsx

@@ -1,37 +1,44 @@
 // @format
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
-import Typography from '@material-ui/core/Typography';
-import List from '@material-ui/core/List';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import SyntaxHighlighter from 'react-syntax-highlighter/prism';
-import { darcula } from 'react-syntax-highlighter/styles/prism';
-import qs from 'qs';
-import DataInstance from './DataInstance';
-import settings from '../settings.json';
-
-const allowedTypes = ['uint8blk', 'uint16blk', 'uint32blk', 'uint64blk', 'labelblk', 'labelmap'];
-
-const styles = (theme) => ({
+import React from "react";
+import PropTypes from "prop-types";
+import { withRouter } from "react-router-dom";
+import Typography from "@material-ui/core/Typography";
+import List from "@material-ui/core/List";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import { withStyles } from "@material-ui/core/styles";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import SyntaxHighlighter from "react-syntax-highlighter/prism";
+import { darcula } from "react-syntax-highlighter/styles/prism";
+import qs from "qs";
+import DataInstance from "./DataInstance";
+import settings from "../settings.json";
+
+const allowedTypes = [
+  "uint8blk",
+  "uint16blk",
+  "uint32blk",
+  "uint64blk",
+  "labelblk",
+  "labelmap"
+];
+
+const styles = theme => ({
   button: {
-    marginRight: theme.spacing.unit,
-  },
+    marginRight: theme.spacing.unit
+  }
 });
 
 function getAncestorsForNode(node, nodeLookup, ancestors = {}) {
   // take node and push it onto ancestors list
   ancestors[node.UUID] = 1;
   // grab the parents array
   // foreach item run getAncestorsForNode
-  node.Parents.forEach((parentId) => {
+  node.Parents.forEach(parentId => {
     getAncestorsForNode(nodeLookup[parentId], nodeLookup, ancestors);
   });
   return ancestors;
@@ -41,13 +48,13 @@ class RepoArrays extends React.Component {
   state = {
     selectedInstances: [],
     showAll: false,
-    showGetArrays: false,
+    showGetArrays: false
   };
 
   getAncestors() {
     const { commit, nodes } = this.props;
     const nodeLookup = {};
-    Object.values(nodes).forEach((node) => {
+    Object.values(nodes).forEach(node => {
       nodeLookup[node.VersionID] = node;
     });
 
@@ -60,22 +67,22 @@ class RepoArrays extends React.Component {
   }
 
   handleShowAll = () => {
-    this.setState((state) => ({ showAll: !state.showAll }));
+    this.setState(state => ({ showAll: !state.showAll }));
   };
 
   handleShowGetArrays = () => {
     const { showGetArrays } = this.state;
     this.setState({ showGetArrays: !showGetArrays });
   };
 
-  handleAddInstance = (dataInstance) => {
+  handleAddInstance = dataInstance => {
     const { selectedInstances } = this.state;
     const newInstances = [...selectedInstances];
     newInstances.push(dataInstance);
     this.setState({ selectedInstances: newInstances });
   };
 
-  handleDeleteInstance = (dataInstance) => {
+  handleDeleteInstance = dataInstance => {
     const { selectedInstances } = this.state;
     const newInstances = [...selectedInstances];
     const index = newInstances.indexOf(dataInstance);
@@ -92,21 +99,24 @@ class RepoArrays extends React.Component {
     // need to pump these instances into neuroglancer component.
     // how do we pass these into a redirect?
     const queryParams = qs.stringify(
-      selectedInstances.map((instance) => {
+      selectedInstances.map(instance => {
         const type = dataInstances[instance].Base.TypeName;
-        const ngType = labelTypes.includes(type) ? 'segmentation' : 'image';
+        const ngType = labelTypes.includes(type) ? "segmentation" : "image";
         const instanceMeta = {
           type: ngType,
-          name: instance,
+          name: instance
         };
         return instanceMeta;
-      }),
+      })
+    );
+    history.push(
+      `/repo/${repoName}/${branch}/${commit}/neuroglancer/?${queryParams}`
     );
-    history.push(`/repo/${repoName}/${branch}/${commit}/neuroglancer/?${queryParams}`);
   };
 
   render() {
-    const { dataInstances, classes, commit } = this.props;
+    const { dataInstances, classes, commit, restrictions } = this.props;
+
     const ancestors = this.getAncestors();
 
     const { selectedInstances, showAll, showGetArrays } = this.state;
@@ -122,8 +132,9 @@ class RepoArrays extends React.Component {
         if (a.Base.Name < b.Base.Name) return -1;
         return 0;
       })
-      .filter((instance) => instance.Base.RepoUUID in ancestors)
-      .map((instance) => {
+      .filter(instance => instance.Base.RepoUUID in ancestors)
+      .filter(instance => !restrictions.includes(instance.Base.Name))
+      .map(instance => {
         const { Base } = instance;
         // check if this instance is in the list of allowed instances.
         if (!allowedTypes.includes(Base.TypeName) && !showAll) {
@@ -141,12 +152,12 @@ class RepoArrays extends React.Component {
 
     const CodeExampleComponent = () => {
       const codeString = [
-        'from diced import DicedStore',
+        "from diced import DicedStore",
         'store = DicedStore("gs://flyem-public-connectome")',
-        '# open repo with version id or repo name',
+        "# open repo with version id or repo name",
         `repo = store.open_repo("${commit}")`,
-        'my_array = repo.get_array("<array_name>")',
-      ].join('\n');
+        'my_array = repo.get_array("<array_name>")'
+      ].join("\n");
       return (
         <SyntaxHighlighter language="python" style={darcula}>
           {codeString}
@@ -160,8 +171,13 @@ class RepoArrays extends React.Component {
       <div>
         <Typography>
           <span className="fas fa-th-large" /> Data Types
-          <Button className={classes.button} size="small" color="primary" onClick={this.handleShowAll}>
-            {showAll ? 'Show Filtered' : 'Show All'}
+          <Button
+            className={classes.button}
+            size="small"
+            color="primary"
+            onClick={this.handleShowAll}
+          >
+            {showAll ? "Show Filtered" : "Show All"}
           </Button>
         </Typography>
         <Card>
@@ -217,10 +233,11 @@ RepoArrays.propTypes = {
   commit: PropTypes.string.isRequired,
   branch: PropTypes.string.isRequired,
   nodes: PropTypes.object.isRequired,
+  restrictions: PropTypes.array.isRequired
 };
 
 RepoArrays.defaultProps = {
-  dataInstances: {},
+  dataInstances: {}
 };
 
 export default withRouter(withStyles(styles)(RepoArrays));

src/components/RepoData.jsx

@@ -26,7 +26,8 @@ class RepoData extends React.Component {
       classes,
       repoDetail,
       commit,
-      branch
+      branch,
+      repoRestrictions
     } = this.props;
 
     const title = <Typography variant="title"><Icon className={classNames('fa fa-database')} style={{ fontSize: 16 }} /> Data</Typography>;
@@ -38,6 +39,7 @@ class RepoData extends React.Component {
           <Grid container spacing={24}>
             <Grid item xs={12} md={6}>
               <RepoArrays
+                restrictions={repoRestrictions}
                 repoName={repoDetail.Alias}
                 nodes={repoDetail.DAG.Nodes}
                 dataInstances={repoDetail.DataInstances}
@@ -63,6 +65,7 @@ RepoData.propTypes = {
   repoDetail: PropTypes.object.isRequired,
   commit: PropTypes.string.isRequired,
   branch: PropTypes.string.isRequired,
+  repoRestrictions: PropTypes.array.isRequired
 };
 
 export default withStyles(styles)(RepoData);

src/components/RepoHome.jsx

@@ -21,10 +21,10 @@ const styles = theme => ({
 
 class RepoHome extends React.Component {
   render() {
-    const { repo, branch, commit } = this.props;
+    const { repo, branch, commit, repoRestrictions } = this.props;
     return [
       <Grid key="repoData" item xs={12}>
-        <RepoData commit={commit} branch={branch} repoDetail={repo} />
+        <RepoData commit={commit} branch={branch} repoDetail={repo} repoRestrictions={repoRestrictions} />
       </Grid>,
       <Grid key="readme" item xs={12}>
         <ReadMe id={repo.Root} />
@@ -37,6 +37,7 @@ RepoHome.propTypes = {
   repo: PropTypes.object.isRequired,
   commit: PropTypes.string.isRequired,
   branch: PropTypes.string.isRequired,
+  repoRestrictions: PropTypes.array.isRequired
 };
 
 export default withStyles(styles)(RepoHome);

src/containers/Repo.js

@@ -5,6 +5,7 @@ import { loadRepoInfoFromAlias } from '../actions/dvid';
 const mapStateToProps = state => ({
   repos: state.dvid.get('repos'),
   repoDetail: state.dvid.get('repoDetail'),
+  repoRestrictions: state.dvid.get('repoRestrictions')
 });
 
 const mapDispatchToProps = dispatch => ({

src/reducers/dvid.js

@@ -22,6 +22,7 @@ const initialState = Immutable.Map({
       Nodes: {},
     },
   },
+  repoRestrictions: [],
   error: null,
 });
 
@@ -61,6 +62,8 @@ export default function adminReducer(state = initialState, action) {
       // TODO: at this point we need to build the dag content, so that we can use
       // it in later checks and for the DAG display.
       return state.set('repoDetail', action.json).set('repoInfoLoading', false).set('repoInfoLoaded', true);
+    case 'LOADED_REPO_RESTRICTIONS':
+      return state.set('repoRestrictions', action.json)
 
     default:
       return state;