From f49c3d8fe7d88dd469cdfcf90a52a6ff9e4f7885 Mon Sep 17 00:00:00 2001 From: Severiano Badajoz Date: Mon, 20 Sep 2021 12:58:55 -0400 Subject: [PATCH] feat: remove info drawer and reintroduce singleton categories (#2421) * refactor: drop non-session auth from frontend * remove dataset drawer and reintroduce singleton values --- .../components/categorical/category/index.js | 15 +- client/src/components/categorical/index.js | 23 +- .../src/components/infoDrawer/infoDrawer.js | 61 ------ .../src/components/infoDrawer/infoFormat.js | 201 ------------------ .../leftSidebar/topLeftLogoAndTitle.js | 16 +- client/src/reducers/controls.js | 8 - 6 files changed, 27 insertions(+), 297 deletions(-) delete mode 100644 client/src/components/infoDrawer/infoDrawer.js delete mode 100644 client/src/components/infoDrawer/infoFormat.js diff --git a/client/src/components/categorical/category/index.js b/client/src/components/categorical/category/index.js index 8851bf1e..3d78a1db 100644 --- a/client/src/components/categorical/category/index.js +++ b/client/src/components/categorical/category/index.js @@ -494,12 +494,23 @@ const CategoryRender = React.memo( */ const { numCategoryValues } = categorySummary; const isSingularValue = !isUserAnno && numCategoryValues === 1; - if (isSingularValue) { /* Entire category has a single value, special case. */ - return null; + const theOneValue = categorySummary.categoryValues[0]; + return ( +
+ + + {metadataField} + + + + {`: ${theOneValue}`} + +
+ ); } /* diff --git a/client/src/components/categorical/index.js b/client/src/components/categorical/index.js index 960ff08f..cef524e8 100644 --- a/client/src/components/categorical/index.js +++ b/client/src/components/categorical/index.js @@ -193,18 +193,17 @@ class Categories extends React.Component { {/* READ ONLY CATEGORICAL FIELDS */} {/* this is duplicative but flat, could be abstracted */} - {allCategoryNames.map((catName) => - !schema.annotations.obsByName[catName].writable && - (schema.annotations.obsByName[catName].categories?.length > 1 || - !schema.annotations.obsByName[catName].categories) ? ( - - ) : null + {allCategoryNames.map( + (catName) => + !schema.annotations.obsByName[catName].writable && ( + + ) )} {/* WRITEABLE FIELDS */} {allCategoryNames.map((catName) => diff --git a/client/src/components/infoDrawer/infoDrawer.js b/client/src/components/infoDrawer/infoDrawer.js deleted file mode 100644 index 527dcd44..00000000 --- a/client/src/components/infoDrawer/infoDrawer.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { PureComponent } from "react"; -import { connect } from "react-redux"; -import { Drawer } from "@blueprintjs/core"; - -import InfoFormat from "./infoFormat"; -import { selectableCategoryNames } from "../../util/stateManager/controlsHelpers"; - -@connect((state) => ({ - schema: state.annoMatrix.schema, - datasetTitle: state.config?.displayNames?.dataset ?? "", - aboutURL: state.config?.links?.["about-dataset"], - isOpen: state.controls.datasetDrawer, - dataPortalProps: state.config?.corpora_props, - })) -class InfoDrawer extends PureComponent { - handleClose = () => { - const { dispatch } = this.props; - - dispatch({ type: "toggle dataset drawer" }); - }; - - render() { - const { - position, - aboutURL, - datasetTitle, - schema, - isOpen, - dataPortalProps, - } = this.props; - - const allCategoryNames = selectableCategoryNames(schema).sort(); - const singleValueCategories = new Map(); - - allCategoryNames.forEach((catName) => { - const isUserAnno = schema?.annotations?.obsByName[catName]?.writable; - const colSchema = schema.annotations.obsByName[catName]; - if (!isUserAnno && colSchema.categories?.length === 1) { - singleValueCategories.set(catName, colSchema.categories[0]); - } - }); - - return ( - - - - ); - } -} -export default InfoDrawer; diff --git a/client/src/components/infoDrawer/infoFormat.js b/client/src/components/infoDrawer/infoFormat.js deleted file mode 100644 index ad414bfe..00000000 --- a/client/src/components/infoDrawer/infoFormat.js +++ /dev/null @@ -1,201 +0,0 @@ -import { H3, H1, UL, HTMLTable, Classes } from "@blueprintjs/core"; -import React from "react"; - -const renderContributors = (contributors, affiliations) => { - // eslint-disable-next-line no-constant-condition -- Temp removed contributor section to avoid publishing PII - if (!contributors || contributors.length === 0 || true) return null; - return ( - <> -

Contributors

-

- {contributors.map((contributor) => { - const { email, name, institution } = contributor; - - return ( - - {name} - {email && `(${email})`} - {affiliations.indexOf(institution) + 1} - - ); - })} -

- {renderAffiliations(affiliations)} - - ); -}; - -// generates a list of unique institutions by order of appearance in contributors -const buildAffiliations = (contributors = []) => { - const affiliations = []; - contributors.forEach((contributor) => { - const { institution } = contributor; - if (affiliations.indexOf(institution) === -1) { - affiliations.push(institution); - } - }); - return affiliations; -}; - -const renderAffiliations = (affiliations) => { - if (affiliations.length === 0) return null; - return ( - <> -

Affiliations

-
    - {affiliations.map((item, index) => ( -
    - {index + 1} - {" "} - {item} -
    - ))} -
- - ); -}; - -const renderDOILink = (type, doi) => { - if (!doi) return null; - return ( - <> -

{type}

-

- - {doi} - -

- - ); -}; - -const ONTOLOGY_KEY = "ontology_term_id"; -// Render list of metadata attributes found in categorical field -const renderDatasetMetadata = (singleValueCategories, corporaMetadata) => { - if (singleValueCategories.size === 0) return null; - return ( - <> -

Dataset Metadata

- - - - Field - Label - Ontology ID - - - - {Object.entries(corporaMetadata).map(([key, value]) => ( - - {`${key}:`} - {value} - - - ))} - {Array.from(singleValueCategories).reduce((elems, pair) => { - const [category, value] = pair; - // If the value is empty skip it - if (!value) return elems; - - // If this category is a ontology term, let's add its value to the previous node - if (String(category).includes(ONTOLOGY_KEY)) { - const prevElem = elems.pop(); - const newChildren = [...prevElem.props.children]; - newChildren.splice(2, 1, [{value}]); - // Props aren't extensible so we must clone and alter the component to append the new child - elems.push( - React.cloneElement(prevElem, prevElem.props, newChildren) - ); - } else { - // Create the list item - elems.push( - - {`${category}:`} - {value} - - - ); - } - return elems; - }, [])} - - - - ); -}; - -// Renders any links found in the config where link_type is not "SUMMARY" -// If there are no links in the config, render the aboutURL -const renderLinks = (projectLinks, aboutURL) => { - if (!projectLinks && !aboutURL) return null; - if (projectLinks) - return ( - <> -

Project Links

-
    - {projectLinks.map((link) => { - if (link.link_type === "SUMMARY") return null; - return ( -
  • - - {link.link_name} - -
    • - ); - })} -
- - ); - - return ( - <> -

More Info

-

- - {aboutURL} - -

- - ); -}; - -const InfoFormat = React.memo( - ({ datasetTitle, singleValueCategories, aboutURL, dataPortalProps = {} }) => { - if ( - ["1.0.0", "1.1.0"].indexOf( - dataPortalProps.version?.corpora_schema_version - ) === -1 - ) { - dataPortalProps = {}; - } - const { - title, - publication_doi: doi, - preprint_doi: preprintDOI, - organism, - contributors, - project_links: projectLinks, - } = dataPortalProps; - - const affiliations = buildAffiliations(contributors); - - return ( -
-
-

{title ?? datasetTitle}

- {renderContributors(contributors, affiliations)} - {renderDatasetMetadata(singleValueCategories, { organism })} - {renderLinks(projectLinks, aboutURL)} - {renderDOILink("DOI", doi)} - {renderDOILink("Preprint DOI", preprintDOI)} -
-
- ); - } -); - -export default InfoFormat; diff --git a/client/src/components/leftSidebar/topLeftLogoAndTitle.js b/client/src/components/leftSidebar/topLeftLogoAndTitle.js index ba41f807..5de741a2 100644 --- a/client/src/components/leftSidebar/topLeftLogoAndTitle.js +++ b/client/src/components/leftSidebar/topLeftLogoAndTitle.js @@ -1,11 +1,9 @@ import React from "react"; import { connect } from "react-redux"; -import { Button } from "@blueprintjs/core"; import * as globals from "../../globals"; import Logo from "../framework/logo"; import Truncate from "../util/truncate"; -import InfoDrawer from "../infoDrawer/infoDrawer"; import InformationMenu from "./infoMenu"; const DATASET_TITLE_FONT_SIZE = 14; @@ -25,11 +23,6 @@ const DATASET_TITLE_FONT_SIZE = 14; }; }) class LeftSideBar extends React.Component { - handleClick = () => { - const { dispatch } = this.props; - dispatch({ type: "toggle dataset drawer" }); - }; - render() { const { datasetTitle, @@ -82,22 +75,19 @@ class LeftSideBar extends React.Component {
- - + { @@ -138,12 +136,6 @@ const Controls = ( scatterplotYYaccessor: null, }; - /************************** - Dataset Drawer - **************************/ - case "toggle dataset drawer": - return { ...state, datasetDrawer: !state.datasetDrawer }; - default: return state; }