fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-08 03:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

enter submits modals (#945)

Browse Source
This commit is contained in:
Colin Megill
2019-09-25 15:18:33 -07:00
committed by GitHub
parent 32feb36172
commit e64f4f06fb
2 changed files with 118 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/categorical/categorical.js
+80 -61
View File
@@ -76,26 +76,30 @@ class Categories extends React.Component {
> >
{/* READ ONLY CATEGORICAL FIELDS */} {/* READ ONLY CATEGORICAL FIELDS */}
{/* this is duplicative but flat, could be abstracted */} {/* this is duplicative but flat, could be abstracted */}
{_.map(allCategoryNames, catName => {_.map(
!schema.annotations.obsByName[catName].writable ? ( allCategoryNames,
<Category catName =>
key={catName} !schema.annotations.obsByName[catName].writable ? (
metadataField={catName} <Category
createAnnoModeActive={createAnnoModeActive} key={catName}
isUserAnno={false} metadataField={catName}
/> createAnnoModeActive={createAnnoModeActive}
) : null isUserAnno={false}
/>
) : null
)} )}
{/* WRITEABLE FIELDS */} {/* WRITEABLE FIELDS */}
{_.map(allCategoryNames, catName => {_.map(
schema.annotations.obsByName[catName].writable ? ( allCategoryNames,
<Category catName =>
key={catName} schema.annotations.obsByName[catName].writable ? (
metadataField={catName} <Category
createAnnoModeActive={createAnnoModeActive} key={catName}
isUserAnno metadataField={catName}
/> createAnnoModeActive={createAnnoModeActive}
) : null isUserAnno
/>
) : null
)} )}
{writableCategoriesEnabled ? ( {writableCategoriesEnabled ? (
<div> <div>
@@ -105,51 +109,66 @@ class Categories extends React.Component {
isOpen={createAnnoModeActive} isOpen={createAnnoModeActive}
onClose={this.handleDisableAnnoMode} onClose={this.handleDisableAnnoMode}
> >
<div className={Classes.DIALOG_BODY}> <form
<div style={{ marginBottom: 20 }}> onSubmit={e => {
<p>New, unique category name:</p> e.preventDefault();
<InputGroup this.handleCreateUserAnno();
autoFocus }}
onChange={e => >
this.setState({ newCategoryText: e.target.value }) <div className={Classes.DIALOG_BODY}>
} <div style={{ marginBottom: 20 }}>
leftIcon="tag" <p>New, unique category name:</p>
/> <InputGroup
autoFocus
onChange={e =>
this.setState({ newCategoryText: e.target.value })
}
leftIcon="tag"
/>
</div>
<p>
Optionally duplicate all labels & cell assignments from
existing category into new category:
</p>
<Select
items={allCategoryNames}
filterable={false}
itemRenderer={(d, { handleClick }) => {
return (
<MenuItem onClick={handleClick} key={d} text={d} />
);
}}
noResults={<MenuItem disabled text="No results." />}
onItemSelect={d => {
this.handleModalDuplicateCategorySelection(d);
}}
>
{/* children become the popover target; render value here */}
<Button
text={
categoryToDuplicate || "None (all cells 'unassigned')"
}
rightIcon="double-caret-vertical"
/>
</Select>
</div> </div>
<p> <div className={Classes.DIALOG_FOOTER}>
Optionally duplicate all labels & cell assignments from <div className={Classes.DIALOG_FOOTER_ACTIONS}>
existing category into new category: <Tooltip content="Close this dialog without creating a category.">
</p> <Button onClick={this.handleDisableAnnoMode}>
<Select Cancel
items={allCategoryNames} </Button>
filterable={false} </Tooltip>
itemRenderer={(d, { handleClick }) => { <Button
return <MenuItem onClick={handleClick} key={d} text={d} />; onClick={this.handleCreateUserAnno}
}} intent="primary"
noResults={<MenuItem disabled text="No results." />} type="submit"
onItemSelect={d => { >
this.handleModalDuplicateCategorySelection(d); Create new category
}} </Button>
> </div>
{/* children become the popover target; render value here */}
<Button
text={
categoryToDuplicate || "None (all cells 'unassigned')"
}
rightIcon="double-caret-vertical"
/>
</Select>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Tooltip content="Close this dialog without creating a category.">
<Button onClick={this.handleDisableAnnoMode}>Cancel</Button>
</Tooltip>
<Button onClick={this.handleCreateUserAnno} intent="primary">
Create new category
</Button>
</div> </div>
</div> </form>
</Dialog> </Dialog>
<Button onClick={this.handleEnableAnnoMode} intent="primary"> <Button onClick={this.handleEnableAnnoMode} intent="primary">
Create new category Create new category
client/src/components/categorical/category.js
+38 -30
View File
@@ -312,39 +312,47 @@ class Category extends React.Component {
isOpen={annotations.isAddingNewLabel} isOpen={annotations.isAddingNewLabel}
onClose={this.disableAddNewLabelMode} onClose={this.disableAddNewLabelMode}
> >
<div className={Classes.DIALOG_BODY}> <form
<div style={{ marginBottom: 20 }}> onSubmit={e => {
<p>New, unique label name:</p> e.preventDefault();
<InputGroup this.handleAddNewLabelToCategory();
autoFocus }}
onChange={e => >
this.setState({ newLabelText: e.target.value }) <div className={Classes.DIALOG_BODY}>
} <div style={{ marginBottom: 20 }}>
leftIcon="tag" <p>New, unique label name:</p>
/> <InputGroup
autoFocus
onChange={e =>
this.setState({ newLabelText: e.target.value })
}
leftIcon="tag"
/>
</div>
</div> </div>
</div> <div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER}> <div className={Classes.DIALOG_FOOTER_ACTIONS}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}> <Tooltip content="Close this dialog without adding a label.">
<Tooltip content="Close this dialog without adding a label."> <Button onClick={this.disableAddNewLabelMode}>
<Button onClick={this.disableAddNewLabelMode}> Cancel
Cancel </Button>
</Tooltip>
<Button
disabled={
newLabelText.length === 0 ||
universe.schema.annotations.obsByName[
metadataField
].categories.indexOf(newLabelText) !== -1
}
onClick={this.handleAddNewLabelToCategory}
intent="primary"
type="submit"
>
Add new label to category
</Button> </Button>
</Tooltip> </div>
<Button
disabled={
newLabelText.length === 0 ||
universe.schema.annotations.obsByName[
metadataField
].categories.indexOf(newLabelText) !== -1
}
onClick={this.handleAddNewLabelToCategory}
intent="primary"
>
Add new label to category
</Button>
</div> </div>
</div> </form>
</Dialog> </Dialog>
<Popover <Popover
interactionKind={PopoverInteractionKind.HOVER} interactionKind={PopoverInteractionKind.HOVER}