+ MAKE MZIP ARCHIVE
+
+ click or drag to desktop
+
+
+
+ DATABASE ARCHIVE REVIEW MODE
+
+ The original database has not been changed. You can import another archive.
+
+ Quit and restart app to restore active database.
+
+
);
});
diff --git a/src/app-console/console.package.json b/src/app-console/console.package.json
index 4b65c453..a5e9c546 100644
--- a/src/app-console/console.package.json
+++ b/src/app-console/console.package.json
@@ -4,6 +4,7 @@
"description": "Dependencies for packaged MEME app. It does not require developer libraries or webpack-related live reload.",
"main": "console/console-main.js",
"dependencies": {
+ "adm-zip": "^0.4.14",
"cookie-parser": "^1.4.4",
"ejs": "^2.7.1",
"express": "^4.17.1",
diff --git a/src/app-console/static/mzip-export-64.png b/src/app-console/static/mzip-export-64.png
new file mode 100644
index 00000000..2f4d3a47
Binary files /dev/null and b/src/app-console/static/mzip-export-64.png differ
diff --git a/src/app-console/static/mzip-export.png b/src/app-console/static/mzip-export.png
new file mode 100644
index 00000000..af2374b2
Binary files /dev/null and b/src/app-console/static/mzip-export.png differ
diff --git a/src/app-console/static/mzip-import-64.png b/src/app-console/static/mzip-import-64.png
new file mode 100644
index 00000000..ce64e7a9
Binary files /dev/null and b/src/app-console/static/mzip-import-64.png differ
diff --git a/src/app-console/static/mzip-import.png b/src/app-console/static/mzip-import.png
new file mode 100644
index 00000000..763a7dce
Binary files /dev/null and b/src/app-console/static/mzip-import.png differ
diff --git a/src/app-web/boot/SystemRoutes.js b/src/app-web/boot/SystemRoutes.js
index 1afe3f75..430fa08d 100644
--- a/src/app-web/boot/SystemRoutes.js
+++ b/src/app-web/boot/SystemRoutes.js
@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
/// COMPONENTS ////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
import ViewMain from '../views/ViewMain/ViewMain';
+import PrintMain from '../views/ViewMain/PrintMain';
import TestUr from '../views/DevTest/TestUr';
import TestScreencap from '../views/DevTest/TestScreencap';
import TestLockSync from '../views/DevTest/TestLockSync';
@@ -66,6 +67,11 @@ const SystemRoutes = [
exact: true,
component: ViewMain
},
+ {
+ path: '/print',
+ exact: true,
+ component: PrintMain
+ },
{
path: '*',
restricted: false,
diff --git a/src/app-web/components/DescriptionView.jsx b/src/app-web/components/DescriptionView.jsx
index 505abcda..b280f02c 100644
--- a/src/app-web/components/DescriptionView.jsx
+++ b/src/app-web/components/DescriptionView.jsx
@@ -24,6 +24,7 @@ import { withStyles } from '@material-ui/core/styles';
import MEMEStyles from './MEMEStyles';
import UR from '../../system/ursys';
import DATA from '../modules/data';
+import DATAMAP from '../../system/common-datamap';
/// CONSTANTS /////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -42,6 +43,7 @@ class DescriptionView extends React.Component {
this.state = {
isOpen: false,
propId: '',
+ propType: '',
label: '',
text: undefined
};
@@ -70,6 +72,7 @@ class DescriptionView extends React.Component {
this.setState({
isOpen: true,
propId,
+ propType: prop.propType,
mechId: undefined,
label: prop.name,
text: prop.description
@@ -79,6 +82,7 @@ class DescriptionView extends React.Component {
this.setState({
isOpen: true,
propId: undefined,
+ propType: mech.propType, // currently undefined and not used
mechId,
label: mech.name,
text: mech.description
@@ -92,7 +96,7 @@ class DescriptionView extends React.Component {
}
render() {
- const { isOpen, propId, text, label } = this.state;
+ const { isOpen, propId, propType, text, label } = this.state;
const { classes } = this.props;
// Fake some text
@@ -102,7 +106,11 @@ class DescriptionView extends React.Component {
{
- const { success, semaphore, uaddr, lockedBy } = rdata;
- status += success ? `${semaphore} lock acquired by ${uaddr} ` : `failed to acquired ${semaphore} lock `;
- if (rdata.success) {
- this.setState(
- {
- isBeingEdited: true,
- isExpanded: true
- },
- () => this.FocusTextInput()
- );
- } else {
- console.log('aw, locked by', rdata.lockedBy);
- alert(`Sorry, someone else (${rdata.lockedBy}) is editing this Evidence Link right now. Please try again later.`)
- }
- });
+ UR.DBTryLock('pmcData.entities', [pmcDataId, intEvId]).then(rdata => {
+ const { success, semaphore, uaddr, lockedBy } = rdata;
+ status += success
+ ? `${semaphore} lock acquired by ${uaddr} `
+ : `failed to acquired ${semaphore} lock `;
+ if (rdata.success) {
+ this.setState(
+ {
+ isBeingEdited: true,
+ isExpanded: true
+ },
+ () => this.FocusTextInput()
+ );
+ UR.Publish('EVIDENCE_EDIT_STATE', { isBeingEdited: true });
+ } else {
+ console.log('aw, locked by', rdata.lockedBy);
+ alert(
+ `Sorry, someone else (${rdata.lockedBy}) is editing this Evidence Link right now. Please try again later.`
+ );
+ }
+ });
}
-
+
DoEditStop() {
this.setState({
- isBeingEdited: false
+ isBeingEdited: false,
+ listenForSourceSelection: false // cancel out and restore orig values
});
const pmcDataId = ASET.selectedPMCDataId;
const intEvId = Number(this.props.evlink.id);
- UR.DBTryRelease('pmcData.entities', [pmcDataId, intEvId])
+ UR.Publish('EVIDENCE_EDIT_STATE', { isBeingEdited: false });
+ UR.DBTryRelease('pmcData.entities', [pmcDataId, intEvId]);
}
DoSave() {
- DATA.SetEvidenceLinkNote(this.props.evlink.id, this.state.note);
+ // If a save has already been triggered, don't save again?
+ if (this.state.saveInProgress) {
+ if (DBG) console.log('DoSave skipping -- saveInProgress');
+ return;
+ }
+ if (!this.state.needsSaving) {
+ if (DBG) console.log("DoSave skipping -- doesn't need saving");
+ return;
+ }
+
+ // Comments, Targets, Ratings are all immediately saved
+ // when they are changed. So the only thing we need to explicitly
+ // save are the two text fields: Description and Why
+ this.setState(
+ {
+ saveInProgress: true,
+ needsSaving: false
+ },
+ () =>
+ DATA.SetEvidenceLinkTextFields(this.props.evlink.id, {
+ note: this.state.note,
+ why: this.state.why
+ }).then(() => {
+ // The promise can get returned after the component is unmounted
+ // which will generate a warning if the user clicks on "Model"
+ // so only set the state if the componet is still mounted
+ if (this._isMounted) {
+ this.setState({
+ saveInProgress: false
+ });
+ }
+ })
+ );
}
OnScreenShotClick(e) {
@@ -194,7 +312,7 @@ class EvidenceLink extends React.Component {
imageURL: this.props.evlink.imageURL
});
}
-
+
OnCaptureScreenShotClick(e) {
e.stopPropagation();
const resourceFrame = document.getElementById('resourceFrame');
@@ -219,35 +337,34 @@ class EvidenceLink extends React.Component {
this.DoEditStop();
// restore previous note
this.setState({
- note: this.props.evlink.note
+ note: this.props.evlink.note,
+ why: this.props.evlink.why
});
}
OnDeleteButtonClick() {
const pmcDataId = ASET.selectedPMCDataId;
const intEvId = Number(this.props.evlink.id);
- UR.DBTryLock('pmcData.entities', [pmcDataId, intEvId])
- .then(rdata => {
- const { success, semaphore, uaddr, lockedBy } = rdata;
- status += success ? `${semaphore} lock acquired by ${uaddr} ` : `failed to acquired ${semaphore} lock `;
- if (rdata.success) {
- console.log('do something here because u-locked!');
- DATA.PMC_DeleteEvidenceLink(this.props.evlink.id);
- } else {
- console.log('aw, locked by', rdata.lockedBy);
- alert(`Sorry, someone else (${rdata.lockedBy}) is editing this Evidence Link right now. Please try again later.`)
- }
- });
-
+ UR.DBTryLock('pmcData.entities', [pmcDataId, intEvId]).then(rdata => {
+ const { success, semaphore, uaddr, lockedBy } = rdata;
+ status += success
+ ? `${semaphore} lock acquired by ${uaddr} `
+ : `failed to acquired ${semaphore} lock `;
+ if (rdata.success) {
+ DATA.PMC_DeleteEvidenceLink(this.props.evlink.id);
+ } else {
+ alert(
+ `Sorry, someone else (${rdata.lockedBy}) is editing this Evidence Link right now. Please try again later.`
+ );
+ }
+ });
}
OnDuplicateButtonClick() {
- DATA.PMC_DuplicateEvidenceLink(this.props.evlink.id,
- id => {
- const newEvLink = DATA.PMC_GetEvLinkByEvId(id);
- UR.Publish('SHOW_EVIDENCE_LINK', { evId: newEvLink.id, rsrcId: newEvLink.rsrcId });
- }
- );
+ DATA.PMC_DuplicateEvidenceLink(this.props.evlink.id, id => {
+ const newEvLink = DATA.PMC_GetEvLinkByEvId(id);
+ UR.Publish('SHOW_EVIDENCE_LINK', { evId: newEvLink.id, rsrcId: newEvLink.rsrcId });
+ });
}
OnEditButtonClick(e) {
@@ -260,10 +377,10 @@ class EvidenceLink extends React.Component {
// Note: we're accessing "current" to get the DOM node
// https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element
// https://stackoverflow.com/questions/52222988/how-to-focus-a-material-ui-textfield-on-button-click/52223078
- this.textInput.current.focus();
+ this.textInputRef.current.focus();
// Set cursor to end of text.
- const pos = this.textInput.current.value.length;
- this.textInput.current.setSelectionRange(pos, pos);
+ const pos = this.textInputRef.current.value.length;
+ this.textInputRef.current.setSelectionRange(pos, pos);
}
OnSaveButtonClick(e) {
@@ -271,11 +388,29 @@ class EvidenceLink extends React.Component {
this.DoSave();
this.DoEditStop();
}
-
+
+ OnBlur(e) {
+ // OnBlur will trigger before any state updates
+ if (DBG) console.log('onblur triggering save');
+ this.DoSave();
+ }
+
OnClickAway(e) {
if (this.state.isBeingEdited) {
- this.DoSave();
- this.DoEditStop();
+ if (DBG) console.log('clickaway (evlink)');
+
+ // If the user is only changing the rating or setting a target link, don't exit Edit Mode
+ if (!this.state.listenForRatingSelection && !this.state.listenForSourceSelection) {
+ // only save if we're not setting a rating or listening for source
+ this.DoSave();
+ this.DoEditStop();
+ }
+
+ // Clear listens
+ // should rating be cleared by some other clearer mechanism?
+ this.setState({
+ listenForRatingSelection: false
+ });
}
}
@@ -295,6 +430,7 @@ class EvidenceLink extends React.Component {
this.setState({
isExpanded: true
});
+ this.DoScrollIntoView();
}
} else {
// Always contract if someone else is expanding
@@ -308,7 +444,18 @@ class EvidenceLink extends React.Component {
OnNoteChange(e) {
if (DBG) console.log(PKG, 'Note Change:', e.target.value);
- this.setState({ note: e.target.value });
+ this.setState({
+ note: e.target.value,
+ needsSaving: true
+ });
+ }
+
+ OnWhyChange(e) {
+ if (DBG) console.log(PKG, 'Why Change:', e.target.value);
+ this.setState({
+ why: e.target.value,
+ needsSaving: true
+ });
}
/* User has clicked on the 'link' button, so we want to
@@ -318,22 +465,23 @@ class EvidenceLink extends React.Component {
the evLink
*/
OnLinkButtonClick(e) {
- let evlink = this.props.evlink;
- this.DoEditStop(); // need to release db lock
- // Deselect the prop first, otherwise the deleted prop will remain selected
- DATA.VM_DeselectAll();
- UR.Publish('SELECTION_CHANGED');
- // Remove any existing evidence links
- DATA.PMC_EvidenceUpdate(evlink.id, { propId: null, mechId: null });
- // Then trigger editing
if (this.state.isBeingEdited) {
- UR.Publish('REQUEST_SELECT_EVLINK_SOURCE', { evId: evlink.id, rsrcId: evlink.rsrcId });
+ this.setState({ listenForSourceSelection: true }, () => {
+ // Deselect the prop first, otherwise the deleted prop will remain selected
+ DATA.VM_DeselectAllProps();
+ let evlink = this.props.evlink;
+ UR.Publish('REQUEST_SELECT_EVLINK_SOURCE', { evId: evlink.id, rsrcId: evlink.rsrcId });
+ });
}
}
DoEnableSourceSelect(data) {
+ // Other EvidenceLink has triggered a set target (usually from ResourceView)
+ // so we need to listen too
if (data.evId === this.props.evlink.id) {
- this.setState({ listenForSourceSelection: true });
+ this.setState({
+ listenForSourceSelection: true
+ });
}
}
@@ -342,19 +490,16 @@ class EvidenceLink extends React.Component {
if (this.state.listenForSourceSelection) {
let sourceId;
// Assume mechs are harder to select so check for them first.
- // REVIEW: Does this work well?
let selectedMechIds = DATA.VM_SelectedMechIds();
if (DBG) console.log(PKG, 'selection changed mechsIds:', selectedMechIds);
if (selectedMechIds.length > 0) {
// Get the last selection
sourceId = selectedMechIds[selectedMechIds.length - 1];
- DATA.SetEvidenceLinkMechId(this.props.evlink.id, sourceId);
- // leave it in a waiting state? This allows you to change your mind?
- // REVIEW may want another way to exit / confirm the selection?
- // For May 1, exit as soon as something is selected to prevent
- // subsequent source selections from being applied to ALL open
- // evlinks.
- this.setState({ listenForSourceSelection: false });
+ DATA.SetEvidenceLinkMechId(this.props.evlink.id, sourceId).then(() => {
+ if (this._isMounted) {
+ this.setState({ listenForSourceSelection: false });
+ }
+ });
return;
}
@@ -363,13 +508,11 @@ class EvidenceLink extends React.Component {
if (selectedPropIds.length > 0) {
// Get the last selection
sourceId = selectedPropIds[selectedPropIds.length - 1];
- DATA.SetEvidenceLinkPropId(this.props.evlink.id, sourceId);
- // leave it in a waiting state? This allows you to change your mind?
- // REVIEW may want another way to exit / confirm the selection?
- // For May 1, exit as soon as something is selected to prevent
- // subsequent source selections from being applied to ALL open
- // evlinks.
- this.setState({ listenForSourceSelection: false });
+ DATA.SetEvidenceLinkPropId(this.props.evlink.id, sourceId).then(() => {
+ if (this._isMounted) {
+ this.setState({ listenForSourceSelection: false });
+ }
+ });
}
}
}
@@ -378,10 +521,7 @@ class EvidenceLink extends React.Component {
if (this.state.isBeingEdited) return; // Don't toggle if being edited
if (DBG) console.log(PKG, 'evidence link clicked');
if (this.state.isExpanded) {
- this.setState(
- { isExpanded: false },
- () => this.DoEditStop()
- );
+ this.setState({ isExpanded: false }, () => this.DoEditStop());
} else {
this.setState({
isExpanded: true
@@ -392,9 +532,9 @@ class EvidenceLink extends React.Component {
OnRatingButtonClick() {
if (ADM.IsViewOnly()) return;
const data = { evId: this.props.evlink.id, rating: this.props.evlink.rating };
- UR.Publish('RATING_OPEN', data);
+ this.setState({ listenForRatingSelection: true }, UR.Publish('RATING_OPEN', data));
}
-
+
OnDrop(href) {
DATA.PMC_EvidenceUpdate(this.props.evlink.id, { imageURL: href });
}
@@ -428,6 +568,7 @@ class EvidenceLink extends React.Component {
note,
rating,
ratingDefs,
+ why,
isBeingEdited,
isExpanded,
isHovered,
@@ -435,27 +576,33 @@ class EvidenceLink extends React.Component {
} = this.state;
if (id === '') return '';
- let sourceType;
- let sourceLabel;
- if (propId !== undefined && propId !== null && DATA.HasProp(propId) && DATA.Prop(propId)) {
- sourceType = 'prop';
- sourceLabel = DATA.Prop(propId).name;
- } else if (mechId !== undefined && mechId !== null && DATA.Mech(mechId)) {
- sourceType = 'mech';
- sourceLabel = DATA.Mech(mechId).name;
- } else {
- sourceType = undefined;
- sourceLabel = undefined;
+ let sourceType = undefined;
+ let sourceLabel = undefined;
+ // If we are listeningForSourceSelection, then leave sourceType and sourceLabel
+ // undefined so that the link button will show "Click on Target"
+ // otherwise show the prop or mech linked.
+ if (!listenForSourceSelection) {
+ if (propId !== undefined && propId !== null && DATA.HasProp(propId) && DATA.Prop(propId)) {
+ if (DATA.Prop(propId).propType === DATAMAP.PMC_MODELTYPES.OUTCOME.id) {
+ sourceType = DATAMAP.PMC_MODELTYPES.OUTCOME.id;
+ } else {
+ sourceType = DATAMAP.PMC_MODELTYPES.COMPONENT.id;
+ }
+ sourceLabel = DATA.Prop(propId).name;
+ } else if (mechId !== undefined && mechId !== null && DATA.Mech(mechId)) {
+ sourceType = DATAMAP.PMC_MODELTYPES.MECHANISM.id;
+ sourceLabel = DATA.Mech(mechId).name;
+ }
}
-
+
const isViewOnly = ADM.IsViewOnly();
-
+
// Display Capture Screen button?
// resourceFrame's clientWidth is 0 if it's not whoing
const resourceFrame = document.getElementById('resourceFrame');
const resourceFrameIsVisible = resourceFrame !== null && resourceFrame.clientWidth > 0;
const extensionIsConnected = EXT.IsConnected();
-
+
return (
@@ -467,6 +614,7 @@ class EvidenceLink extends React.Component {
isHovered ? classes.evidenceLinkPaperHover : ''
)}
onClick={this.DoToggleExpanded}
+ ref={this.ref}
key={`${rsrcId}`}
elevation={isExpanded ? 5 : 1}
onMouseEnter={() => this.setState({ isHovered: true })}
@@ -495,7 +643,7 @@ class EvidenceLink extends React.Component {
- How does this resource support this component / property / mechanism?
+ How is this resource evidence for this part of the model?
{/* Source */}
@@ -507,7 +655,12 @@ class EvidenceLink extends React.Component {
isExpanded ? classes.evidenceBodyRow : classes.evidenceBodyRowCollapsed
}
>
-
+ {
e.stopPropagation();
}}
inputProps={{
readOnly: !isBeingEdited
}}
- inputRef={this.textInput}
+ inputRef={this.textInputRef}
/>
) : (
@@ -558,7 +711,12 @@ class EvidenceLink extends React.Component {
isExpanded ? classes.evidenceBodyRow : classes.evidenceBodyRowCollapsed
}
>
-
+
-
+
-
+
+
+
+
+
+ WHY?
+
+
+
+
+ {
+ e.stopPropagation();
+ }}
+ inputProps={{
+ readOnly: !isBeingEdited
+ }}
+ inputRef={this.textInput}
+ />
+
+
+
+
-
+
) : extensionIsConnected ? (
- (Open the Resource to Capture Screen)
+ Open Resource to Capture Screen
) : (
''
@@ -724,7 +926,8 @@ EvidenceLink.defaultProps = {
rsrcId: -1,
numberLabel: '',
note: '',
- rating: 0
+ rating: 0,
+ why: ''
}
};
/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
diff --git a/src/app-web/components/EvidenceList.jsx b/src/app-web/components/EvidenceList.jsx
index 0bd1b008..14a18e5d 100644
--- a/src/app-web/components/EvidenceList.jsx
+++ b/src/app-web/components/EvidenceList.jsx
@@ -43,7 +43,7 @@ class EvidenceList extends React.Component {
if (evLinks === undefined) return '';
// evLinks [ { id: propId: mechId: rsrcId: note: }, ... ]
return (
-
+
{evLinks.map((evlink, index) => (
))}
diff --git a/src/app-web/components/HelpView.jsx b/src/app-web/components/HelpView.jsx
index 6ba76b6a..b897f255 100644
--- a/src/app-web/components/HelpView.jsx
+++ b/src/app-web/components/HelpView.jsx
@@ -29,7 +29,10 @@ import { withStyles } from '@material-ui/core/styles';
import MEMEStyles from './MEMEStyles';
import UR from '../../system/ursys';
import ADM from '../modules/data';
+import DEFAULTS from '../modules/defaults';
+import UTILS from '../modules/utils';
import CriteriaList from '../views/ViewAdmin/components/AdmCriteriaList';
+import DATAMAP from '../../system/common-datamap';
/// CONSTANTS /////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -45,27 +48,47 @@ class HelpView extends React.Component {
this.DoOpen = this.DoOpen.bind(this);
this.DoClose = this.DoClose.bind(this);
+ const component = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.COMPONENT.label);
+ const mechanism = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.MECHANISM.label);
+ const outcome = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.OUTCOME.label);
+
this.state = {
isOpen: false,
helptext: `
-###### Create a Component
-1. Click on 'Add Component'
-###### Create a Mechanism
-1. Click on 'Add Mechanism'
-2. Click on the source component/property
-3. Click on the target component/property
+###### Definitions
+
+**${component}** -- ${DATAMAP.PMC_MODELTYPES.COMPONENT.description}
+
+**${mechanism}** -- ${DATAMAP.PMC_MODELTYPES.MECHANISM.description}
+
+**${outcome}** -- ${DATAMAP.PMC_MODELTYPES.OUTCOME.description}
+
+---
+
+###### Create an ${component} or ${outcome}
+1. Click on 'Add ${component}' or 'Add ${outcome}'
+2. Type in a label
+3. Type in a description, or you can add it later
+4. Click 'Create'
+
+###### Create a ${mechanism}
+1. Click on 'Add ${mechanism}'
+2. Click on the source ${component}/${outcome}/property
+3. Click on the target ${component}/${outcome}/property
4. Type in a label
-5. Click 'Add'
+5. Type in a description, or you can add it later
+6. Click 'Add'
###### Create an Evidence Link
-Evidence Links should describe how a resource supports or contradicts your model's component, property, or mechanism.
-1. View the Resource by clicking on it in the Resource Library.
-2. Click 'Create Evidence' button
-3. Type in a description.
-4. Click on 'Set Target' to close the resource view and select a component, property, or mechansim in your model.
-5. Give it a rating.
-6. Click 'Save'
+Evidence Links should describe how a resource supports or contradicts your model's ${component}, ${outcome}, or ${mechanism}
+1. View the Resource by clicking on it in the Resource Library
+2. Click '${DEFAULTS.TEXT.ADD_EVIDENCE}' button
+3. Type in a description
+4. Click on 'Set Target' to close the resource view and select a ${component}, ${outcome}, or ${mechanism}in your model.
+5. Give it a rating for how well it supports the element of the model
+6. Explain 'why' you think that raiting fits
+7. Click 'Save'
###### Add a Comment
1. Click on the comment icon
@@ -92,7 +115,7 @@ Evidence Links should describe how a resource supports or contradicts your model
render() {
const { isOpen, helptext } = this.state;
const { classes } = this.props;
- const criteria = ADM.GetCriteriaByClassroom();
+ const criteria = ADM.GetCriteriaByModel(); // always use the current model's criteria
return (
@@ -105,8 +128,8 @@ Evidence Links should describe how a resource supports or contradicts your model
HELP
-
-
+
+
Criteria
diff --git a/src/app-web/components/LinkButton.jsx b/src/app-web/components/LinkButton.jsx
index e3574116..0154ce7e 100644
--- a/src/app-web/components/LinkButton.jsx
+++ b/src/app-web/components/LinkButton.jsx
@@ -2,7 +2,7 @@
LinkButton
-A LinkButton is used to select and show the source or target
+A LinkButton is used to select and show the source or target
component/property/mechanism that an Evidence Link points to.
Communication with its parent is via props since this really is not an
@@ -11,27 +11,27 @@ indpendent component and needs to be carefully managed by its parent.
It has four states:
1. "Target Not Set"
- When an object is first created the target of the link is not set, so the
+ When an object is first created the target of the link is not set, so the
button displays "Target Not Set". The button is disabled at this point.
-
+
2. "Set Target"
- If the parent object is edtiable, the button is enabled, and the user can
- click the button to then select a target.
+ If the parent object is edtiable, the button is enabled, and the user can
+ click the button to then select a target.
this.props.OnLinkButtonClick needs to handle this transition and set the
this.props.listenForSourceSelection to true to tell the button to
display the "Click on Target" state.
3. "Click on Target"
- After the user has clicked on "Set Target" the button is waiting for
+ After the user has clicked on "Set Target" the button is waiting for
the user to select a component/prop/mech. The parent object should
handle the selection.
-
+
4. "Label"
Once a source / target component/property/mechanism has been set
the button displays the name of the object in the right color
according to the this.props.sourceType (e.g. 'mech' || 'prop')
-In addition, it has a smaller and larger views to correspond with
+In addition, it has a smaller and larger views to correspond with
the expanded state in Evidence Links.
The parent component basically nees to handle three things:
@@ -41,7 +41,7 @@ The parent component basically nees to handle three things:
2. ...Set `listenForSourceSelection` prop to true to make the button show
"Click on Target", and when a selection is received...
3. ...Set the `sourceLabel` (and `sourceType`) prop when the selection
- is made by theuser.
+ is made by theuser.
See MechDialog and EvidenceLink for example implementations.
@@ -50,8 +50,10 @@ See MechDialog and EvidenceLink for example implementations.
/// LIBRARIES /////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
import React from 'react';
+import clsx from 'clsx';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
+import DATAMAP from '../../system/common-datamap';
// Material UI Icons
import CreateIcon from '@material-ui/icons/Create';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
@@ -61,6 +63,21 @@ import { withStyles } from '@material-ui/core/styles';
/// COMPONENTS ////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
import MEMEStyles from './MEMEStyles';
+import DEFAULTS from '../modules/defaults';
+const { COLOR } = DEFAULTS;
+
+/// CONSTANTS /////////////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+const LButton = withStyles(theme => ({
+ root: {
+ padding: '2px 7px',
+ lineHeight: '1.2em',
+ '&$disabled': {
+ color: 'rgba(0,0,0,0.3)'
+ }
+ }
+}))(props => );
+
/// CLASS DECLARATION /////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -94,16 +111,33 @@ class LinkButton extends React.Component {
let icon;
let evidenceLinkSelectButtonClass = classes.evidenceLinkSelectButton;
+ let isDisabled = !isBeingEdited || listenForSourceSelection;
+
if (sourceLabel !== undefined) {
label = sourceLabel;
switch (sourceType) {
- case 'mech':
+ case DATAMAP.PMC_MODELTYPES.MECHANISM.id: // 'mech':
if (label === '') label = 'unlabeled';
- evidenceLinkSelectButtonClass = classes.evidenceLinkSourceMechAvatarSelected;
+ if (isDisabled) {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourceMechAvatarDisabled;
+ } else {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourceMechAvatarSelected;
+ }
+ break;
+ case DATAMAP.PMC_MODELTYPES.OUTCOME.id:
+ if (isDisabled) {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourceOutcomeAvatarDisabled;
+ } else {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourceOutcomeAvatarSelected;
+ }
break;
default:
- case 'prop':
- evidenceLinkSelectButtonClass = classes.evidenceLinkSourcePropAvatarSelected;
+ case DATAMAP.PMC_MODELTYPES.COMPONENT.id: // 'prop':
+ if (isDisabled) {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourcePropAvatarDisabled;
+ } else {
+ evidenceLinkSelectButtonClass = classes.evidenceLinkSourcePropAvatarSelected;
+ }
break;
}
} else if (listenForSourceSelection) {
@@ -118,15 +152,19 @@ class LinkButton extends React.Component {
}
return (
-
+ {label}
+
);
}
}
diff --git a/src/app-web/components/Login.jsx b/src/app-web/components/Login.jsx
index 08c41b71..8071e3a0 100644
--- a/src/app-web/components/Login.jsx
+++ b/src/app-web/components/Login.jsx
@@ -57,12 +57,12 @@ class Login extends React.Component {
this.DoADMDataUpdate();
if (AUTOBOB) {
this.setState({ loginId: 'bob-z4in' }, () => {
- this.OnLogin({ preventDefault: function () { } });
+ this.OnLogin({ preventDefault: function() {} });
});
}
}
- componentWillUnmount() { }
+ componentWillUnmount() {}
DoADMDataUpdate() {
if (ADM.IsLoggedOut()) {
@@ -103,6 +103,8 @@ class Login extends React.Component {
render() {
const { classes } = this.props;
const { loginId, loginDialogOpen, isValidLogin } = this.state;
+ const loginTitle = ADM.IsDBReadOnly() ? 'MEME Login (READ ONLY)' : 'MEME Login';
+
return (
})
{
+ if (dragExport) return;
+ event.currentTarget.classList.remove(classes.dropHilight);
+ doDragFromDesktop(event);
+ event.preventDefault();
+ }}
+ onDragStart={event => {
+ event.preventDefault();
+ }}
+ onDragOver={event => {
+ if (!dragExport) event.currentTarget.classList.add(classes.dropHilight);
+ event.preventDefault();
+ }}
+ onDragLeave={event => {
+ event.currentTarget.classList.remove(classes.dropHilight);
+ event.preventDefault();
+ }}
+ />
+ })
+