\n {this.renderButton([elements, segments, datasets], user)}\n
\n - {this.renderDescription([elements, segments, datasets])}
\n {message}\n
\n\n {email}\n
| ID | \nDeleted at | \n
|---|---|
| {item.id} | \n{item.deleted_at} | \n
\n this.updateDropdownFilter('account_active', e.target.value)}\n >\n \n \n \n \n \n this.updateDropdownFilter('locked_at', e.target.value)}\n >\n \n \n \n \n \n
\n \n \n \n \n \n this.handleRestoreAccountShow()}\n data-cy=\"restore-user\"\n className=\"me-1\"\n >\n Restore Account\n \n \n \n \n
\n );\n }\n}\n","import React from 'react';\nimport { Button, Popover, OverlayTrigger } from 'react-bootstrap';\nimport AdminFetcher from 'src/fetchers/AdminFetcher';\n\nexport default class DeleteGroupDeviceButton extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n groups: props.currentState.groups,\n devices: props.currentState.devices\n };\n\n this.onChangeGroupData = this.onChangeGroupData.bind(this);\n this.onChangeDeviceData = this.onChangeDeviceData.bind(this);\n }\n\n componentDidMount() {\n }\n\n onChangeGroupData = (groups) => {\n this.props.onChangeGroupData(groups);\n }\n\n onChangeDeviceData = (devices) => {\n this.props.onChangeDeviceData(devices);\n }\n\n confirmDelete(rootType, actionType, groupRec, userRec, isRoot = false) {\n const { groups, devices } = this.state;\n const rmUsers = userRec == null ? [] : [userRec.id];\n\n const params = {\n action: isRoot ? 'RootDel' : 'NodeDel',\n rootType,\n actionType,\n id: groupRec.id,\n destroy_obj: isRoot,\n rm_users: rmUsers\n };\n\n AdminFetcher.updateGroup(params)\n .then((result) => {\n switch (rootType) {\n case 'Group':\n this.onChangeGroupData();\n break;\n case 'Device':\n this.onChangeDeviceData();\n break;\n default:\n break;\n }\n });\n }\n\n render() {\n const { rootType, actionType, groupRec, userRec, isRoot } = this.props;\n let msg = 'remove yourself from the group';\n if (rootType === 'Group' && isRoot) {\n msg = `remove group: ${groupRec.name}`;\n } else if (rootType === 'Device' && isRoot) {\n msg = `remove device: ${groupRec.name}`;\n } else if (rootType === 'Group' && !isRoot && actionType === 'Person') {\n msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;\n } else if (rootType === 'Group' && !isRoot && actionType === 'Device') {\n msg = `remove device: ${userRec.name} from group: ${groupRec.name} ?`;\n } else if (rootType === 'Device' && !isRoot) {\n msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;\n } else {\n msg = `remove ???: ${groupRec.name}`;\n }\n\n const popover = (\n \n \n {tcolumn}\n \n {tbody}\n \n
\n
\n {this.renderMessageModal()}\n {this.renderNewUserModal()}\n {this.renderEditUserModal()}\n {this.renderRestoreAccountModal()}\n {this.renderGenericAdminModal()}\n \n \n \n \n
\n );\n }\n}\n","import React from 'react';\nimport { OverlayTrigger, Tooltip, Button, Table, Accordion } from 'react-bootstrap';\nimport AdminFetcher from 'src/fetchers/AdminFetcher';\nimport { findIndex } from 'lodash';\nimport DeleteGroupDeviceButton from 'src/apps/admin/DeleteGroupDeviceButton';\n\nexport default class AdminGroupElement extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showUsers: false,\n showDevices: false,\n groups: props.currentState.groups\n };\n\n this.toggleUsers = this.toggleUsers.bind(this);\n this.toggleDevices = this.toggleDevices.bind(this);\n }\n\n setGroupAdmin(groupRec, userRec, setAdmin = true) {\n const { groups } = this.state;\n const params = {\n action: 'NodeAdm',\n rootType: 'Group',\n actionType: 'Adm',\n id: groupRec.id,\n admin_id: userRec.id,\n set_admin: setAdmin\n };\n AdminFetcher.updateGroup(params)\n .then((result) => {\n if (setAdmin) {\n groupRec.admins.splice(1, 0, userRec);\n } else {\n const usrIdx = findIndex(groupRec.admins, o => o.id === userRec.id);\n groupRec.admins.splice(usrIdx, 1);\n }\n const idx = findIndex(groups, o => o.id === groupRec.id);\n groups.splice(idx, 1, groupRec);\n this.props.onChangeGroupData(groups);\n });\n }\n\n toggleUsers() {\n this.setState({\n showUsers: !this.state.showUsers\n })\n }\n\n toggleDevices() {\n this.setState({\n showDevices: !this.state.showDevices\n })\n }\n\n renderGroupButtons(group) {\n return (\n \n List Group-Users}>\n \n \n Add user to group}>\n \n \n
\n\n \n List Group-Devices}>\n \n \n Add device to group}>\n \n \n
\n \n
\n \n {adminTooltip}}>\n this.setGroupAdmin(group, user, !isAdmin)}\n >\n \n \n \n
\n | {i + 1} | \n{u.name} | \n{u.initials} | \n{u.email} | \n{groupElement.admins && groupElement.admins.filter(a => (a.id === u.id)).length > 0 ? adminIcon : ''} | \n {this.renderGroupUserButtons(groupElement, u)}\n
| {i + 1} | \n{u.name} | \n{u.initials} | \n{ } | \n{ } | \n\n | \n
| # | \nActions | \nName | \nKürzel | \nAdmin by | \n
|---|
\n {this.renderGroups()}\n {this.renderModal()}\n {this.renderCreateModal()}\n
\n );\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n Form, Button, Row, Col\n} from 'react-bootstrap';\nimport { Select } from 'src/components/common/Select';\n\nimport MessagesFetcher from 'src/fetchers/MessagesFetcher';\n\nexport default class MessagePublish extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n channels: [],\n selectedChannel: null,\n };\n this.toggleChannelList = this.toggleChannelList.bind(this);\n this.handleChannelChange = this.handleChannelChange.bind(this);\n this.messageSend = this.messageSend.bind(this);\n }\n\n componentDidMount() {\n this.toggleChannelList();\n }\n\n handleChannelChange(selectedChannel) {\n this.setState({ selectedChannel });\n }\n\n toggleChannelList() {\n MessagesFetcher.fetchChannels(9)\n .then((result) => {\n const channels = result.channels.map((c) => ({ value: c.id, name: c.subject, label: c.subject }));\n channels.sort((a, b) => (a.value - b.value));\n this.setState({ channels });\n });\n }\n\n messageSend() {\n const { selectedChannel } = this.state;\n\n if (!selectedChannel) {\n alert('Please select channel!');\n } else {\n const params = {\n channel_id: selectedChannel.value,\n content: this.myMessage.value,\n };\n\n MessagesFetcher.createMessage(params)\n .then((result) => {\n this.myMessage.value = '';\n alert('Message sent!');\n });\n }\n }\n\n render() {\n const { selectedChannel, channels } = this.state;\n\n return (\n \n {file.name}\n \n
\n ) : (\n \n Drop File, or Click to Select.\n
\n \n );\n }\n\n addToChecked(cks, parent) {\n if (parent.is_enabled === true) { cks.push(parent.value); }\n (parent.children || []).map((node) => {\n node.key = node.value;\n this.addToChecked(cks, node);\n });\n return cks;\n }\n\n initialOls(selectName) {\n let checkedKeys = [];\n if (selectName == null && selectName === '') { return; }\n UsersFetcher.fetchOls(selectName, false)\n .then((result) => {\n (result.ols_terms || []).map((a) => {\n a.key = a.value;\n checkedKeys = this.addToChecked(checkedKeys, a);\n });\n this.setState({\n expandedKeys: checkedKeys,\n orgCheckedKeys: checkedKeys,\n list: result.ols_terms,\n checkedKeys,\n });\n });\n }\n\n onExpand(expandedKeys) {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n\n onCheck(checkedKeys, e) {\n const { checkStrictly, orgCheckedKeys } = this.state;\n const checkedObj = (checkStrictly === true) ? checkedKeys.checked : checkedKeys;\n const disableIds = difference(orgCheckedKeys, checkedObj);\n const enableIds = difference(checkedObj, orgCheckedKeys);\n\n this.setState({ checkedKeys, enableIds, disableIds });\n }\n\n handleSelectName(olsName) {\n this.setState({\n selectName: olsName,\n enableIds: [],\n disableIds: []\n });\n this.initialOls(olsName);\n }\n\n\n handleSaveBtn() {\n const { enableIds, disableIds } = this.state;\n AdminFetcher.olsTermDisableEnable({ owl_name: this.state.selectName, enableIds, disableIds })\n .then((result) => {\n if (result === true) {\n alert('Updated successfully!');\n this.setState({ enableIds: [], disableIds: [] });\n this.initialOls(this.state.selectName);\n } else {\n alert('update error, please check system log!');\n }\n });\n }\n\n handleAssociateBtn() {\n this.setState({ checkStrictly: !this.state.checkStrictly });\n }\n\n render() {\n return (\n {this.state.selectName}
\n\n {this.state.checkStrictly === true ? 'Check Strictly' : 'Associated'}\n
\n\n \n
\n \n enable list
\n {this.state.enableIds.join('\\n')}\ndisable list
\n {this.state.disableIds.join('\\n')}\n\n \n \n
\n
\n );\n }\n\n renderEditModal() {\n const { matrice, includeUsers, excludeUsers } = this.state;\n\n return (\n | # | \nActions | \nID | \nFunction name | \nDescription | \nSet globally | \nEnabled for | \nDisabled for | \n
|---|
\n {this.renderList()}\n {this.renderEditModal()}\n {this.renderJsonModal()}\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Delta from 'quill-delta';\nimport { Button, Form, InputGroup } from 'react-bootstrap';\n\nimport QuillEditor from 'src/components/QuillEditor';\nimport TextTemplateIcon from 'src/apps/admin/textTemplates/TextTemplateIcon';\n\n\nexport default class TextTemplateForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n text: props.selectedTemplate?.data?.text ?? '',\n icon: props.selectedTemplate?.data?.icon ?? '',\n };\n\n this.reactQuillRef = React.createRef();\n\n this.onChangeText = this.onChangeText.bind(this);\n this.onChangeIcon = this.onChangeIcon.bind(this);\n this.saveTemplate = this.saveTemplate.bind(this);\n\n }\n\n componentDidUpdate(prevProps) {\n const { selectedTemplate } = this.props;\n if (selectedTemplate !== prevProps.selectedTemplate) {\n this.setState({\n text: selectedTemplate?.data?.text ?? '',\n icon: selectedTemplate?.data?.icon ?? '',\n });\n }\n }\n\n onChangeText(e) {\n const { value } = e.target;\n this.setState({ text: value });\n }\n\n onChangeIcon(e) {\n const { value } = e.target;\n this.setState({ icon: value });\n }\n\n saveTemplate() {\n if (this.reactQuillRef.current == null) {\n return;\n }\n\n const quill = this.reactQuillRef.current;\n const delta = quill.getContents();\n\n // Quill automatically append a trailing newline, we don't want that\n // Remove it !!!\n const deltaLength = delta.length();\n const removeTrailingNewline = new Delta().retain(deltaLength - 1).delete(1);\n const { ops } = delta.compose(removeTrailingNewline);\n\n const { selectedTemplate, updateTemplate } = this.props;\n const { text, icon } = this.state;\n updateTemplate({\n ...selectedTemplate,\n data: {\n ops,\n text: text.trim() == '' ? null : text.trim(),\n icon: icon.trim() == '' ? null : icon.trim(),\n }\n });\n }\n\n render() {\n const { selectedTemplate } = this.props;\n const { text, icon } = this.state;\n\n return (\n \n \n Preview \n \n \n \n
\n );\n }\n}\n\nTextTemplateForm.propTypes = {\n selectedTemplate: PropTypes.object,\n updateTemplate: PropTypes.func.isRequired,\n};\n\nTextTemplateForm.defaultProps = {\n selectedTemplate: null,\n};\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types';\nimport { Button } from 'react-bootstrap';\nimport { AgGridReact } from 'ag-grid-react';\n\nfunction RemoveRowBtn({ removeRow, node }) {\n const { data } = node;\n\n const btnClick = () => {\n removeRow(data.name);\n };\n\n return (\n Editing '{selectedTemplate.name}'
\n\n
\n );\n }\n};\n\nexport default TextTemplateSelector;\n","import React from 'react';\n\nimport { Container, Col, Row } from 'react-bootstrap';\n\nimport TextTemplatesFetcher from 'src/fetchers/TextTemplatesFetcher';\nimport TextTemplateForm from 'src/apps/admin/textTemplates/TextTemplateForm';\nimport TextTemplateSelector from 'src/apps/admin/textTemplates/TextTemplateSelector';\n\n\nexport default class TextTemplateContainer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n templateNames: [],\n fetchedTemplates: {},\n selectedTemplateName: null,\n };\n\n this.addTemplate = this.addTemplate.bind(this);\n this.renameTemplate = this.renameTemplate.bind(this);\n this.removeTemplate = this.removeTemplate.bind(this);\n this.updateTemplate = this.updateTemplate.bind(this);\n this.selectTemplate = this.selectTemplate.bind(this);\n }\n\n componentDidMount() {\n TextTemplatesFetcher.fetchPredefinedTemplateNames().then((res) => {\n this.setState({ templateNames: res });\n });\n }\n\n addTemplate(gridApi) {\n const { templateNames, fetchedTemplates } = this.state;\n\n this.setState({\n templateNames: ['', ...templateNames],\n fetchedTemplates: {\n ...fetchedTemplates,\n '': { name: '', data: {} },\n },\n selectedTemplateName: '',\n }, () => {\n if (gridApi) {\n gridApi.startEditingCell({ rowIndex: 0, colKey: 'name' });\n }\n });\n }\n\n selectTemplate(name) {\n const { fetchedTemplates, selectedTemplateName } = this.state;\n if (name === selectedTemplateName && fetchedTemplates[name]) return;\n\n if (fetchedTemplates[name]) {\n this.setState({ selectedTemplateName: name });\n } else {\n TextTemplatesFetcher.fetchPredefinedTemplateByNames([name]).then((res) => {\n if (!res) return;\n\n const newTemplates = {};\n res.forEach((r) => newTemplates[r.name] = r);\n\n this.setState({\n fetchedTemplates: {\n ...fetchedTemplates,\n ...newTemplates,\n },\n selectedTemplateName: name,\n });\n });\n }\n }\n\n removeTemplate(name) {\n TextTemplatesFetcher.deletePredefinedTemplateByName(name).then((res) => {\n if (!res) return;\n\n const { templateNames, fetchedTemplates, selectedTemplateName } = this.state;\n const newFetchedTemplates = { ...fetchedTemplates };\n delete newFetchedTemplates[name];\n\n this.setState({\n templateNames: templateNames.filter((n) => n !== name),\n fetchedTemplates: newFetchedTemplates,\n selectedTemplateName: selectedTemplateName === name ? null : selectedTemplateName,\n });\n });\n }\n\n renameTemplate(oldName, newName) {\n const { templateNames, fetchedTemplates, selectedTemplateName } = this.state;\n const template = fetchedTemplates[oldName];\n\n const newTemplate = {...template, name: newName};\n const newFetchedTemplates = { ...fetchedTemplates, [newName]: newTemplate };\n delete newFetchedTemplates[oldName];\n\n TextTemplatesFetcher.updatePredefinedTemplates(newTemplate).then((res) => {\n if (!res) return;\n\n this.setState({\n templateNames: templateNames.with(templateNames.indexOf(oldName), newName),\n fetchedTemplates: newFetchedTemplates,\n selectedTemplateName: selectedTemplateName === oldName ? newName : selectedTemplateName,\n });\n });\n }\n\n updateTemplate(template) {\n const { fetchedTemplates } = this.state;\n TextTemplatesFetcher.updatePredefinedTemplates(template).then((res) => {\n if (!res) return;\n\n this.setState({\n fetchedTemplates: {\n ...fetchedTemplates,\n [template.name]: template\n }\n });\n });\n }\n\n render() {\n const {\n templateNames,\n fetchedTemplates,\n selectedTemplateName,\n } = this.state;\n\n const selectedTemplate = fetchedTemplates[selectedTemplateName];\n\n return (\n \n ({ name: n }))}\n className='fs-6'\n rowHeight={35}\n />\n
\n Select a template to edit
\n )}\n \n\n \n \n {tcolumn}\n \n \n {tbody}\n \n
\n
\n );\n }\n}\n","import { SPECTRA_DATA_TYPE } from 'src/endpoints/ApiServices';\nimport 'whatwg-fetch';\n\nexport default class ChemSpectraFetcher {\n static fetchSpectraLayouts() {\n return fetch('/api/v1/chemspectra/spectra_layouts', {\n method: 'GET',\n credentials: 'same-origin',\n }).then((response) => {\n if (response.ok) {\n return response.json();\n }\n return null;\n })\n .then((data) => data)\n .catch((errorMessage) => { console.error(errorMessage); });\n }\n\n static updateDataTypes(newDataTypes) {\n const requestData = { datatypes: newDataTypes };\n\n return fetch('/api/v1/admin/data_types.json', {\n credentials: 'same-origin',\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(requestData)\n }).then((response) => {\n if (!response.ok) { throw response; }\n return response.json();\n });\n }\n\n static fetchUpdatedSpectraLayouts() {\n return fetch(SPECTRA_DATA_TYPE)\n .then((response) => {\n if (!response.ok) {\n throw new Error('Failed to fetch JSON');\n }\n return response.json();\n })\n .then((data) => Object.entries(data.datatypes));\n }\n}\n","/* eslint-disable no-param-reassign */\nimport React, { Component } from 'react';\nimport ChemSpectraFetcher from 'src/fetchers/ChemSpectraFetcher';\nimport {\n Table, Button, Form, Modal, Popover, OverlayTrigger, Alert\n} from 'react-bootstrap';\nimport { Select } from 'src/components/common/Select';\n\nexport default class ChemSpectraLayouts extends Component {\n constructor(props) {\n super(props);\n this.state = {\n layouts: [],\n newDataType: {\n layout: '',\n dataType: '',\n },\n defaultLayouts: [],\n showNewTypeLayoutModal: false,\n alertMessage: null\n };\n\n this.fetchSpectraLayouts = this.fetchSpectraLayouts.bind(this);\n this.handleInputChange = this.handleInputChange.bind(this);\n this.handleAddDataType = this.handleAddDataType.bind(this);\n this.handleDeleteDataType = this.handleDeleteDataType.bind(this);\n this.handleShowNewTypeLayoutModal = this.handleShowNewTypeLayoutModal.bind(this);\n this.handleCloseNewTypeLayoutModal = this.handleCloseNewTypeLayoutModal.bind(this);\n this.getLayoutOptionsAndMapping = this.getLayoutOptionsAndMapping.bind(this);\n this.handleSelectLayout = this.handleSelectLayout.bind(this)\n }\n\n componentDidMount() {\n this.fetchSpectraLayouts();\n }\n\n handleInputChange(event) {\n const { name, value } = event.target;\n this.setState((prevState) => ({\n newDataType: {\n ...prevState.newDataType,\n [name]: value,\n },\n }));\n }\n\n handleSelectLayout(selectedOption) {\n if (selectedOption) {\n this.setState((prevState) => ({\n newDataType: {\n ...prevState.newDataType,\n layout: selectedOption.value,\n },\n }));\n }\n }\n\n handleShowNewTypeLayoutModal() {\n this.setState({ showNewTypeLayoutModal: true });\n }\n\n handleCloseNewTypeLayoutModal() {\n this.setState({\n showNewTypeLayoutModal: false,\n alertMessage: null,\n newDataType: {\n layout: '',\n dataType: '',\n }\n });\n }\n\n handleAddDataType() {\n const { newDataType, layouts } = this.state;\n if (newDataType.dataType.length === 0) {\n this.setState({ alertMessage: 'Please enter a data type' });\n } else if (newDataType.layout.length === 0) {\n this.setState({ alertMessage: 'Please select a layout' });\n } else {\n const existingLayout = layouts.find(([layout]) => layout === newDataType.layout);\n\n if (existingLayout) {\n const [, dataTypeArray] = existingLayout;\n\n if (dataTypeArray.includes(newDataType.dataType.trimEnd())) {\n this.setState({ alertMessage: 'Data type already exists' });\n } else {\n const updatedLayouts = layouts.map(([layout, dataType]) => {\n if (layout === newDataType.layout) {\n return [layout, [...dataType, newDataType.dataType]];\n }\n return [layout, dataType];\n });\n const transformedData = updatedLayouts.reduce((acc, [key, value]) => {\n acc[key] = value;\n return acc;\n }, {});\n\n ChemSpectraFetcher.updateDataTypes(transformedData)\n .then((message) => {\n console.log(message);\n this.handleCloseNewTypeLayoutModal();\n this.fetchUpdatedSpectraLayouts();\n })\n .catch((error) => console.error(error));\n }\n }\n }\n }\n\n handleDeleteDataType(dataTypeToDelete) {\n const { layouts } = this.state;\n\n const updatedLayouts = layouts.map((entry) => {\n if (entry[0] === dataTypeToDelete.layout) {\n entry[1] = entry[1].filter((dataType) => dataType !== dataTypeToDelete.dataType);\n }\n return entry;\n });\n\n const transformedData = updatedLayouts.reduce((acc, [key, value]) => {\n acc[key] = value;\n return acc;\n }, {});\n\n ChemSpectraFetcher.updateDataTypes(transformedData)\n .then((message) => {\n console.log(message);\n this.fetchUpdatedSpectraLayouts();\n })\n .catch((error) => console.error(error));\n }\n\n fetchSpectraLayouts() {\n ChemSpectraFetcher.fetchSpectraLayouts()\n .then((layouts) => {\n if (layouts) {\n this.setState({\n layouts: Object.entries(layouts.current_data_types),\n defaultLayouts: Object.entries(layouts.default_data_types)\n });\n }\n })\n .catch((error) => console.error(error));\n }\n\n fetchUpdatedSpectraLayouts() {\n ChemSpectraFetcher.fetchUpdatedSpectraLayouts()\n .then((layouts) => {\n if (layouts) {\n this.setState({ layouts });\n }\n })\n .catch((error) => console.error(error));\n }\n\n getLayoutOptionsAndMapping() {\n const { layouts } = this.state;\n const layoutsMapping = layouts.reduce((acc, [layout, dataTypes]) => {\n dataTypes.forEach((dataType) => {\n acc.push({ layout, dataType });\n });\n return acc;\n }, []);\n\n const allLayouts = Array.from(new Set(layoutsMapping.map(({ layout }) => layout))).sort();\n\n const layoutsOptions = allLayouts.map((layout) => ({\n value: layout,\n label: layout\n }));\n\n return { layoutsOptions, layoutsMapping };\n }\n\n render() {\n const {\n newDataType, showNewTypeLayoutModal, alertMessage, defaultLayouts\n } = this.state;\n\n const { layoutsOptions, layoutsMapping } = this.getLayoutOptionsAndMapping();\n\n return (\n Delayed Jobs
\n\n \n Add New Data Type\n \n\n \n \n \n New Data Type\n \n \n \n {alertMessage && (\n \n {alertMessage}\n \n )}\n \n\n \n \n \n \n \n \n\n \n \n
\n
\n );\n }\n}\n","import React, { useContext } from 'react';\nimport { Form } from 'react-bootstrap';\nimport { Select } from 'src/components/common/Select';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nfunction DevicePropertiesTab() {\n const devicesStore = useContext(StoreContext).devices;\n const { device } = devicesStore;\n\n const verificationOptions = [\n { label: 'None', value: 'none' },\n { label: 'Verified device', value: 'verified_device' },\n { label: 'Unverified sub-version', value: 'unverified_sub_version' },\n { label: 'Verified sub-version', value: 'verified_sub_version' },\n ];\n const verificationStatusValue = device\n ? verificationOptions.filter((f) => f.value === device.verification_status) : '';\n\n const onChange = (field, value) => {\n const newValue = value || '';\n devicesStore.changeDevice(field, newValue);\n };\n\n return (\n \n );\n}\n\nexport default observer(DevicePropertiesTab);\n","import React, { useContext } from 'react';\nimport { Form } from 'react-bootstrap';\nimport { AsyncSelect } from 'src/components/common/Select';\nimport { selectUserOptionFormater, selectedUserFormater } from 'src/utilities/selectHelper';\n\nimport AdminFetcher from 'src/fetchers/AdminFetcher';\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DeviceUserGroupsTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n let device = devicesStore.device;\n\n const toggleLoading = (value) => {\n devicesStore.setIsLoading(value);\n }\n\n const handleUser = (value, type) => {\n devicesStore.changeDevice(type, value);\n }\n\n const loadUserByName = (input, type) => {\n if (!input) {\n return Promise.resolve([]);\n }\n\n return AdminFetcher.fetchUsersByNameType(input, type)\n .then((result) => {\n return selectUserOptionFormater({ data: result, withType: false })\n }).catch((errorMessage) => {\n console.log(errorMessage);\n });\n }\n\n return (\n \n );\n}\n\nexport default observer(DeviceUserGroupsTab);\n","import React, { useState, useEffect, useContext } from 'react';\nimport { Form, InputGroup, Tooltip, OverlayTrigger, Button } from 'react-bootstrap';\nimport { Select } from 'src/components/common/Select';\nimport { startsWith, endsWith } from 'lodash';\n\nimport AdminFetcher from 'src/fetchers/AdminFetcher';\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\nimport { copyToClipboard } from 'src/utilities/clipboard';\n\nconst DeviceDataCollectorTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n const [localCollectorValues, setLocalCollectorValues] = useState([]);\n const device = devicesStore.device;\n\n useEffect(() => {\n AdminFetcher.fetchLocalCollector()\n .then((result) => {\n setLocalCollectorValues(result.listLocalCollector);\n });\n devicesStore.changeDevice('datacollector_authentication', 'password');\n }, []);\n\n const methodOptions = [\n { value: 'filewatchersftp', label: 'filewatchersftp' },\n { value: 'filewatcherlocal', label: 'filewatcherlocal' },\n { value: 'folderwatchersftp', label: 'folderwatchersftp' },\n { value: 'folderwatcherlocal', label: 'folderwatcherlocal' },\n { value: 'disabled', label: 'disabled' }\n ];\n\n const authenticationOptions = [\n { value: 'password', label: 'password' },\n { value: 'keyfile', label: 'keyfile' }\n ];\n\n let methodValue = '';\n let authenticationValue = { value: 'password', label: 'password' };\n\n if (device && device.datacollector_method) {\n methodValue = methodOptions.filter(f => f.value == device.datacollector_method);\n }\n if (device && device.datacollector_authentication) {\n authenticationValue = authenticationOptions.filter(f => f.value == device.datacollector_authentication);\n }\n\n const methodValueCheck = methodValue ? methodValue[0].value : '';\n const readonlyKeyName = authenticationValue !== null && authenticationValue[0] && authenticationValue[0].value == 'password';\n const userValue = device && device.datacollector_user ? device.datacollector_user : '';\n const hostValue = device && device.datacollector_host ? device.datacollector_host : '';\n const keyFileValue = device && device.datacollector_key_name ? device.datacollector_key_name : '';\n const numberOfFilesValue = device && device.datacollector_number_of_files ? device.datacollector_number_of_files : '1';\n const dir = device && device.datacollector_dir ? device.datacollector_dir : '';\n const userLevelSelected = device && device.datacollector_user_level_selected ? device.datacollector_user_level_selected : false;\n const dirValue = userLevelSelected && dir ? `${dir}/{UserSubDirectories}` : (dir ? dir : '');\n\n const userLevelLabel = (<>Enable user level data collection );\n\n const onChange = (field, value) => {\n let newValue = '';\n if (value) {\n newValue = ['datacollector_method', 'datacollector_authentication'].includes(field) ? value.value : value;\n }\n devicesStore.changeDevice(field, newValue);\n }\n\n const ListLocalCollector = () => (\n Data Types
\n| # | \nData Type | \nLayout | \n|
|---|---|---|---|
| {index + 1} | \n{entry.dataType} | \n{entry.layout} | \n\n {' '}\n {defaultLayouts.some(([layout, dataTypes]) => layout === entry.layout\n && !dataTypes.includes(entry.dataType)) && (\n \n \n )}\n | \n
\n {localCollectorValues.map((c, i) => (\n
\n );\n\n return (\n \n );\n}\n\nexport default observer(DeviceDataCollectorTab);\n","import React, { useContext } from 'react';\nimport { Form } from 'react-bootstrap';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DeviceNovncTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n const device = devicesStore.device;\n\n const onChange = (field, value) => {\n let newValue = value ? value : '';\n if (field == 'novnc_password') {\n devicesStore.setChangeNovncPassword(true);\n }\n devicesStore.changeDevice(field, newValue);\n }\n\n const renderStoredTarget = () => {\n if (device.novnc_target && device.novnc_token) {\n return `${device.novnc_target}?token=${device.novnc_token}`;\n }\n if (device.novnc_target && device.novnc_token === '') {\n return device.novnc_target;\n }\n return 'None';\n };\n\n const renderCurrentTarget = () => {\n if (device.novnc_target && device.novnc_token) {\n return `${device.novnc_target}?token=${device.novnc_token}`;\n }\n if (device.novnc_target && !device.novnc_token) {\n return device.novnc_target;\n }\n return 'You haven\\'t edited the target so far';\n };\n\n let passwordValue = ''\n if (devicesStore.change_novnc_password) {\n passwordValue = device.novnc_password\n } else if (device.novnc_password_decrypted) {\n passwordValue = device.novnc_password_decrypted;\n }\n\n return (\n \n );\n}\n\nexport default observer(DeviceNovncTab);\n\n","import React, { useEffect, useContext } from 'react';\nimport { Form, Button } from 'react-bootstrap';\nimport { Select } from 'src/components/common/Select';\nimport { formatDate } from 'src/utilities/timezoneHelper';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DeviceMetadataTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n const deviceMetadataStore = useContext(StoreContext).deviceMetadata;\n const device = devicesStore.device;\n const deviceMetadata = deviceMetadataStore.device_metadata;\n\n useEffect(() => {\n if (!deviceMetadata.device_id) {\n deviceMetadataStore.changeDeviceMetadata('device_id', device.id);\n }\n }, []);\n\n const dataCiteStateOptions = [\n { value: 'draft', label: 'Draft' },\n { value: 'registered', label: 'Registered' },\n { value: 'findable', label: 'Findable' },\n ];\n\n if (!deviceMetadata.data_cite_state) {\n deviceMetadataStore.changeDeviceMetadata('data_cite_state', 'draft');\n }\n const dataCiteStateValue = dataCiteStateOptions.filter(f => f.value == deviceMetadata.data_cite_state);\n\n const onChange = (field, value) => {\n let newValue = '';\n if (value) {\n newValue = field == 'data_cite_state' ? value.value : value;\n }\n deviceMetadataStore.changeDeviceMetadata(field, newValue);\n }\n\n const addDeviceMetadataDate = () => {\n const newDateItem = { date: '', dateType: '' };\n const currentDates = deviceMetadata.dates ? deviceMetadata.dates : [];\n const newDates = currentDates.concat(newDateItem);\n deviceMetadataStore.changeDeviceMetadata('dates', newDates);\n }\n\n const updateDeviceMetadataDate = (index, field, value) => {\n deviceMetadataStore.changeDeviceMetadataDate(index, field, value);\n }\n\n const removeDeviceMetadataDate = (index) => {\n const currentDates = deviceMetadata.dates ? [...deviceMetadata.dates] : [];\n currentDates.splice(index, 1);\n deviceMetadataStore.changeDeviceMetadata('dates', currentDates);\n }\n\n const syncDeviceMetadataFromDataCite = () => {\n if (!deviceMetadata.doi) {\n deviceMetadataStore.changeErrorMessage('Metadata DOI: Can not be blank');\n } else {\n deviceMetadataStore.changeErrorMessage('');\n }\n if (deviceMetadataStore.error_message == '') {\n const params = {\n doi: deviceMetadata.doi.trim(),\n device_id: deviceMetadata.device_id,\n }\n deviceMetadataStore.updateDeviceMetadata(params);\n } \n }\n\n const syncDeviceMetadataToDataCite = () => {\n deviceMetadataStore.syncDeviceMetadataToDataCite({ device_id: device.id });\n }\n\n const deviceMetaDataDates = () => {\n if (!deviceMetadata.dates) { return null; }\n\n let dateForms = [];\n deviceMetadata.dates.map((dateItem, index) => {\n dateForms.push(\n \n Local Collector Dir Configurtaion \n \n \n copy to clipboard}>\n copyToClipboard(c.path)}\n >\n \n \n \n \n \n
\n ))}\n \n \n Date \n updateDeviceMetadataDate(index, 'date', event.target.value)}\n />\n \n \n Date Type \n updateDeviceMetadataDate(index, 'dateType', event.target.value)}\n />\n \n \n Action \n \n \n
\n );\n });\n\n return dateForms;\n }\n\n const syncToDataCiteButton = () => {\n if (deviceMetadata.id && deviceMetadata.doi) { return null }\n\n return (\n \n );\n }\n\n const getFromDataCiteHeadline = () => {\n return deviceMetadata.id && deviceMetadata.doi ? null : Get Metadata from DataCite
;\n }\n\n const createDeviceMetadataHeadline = () => {\n return deviceMetadata.id && deviceMetadata.doi ? null :Or create Metadata and sync to DataCite
;\n }\n\n const dataCiteUpdatedAt = () => {\n if (!deviceMetadata.data_cite_updated_at) { return ''; }\n\n return formatDate(deviceMetadata.data_cite_updated_at);\n }\n\n return (\n \n );\n}\n\nexport default observer(DeviceMetadataTab);\n","import React, { useContext, useState } from 'react';\nimport {\n Modal, Button, ButtonToolbar, Alert, Tabs, Tab, Stack\n} from 'react-bootstrap';\nimport Draggable from 'react-draggable';\nimport { endsWith } from 'lodash';\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\nimport DevicePropertiesTab from 'src/apps/admin/devices/DevicePropertiesTab';\nimport DeviceUserGroupsTab from 'src/apps/admin/devices/DeviceUserGroupsTab';\nimport DeviceDataCollectorTab from 'src/apps/admin/devices/DeviceDataCollectorTab';\nimport DeviceNovncTab from 'src/apps/admin/devices/DeviceNovncTab';\nimport DeviceMetadataTab from 'src/apps/admin/devices/DeviceMetadataTab';\n\nfunction DeviceModal() {\n const devicesStore = useContext(StoreContext).devices;\n const deviceMetadataStore = useContext(StoreContext).deviceMetadata;\n let { device } = devicesStore;\n const disableTab = devicesStore.create_or_update !== 'update';\n const [deltaPosition, setDeltaPosition] = useState({ x: 0, y: 0 });\n\n const errorMessage = devicesStore.error_message + deviceMetadataStore.error_message;\n const successMessage = devicesStore.success_message + deviceMetadataStore.success_message;\n const withAlertClass = errorMessage || successMessage ? 'with-alert' : '';\n\n const minimizedClass = devicesStore.modalMinimized ? ' minimized' : '';\n let deviceParams = {};\n const datacollectorFields = [\n 'datacollector_method', 'datacollector_user', 'datacollector_host',\n 'datacollector_key_name', 'datacollector_dir'\n ];\n\n const trimDeviceStringValues = () => {\n deviceParams = { ...device };\n Object.keys(deviceParams).forEach((key) => {\n if (key !== 'id' && typeof deviceParams[key] === 'string') {\n deviceParams[key] = deviceParams[key].trim();\n }\n });\n return deviceParams;\n };\n\n const collectUserOrGroupIds = (deviceParams, type) => {\n if (deviceParams[type].length >= 1) {\n const users = [];\n deviceParams[type].map((u) => {\n if (u.id) {\n users.push(u.id);\n }\n });\n deviceParams[type] = users;\n }\n return deviceParams;\n };\n\n const prepareDeviceParams = () => {\n deviceParams = trimDeviceStringValues();\n deviceParams = collectUserOrGroupIds(deviceParams, 'people');\n deviceParams = collectUserOrGroupIds(deviceParams, 'groups');\n return deviceParams;\n };\n\n const anyDatacollectorFields = () => datacollectorFields.filter((field) => device[field] !== '' && device[field] !== null);\n\n const handleValidationState = () => {\n const errorMessages = ['Please fill out all needed fields'];\n\n const nameValue = device.name.trim() === '' ? 'is-invalid' : '';\n if (nameValue) { errorMessages.push('Please enter a name'); }\n devicesStore.changeDevice('valid_name', nameValue);\n\n const nameAbbreviationValue = device.name_abbreviation.trim() === '' ? 'is-invalid' : '';\n if (nameAbbreviationValue) { errorMessages.push('Please enter a name abbreviation'); }\n devicesStore.changeDevice('valid_name_abbreviation', nameAbbreviationValue);\n\n const emailValue = device.email === '' || /^\\w+([.-]?\\w+)*@\\w+([.-]?\\w+)*(\\.\\w{2,63})+$/.test(device.email)\n ? '' : 'is-invalid';\n if (emailValue) { errorMessages.push('Please enter a valid email'); }\n devicesStore.changeDevice('valid_email', emailValue);\n\n if (anyDatacollectorFields().length >= 1) {\n devicesStore.changeDevice('datacollector_fields', true);\n\n const methodValue = !device.datacollector_method ? 'is-invalid' : '';\n if (methodValue) { errorMessages.push('Please select watch method'); }\n devicesStore.changeDevice('valid_datacollector_method', methodValue);\n\n const dirValue = !device.datacollector_dir ? 'is-invalid' : '';\n if (dirValue) { errorMessages.push('Please enter a watch directory'); }\n devicesStore.changeDevice('valid_datacollector_dir', dirValue);\n\n if (endsWith(device.datacollector_method, 'sftp')) {\n const userValue = !device.datacollector_user ? 'is-invalid' : '';\n if (userValue) { errorMessages.push('Please enter a user'); }\n devicesStore.changeDevice('valid_datacollector_user', userValue);\n\n const hostValue = !device.datacollector_host ? 'is-invalid' : '';\n if (hostValue) { errorMessages.push('Please enter a host'); }\n devicesStore.changeDevice('valid_datacollector_host', hostValue);\n\n const keyNameValue = device.datacollector_authentication === 'keyfile' && !device.datacollector_key_name\n ? 'is-invalid' : '';\n if (keyNameValue) { errorMessages.push('Use key file, Please enter a key path'); }\n devicesStore.changeDevice('valid_datacollector_key_name', keyNameValue);\n }\n } else {\n devicesStore.changeDevice('datacollector_fields', false);\n }\n\n if (devicesStore.active_tab_key === 4) {\n const novncTarget = !device.novnc_target ? 'is-invalid' : '';\n if (novncTarget) { errorMessages.push('Please type a Target for the device'); }\n devicesStore.changeDevice('valid_novnc_target', novncTarget);\n }\n\n return errorMessages;\n };\n\n const removeErrors = () => {\n devicesStore.changeErrorMessage('');\n devicesStore.changeSuccessMessage('');\n deviceMetadataStore.changeErrorMessage('');\n deviceMetadataStore.changeSuccessMessage('');\n devicesStore.setChangeNovncPassword(false);\n };\n\n const saveDevice = () => {\n const errorMessages = handleValidationState();\n devicesStore.changeErrorMessage(errorMessages.join('\\n'));\n device = devicesStore.device;\n const passwordChange = devicesStore.change_novnc_password;\n if (errorMessages.length <= 1) {\n removeErrors();\n if (devicesStore.create_or_update === 'update') {\n const data = prepareDeviceParams();\n if (!passwordChange) {\n data.novnc_password = data.novnc_password_decrypted;\n }\n devicesStore.updateDevice(data);\n } else {\n devicesStore.createDevice(prepareDeviceParams());\n }\n }\n };\n\n const saveDeviceMetadata = () => {\n // validation?\n removeErrors();\n const deviceMetadata = deviceMetadataStore.device_metadata;\n deviceMetadataStore.updateDeviceMetadata(deviceMetadata);\n };\n\n const saveDeviceOrRelation = () => {\n if (devicesStore.active_tab_key === 5) {\n saveDeviceMetadata();\n } else {\n saveDevice();\n }\n };\n\n const handleCancel = () => {\n devicesStore.hideDeviceModal();\n devicesStore.clearDevice();\n devicesStore.setActiveTabKey(1);\n deviceMetadataStore.clearDeviceMetadata();\n removeErrors();\n };\n\n const handleSelectTab = (key) => {\n devicesStore.setActiveTabKey(key);\n };\n\n const modalTitle = () => {\n if (devicesStore.create_or_update === 'update') {\n return `Edit ${device.name}`;\n }\n return 'Add new device';\n };\n\n const showMessage = () => {\n if (errorMessage !== '') {\n return\n handleCancel()}\n backdrop={false}\n keyboard={false}\n className={`draggable-modal-dialog${minimizedClass}`}\n size=\"xxxl\"\n dialogClassName=\"draggable-modal\"\n contentClassName={`draggable-modal-content${minimizedClass}`}\n style={{\n transform: `translate(${deltaPosition.x}px, ${deltaPosition.y}px)`,\n }}\n >\n \n \n \n \n {modalTitle()}\n \n \n \n \n \n \n \n
\n \n
\n \n {showMessage()}\n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n Novnc:\n {novncText}\n \n );\n }\n\n const listUsersAndGroups = (device, idx) => {\n return (\n
| {i + 1} | \n{user.name} | \n{user.initials} | \n{user.type} | \n{deleteButton(device, user.type.toLowerCase(), user)} | \n
Device \"{device.name}\" managed by following users / groups
\n {listUsersAndGroups(device, idx)}\n | # | \nActions | \nName | \nInitial | \nData Collector / NoVNC | \n
|---|
\n \n {` Do you really want to delete ${currentName}?`}\n \n
\n\n\n \n {this.renderNewThirdPartyAppModal()}\n\n \n \n
\n {this.renderEditThirdPartyAppModal()}\n {this.renderDeleteThirdPartyAppModal()}\n
\n );\n }\n}\n","import React from 'react';\nimport { Row, Col, Nav, NavItem, Container } from 'react-bootstrap';\nimport AdminNavigation from 'src/apps/admin/AdminNavigation';\nimport Notifications from 'src/components/Notifications';\nimport AdminDashboard from 'src/apps/admin/AdminDashboard';\nimport UserManagement from 'src/apps/admin/UserManagement';\nimport GroupsDevices from 'src/apps/admin/GroupsDevices';\nimport MessagePublish from 'src/apps/admin/MessagePublish';\nimport OlsTerms from 'src/apps/admin/OlsTerms';\nimport MatrixManagement from 'src/apps/admin/MatrixManagement';\nimport TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer';\nimport DelayedJobs from 'src/apps/admin/DelayedJobs';\nimport ChemSpectraLayouts from 'src/apps/admin/ChemSpectraLayouts';\nimport DevicesList from 'src/apps/admin/devices/DevicesList';\n// import TemplateManagement from 'src/apps/admin/TemplateManagement';\nimport ThirdPartyApp from 'src/apps/admin/ThirdPartyApp';\n\nclass AdminHome extends React.Component {\n constructor(props) {\n super();\n this.state = {\n showTree: true,\n pageIndex: 0,\n };\n this.toggleTree = this.toggleTree.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n toggleTree() {\n const { showTree } = this.state;\n this.setState({\n showTree: !showTree,\n });\n }\n\n handleSelect(pageIndex) {\n this.setState({\n pageIndex: Number(pageIndex)\n });\n }\n\n mainContent() {\n const { pageIndex } = this.state;\n if (pageIndex === 0) {\n return this.renderContent(| Actions | \nName | \nIP address | \nFile types | \nID | \n
|---|---|---|---|---|
| \n | \n {entry.name} | \n{entry.url} | \n{entry.fileTypes} | \n{entry.id} | \n
{this.state.messageNewThirdPartyAppModal}
\n\n\n \n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default AdminHome;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport AdminHome from 'src/apps/admin/AdminHome';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('AdminHome');\n if (domElement) {\n ReactDOM.render(\n \n {this.state.showTree && \n this.renderTree()\n }\n
\n \n {this.mainContent()}\n
\n \n {\n currentUser\n ?
\n \n {device.name}\n {selected.id === device.id && (\n \n )}\n
\n \n ))}\n \n \n Devices\n
\n\n {this.renderDeviceList()}\n \n )}\n \n {status === 'list' && 'Profiles List'}\n {['upload', 'create'].includes(status) && 'Create Profile'}\n {status === 'update' && 'Edit Profile'}\n {status === 'import' && 'Import Profile'}\n
\n \n\n {status === 'list' && client !== null && (\n\n Back to MyDB\n
\n\n \n
\n );\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById(`${FN_ID}Admin`);\n if (domElement) {\n ReactDOM.render(\n \n
\n \n
\n );\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById(`${FN_ID}Admin`);\n if (domElement) {\n ReactDOM.render(\n \n
\n \n
\n );\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById(`${FN_ID}Admin`);\n if (domElement) {\n ReactDOM.render(\n \n
\n \n
\n
\n );\n}\n\nUnauthorized.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };\nUnauthorized.defaultProps = { userName: 'unknown' };\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport { OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport uuid from 'uuid';\nimport { filter, cloneDeep } from 'lodash';\nimport { Constants } from 'chem-generic-ui';\nimport NotificationActions from 'src/stores/alt/actions/NotificationActions';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport UIActions from 'src/stores/alt/actions/UIActions';\nimport MatrixCheck from 'src/components/common/MatrixCheck';\n\nexport async function loadEls() {\n const response = await fetch('/klasses.json', {\n cache: 'no-store',\n headers: {\n 'Cache-Control': 'no-cache'\n }\n });\n if (!response.ok) {\n console.log('Network response was not ok: ', response);\n return [];\n }\n const json = await response.json();\n return json;\n}\n\nexport const ALL_TYPES = [\n Constants.GENERIC_TYPES.ELEMENT,\n Constants.GENERIC_TYPES.SEGMENT,\n Constants.GENERIC_TYPES.DATASET,\n];\n\nexport const notification = props =>\n NotificationActions.add({\n title: props.title,\n message: props.msg,\n level: props.lvl,\n position: 'tc',\n dismissible: 'button',\n autoDismiss: props.autoDismiss || 5,\n uid: props.uid || uuid.v4(),\n });\n\nexport const GenericDSMisType = () => {\n const currentUser =\n (UserStore.getState() && UserStore.getState().currentUser) || {};\n if (MatrixCheck(currentUser.matrix, `generic${Constants.GENERIC_TYPES.DATASET}`)) {\n return (\n \n
\n
\n Unauthorized!
\n\n Please review this Dataset content.\n \n }\n >\n \n \n \n \n \n );\n }\n return null;\n};\n\nexport const renderFlowModal = (generic, isToggle) => {\n let shortLabel = generic.short_label;\n if (!shortLabel) {\n const segmentKlasses =\n (UserStore.getState() && UserStore.getState().segmentKlasses) || [];\n shortLabel = segmentKlasses.filter(s => s.id === generic.segment_klass_id);\n shortLabel = shortLabel.length > 0 ? shortLabel[0].label : '';\n }\n const params = {\n properties_release: cloneDeep(generic.properties_release) || {},\n properties: cloneDeep(generic.properties) || {},\n shortLabel,\n toggle: isToggle,\n };\n UIActions.rerenderGenericWorkflow(params);\n};\n\nexport const segmentsByKlass = name => {\n const allSegments = UserStore.getState().segmentKlasses || [];\n return filter(\n allSegments,\n se => (se.element_klass && se.element_klass.name) === name\n );\n};\n\nexport const elementNames = async (all = true, generics = null) => {\n const elnElements = all\n ? ['sample', 'reaction', 'screen', 'wellplate', 'research_plan', 'cell_line', 'device_description']\n : [];\n try {\n if (generics?.length > 0) return elnElements.concat(generics?.map((el) => el.name));\n const result = await loadEls();\n if (result?.length > 0) return elnElements.concat(result);\n return elnElements;\n } catch (error) {\n console.error('Can not get Element Names:', error);\n return elnElements;\n }\n};\n\nexport const submit = async (_action, _params) => {\n const [action, params] = [_action, _params];\n let result = {\n title: 'Update template fail',\n lvl: 'error',\n msg: `Update ${params.update} template fail`,\n isSuccess: false,\n };\n try {\n const response = await action[`update${params.update}Template`](params.element);\n if (!response.error) {\n result = {\n title: `Update ${params.update} [${params.element.label}] template`,\n lvl: 'info',\n msg: `Saved successfully (${params.release})`,\n isSuccess: true,\n response,\n };\n } else {\n result = { ...result, msg: response.error };\n }\n } catch (errorMessage) {\n result = { ...result, msg: errorMessage };\n }\n return result;\n};\n","import React, { Component } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nclass WelcomeMessage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n post: null\n };\n }\n\n async componentDidMount() {\n try {\n const res = await fetch(`welcome-message.md?${Date.now()}`); // Prevent caching\n if (!res.ok) return null;\n\n const post = await res.text();\n this.setState({ post });\n } catch (e) {\n console.error(e);\n }\n }\n\n render() {\n const { post } = this.state;\n return post && (\n
\n \n {post}\n \n
\n );\n }\n}\n\nexport default WelcomeMessage;\n","import React from 'react';\n\nimport Navigation from 'src/components/navigation/Navigation';\nimport WelcomeMessage from 'src/apps/home/WelcomeMessage';\n\nexport default function Home() {\n return (\n \n
\n );\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Home from 'src/apps/home/Home';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('Home');\n if (domElement) { ReactDOM.render(| # | \n\n Action\n | \n Attr. | \nMoledule Name | \n
| {i + 1} | \n\n {this.renderDeleteButton(na)}\n {this.renderEditButton(na)}\n | \n{na.description} | \n{na.name} | \n
\n
\n );\n\n return (\n <>\n {componentEditor}\n \n Canonical Smiles:\n {' '}\n {molecule.cano_smiles}\n
\n
\n \n \n {isChange && (\n e.stopPropagation()}\n onClick={this.bulkUpdate}\n >\n Save\n \n )}\n {this.addCollectionButton(node)}\n
\n )\n } else {\n return (\n \n {syncUsers.map((collection) => (\n \n \n \n this.doSync(collection, 'EditSync')}>\n \n edit\n \n CollectionActions.deleteSync({ id: collection.id, is_syncd: false })}\n >\n \n \n \n \n
\n ))}\n \n );\n }\n\n doSync(node, action) {\n let { modalProps, active } = this.state\n modalProps.title = action == \"CreateSync\"\n ? \"Synchronize '\" + node.label + \"'\"\n : \"Edit Synchronization\"\n modalProps.show = true\n modalProps.action = action\n modalProps.collection = node\n modalProps.selectUsers = action == \"CreateSync\"\n ? true\n : false\n active = node\n this.setState({ modalProps, active })\n }\n\n addCollectionButton(node) {\n return (\n \n this.onClickNode(node)}\n >\n {this.label(node)}\n {this.actions(node)}\n
\n {this.renderSync(node)}\n \n );\n }\n\n render() {\n let mPs = this.state.modalProps\n let mPsC = mPs.collection\n return (\n \n \n \n {mPs.title} \n \n \n \n \n
\n )\n }\n}\n","import React from 'react';\nimport Tree from 'react-ui-tree';\nimport { Button, ButtonGroup, Form, Modal } from 'react-bootstrap';\nimport ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\n\nexport default class MySharedCollections extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n active: { id: null },\n deleted_ids: [],\n\n tree: {\n children: []\n },\n modalProps: {\n show: false,\n title: \"\",\n action: null\n }\n }\n\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.bulkUpdate = this.bulkUpdate.bind(this);\n this.renderNode = this.renderNode.bind(this);\n this.handleModalHide = this.handleModalHide.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onStoreChange)\n CollectionActions.fetchSharedCollectionRoots()\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onStoreChange)\n }\n\n onStoreChange(state) {\n const { tree } = this.state;\n this.setState({\n tree: {\n ...tree,\n children: state.sharedRoots,\n }\n });\n }\n\n handleChange(newTree) {\n const { tree } = this.state;\n this.setState({\n tree: {\n children: tree.children.map((child) => {\n return (tree.id === child.id)\n ? newTree\n : child;\n })\n },\n });\n }\n\n isActive(node) {\n return node === this.state.active;\n }\n\n hasChildren(node) {\n return node.children && node.children.length > 0\n }\n\n handleLabelChange(e, node) {\n node.label = e.target.value;\n this.setState({\n tree: this.state.tree\n });\n }\n\n // TODO: confirmation before start the updating process?\n bulkUpdate() {\n // filter empty objects\n let collections = this.state.tree.children.filter((child) => {\n return child.label\n });\n\n let params = {\n collections: collections,\n deleted_ids: this.state.deleted_ids\n }\n\n CollectionActions.bulkUpdateUnsharedCollections(params);\n }\n\n editShare(node) {\n let { modalProps, active } = this.state\n modalProps.title = \"Update Share Settings for '\" + node.label + \"'\"\n modalProps.show = true\n active = node\n this.setState({ modalProps, active })\n }\n deleteCollection(node) {\n let children = node.children || [];\n let parent = this.findParentById(this.state.tree, node.id);\n\n this.removeNodeById(parent, node.id)\n this.appendChildrenToParent(parent, children)\n\n if (!node.isNew) {\n let deleted_ids = this.state.deleted_ids.concat([node.id])\n\n this.setState({\n deleted_ids: deleted_ids\n })\n }\n }\n\n appendChildrenToParent(parent, children) {\n if (children.length > 0) {\n children.forEach((child) => {\n parent.children.push(child);\n });\n }\n }\n\n findParentById(root, id) {\n if (!root.children) {\n root.children = [];\n return null;\n }\n\n let children = root.children;\n\n for (let i = 0; i < children.length; i++) {\n if (children[i].id == id) {\n return root;\n } else {\n let parent = this.findParentById(children[i], id);\n if (parent) {\n return parent\n }\n }\n }\n }\n\n removeNodeById(parent, id) {\n parent.children = parent.children.filter((child) => {\n return child.id != id\n });\n }\n\n onClickNode(node) {\n if (node.is_locked) {\n this.setState({\n active: { id: null }\n });\n } else {\n this.setState({\n active: node\n });\n }\n }\n\n handleModalHide() {\n this.setState({\n modalProps: {\n show: false,\n title: \"\",\n action: null\n }\n });\n }\n\n renderNode(node) {\n if (node.is_locked) {\n return (\n \n
\n );\n } else {\n return (\n e.stopPropagation()}>{node.label}
\n\n \n \n {this.state.modalProps.title} \n \n \n \n \n
\n )\n }\n}\n","import React from 'react';\nimport Tree from 'react-ui-tree';\nimport { Button, ButtonGroup, OverlayTrigger, Popover } from 'react-bootstrap';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\n\nexport default class SharedWithMeCollections extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n tree: {\n children: []\n }\n }\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.renderNode = this.renderNode.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onStoreChange)\n CollectionActions.fetchRemoteCollectionRoots()\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onStoreChange)\n }\n\n onStoreChange(state) {\n const children = state.remoteRoots;\n\n children.forEach((child) => {\n if (child.is_locked) {\n let label = '';\n if (child.shared_by != null) {\n label = `by ${child.shared_by.initials} (${child.shared_by.name})`;\n }\n if (child.shared_to != null) {\n label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;\n }\n child.label = label;\n }\n });\n\n this.setState({\n tree: {\n children,\n }\n });\n }\n\n handleClick() {\n this.setState({ show: !this.state.show });\n }\n\n renderNode(node) {\n if (node.is_locked) {\n return (\n \n e.stopPropagation()}\n >\n Update\n \n
\n {trees()}\n My Shared Collections
\nDelete collection?
\n \n "\n {node.label}\n "\n
\n \n \n CollectionActions.rejectShared({ id: node.id })}\n >\n Yes\n \n \n No\n \n \n
\n \n \n \n \n \n \n )}\n
\n );\n }\n }\n\n render() {\n const trees = () => this.state.tree.children.map((e, i) => {\n return (\n \n {node.label}\n
\n {shouldRenderActions && (\n \n
\n )\n }\n}\n","import React from 'react';\nimport Tree from 'react-ui-tree';\nimport { Button, ButtonGroup, OverlayTrigger, Popover } from 'react-bootstrap';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\n\nexport default class SyncWithMeCollections extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n tree: {\n children: [],\n }\n }\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.renderNode = this.renderNode.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onStoreChange)\n CollectionActions.fetchSyncInCollectionRoots()\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onStoreChange)\n }\n\n onStoreChange(state) {\n const children = state.syncInRoots\n\n children.forEach((child) => {\n if (child.is_locked) {\n let label = '';\n if (child.shared_by != null) {\n label = `by ${child.shared_by.initials} (${child.shared_by.name})`;\n }\n if (child.shared_to != null) {\n label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;\n }\n child.label = label;\n }\n });\n\n this.setState({\n tree: {\n children,\n }\n });\n }\n\n handleClick() {\n this.setState({ show: !this.state.show });\n }\n\n renderNode(node) {\n if (node.is_locked) {\n return (\n Collections shared with me
\n {trees()}\nDelete collection?
\n \n "\n {node.label}\n "\n
\n \n \n CollectionActions.rejectSync({ id: node.id, is_syncd: true })}\n >\n Yes\n \n \n No\n \n \n
\n \n \n \n \n \n \n )}\n
\n );\n }\n }\n\n render() {\n const trees = () => this.state.tree.children.map((e, i) => {\n return (\n \n {node.label}\n
\n {shouldRenderActions && (\n \n
\n )\n }\n}\n","// replace _ with space and capitalize first letter of each word\nconst capitalizeWords = (string) => (string || '')\n .replace(/_+/, ' ')\n .replace(/\\s+/g, ' ')\n .trim()\n .replace(/\\b\\w/g, (m) => m.toUpperCase());\n\nconst truncateText = (text, maxLength) => {\n if (text.length <= maxLength) {\n return text;\n }\n return `${text.substring(0, maxLength)}...`;\n};\n\nexport { capitalizeWords, truncateText };\n","import InboxActions from 'src/stores/alt/actions/InboxActions';\n\nconst DragDropItemTypes = {\n WELL: 'well',\n ELEMENT: 'element',\n SAMPLE: 'sample',\n MATERIAL: 'material',\n REACTION: 'reaction',\n WELLPLATE: 'wellplate',\n MOLECULE: 'molecule',\n RESEARCH_PLAN: 'research_plan',\n RESEARCH_PLAN_FIELD: 'research_plan_field',\n LAYOUT: 'layout',\n GENERAL: 'general',\n DATA: 'data',\n UNLINKED_DATA: 'unlinked_data',\n DATASET: 'dataset',\n CONTAINER: 'container',\n GENERALPROCEDURE: 'generalProcedure',\n ELEMENT_FIELD: 'element_field',\n GENERIC_GRID: 'generic_grid',\n CELL_LINE: 'cell_line',\n DEVICE_DESCRIPTION: 'device_description'\n};\n\nconst dropTargetTypes = [\n DragDropItemTypes.DATA,\n DragDropItemTypes.UNLINKED_DATA,\n DragDropItemTypes.DATASET\n];\n\nconst collectTarget = (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n canDrop: monitor.canDrop()\n});\n\nconst canDrop = (_props, monitor) => {\n const itemType = monitor.getItemType();\n return itemType === DragDropItemTypes.DATA\n || itemType === DragDropItemTypes.UNLINKED_DATA\n || itemType === DragDropItemTypes.DATASET;\n};\n\n// define dataTarget, collectTarget, and dropTargetTypes ()\n// for use in src/components/container/AttachmentDropzone.js\nconst targetAttachmentDropzone = {\n dropTargetTypes,\n dataTarget: {\n canDrop,\n drop(props, monitor) {\n const item = monitor.getItem();\n const itemType = monitor.getItemType();\n const { handleAddWithAttachments } = props;\n switch (itemType) {\n case DragDropItemTypes.DATA:\n handleAddWithAttachments([item.attachment]);\n InboxActions.removeAttachmentFromList(item.attachment);\n break;\n case DragDropItemTypes.UNLINKED_DATA:\n handleAddWithAttachments([item.attachment]);\n InboxActions.removeUnlinkedAttachmentFromList(item.attachment);\n break;\n case DragDropItemTypes.DATASET:\n handleAddWithAttachments(item.dataset.attachments);\n InboxActions.removeDatasetFromList(item.dataset);\n break;\n default:\n console.warn(`Unhandled itemType: ${itemType}`);\n break;\n }\n },\n },\n collectTarget,\n};\n\n// define dataTarget, collectTarget, and dropTargetTypes ()\n// for use in src/components/container/ContainerDatasetField.js\n\nconst targetContainerDataField = {\n dropTargetTypes,\n dataTarget: {\n canDrop,\n drop(props, monitor) {\n const item = monitor.getItem();\n const itemType = monitor.getItemType();\n const { datasetContainer, onChange } = props;\n\n switch (itemType) {\n case DragDropItemTypes.DATA:\n datasetContainer.attachments.push(item.attachment);\n onChange(datasetContainer);\n InboxActions.removeAttachmentFromList(item.attachment);\n break;\n case DragDropItemTypes.UNLINKED_DATA:\n datasetContainer.attachments.push(item.attachment);\n InboxActions.removeUnlinkedAttachmentFromList(item.attachment);\n break;\n case DragDropItemTypes.DATASET:\n item.dataset.attachments.forEach((attachment) => {\n datasetContainer.attachments.push(attachment);\n });\n onChange(datasetContainer);\n InboxActions.removeDatasetFromList(item.dataset);\n break;\n default:\n console.warn(`Unknown itemType: ${itemType}`);\n break;\n }\n }\n },\n collectTarget,\n};\n\n\nexport {\n DragDropItemTypes,\n targetAttachmentDropzone,\n targetContainerDataField,\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource, DropTarget } from 'react-dnd';\nimport flow from 'lodash/flow';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport { capitalizeWords } from 'src/utilities/textHelper';\nimport { DragDropItemTypes } from 'src/utilities/DndConst';\n\nconst layoutSource = {\n beginDrag(props) {\n return props;\n }\n};\n\nconst layoutTarget = {\n drop(props, monitor) {\n props.moveLayout(monitor.getItem(), props);\n }\n};\n\nclass TabLayoutCell extends Component {\n render() {\n const {\n cell,\n connectDragSource,\n connectDropTarget,\n isElementDetails,\n isHidden,\n title,\n isCollectionTab\n } = this.props;\n\n const elnElements = [\n 'sample', 'reaction', 'screen',\n 'wellplate', 'research_plan',\n 'cell_line', 'device_description'\n ];\n\n let cellIcon = `icon-${cell}`;\n let cellTitle = capitalizeWords(cell);\n let cellDescription = '';\n\n if (!elnElements.includes(cell)) {\n const genericElements = UserStore.getState().genericEls || [];\n const genericElement = (genericElements && genericElements.find((el) => el.name === cell)) || {};\n cellIcon = genericElement.icon_name || 'fa fa-circle-thin';\n cellTitle = genericElement.label;\n cellDescription = genericElement.desc;\n }\n\n let content = isElementDetails ? (\n Collections synchronized with me
\n {trees()}\n\n
\n ) : (\n \n {title === 'hidden' ? '-' : title}\n
\n\n \n \n
\n );\n\n content = isCollectionTab ? (\n \n {title === 'hidden' ? '-' : title}\n
\n ) : (\n content\n );\n\n return connectDragSource(connectDropTarget(content), { dropEffect: 'copy' });\n }\n}\n\nexport default flow(\n DragSource(DragDropItemTypes.LAYOUT, layoutSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging()\n })),\n DropTarget(DragDropItemTypes.LAYOUT, layoutTarget, (connect) => ({\n connectDropTarget: connect.dropTarget()\n }))\n)(TabLayoutCell);\n\nTabLayoutCell.propTypes = {\n connectDragSource: PropTypes.func.isRequired,\n isDragging: PropTypes.bool.isRequired,\n isHidden: PropTypes.bool.isRequired,\n cell: PropTypes.string.isRequired,\n index: PropTypes.any.isRequired,\n moveLayout: PropTypes.func.isRequired\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table } from 'react-bootstrap';\nimport Immutable from 'immutable';\nimport uuid from 'uuid';\n\nimport ArrayUtils from 'src/utilities/ArrayUtils';\nimport TabLayoutCell from 'src/apps/mydb/elements/tabLayout/TabLayoutCell';\nimport { capitalizeWords } from 'src/utilities/textHelper';\nimport UserStore from 'src/stores/alt/stores/UserStore';\n\nexport default class TabLayoutContainer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: Immutable.List(props.visible),\n hidden: Immutable.List(props.hidden)\n };\n\n this.moveLayout = this.moveLayout.bind(this);\n }\n\n moveLayout(dragItem, hoverItem) {\n let { visible, hidden } = this.state;\n\n if (!dragItem.isHidden && hoverItem.isHidden && visible.size === 1) return;\n\n if (dragItem.isHidden && dragItem.title === 'hidden') return;\n\n if (dragItem.isHidden) {\n hidden = hidden.splice(dragItem.index, 1);\n } else if (visible.size > 1) {\n visible = visible.splice(dragItem.index, 1);\n }\n\n if (hoverItem.isHidden) {\n hidden = hidden.splice(hoverItem.index, 0, dragItem.cell);\n } else {\n visible = visible.splice(hoverItem.index, 0, dragItem.cell);\n }\n\n if (hidden.size === 0) {\n hidden = ArrayUtils.pushUniq(hidden, 'hidden');\n } else if (hidden.size > 1) {\n hidden = ArrayUtils.removeFromListByValue(hidden, 'hidden');\n }\n\n visible = ArrayUtils.removeFromListByValue(visible, 'hidden');\n this.setState({ visible, hidden });\n }\n\n render() {\n const { visible, hidden } = this.state;\n const { isElementDetails, tabTitles, isCollectionTab } = this.props;\n const { moveLayout } = this;\n let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];\n let segmentTabs = segmentKlasses.map(s => s.label);\n\n const visibleCells = visible.map((cell, index) => {\n const defTitle = segmentTabs.includes(cell) ? cell : capitalizeWords(cell);\n return (\n {node.label}
\n );\n }\n\n return (\n \n this.onClickCollection(node)}\n title=\"Click to edit collection tab sorting\"\n >\n \n \n
\n );\n }\n\n render() {\n const { tree, showModal, layouts } = this.state;\n const tabTitlesMap = {\n qc_curation: 'QC & curation',\n computed_props: 'computed props',\n nmr_sim: 'NMR Simulation'\n };\n return (\n {node.label}
\n \n this.handleModalOptions(showModal)}\n >\n \n {this.state.currentCollection.label} \n \n \n {layouts.map((lay, index) => {\n const callbackRef = (node) => this.tabRef[index] = node;\n return (\n \n \n \n \n
\n );\n }\n}\n","import React from 'react';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport MyCollections from 'src/apps/mydb/collections/MyCollections';\nimport MySharedCollections from 'src/apps/mydb/collections/MySharedCollections';\nimport SharedWithMeCollections from 'src/apps/mydb/collections/SharedWithMeCollections';\nimport SyncWithMeCollections from 'src/apps/mydb/collections/SyncWithMeCollections';\nimport CollectionTabs from 'src/apps/mydb/collections/CollectionTabs';\n\nexport default function CollectionManagement() {\n return (\n \n
\n );\n })}\n {elements[index].label}
\n \n\n
\n \n \n For the selected collection you can adjust the visibility of segment tabs and their order for each of the above items.\n Drag and drop to select the order of segment tab layout.\n Items in the white area will be displayed in the order they are placed and the grey area items will be hidden.\n
\n\n \n \n
\n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from 'react-bootstrap';\nimport UserInfoIcon from 'src/apps/mydb/collections/UserInfoIcon';\n\nconst UserInfos = ({ users }) => {\n const userTooltips = users.map((user) => {\n return (\n \n
\n );\n });\n\n return (\n \n Mirror Sample and Reaction data to your chemotion.net account ?\n \n this.transmit('POST')}\n >\n Yes\n \n \n No\n \n \n
\n );\n } else if (status === 'unavailable') {\n content = (\n \n Sorry, it seems chemotion-repository.net can not be reached at the moment\n \n \n OK\n \n \n
\n );\n } else if (status === 'redirect') {\n content = (\n \n {message}\n \n {\n this.hideOverlay();\n window.location.assign(\n `${target}pages/tokens?origin=${encodeURI(\n window.location.origin\n )}`\n );\n // window.open(`${target}pages/tokens?origin=${encodeURI(window.location.origin)}` , '_blank');\n }}\n >\n Yes\n \n \n No\n \n \n
\n );\n }\n return \n \n {showGatePushButton && (Inventory Label}\n >\n {root.inventory_prefix} \n \n )}\n {this.canTakeOwnership() && (\n \n \n \n )}\n {children.length > 0 && (\n
\n {visible && (\n - \n {children.map((child) => (\n
- \n
\n \n ))}\n
\n this.handleSectionToggle('sharedToCollectionVisible')}\n >\n \n My shared collections\n
\n \n )\n return this.subtrees(labelledRoots, subTreeLabels,\n false, sharedToCollectionVisible)\n }\n\n remoteSubtrees() {\n let { remoteRoots, sharedWithCollectionVisible } = this.state\n remoteRoots = this.removeOrphanRoots(remoteRoots)\n\n let labelledRoots = remoteRoots.map(e => ({\n ...e,\n label: (\n \n {this.labelRoot('shared_by', e)}\n {' '}\n {this.labelRoot('shared_to', e)}\n \n )\n }));\n\n let subTreeLabels = (\n \n this.handleSectionToggle('sharedWithCollectionVisible')}\n >\n \n \n Shared with me \n
\n \n )\n\n return this.subtrees(labelledRoots, subTreeLabels,\n false, sharedWithCollectionVisible)\n }\n\n remoteSyncInSubtrees() {\n let { syncInRoots, syncCollectionVisible } = this.state\n syncInRoots = this.removeOrphanRoots(syncInRoots)\n\n let labelledRoots = syncInRoots.map(e => ({\n ...e,\n label: (\n \n {this.labelRoot('shared_by', e)}\n {' '}\n {this.labelRoot('shared_to', e)}\n \n )\n }));\n\n let subTreeLabels = (\n \n this.handleSectionToggle('syncCollectionVisible')}\n >\n \n Synchronized with me \n
\n \n )\n\n return this.subtrees(labelledRoots, subTreeLabels,\n false, syncCollectionVisible)\n }\n\n\n labelRoot(sharedToOrBy, rootCollection) {\n let shared = rootCollection[sharedToOrBy]\n if (!shared) return \n\n return (\n \n {label}\n {visible && (\n
\n )\n }\n\n handleCollectionManagementToggle() {\n UIActions.toggleCollectionManagement();\n const { showCollectionManagement, currentCollection, isSync } = UIStore.getState();\n if (showCollectionManagement) {\n Aviator.navigate('/collection/management');\n } else {\n if (currentCollection == null || currentCollection.label == 'All') {\n Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`);\n } else {\n Aviator.navigate(isSync\n ? `/scollection/${currentCollection.id}/${this.urlForCurrentElement()}`\n : `/collection/${currentCollection.id}/${this.urlForCurrentElement()}`);\n }\n }\n }\n\n urlForCurrentElement() {\n const { currentElement } = ElementStore.getState();\n if (currentElement) {\n if (currentElement.isNew) {\n return `${currentElement.type}/new`;\n }\n else {\n return `${currentElement.type}/${currentElement.id}`;\n }\n }\n else {\n return '';\n }\n }\n\n render() {\n const { ownCollectionVisible } = this.state;\n\n return (\n \n {roots && roots.map((root) => (\n
\n )}\n \n
\n {ownCollectionVisible && (\n \n \n this.handleSectionToggle('ownCollectionVisible')}\n >\n \n Collections\n
\n \n \n \n \n \n
\n \n {this.lockedSubtrees()}\n {this.unsharedSubtrees()}\n
\n )}\n \n {this.sharedSubtrees()}\n
\n \n {this.remoteSubtrees()}\n
\n \n {this.remoteSyncInSubtrees()}\n
\n \n );\n }\n}\n","import React from 'react'\n\nimport UIActions from 'src/stores/alt/actions/UIActions'\n\nexport default class ElementAllCheckbox extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n showOptions: false,\n currentOption: 2\n }\n\n this.options = [\"current\", \"all\", \"none\"]\n\n this.toggleCheckbox = this.toggleCheckbox.bind(this)\n this.showOptions = this.showOptions.bind(this)\n this.selectAll = this.selectAll.bind(this)\n }\n\n toggleCheckbox(e) {\n let {currentOption} = this.state\n currentOption = (currentOption + 1) % 3\n\n this.setState({currentOption: currentOption}, this.selectAll)\n\n e.preventDefault()\n e.stopPropagation()\n }\n\n showOptions() {\n this.setState({ showOptions: !this.state.showOptions })\n }\n\n selectAll(option) {\n if (option == null) option = this.state.currentOption\n let range = this.options[option]\n\n let newChecked = !this.props.checked\n let params = {\n type: this.props.type,\n range: range\n }\n\n if(newChecked) {\n UIActions.checkAllElements(params)\n } else {\n UIActions.uncheckAllElements(params)\n }\n\n this.setState({ showOptions: false, currentOption: option })\n }\n\n render() {\n const { showOptions } = this.state;\n const { ui } = this.props;\n\n let checkMarkClass = '';\n if (ui.checkedAll == true) {\n checkMarkClass = 'fa-check';\n } else if (ui.checkedIds && ui.checkedIds.size > 0) {\n checkMarkClass = 'fa-minus';\n }\n\n return (\n \n
\n )\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from 'react-dnd';\nimport { DragDropItemTypes } from 'src/utilities/DndConst';\n\nconst listSource = { beginDrag(props) { return props; } };\n\nconst collectSource = (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst ElementContainer = ({ connectDragSource, sourceType }) => {\n switch (sourceType) {\n case DragDropItemTypes.SAMPLE:\n case DragDropItemTypes.MOLECULE:\n return connectDragSource(\n ,\n { dropEffect: 'copy' },\n );\n\n case DragDropItemTypes.GENERALPROCEDURE:\n return connectDragSource();\n\n case DragDropItemTypes.WELLPLATE:\n case DragDropItemTypes.REACTION:\n case DragDropItemTypes.RESEARCH_PLAN:\n case DragDropItemTypes.ELEMENT:\n case DragDropItemTypes.DEVICE_DESCRIPTION:\n return connectDragSource();\n\n default:\n return ;\n }\n}\n\nexport default DragSource((props) => props.sourceType, listSource, collectSource)(ElementContainer);\n\nElementContainer.propTypes = {\n connectDragSource: PropTypes.func.isRequired,\n sourceType: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Form } from 'react-bootstrap';\nimport UIActions from 'src/stores/alt/actions/UIActions';\n\nexport default class ElementCheckbox extends React.Component {\n constructor(props) {\n super(props);\n\n this.toggleCheckbox = this.toggleCheckbox.bind(this);\n }\n\n toggleCheckbox() {\n const { checked, element } = this.props;\n\n if (!checked) {\n UIActions.checkElement(element);\n } else {\n UIActions.uncheckElement(element);\n }\n }\n\n render() {\n const { checked } = this.props;\n return (\n \n \n \n \n \n
\n {showOptions && (\n \n
\n )}\n this.selectAll(0)}>Current page
\n this.selectAll(1)}>All pages
\n this.selectAll(2)}>None
\n | \n \n | \n \n {this.dragHandle(element)}\n | \n )}\n
\n
\n \n (No-structure sample)\n
\n\n {showPreviews && svgPreview(sample)}\n
\n
\n \n {sample.molecule.chem_repo && sample.molecule.chem_repo.id && \n \n \n
\n \n {sample.title(selected)}\n\n
\n \n {showDragColumn && dragColumn(sample, DragDropItemTypes.SAMPLE, targetType)}\n \n {showInventoryLabelIcon(sample)}\n
\n \n
\n {showDecoupledIcon(sample)}\n \n \n \n \n
\n \n {group}\n
\n \n \n \n \n
\n \n
\n \n {showDragColumn && dragColumn(element)}\n \n {reactionStatus(element)}\n {reactionRole(element)}\n
\n \n
\n \n {showDragColumn && dragColumn(element)}\n \n {element.title()}\n
\n \n \n \n
\n
\n );\n }\n}\n\nCellLineItemEntry.propTypes = {\n cellLineItem: CellLinePropTypeTableEntry.isRequired\n};\n","import React, { Component } from 'react';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport CellLineItemEntry from 'src/apps/mydb/elements/list/cellLine/CellLineItemEntry';\nimport PropTypes from 'prop-types';\nimport { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport { elementShowOrNew } from 'src/utilities/routesUtils';\nimport { CellLinePropTypeTableEntry } from 'src/models/cellLine/CellLinePropTypes';\nimport Aviator from 'aviator';\nimport ChevronIcon from 'src/components/common/ChevronIcon';\n\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n\nexport default class CellLineEntry extends Component {\n constructor(props) {\n super(props);\n this.state = {\n detailedInformation: false,\n showEntries: true\n };\n }\n\n getBorderStyle() {\n const { showEntries } = this.state;\n return showEntries\n ? 'list-container title-panel p-3'\n : 'list-container title-panel p-3 cell-line-group-bottom-border';\n }\n\n renderItemEntries(cellLineItems) {\n const { showEntries } = this.state;\n return showEntries ? cellLineItems.map(\n (cellLineItem) => | \n | \n \n | \n \n | \n
\n
\n );\n }\n\n renderDetailedInfos(firstCellLineItem) {\n const { detailedInformation } = this.state;\n return !detailedInformation ? null : (\n \n {`${firstCellLineItem.cellLineName} - ${firstCellLineItem.source}`}\n
\n {this.renderCreateSubSampleButton()}\n {this.renderDetailedInfoButton()}\n \n {this.renderProperty('Organism', firstCellLineItem.organism)}\n {this.renderProperty('Disease', firstCellLineItem.disease)}\n {this.renderProperty('Tissue', firstCellLineItem.tissue)}\n {this.renderProperty('Mutation', firstCellLineItem.mutation)}\n {this.renderProperty('Variant', firstCellLineItem.variant)}\n {this.renderProperty('Bio safety level', firstCellLineItem.bioSafetyLevel)}\n {this.renderProperty('Cryopreservation medium', firstCellLineItem.cryopreservationMedium)}\n {this.renderProperty('Gender', firstCellLineItem.gender)}\n
\n );\n }\n\n renderDetailedInfoButton() {\n const { detailedInformation } = this.state;\n const active = !!detailedInformation;\n return (\n \n
\n );\n }\n\n render() {\n const { cellLineItems } = this.props;\n const { showEntries } = this.state;\n if (cellLineItems.length === 0) { return (null); }\n return (\n {propertyName}
\n -
\n \n {propertyValue}\n
\n \n { this.setState({ showEntries: !showEntries }); }}\n >\n {this.renderNameHeader(cellLineItems[0])}\n {this.renderDetailedInfos(cellLineItems[0])}\n
\n {this.renderItemEntries(cellLineItems)}\n \n );\n }\n}\n\nCellLineEntry.propTypes = {\n cellLineItems: PropTypes.arrayOf(\n CellLinePropTypeTableEntry\n ).isRequired\n};\n","import React from 'react';\nimport CellLineEntry from 'src/apps/mydb/elements/list/cellLine/CellLineEntry';\nimport PropTypes from 'prop-types';\nimport { CellLinePropTypeTableEntry } from 'src/models/cellLine/CellLinePropTypes';\n\nexport default function CellLineContainer({ cellLineGroups }) {\n return (\n \n {cellLineGroups.map(\n (group) => (\n
\n );\n}\n\nCellLineContainer.propTypes = {\n cellLineGroups: PropTypes.arrayOf(\n PropTypes.shape({\n cellLineItems: PropTypes.arrayOf(CellLinePropTypeTableEntry),\n })\n ).isRequired\n};\n","import React, { useContext } from 'react';\nimport { Tooltip, OverlayTrigger, Collapse } from 'react-bootstrap';\n\nimport ElementContainer from 'src/apps/mydb/elements/list/ElementContainer';\nimport ElementCheckbox from 'src/apps/mydb/elements/list/ElementCheckbox';\nimport ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';\nimport ArrayUtils from 'src/utilities/ArrayUtils';\nimport CommentIcon from 'src/components/comments/CommentIcon';\nimport ChevronIcon from 'src/components/common/ChevronIcon';\nimport Aviator from 'aviator';\nimport { DragDropItemTypes } from 'src/utilities/DndConst';\nimport { elementShowOrNew } from 'src/utilities/routesUtils';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\nimport UIStore from 'src/stores/alt/stores/UIStore';\n\nconst DeviceDescriptionList = ({ elements, currentElement, ui }) => {\n const deviceDescriptionsStore = useContext(StoreContext).deviceDescriptions;\n const groupedByValue = deviceDescriptionsStore.list_grouped_by;\n const showAllGroups = deviceDescriptionsStore.show_all_groups;\n const overlayToggle = \n {dragHandle(element)}\n
\n );\n }\n\n const toggleShownGroup = (key, shownGroup) => {\n if (shownGroup === undefined) {\n deviceDescriptionsStore.addGroupToShownGroups(key);\n } else {\n deviceDescriptionsStore.removeGroupFromShownGroups(key);\n }\n }\n\n const chevronOpenOrClosed = (shownGroup) => {\n return shownGroup === undefined && showAllGroups ? true : (shownGroup === undefined ? true : false);\n }\n\n const identifierKey = (key) => {\n return key === \"\" ? '[empty]' : key;\n }\n\n const groupedElements = () => {\n let group = {};\n\n elements.forEach((element) => {\n let key = element[groupedByValue];\n deviceDescriptionsStore.addGroupToAllGroups(identifierKey(key));\n\n if (groupedByValue == 'short_label') {\n key = element.ancestor_ids[0] || element.id;\n }\n\n if (!Object.prototype.hasOwnProperty.call(group, key)) {\n group[key] = [];\n }\n group[key].push(element);\n });\n\n return group;\n }\n\n const listItems = () => {\n let items = [];\n\n Object.entries(groupedElements()).forEach(([key, group]) => {\n const shownGroup = deviceDescriptionsStore.shownGroups.find((g) => g === identifierKey(key));\n items.push(\n \n {ListItemHeader(identifierKey(key), group, shownGroup)}\n \n \n
\n );\n });\n\n return items;\n }\n\n const ListItemHeader = (key, group, shownGroup) => {\n const direction = chevronOpenOrClosed(shownGroup) ? 'down' : 'right';\n const groupKey = groupedByValue == 'short_label' ? group[0].short_label : key;\n const groupType = group[0].device_type ? `- ${group[0].device_type}` : '';\n const groupDeviceName = group[0].vendor_device_name ? group[0].vendor_device_name : group[0].name;\n const groupName = groupKey === '[empty]' ? groupKey : `${groupDeviceName} - ${groupKey} ${groupType}`;\n\n return (\n \n {group.map((element) => ListItem(element))}\n
\n {groupName}
\n \n \n \n
\n \n );\n }\n\n const ListItem = (element) => {\n const selectedClass = isElementSelected(element) ? 'text-bg-primary' : '';\n return (\n \n
\n {element.title()}
\n \n
\n \n );\n }\n\n return (\n \n {listItems()}\n
\n );\n}\n\nexport default observer(DeviceDescriptionList);\n","import React, { useContext } from 'react';\nimport { Select } from 'src/components/common/Select';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\nimport ChevronIcon from 'src/components/common/ChevronIcon';\n\nconst DeviceDescriptionListHeader = () => {\n const deviceDescriptionsStore = useContext(StoreContext).deviceDescriptions;\n const groupedByValue = deviceDescriptionsStore.list_grouped_by;\n\n const options = [\n { value: 'serial_number', label: 'Grouped by Serial no' },\n { value: 'short_label', label: 'Grouped by short label' },\n ];\n\n const selectedValue = options.find(o => o.value === groupedByValue);\n\n const handleGroupSelect = (event) => {\n deviceDescriptionsStore.setListGroupedBy(event.value);\n }\n\n const toggleAllGroups = () => {\n deviceDescriptionsStore.toggleAllGroups();\n }\n\n const toggleAllButton = () => {\n return (\n \n \n {searchLabel}\n \n \n {filterIcon}\n \n \n
\n \n );\n };\n\n renderEntries() {\n const {\n elements,\n ui,\n currentElement,\n collapseAll,\n moleculeSort,\n elementsGroup,\n } = this.state;\n\n const { overview, type, genericEl } = this.props;\n let elementsTableEntries;\n\n if (type === 'sample') {\n elementsTableEntries = (\n \n
\n \n
\n \n
\n {typeSpecificHeader}\n \n {elementsTableEntries}\n
\n );\n }\n\n render() {\n return (\n \n {this.renderHeader()}\n {this.renderEntries()}\n
\n );\n }\n}\n\nElementsTable.defaultProps = {\n genericEl: null,\n};\n\nElementsTable.propTypes = {\n overview: PropTypes.bool.isRequired,\n type: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n genericEl: PropTypes.object,\n};\n","import React from 'react';\nimport { Popover, Button, Form, OverlayTrigger } from 'react-bootstrap';\n\nimport TabLayoutContainer from 'src/apps/mydb/elements/tabLayout/TabLayoutContainer';\n\nimport UserActions from 'src/stores/alt/actions/UserActions';\nimport UIActions from 'src/stores/alt/actions/UIActions';\n\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport UserStore from 'src/stores/alt/stores/UserStore';\n\nexport default class ElementsTableSettings extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentType: '',\n showSampleExternalLabel: false,\n showSampleShortLabel: false,\n showSampleName: false,\n tableSchemePreviews: true\n }\n\n this.onToggleTabLayoutContainer = this.onToggleTabLayoutContainer.bind(this);\n this.handleToggleSampleExt = this.handleToggleSampleExt.bind(this);\n this.handleToggleSampleShortLabel = this.handleToggleSampleShortLabel.bind(this);\n this.handleToggleSampleName = this.handleToggleSampleName.bind(this);\n this.handleToggleScheme = this.handleToggleScheme.bind(this);\n this.onChangeUser = this.onChangeUser.bind(this);\n this.onChangeUI = this.onChangeUI.bind(this);\n }\n\n componentDidMount() {\n UserStore.listen(this.onChangeUser);\n UIStore.listen(this.onChangeUI);\n }\n\n componentWillUnmount() {\n UserStore.unlisten(this.onChangeUser);\n UIStore.unlisten(this.onChangeUI);\n }\n\n onChangeUI(state) {\n const tableSchemePreviews = state.showPreviews;\n\n if (this.state.tableSchemePreviews != tableSchemePreviews) {\n this.setState({ tableSchemePreviews });\n }\n }\n\n onChangeUser(state) {\n let { currentType } = this.state;\n if (state && state.profile) {\n this.setState({\n showSampleExternalLabel: state.profile.show_external_name,\n showSampleName: state.profile.show_sample_name,\n showSampleShortLabel: state.profile.show_sample_short_label\n });\n }\n if (state && (currentType !== state.currentType)) {\n this.setState({ currentType: state.currentType });\n }\n }\n\n onToggleTabLayoutContainer(show) {\n if (!show) {\n this.updateLayout();\n\n if (this.state.currentType == \"sample\" || this.state.currentType == \"reaction\") {\n const show_previews = UIStore.getState().showPreviews;\n const cur_previews = this.state.tableSchemePreviews;\n if (cur_previews != show_previews) {\n UIActions.toggleShowPreviews(cur_previews);\n }\n }\n\n const { showSampleExternalLabel, showSampleShortLabel, showSampleName } = this.state;\n\n UserActions.updateUserProfile({\n show_external_name: showSampleExternalLabel,\n show_sample_short_label: showSampleShortLabel,\n show_sample_name: showSampleName\n });\n }\n }\n\n handleToggleScheme() {\n const { tableSchemePreviews } = this.state;\n this.setState({ tableSchemePreviews: !tableSchemePreviews });\n }\n\n handleToggleSampleExt() {\n const { showSampleExternalLabel } = this.state;\n this.setState({\n showSampleExternalLabel: !showSampleExternalLabel,\n showSampleShortLabel: false,\n showSampleName: false\n });\n }\n\n handleToggleSampleShortLabel() {\n const { showSampleShortLabel } = this.state;\n this.setState({\n showSampleShortLabel: !showSampleShortLabel,\n showSampleExternalLabel: false,\n showSampleName: false\n });\n }\n\n handleToggleSampleName() {\n const { showSampleName } = this.state;\n this.setState({\n showSampleName: !showSampleName,\n showSampleExternalLabel: false,\n showSampleShortLabel: false\n });\n }\n\n updateLayout() {\n const { visible, hidden } = this.tabLayoutContainerElement.state;\n const layout = {};\n\n visible.forEach((value, index) => {\n layout[value] = (index + 1);\n });\n hidden.forEach((value, index) => {\n if (value !== 'hidden') layout[value] = (- index - 1)\n });\n\n const userProfile = UserStore.getState().profile;\n userProfile.data.layout = layout;\n UserActions.updateUserProfile(userProfile);\n }\n\n render() {\n const { visible, hidden } = this.props;\n const {\n currentType,\n tableSchemePreviews,\n showSampleExternalLabel,\n showSampleShortLabel,\n showSampleName,\n } = this.state;\n\n const tabLayoutContainerElement = (\n \n {this.renderNumberOfResultsInput()}\n {this.renderPagination()}\n
\n \n {genericEl.desc}\n
\n this.handleTabSelect(parseInt(eventKey, 10))}\n >\n {tabItems}\n \n
\n \n );\n }\n}\n\nElementsList.propTypes = {\n overview: PropTypes.bool.isRequired,\n};\n","import 'whatwg-fetch';\nimport { camelizeKeys } from 'humps';\n\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\n\nexport default class ComputeTaskFetcher {\n static fetchAll() {\n return fetch('/api/v1/compute_tasks/all', {\n method: 'GET',\n credentials: 'same-origin',\n }).then(res => res.json()).then(json => (\n camelizeKeys(json.compute_tasks || [])\n )).catch(err => console.log(err));\n }\n\n static checkState(taskId) {\n return fetch(`/api/v1/compute_tasks/${taskId}/check`, {\n method: 'GET',\n credentials: 'same-origin',\n }).then(res => res.json()).then((json) => {\n LoadingActions.stop.defer();\n return camelizeKeys(json.check);\n }).catch(err => console.log(err));\n }\n\n static revokeTask(taskId) {\n return fetch(`/api/v1/compute_tasks/${taskId}/revoke`, {\n method: 'GET',\n credentials: 'same-origin',\n }).then(res => res.json()).then((json) => {\n LoadingActions.stop.defer();\n return camelizeKeys(json.revoke);\n }).catch(err => console.log(err));\n }\n\n static deleteTask(taskId) {\n return fetch(`/api/v1/compute_tasks/${taskId}`, {\n method: 'DELETE',\n credentials: 'same-origin',\n }).then(res => res.json()).then((json) => {\n LoadingActions.stop.defer();\n return camelizeKeys(json);\n }).catch(err => console.log(err));\n }\n}\n\n","/* eslint-disable class-methods-use-this */\nimport alt from 'src/stores/alt/alt';\nimport ComputeTaskFetcher from 'src/fetchers/ComputeTaskFetcher';\n\nclass ComputeTaskActions {\n fetchAll() {\n return (dispatch) => {\n ComputeTaskFetcher.fetchAll().then(res => (\n dispatch(res)\n )).catch((err) => {\n console.log(err);\n });\n };\n }\n\n checkState(taskId) {\n return (dispatch) => {\n ComputeTaskFetcher.checkState(taskId).then(res => (\n dispatch(res)\n )).catch((err) => {\n console.log(err);\n });\n };\n }\n\n revokeTask(taskId) {\n return (dispatch) => {\n ComputeTaskFetcher.revokeTask(taskId).then(res => (\n dispatch(res)\n )).catch((err) => {\n console.log(err);\n });\n };\n }\n\n deleteTask(taskId) {\n return (dispatch) => {\n ComputeTaskFetcher.deleteTask(taskId).then(res => (\n dispatch(res)\n )).catch((err) => {\n console.log(err);\n });\n };\n }\n}\n\nexport default alt.createActions(ComputeTaskActions);\n","import alt from 'src/stores/alt/alt';\n\nimport ComputeTaskActions from 'src/stores/alt/actions/ComputeTaskActions';\n\nclass ComputeTaskStore {\n constructor() {\n this.state = {\n tasks: [],\n };\n\n this.bindListeners({\n handleFetchAll: ComputeTaskActions.fetchAll,\n handleUpdateTask: [\n ComputeTaskActions.checkState,\n ComputeTaskActions.revokeTask,\n ],\n handleDeleteTask: ComputeTaskActions.deleteTask\n });\n }\n\n handleFetchAll(tasks) {\n this.state.tasks = tasks;\n }\n\n handleUpdateTask(newTask) {\n const { tasks } = this.state;\n this.state.tasks = tasks.map(task => (\n task.id === newTask.id ? { ...newTask } : task\n ));\n }\n\n handleDeleteTask(deletedTask) {\n const { tasks } = this.state;\n this.state.tasks = tasks.filter(task => task.id !== deletedTask.id);\n }\n}\n\nexport default alt.createStore(ComputeTaskStore, 'ComputeTaskStore');\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, ButtonToolbar, Badge } from 'react-bootstrap';\n\nimport Aviator from 'aviator';\n\nconst statusMap = {\n not_computed: 'pending'\n};\n\nexport default class ComputeTask extends React.Component {\n constructor(props) {\n super(props);\n\n this.navigateSample = this.navigateSample.bind(this);\n this.checkState = this.checkState.bind(this);\n this.revokeTask = this.revokeTask.bind(this);\n this.deleteTask = this.deleteTask.bind(this);\n }\n\n navigateSample() {\n const { task } = this.props;\n const currentURI = Aviator.getCurrentURI();\n\n const collectionMatch = currentURI.match(/\\/collection\\/(\\d+)\\//);\n if (collectionMatch) {\n const collectionId = collectionMatch[1];\n const url = `/collection/${collectionId}/sample/${task.sampleId}`;\n Aviator.navigate(url);\n }\n }\n\n checkState() {\n const { task } = this.props;\n this.props.checkState(task.id);\n }\n\n revokeTask() {\n const { task } = this.props;\n this.props.revokeTask(task.id);\n }\n\n deleteTask() {\n const { task } = this.props;\n this.props.deleteTask(task.id);\n }\n\n render() {\n const { task } = this.props;\n const { status } = task;\n const displayStatus = (status in statusMap) ? statusMap[status] : status;\n\n return (\n \n
\n | Sample | \nStatus | \nUpdated at | \nActions | \n
|---|
{ this.quillViewer = m; }} />
\n : { this.quillViewer = n; }} />\n );\n }\n}\n\nQuillViewer.propTypes = {\n value: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.array\n ]),\n preview: PropTypes.bool\n};\n\nQuillViewer.defaultProps = {\n value: [],\n preview: false\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Card, Button } from 'react-bootstrap';\nimport QuillViewer from 'src/components/QuillViewer';\n\nconst tryParse = function TryParseToJson(obj) {\n if (typeof obj === 'object') return obj;\n return JSON.parse(obj);\n};\n\nconst ElementAnalyses = ({ element, idx }) => {\n const children = element.children?.map((x) => (\n This {element.type} does not have any analysis.
\n );\n }\n\n return (\n\n Analyses Formatting\n \n \n \n \n \n \n \n \n \n
\n);\n\nFormatComponentHeader.propTypes = {\n onSave: PropTypes.func.isRequired,\n onFormat: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired\n};\n\nconst FormatComponent = ({\n list, isPendingToSave, onSave, onFormat, onClose\n}) => (\n Close {el.type}?
\n
\n {warningMessage} \n
\n );\n}\n\nSaveEditedImageWarning.propTypes = {\n visible: PropTypes.bool.isRequired,\n warningMessage: PropTypes.string\n};\n\nSaveEditedImageWarning.defaultProps = {\n warningMessage: 'Image was edited. Please save Element to apply changes.'\n};\n\nexport default SaveEditedImageWarning;\n","import { cloneDeep } from 'lodash';\nimport Element from 'src/models/Element';\n\nexport default class GenericDS extends Element {\n static buildEmpty(klass, containerId) {\n const template = (klass && klass.properties_release) || {};\n return new GenericDS({\n dataset_klass_id: klass && klass.id,\n element_type: 'Container',\n element_id: containerId,\n properties: template,\n properties_release: cloneDeep(template),\n klass_ols: klass.ols_term_id,\n klass_label: klass.label,\n changed: false,\n });\n }\n\n serialize() {\n return super.serialize({\n dataset_klass_id: this.dataset_klass_id,\n element_type: 'Container',\n element_id: this.element_id,\n properties: this.properties,\n properties_release: this.properties_release,\n });\n }\n\n get datasetKlassId() {\n return this.dataset_klass_id;\n }\n\n /**\n * @param {any} datasetKlassId\n */\n set datasetKlassId(datasetKlassId) {\n this.dataset_klass_id = datasetKlassId;\n }\n\n get getProperties() {\n return this.properties;\n }\n\n /**\n * @param {any} properties\n */\n set setProperties(properties) {\n this.properties = properties;\n }\n\n get klassOls() {\n return this.klass_ols;\n }\n\n set klassOls(klassOls) {\n this.klass_ols = klassOls;\n }\n\n get klassLabel() {\n return this.klass_label;\n }\n\n set klassLabel(klassLabel) {\n this.klass_label = klassLabel;\n }\n}\n","/* eslint-disable no-restricted-globals */\n/* eslint-disable react/forbid-prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Card } from 'react-bootstrap';\nimport { GenInterface, GenToolbar, absOlsTermLabel } from 'chem-generic-ui';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport MatrixCheck from 'src/components/common/MatrixCheck';\n\nclass GenericDSDetails extends Component {\n constructor(props) {\n super(props);\n this.handleReload = this.handleReload.bind(this);\n }\n\n handleReload(generic) {\n const { klass, onChange } = this.props;\n const genericDS = generic;\n if (genericDS) {\n genericDS.dataset_klass_id = klass.id;\n genericDS.klass_ols = klass.ols_term_id;\n genericDS.klass_label = klass.label;\n }\n onChange(genericDS);\n }\n\n elementalPropertiesItem(genericDS) {\n const { onChange } = this.props;\n const layersLayout = (\n {layersLayout}
;\n }\n\n render() {\n const { genericDS, kind, klass } = this.props;\n const currentUser =\n (UserStore.getState() && UserStore.getState().currentUser) || {};\n if (\n MatrixCheck(currentUser.matrix, 'genericDataset') &&\n Object.keys(genericDS).length !== 0\n ) {\n return (\n \n {this.elementalPropertiesItem(genericDS)}\n
\n Note
\n Selected analysis type:\n {' '}\n {absOlsTermLabel(kind)}\n\n Content is designed for:\n {' '}\n {genericDS.klass_label}\n \n
\n {link}\n {this.removeLinkButton(link)}\n
\n );\n }\n\n renderHyperLinkInput() {\n const { link } = this.state;\n const { disabled,readOnly } = this.props;\n\n if (disabled) {\n return null;\n }\n\n return (\n \n \n {\n hyperLinks.map((link) => (\n \n {this.listLinkItem(link)}\n \n ))\n }\n \n
\n );\n }\n return null;\n }\n\n render() {\n return (\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n Hyperlinks \n {this.renderHyperLinkInput()}\n {this.renderHyperLinkList()}\n
\n );\n }\n}\n\nHyperLinksSection.propTypes = {\n data: PropTypes.arrayOf(PropTypes.string),\n onAddLink: PropTypes.func.isRequired,\n onRemoveLink: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n};\n\nHyperLinksSection.defaultProps = {\n disabled: false,\n readOnly: false,\n data: undefined\n};\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react/prefer-stateless-function */\nimport React, { Component } from 'react';\nimport { Modal, Button } from 'react-bootstrap';\n\nexport default class ImageAnnotationModalSVG extends Component {\n constructor(props) {\n super(props);\n this.state = {\n canSave: false\n };\n }\n\n render() {\n return (\n \n \n \n \n
\n \n );\n }\n}\n\nImageAnnotationEditButton.propTypes = {\n attachment: PropTypes.instanceOf(Object),\n onClick: PropTypes.func.isRequired,\n};\n\nImageAnnotationEditButton.defaultProps = {\n attachment: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SpinnerPencilIcon = ({ spinningLock }) => (\n \n {spinningLock ? : null}\n \n \n);\n\nSpinnerPencilIcon.propTypes = {\n spinningLock: PropTypes.bool\n};\n\nSpinnerPencilIcon.defaultProps = {\n spinningLock: false\n};\n\nexport default SpinnerPencilIcon;\n","const stopBubble = (e) => {\n e.stopPropagation();\n};\n\nconst stopEvent = (e) => {\n if (!e) return;\n e.stopPropagation();\n e.preventDefault();\n};\n\nexport { stopBubble, stopEvent };\n","/* eslint-disable react/destructuring-assignment */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Modal, Button } from 'react-bootstrap';\nimport AttachmentFetcher from 'src/fetchers/AttachmentFetcher';\nimport { stopEvent } from 'src/utilities/DomHelper';\nimport { Document, Page, pdfjs } from 'react-pdf';\n\npdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';\n\nexport default class ImageModal extends Component {\n constructor(props) {\n super(props);\n this.state = {\n fetchSrc: props.popObject.src,\n showModal: false,\n isPdf: false,\n pageIndex: 1,\n numOfPages: 0,\n };\n\n this.fetchImage = this.fetchImage.bind(this);\n this.handleModalClose = this.handleModalClose.bind(this);\n this.handleModalShow = this.handleModalShow.bind(this);\n this.handleImageError = this.handleImageError.bind(this);\n this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);\n this.previousPage = this.previousPage.bind(this);\n this.nextPage = this.nextPage.bind(this);\n this.changePage = this.changePage.bind(this);\n }\n\n componentDidMount() {\n if (this.props.popObject.fetchNeeded) {\n this.fetchImage();\n }\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n if (\n this.state.numOfPages === nextState.numOfPages\n && this.state.numOfPages !== 0\n && this.state.pageIndex === nextState.pageIndex\n && this.state.showModal === nextState.showModal\n ) {\n return false;\n }\n\n return true;\n }\n\n componentDidUpdate(prevProps) {\n if (\n this.props.popObject.fetchNeeded\n && this.props.popObject.fetchId !== prevProps.popObject.fetchId\n ) {\n this.fetchImage();\n }\n }\n\n handleModalClose(e) {\n stopEvent(e);\n this.setState({ showModal: false });\n }\n\n handleModalShow(e) {\n if (!this.props.disableClick) {\n stopEvent(e);\n this.setState({ showModal: true });\n }\n }\n\n handleImageError() {\n this.setState({ fetchSrc: this.props.previewObject.src });\n }\n\n onDocumentLoadSuccess(numPages) {\n this.setState({ numOfPages: numPages });\n }\n\n changePage(offset) {\n this.setState((prevState) => ({ pageIndex: prevState.pageIndex + offset }));\n }\n\n previousPage() {\n this.changePage(-1);\n }\n\n nextPage() {\n this.changePage(1);\n }\n\n fetchImage() {\n if (!this.props.popObject.fetchId) { return null; }\n\n AttachmentFetcher.fetchImageAttachment({ id: this.props.popObject.fetchId, annotated: true }).then(\n (result) => {\n if (result.data != null) {\n this.setState({ fetchSrc: result.data, isPdf: result.type === 'application/pdf' });\n }\n }\n );\n }\n\n render() {\n const {\n hasPop, previewObject, popObject, imageStyle, showPopImage\n } = this.props;\n const { pageIndex, numOfPages } = this.state;\n\n if (!hasPop) {\n return (\n \n
\n );\n }\n\n return (\n \n \n
\n \n this.onDocumentLoadSuccess(pdf.numPages)}\n >\n
\n ) : (\n \n this.previousPage()}\n >\n Previous\n \n = numOfPages}\n onClick={() => this.nextPage()}\n >\n Next\n \n
\n \n Page\n {' '}\n {pageIndex || (numOfPages ? 1 : '--')}\n {' '}\n of\n {' '}\n {numOfPages || '--'}\n
\n\n
\n);\n\nconst isImageFile = (fileName) => {\n const acceptedImageTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];\n const dataType = fileName.split('.').pop().toLowerCase();\n return acceptedImageTypes.includes(dataType);\n};\n\nexport const formatFileSize = (sizeInB) => {\n if (sizeInB >= 1024 * 1024) {\n return `${(sizeInB / (1024 * 1024)).toFixed(2)} MB`;\n } if (sizeInB >= 1024) {\n return `${(sizeInB / 1024).toFixed(1)} kB`;\n }\n return `${sizeInB} bytes`;\n};\n\nconst handleDownloadAnnotated = (attachment) => {\n const isImage = isImageFile(attachment.filename);\n if (isImage && !attachment.isNew) {\n Utils.downloadFile({\n contents: `/api/v1/attachments/${attachment.id}/annotated_image`,\n name: attachment.filename\n });\n }\n};\n\nconst handleDownloadOriginal = (attachment) => {\n Utils.downloadFile({\n contents: `/api/v1/attachments/${attachment.id}`,\n name: attachment.filename,\n });\n};\n\nconst handleOpenLocally = (attachment, option = 0) => {\n ThirdPartyAppFetcher.getHandlerUrl(attachment.id, option).then((url) => {\n const link = document.createElement('a');\n link.download = attachment.filename;\n link.href = url;\n const event = new window.MouseEvent('click', {\n view: window,\n bubbles: true,\n cancelable: true\n });\n link.dispatchEvent(event);\n });\n};\n\nexport const undoButton = (attachment, onUndoDelete) => (\n \n
\n \n Or you are not authorized to edit this file.\n \n ) : (\n Edit attachment\n )}\n
\n
\n \n {/* add span because disabled buttons cannot trigger tooltip overlay */}\n \n showImportConfirmFunction(attachment.id)}\n >\n \n \n \n \n hideImportConfirmFunction(attachment.id)}\n target={buttonRef}\n >\n {confirmTooltip}\n \n
\n );\n};\n\nexport const customDropzone = (onDrop) => (\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n \n \n \n \n \n \n {sortDirection === 'asc' ? '▲' : '▼'}\n \n
\n )}\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n
\n \n);\n\n// validate id as uuid\n// TODO replace with uuid.validate after upgrade to uuid 10\nconst isUUID = (id) => {\n const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-6][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;\n return uuidRegex.test(id);\n};\n\nconst filterOptions = (contentType, options) => {\n const [itemType, itemSubtype] = (contentType || '').split('/');\n return (options || [])\n .filter((option) => {\n if (!option.fileTypes || option.fileTypes.length === 0) { return false; }\n return option.fileTypes.split(',').some((filter) => {\n const [type, subtype] = filter.split('/');\n return (type === '*' || type === itemType) && (!subtype || subtype === '*' || subtype === itemSubtype);\n });\n });\n};\n\nconst noChoice = [\n {instruments.map((instrument, index) => (\n this.selectInstrument()}\n onMouseEnter={() => this.focusInstrument(index)}\n // eslint-disable-next-line react/no-array-index-key\n key={`instrument_${index}`}\n ref={`instrument_${index}`}\n header={instrument.name}\n />\n ))}\n
\n );\n } if (error) {\n return \n {attachmentThumbnail(attachment)}\n
\n );\n }\n\n renderAttachments() {\n const {\n filteredAttachments, sortDirection, attachmentGroups\n } = this.state;\n const { datasetContainer } = this.props;\n const { currentUser } = UserStore.getState();\n\n const renderGroup = (attachments, title, key) => (\n \n {attachment.is_deleted ? (\n {attachment.filename}\n ) : (\n attachment.filename\n )}\n
\n \n
\n \n Created:\n \n {formatDate(attachment.created_at)}\n \n
\n |\n \n Size:\n \n {formatFileSize(attachment.filesize)}\n \n
\n \n {attachment.is_deleted ? (\n this.handleUndo(attachment)}\n >\n \n \n ) : (\n <>\n \n {downloadButton(attachment)}\n \n
\n {attachment.updatedAnnotation && \n {removeButton(attachment, this.handleAttachmentRemove, readOnly)}\n
\n \n )}\n \n \n {title}\n
\n {attachments.map((attachment) => this.renderAttachmentRow(attachment))}\n \n );\n\n const hasProcessedAttachments = Object.keys(attachmentGroups.Processed).some(\n (groupName) => attachmentGroups.Processed[groupName].length > 0\n );\n\n return (\n \n {this.renderImageEditModal()}\n \n Uploading attachments will fail; User quota\n {currentUser !== null ? ` (${currentUser.allocated_space / 1024 / 1024} MB) ` : ' '}\n will be exceeded.\n \n \n )}\n
\n );\n }\n\n renderMetadata() {\n const { datasetContainer, showInstruments } = this.state;\n const { readOnly, disabled, kind } = this.props;\n const termId = absOlsTermId(kind);\n const klasses = (UserStore.getState() && UserStore.getState().dsKlasses) || [];\n let klass = {};\n const idx = findIndex(klasses, (o) => o.ols_term_id === termId);\n if (idx > -1) {\n klass = klasses[idx];\n }\n\n let genericDS = {};\n if (datasetContainer?.dataset?.id) {\n genericDS = datasetContainer.dataset;\n } else if (klass.ols_term_id !== undefined) {\n genericDS = GenericDS.buildEmpty(cloneDeep(klass), datasetContainer.id);\n }\n return (\n <>\n \n
\n {filteredAttachments.length === 0 ? (\n \n {this.customDropzone()}\n
\n \n {datasetContainer.attachments.length > 0\n && sortingAndFilteringUI(\n sortDirection,\n this.handleSortChange,\n this.toggleSortDirection,\n this.handleFilterChange,\n false\n )}\n
\n \n There are currently no attachments.\n
\n ) : (\n <>\n \n {attachmentGroups.Pending && attachmentGroups.Pending.length > 0\n && renderGroup(attachmentGroups.Pending, 'Pending')}\n {attachmentGroups.Original.length > 0 && renderGroup(attachmentGroups.Original, 'Original')}\n {attachmentGroups.BagitZip.length > 0 && renderGroup(attachmentGroups.BagitZip, 'Bagit / Zip')}\n {hasProcessedAttachments && Object.keys(attachmentGroups.Processed)\n .map((groupName) => attachmentGroups.Processed[groupName].length > 0\n && renderGroup(attachmentGroups.Processed[groupName], `Processed: ${groupName}`, groupName))}\n {attachmentGroups.Combined.length > 0 && renderGroup(attachmentGroups.Combined, 'Combined')}\n
\n \n {mode === 'attachments' && this.renderAttachments()}\n {mode === 'metadata' && this.renderMetadata()}\n
\n );\n }\n}\n\nContainerDatasetModalContent.propTypes = {\n datasetContainer: PropTypes.shape({\n name: PropTypes.string.isRequired,\n attachments: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n aasm_state: PropTypes.string.isRequired,\n content_type: PropTypes.string.isRequired,\n filename: PropTypes.string.isRequired,\n filesize: PropTypes.number.isRequired,\n identifier: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n thumb: PropTypes.bool.isRequired\n })),\n }).isRequired,\n onChange: PropTypes.func.isRequired,\n onInstrumentChange: PropTypes.func,\n onModalHide: PropTypes.func.isRequired,\n readOnly: PropTypes.bool,\n disabled: PropTypes.bool,\n kind: PropTypes.string,\n mode: PropTypes.oneOf(['attachments', 'metadata']),\n attachments: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n aasm_state: PropTypes.string.isRequired,\n content_type: PropTypes.string.isRequired,\n filename: PropTypes.string.isRequired,\n filesize: PropTypes.number.isRequired,\n identifier: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n thumb: PropTypes.bool.isRequired\n })),\n};\n\nContainerDatasetModalContent.defaultProps = {\n mode: 'attachments',\n disabled: false,\n readOnly: false,\n attachments: [],\n kind: null,\n onInstrumentChange: () => {},\n};\n\nexport default observer(ContainerDatasetModalContent);\n","/* eslint-disable react/destructuring-assignment */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Modal, OverlayTrigger, Tooltip, Button\n} from 'react-bootstrap';\nimport ContainerDatasetModalContent from 'src/components/container/ContainerDatasetModalContent';\n\nexport default class ContainerDatasetModal extends Component {\n constructor(props) {\n super(props);\n\n this.datasetInput = React.createRef();\n this.state = {\n mode: 'attachments',\n isNameEditing: false,\n localName: props.datasetContainer.name,\n instrumentIsEmpty: !props.datasetContainer.extended_metadata?.instrument,\n };\n\n this.handleSave = this.handleSave.bind(this);\n this.handleSwitchMode = this.handleSwitchMode.bind(this);\n this.handleModalClose = this.handleModalClose.bind(this);\n }\n\n handleModalClose(event) {\n if (event && event.type === 'keydown' && event.key === 'Escape') {\n this.handleSave();\n } else {\n this.props.onHide();\n }\n }\n\n handleSave() {\n this.datasetInput.current.handleSave();\n this.props.onChange({\n ...this.props.datasetContainer,\n ...this.datasetInput.current.state.datasetContainer,\n name: this.state.localName\n });\n }\n\n handleNameChange(newName) {\n this.setState({ localName: newName });\n }\n\n handleSwitchMode(mode) {\n this.setState({ mode });\n }\n\n toggleNameEditing = () => {\n this.setState((prevState) => ({\n isNameEditing: !prevState.isNameEditing,\n }));\n };\n\n render() {\n const {\n show, onHide, onChange, readOnly, disabled, kind, datasetContainer\n } = this.props;\n\n const { mode, instrumentIsEmpty } = this.state;\n\n const attachmentTooltip = (\n {AttachmentsButton}\n {MetadataButton}\n
\n \n {\n if (event.key === 'Enter') {\n this.handleNameChange(event.target.value);\n this.toggleNameEditing();\n }\n }}\n onChange={(e) => { this.handleNameChange(e.target.value); }}\n />\n
\n ) : (\n \n {this.state.localName}\n {!readOnly && (\n
\n )}\n \n {mode === 'attachments' && instrumentIsEmpty && (\n
\n \n \n \n Instrument missing, switch to Metadata.\n \n
\n )}\n {btnMode}\n \n \n Changes are kept for this session. Remember to save the element itself to persist changes.\n \n
\n \n {datasetContainer.name}\n handleUndo(datasetContainer)}\n disabled={disabled}\n >\n \n \n
\n );\n }\n const gdsDownload = (datasetContainer.dataset == null\n || typeof datasetContainer.dataset === 'undefined') ? () : (\n \n {datasetContainer.dataset && datasetContainer.dataset.klass_ols !== absOlsTermId(kind)\n ?
\n );\n }\n}\n\nContainerDatasetField.propTypes = {\n isOver: PropTypes.bool.isRequired,\n canDrop: PropTypes.bool.isRequired,\n readOnly: PropTypes.bool,\n handleRemove: PropTypes.func,\n disabled: PropTypes.bool,\n connectDropTarget: PropTypes.func.isRequired,\n datasetContainer: PropTypes.shape({\n is_deleted: PropTypes.bool,\n name: PropTypes.string,\n dataset: PropTypes.object,\n id: PropTypes.number,\n }).isRequired,\n handleUndo: PropTypes.func.isRequired,\n kind: PropTypes.string,\n handleModalOpen: PropTypes.func.isRequired,\n};\n\nContainerDatasetField.defaultProps = {\n readOnly: false,\n handleRemove: () => {},\n disabled: false,\n};\n\nexport default DropTarget(\n targetContainerDataField.dropTargetTypes,\n targetContainerDataField.dataTarget,\n targetContainerDataField.collectTarget\n)(ContainerDatasetField);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from 'react-dnd';\nimport { targetAttachmentDropzone } from 'src/utilities/DndConst';\nimport ColoredOverlay from 'src/components/common/ColoredOverlay'\n\nclass AttachmentDropzone extends Component {\n render() {\n const { connectDropTarget, isOver, canDrop } = this.props;\n\n return connectDropTarget(\n \n \n {gdsDownload}\n download data + metadata}>\n \n \n {this.removeButton(datasetContainer)}\n \n
\n {isOver && canDrop && \n Drop File(s) from the inbox\n {isOver && canDrop &&
\n );\n }\n}\n\nexport default DropTarget(\n targetAttachmentDropzone.dropTargetTypes,\n targetAttachmentDropzone.dataTarget,\n targetAttachmentDropzone.collectTarget\n)(AttachmentDropzone);\n\nAttachmentDropzone.propTypes = {\n isOver: PropTypes.bool.isRequired,\n canDrop: PropTypes.bool.isRequired,\n};\n","/* eslint-disable react/destructuring-assignment */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from 'react-bootstrap';\nimport ContainerDatasetModal from 'src/components/container/ContainerDatasetModal';\nimport ContainerDatasetField from 'src/components/container/ContainerDatasetField';\nimport Container from 'src/models/Container';\nimport AttachmentDropzone from 'src/components/container/AttachmentDropzone';\n\nexport default class ContainerDatasets extends Component {\n constructor(props) {\n super(props);\n const { container } = props;\n this.state = {\n container,\n modal: {\n show: false,\n datasetContainer: null,\n },\n };\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.container !== prevProps.container) {\n this.setState({\n container: this.props.container,\n });\n }\n }\n\n handleModalOpen(datasetContainer) {\n const { modal } = this.state;\n modal.datasetContainer = datasetContainer || {};\n modal.show = true;\n this.setState({ modal });\n }\n\n handleAdd() {\n const { container } = this.state;\n const datasetContainer = Container.buildEmpty();\n datasetContainer.container_type = 'dataset';\n\n container.children.push(datasetContainer);\n\n this.handleModalOpen(datasetContainer);\n this.props.onChange(container);\n }\n\n handleAddWithAttachments(attachments) {\n const { container } = this.state;\n const datasetContainer = Container.buildEmpty();\n datasetContainer.container_type = 'dataset';\n\n attachments.forEach((attachment) => {\n datasetContainer.attachments.push(attachment);\n });\n container.children.push(datasetContainer);\n\n this.handleModalOpen(datasetContainer);\n this.props.onChange(container);\n }\n\n handleRemove(datasetContainer) {\n const { container } = this.state;\n\n datasetContainer.is_deleted = true;\n this.props.onChange(container);\n }\n\n handleUndo(datasetContainer) {\n const { container } = this.state;\n\n datasetContainer.is_deleted = false;\n this.props.onChange(container);\n }\n\n handleChange(datasetContainer) {\n const { container } = this.state;\n\n container.children.find((dataset) => {\n if (dataset.id === datasetContainer.id) {\n const datasetId = container.children.indexOf(dataset);\n container.children[datasetId] = datasetContainer;\n }\n });\n\n this.props.onChange(container);\n }\n\n handleModalHide() {\n const { modal } = this.state;\n modal.show = false;\n modal.datasetContainer = null;\n this.setState({ modal });\n // https://github.com/react-bootstrap/react-bootstrap/issues/1137\n document.body.className = document.body.className.replace('modal-open', '');\n }\n\n addButton() {\n const { readOnly, disabled } = this.props;\n if (!readOnly && !disabled) {\n return (\n \n \n
\n );\n }\n return null;\n }\n\n render() {\n const { container, modal } = this.state;\n const { disabled,readOnly } = this.props;\n\n if (container.children.length > 0) {\n const kind = container.extended_metadata && container.extended_metadata.kind;\n return (\n \n this.handleModalHide()}\n onChange={(datasetContainer) => this.handleChange(datasetContainer)}\n kind={kind}\n show={modal.show}\n readOnly={this.props.readOnly}\n datasetContainer={modal.datasetContainer}\n analysisContainer={modal.analysisContainer}\n disabled={disabled}\n />\n )}\n
\n );\n }\n return (\n \n
\n {modal.show && modal.datasetContainer && (\n \n {container.children.map((datasetContainer, key) => (\n
\n {this.addButton()}\n \n this.handleChange(datasetContainer)}\n handleRemove={() => this.handleRemove(datasetContainer)}\n handleUndo={() => this.handleUndo(datasetContainer)}\n handleModalOpen={() => this.handleModalOpen(datasetContainer)}\n disabled={disabled}\n readOnly={readOnly}\n />\n
\n ))}\n \n this.handleAddWithAttachments(attachments)}\n />\n
\n \n
\n );\n }\n}\n\nContainerDatasets.propTypes = {\n container: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n readOnly: PropTypes.bool,\n disabled: PropTypes.bool,\n};\n\nContainerDatasets.defaultProps = {\n readOnly: false,\n disabled: false,\n};\n","/* eslint-disable react/require-default-props */\n/* eslint-disable react/sort-comp */\n/* eslint-disable react/forbid-prop-types */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\n\nimport Quill from 'quill';\n\nfunction postpone(fn) {\n Promise.resolve().then(fn);\n}\n\nconst isDelta = value => value && value.ops;\n\nconst isEqualValue = (value, otherValue) => {\n if (isDelta(value) && isDelta(otherValue)) {\n return isEqual(value.ops, otherValue.ops);\n }\n\n return isEqual(value, otherValue);\n};\n\nconst makeUnprivilegedEditor = (editor) => {\n const e = editor;\n\n return {\n getHTML: () => e.root.innerHTML,\n getLength: e.getLength.bind(e),\n getText: e.getText.bind(e),\n getContents: e.getContents.bind(e),\n getSelection: e.getSelection.bind(e),\n getBounds: e.getBounds.bind(e),\n };\n};\n\nconst setEditorTabIndex = (editor, tabIndex) => {\n const check = (\n editor == null || editor.scroll == null || editor.scroll.domNode == null\n );\n if (check) return;\n\n // eslint-disable-next-line no-param-reassign\n editor.scroll.domNode.tabIndex = tabIndex;\n};\n\nexport default class ReactQuill extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n generation: 0,\n };\n\n this.dirtyProps = ['modules', 'formats', 'bounds', 'theme', 'children'];\n this.cleanProps = [\n 'id', 'className', 'style', 'placeholder', 'tabIndex',\n 'onChange', 'onChangeSelection', 'onFocus', 'onBlur',\n 'onKeyPress', 'onKeyDown', 'onKeyUp'\n ];\n this.allProps = this.dirtyProps.concat(this.cleanProps);\n\n this.isControlled = this.isControlled.bind(this);\n\n this.value = this.isControlled() ? props.value : props.defaultValue;\n\n this.shouldComponentRegenerate = this.shouldComponentRegenerate.bind(this);\n this.validateProps = this.validateProps.bind(this);\n\n this.getEditor = this.getEditor.bind(this);\n this.getEditingArea = this.getEditingArea.bind(this);\n this.getEditorConfig = this.getEditorConfig.bind(this);\n this.getEditorContents = this.getEditorContents.bind(this);\n this.getEditorSelection = this.getEditorSelection.bind(this);\n\n this.setEditorContents = this.setEditorContents.bind(this);\n this.setEditorReadOnly = this.setEditorReadOnly.bind(this);\n this.setEditorSelection = this.setEditorSelection.bind(this);\n\n this.createEditor = this.createEditor.bind(this);\n this.destroyEditor = this.destroyEditor.bind(this);\n this.hookEditor = this.hookEditor.bind(this);\n this.instantiateEditor = this.instantiateEditor.bind(this);\n this.unhookEditor = this.unhookEditor.bind(this);\n\n this.renderEditingArea = this.renderEditingArea.bind(this);\n\n this.focus = this.focus.bind(this);\n this.blur = this.blur.bind(this);\n\n this.onEditorChange = this.onEditorChange.bind(this);\n this.onEditorChangeText = this.onEditorChangeText.bind(this);\n this.onEditorChangeSelection = this.onEditorChangeSelection.bind(this);\n }\n\n componentDidMount() {\n this.instantiateEditor();\n this.setEditorContents(this.editor, this.getEditorContents());\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n this.validateProps(nextProps);\n\n // If the editor hasn't been instantiated yet, or the component has been\n // regenerated, we already know we should update.\n if (!this.editor || this.state.generation !== nextState.generation) {\n return true;\n }\n\n // Handle value changes in-place\n if ('value' in nextProps) {\n const prevContents = this.getEditorContents();\n const nextContents = nextProps.value ? nextProps.value : '';\n\n // NOTE: Seeing that Quill is missing a way to prevent edits, we have to\n // settle for a hybrid between controlled and uncontrolled mode. We\n // can't prevent the change, but we'll still override content\n // whenever `value` differs from current state.\n // NOTE: Comparing an HTML string and a Quill Delta will always trigger a\n // change, regardless of whether they represent the same document.\n if (!isEqualValue(nextContents, prevContents)) {\n this.setEditorContents(this.editor, nextContents);\n }\n }\n\n // Handle read-only changes in-place\n if (nextProps.readOnly !== this.props.readOnly && nextProps.readOnly !== null) {\n this.setEditorReadOnly(!nextProps.readOnly);\n }\n\n return Object.keys(this.props).some(propKey => (\n !isEqual(nextProps[propKey], this.props[propKey])\n ));\n }\n\n componentDidUpdate(prevProps, prevState) {\n // If we're changing one of the `dirtyProps`, the entire Quill Editor needs\n // to be re-instantiated. Regenerating the editor will cause the whole tree,\n // including the container, to be cleaned up and re-rendered from scratch.\n // Store the contents so they can be restored later.\n if (this.editor && this.shouldComponentRegenerate(prevProps)) {\n const delta = this.editor.getContents();\n const selection = this.editor.getSelection();\n this.regenerationSnapshot = { delta, selection };\n\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ generation: this.state.generation + 1 });\n this.destroyEditor();\n }\n\n // The component has been regenerated, so it must be re-instantiated, and\n // its content must be restored to the previous values from the snapshot.\n if (this.state.generation !== prevState.generation && this.regenerationSnapshot) {\n const { delta, selection } = this.regenerationSnapshot;\n delete this.regenerationSnapshot;\n\n this.instantiateEditor();\n\n const { editor } = this;\n if (editor) {\n editor.setContents(delta);\n postpone(() => this.setEditorSelection(editor, selection));\n }\n }\n }\n\n validateProps(props) {\n let error;\n if (this.lastDeltaChangeSet && this.lastDeltaChangeSet === props.value) {\n error = 'You are passing the `delta` object from the `onChange` event ' +\n 'back as `value`. You most probably ' +\n 'want `editor.getContents()` instead. ';\n throw new Error(error);\n }\n\n const noChild = React.Children.count(props.children);\n error = null;\n if (noChild) {\n if (noChild > 1) {\n error = 'The Quill editing area can only be composed ' +\n 'of a single React element.';\n }\n\n const child = React.Children.only(props.children);\n if (child && child.type === 'textarea') {\n error = 'Quill does not support editing on a \n
\n There are currently no Datasets.
\n\n
\n {this.addButton()}\n \n this.handleAddWithAttachments(attachments)}\n />\n
\n