- {this.renderDescription([elements, segments, datasets])}
\n {message}\n
\n\n {email}\n
| ID | \nDeleted at | \n
|---|---|
| {item.id} | \n{item.deleted_at} | \n
\n \n
\n \n \n
\n \n\n \n
\n \n \n
\n \n this.updateDropdownFilter('account_active', e.target.value)}\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 >\n Restore Account \n \n \n \n \n \n {this.renderMessageModal()}\n {this.renderNewUserModal()}\n {this.renderEditUserModal()}\n {this.renderRestoreAccountModal()}\n {this.renderGenericAdminModal()}\n
\n );\n }\n}\n","import React from 'react';\nimport { Button, ButtonGroup, 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 \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 { FormGroup, ControlLabel, FormControl, Button, Panel } from 'react-bootstrap';\nimport Select from 'react-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 if (selectedChannel) {\n this.setState({ selectedChannel });\n }\n }\n\n toggleChannelList() {\n MessagesFetcher.fetchChannels(9)\n .then((result) => {\n const channels = result.channels.map(c =>\n ({ 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 \n \n \n \n
\n );\n }\n}\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('MsgPub');\n if (domElement) { ReactDOM.render(\n Channel \n
\n \n \n
\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('update 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 \n enable list
\n {this.state.enableIds.join('\\n')}\ndisable list
\n {this.state.disableIds.join('\\n')}\n| # | \nActions | \nID | \nFunction name | \nDescription | \nSet globally | \nEnabled for | \nDisabled for | \n
|---|
\n \n
\n \n \n
\n \n {this.renderList()}\n {this.renderEditModal()}\n {this.renderJsonModal()}\n
\n );\n }\n}\n","import { AgGridReact } from 'ag-grid-react';\nimport { cloneDeep } from 'lodash';\nimport PropTypes from 'prop-types';\nimport Delta from 'quill-delta';\nimport React from 'react';\nimport {\n Button, ControlLabel,\n Form, FormControl, FormGroup,\n Panel\n} from 'react-bootstrap';\n\nimport QuillEditor from 'src/components/QuillEditor';\nimport TextTemplateIcon from 'src/apps/admin/textTemplates/TextTemplateIcon';\n\nfunction RemoveRowBtn({ removeRow, node }) {\n const { data } = node;\n\n const btnClick = () => {\n removeRow(data.name);\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n Preview\n \n \n
\n \n \n
\n \n \n
\n \n \n this.handleInputChange(event)}\n />\n \n
\n \n \n \n
\n \n \n \n \n Delayed Jobs\n \n \n \n \n {tcolumn}\n \n \n {tbody}\n \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, FormControl, Modal, Panel, FormGroup, ControlLabel, Popover, OverlayTrigger, ButtonGroup, Alert\n} from 'react-bootstrap';\nimport Select from 'react-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 }\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({ 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 \n \n\n \n \n {alertMessage && (\n \n {alertMessage}\n \n )}\n \n \n \n New Data Type\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n Data Types\n \n \n \n \n
\n \n
\n );\n }\n}\n","import React, { useContext } from 'react';\nimport { FormGroup, ControlLabel, Form, FormControl, Checkbox } from 'react-bootstrap';\nimport Select from 'react-select3';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DevicePropertiesTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n let device = devicesStore.device;\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 ? verificationOptions.filter(f => f.value == device.verification_status) : '';\n\n const onChange = (field, value) => {\n let newValue = value ? 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 { FormGroup, ControlLabel, Form } from 'react-bootstrap';\nimport AsyncSelect from 'react-select3/async';\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 let newValue = value ? value : [];\n devicesStore.changeDevice(type, newValue);\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 }).options\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 {\n FormControl, FormGroup, ControlLabel, Form, InputGroup, Tooltip, OverlayTrigger, Button, Checkbox\n} from 'react-bootstrap';\nimport Select from 'react-select3';\nimport Clipboard from 'clipboard';\nimport { startsWith, endsWith } from 'lodash';\n\nimport AdminFetcher from 'src/fetchers/AdminFetcher';\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DeviceDataCollectorTab = () => {\n const devicesStore = useContext(StoreContext).devices;\n const [localCollectorValues, setLocalCollectorValues] = useState([]);\n const device = devicesStore.device;\n let clipboard = new Clipboard('.clipboardBtn');\n\n useEffect(() => {\n AdminFetcher.fetchLocalCollector()\n .then((result) => {\n setLocalCollectorValues(result.listLocalCollector);\n });\n devicesStore.changeDevice('datacollector_authentication', 'password');\n }, []);\n\n useEffect(() => {\n return () => {\n clipboard.destroy();\n }\n }, [devicesStore.deviceModalVisible]);\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 ];\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 tipCopyClipboard = | # | \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 >\n | \n
\n
\n \n );\n }\n\n return (\n \n );\n}\n\nexport default observer(DeviceDataCollectorTab);\n","import React, { useContext } from 'react';\nimport { FormControl, FormGroup, ControlLabel, 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 { FormControl, FormGroup, ControlLabel, Form, Button } from 'react-bootstrap';\nimport Select from 'react-select3';\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 Local Collector Dir Configurtaion
\n {\n localCollectorValues.map((c, i) => (\n\n \n \n \n \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 } from 'react';\nimport { Modal, Button, ButtonToolbar, Alert, Tabs, Tab } from 'react-bootstrap';\nimport Draggable from \"react-draggable\";\nimport DevicePropertiesTab from './DevicePropertiesTab';\nimport DeviceUserGroupsTab from './DeviceUserGroupsTab';\nimport DeviceDataCollectorTab from './DeviceDataCollectorTab';\nimport DeviceNovncTab from './DeviceNovncTab';\nimport DeviceMetadataTab from './DeviceMetadataTab';\nimport { endsWith } from 'lodash';\n\nimport { observer } from 'mobx-react';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\n\nconst DeviceModal = () => {\n const devicesStore = useContext(StoreContext).devices;\n const deviceMetadataStore = useContext(StoreContext).deviceMetadata;\n let device = devicesStore.device;\n const disableTab = devicesStore.create_or_update == 'update' ? false : true;\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 const buttonsWithAlertClass = errorMessage ? 'with-alert' : '';\n\n const minimizedClass = devicesStore.modalMinimized ? ' minimized' : '';\n let deviceParams = {};\n let 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 let 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 = () => {\n return datacollectorFields.filter(field => device[field] !== '' && device[field] !== null);\n }\n\n const handleValidationState = () => {\n let errorMessages = ['Please fill out all needed fields'];\n\n const nameValue = device.name.trim() === '' ? 'error' : null;\n if (nameValue) { errorMessages.push('Please enter a name'); }\n devicesStore.changeDevice('valid_name', nameValue);\n\n const nameAbbreviationValue = device.name_abbreviation.trim() === '' ? 'error' : null;\n if (nameAbbreviationValue) { errorMessages.push('Please enter a name abbreviation'); }\n devicesStore.changeDevice('valid_name_abbreviation', nameAbbreviationValue);\n\n if (anyDatacollectorFields().length >= 1) {\n devicesStore.changeDevice('datacollector_fields', true);\n \n const methodValue = !device.datacollector_method ? 'error' : null;\n if (methodValue) { errorMessages.push('Please select watch method'); }\n devicesStore.changeDevice('valid_datacollector_method', methodValue);\n \n const dirValue = !device.datacollector_dir ? 'error' : null;\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 ? 'error' : null;\n if (userValue) { errorMessages.push('Please enter a user'); }\n devicesStore.changeDevice('valid_datacollector_user', userValue);\n \n const hostValue = !device.datacollector_host ? 'error' : null;\n if (hostValue) { errorMessages.push('Please enter a host'); }\n devicesStore.changeDevice('valid_datacollector_host', hostValue);\n \n const keyNameValue =\n device.datacollector_authentication === 'keyfile' && !device.datacollector_key_name ? 'error' : null;\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 ? 'error' : null;\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 saveDeviceOrRelation = () => {\n if (devicesStore.active_tab_key == 5) {\n saveDeviceMetadata();\n } else {\n saveDevice();\n }\n }\n\n const saveDevice = () => {\n let errorMessages = handleValidationState();\n devicesStore.changeErrorMessage(errorMessages.join('\\n'));\n device = devicesStore.device;\n\n if (errorMessages.length <= 1) {\n removeErrors();\n\n if (devicesStore.create_or_update == 'update') {\n devicesStore.updateDevice(prepareDeviceParams());\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 handleCancel = () => {\n devicesStore.hideDeviceModal();\n devicesStore.clearDevice();\n devicesStore.setActiveTabKey(1);\n deviceMetadataStore.clearDeviceMetadata();\n removeErrors();\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 handleSelectTab = (key) => {\n devicesStore.setActiveTabKey(key);\n }\n\n const modalTitle = () => {\n if (devicesStore.create_or_update == 'update') {\n return `Edit ${device.name}`;\n } else {\n return 'Add new device';\n }\n }\n\n const showMessage = () => {\n if (errorMessage !== '') {\n return\n \n \n {modalTitle()}\n \n
\n \n devicesStore.toggleModalMinimized()} />\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
\n
\n clearDatacollector(device)}>\n Yes\n \n \n
\n \n
\n clearNovncSettings(device)}>\n Yes\n \n \n
\n \n
\n confirmDelete(object, type, user)}>\n Yes\n \n \n
\n Device \"{device.name}\" managed by following users / groups
\n {listUsersAndGroups(device, idx)}\n | # | \nActions | \nName | \nInitial | \nData Collector / NoVNC | \n
|---|
\n \n \n \n
\n \n \n {` Do you really want to delete ${currentName}?`}\n \n
\n\n\n \n { nameRef = ref; }}\n />\n \n \n\n \n { urlRef = ref; }}\n />\n \n \n\n \n { fileTypesRef = ref; }}\n placeholder=\"* or comma separated list: image/png,text...\"\n />\n \n \n\n \n \n \n\n \n \n \n \n
\n \n\n \n { nameRef = ref; }} />\n \n \n\n \n { urlRef = ref; }} />\n \n \n\n \n { fileTypesRef = ref; }}\n placeholder=\"* or comma separated list: image/png,text...\"\n />\n \n \n\n \n \n \n\n \n \n \n \n\n
\n \n\n \n\n \n {this.renderMessageModal()}\n\n \n\n \n \n
\n\n
\n );\n }\n}\n","import React from 'react';\nimport { Grid, Row, Col, Nav, NavItem } 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 contentClassName: 'small-col main-content',\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 contentClassName: showTree ? 'small-col full-main' : 'small-col main-content'\n });\n }\n\n handleSelect(pageIndex) {\n this.setState({\n pageIndex\n });\n }\n\n\n mainContent() {\n const { pageIndex } = this.state;\n if (pageIndex === 0) {\n return this.renderDashboard();\n } else if (pageIndex === 1) {\n return this.renderUserManagement();\n } else if (pageIndex === 2) {\n return this.renderMessagePublish();\n } else if (pageIndex === 4) {\n return this.renderGroupMgnt();\n } else if (pageIndex === 5) {\n return this.renderOlsTerms();\n } else if (pageIndex === 7) {\n return this.renderContent(| Actions | \nName | \nIP address | \nFile types | \nID | \n
|---|---|---|---|---|
| \n\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 renderThirdPartyApp() {\n const { contentClassName } = this.state;\n return (\n \n \n \n
\n \n {this.tree()}\n {this.mainContent()}\n
\n \n
\n \n
\n );\n }\n}\n\nexport default AdminHome;","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
\n \n \n {' '}\n Devices\n
\n \n {sortedDevices.map((device, index) => (\n this.deviceClick(device)}\n role=\"button\"\n tabIndex={index === 0 ? 0 : -1}\n >\n \n {device.name}\n {selectedId === device.id && this.state.connected ?
\n \n ))}\n \n \n );\n }\n\n render() {\n const {\n devices, selected, showDeviceList,\n isNotFocused, isForcedScreenResizing, connected, watching, using, forceCursor\n } = this.state;\n\n return (\n \n \n \n
\n \n {showDeviceList && isNotFocused ? this.tree(devices, selected.id) : null}\n {}}\n fnCreate={() => {}}\n fnSubmit={this.handleSubmit}\n fnActive={this.handleActivateKlass}\n fnDerive={() => {}}\n fnUpdate={() => {}}\n preview={{\n fnDelRevisions: this.delRevision,\n fnRevisions: this.fetchRevisions,\n revisions: this.state.revisions,\n }}\n genericType=\"Dataset\"\n gridData={els}\n />\n );\n }\n\n render() {\n const { user } = this.state;\n if (!user.generic_admin?.datasets) {\n return \n ,\n domElement\n );\n});\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { orderBy } from 'lodash';\nimport { Constants, Designer } from 'chem-generic-ui';\nimport SyncBtn from 'src/apps/generic/SyncButton';\nimport LoadingModal from 'src/components/common/LoadingModal';\nimport Notifications from 'src/components/Notifications';\nimport GenericElsFetcher from 'src/fetchers/GenericElsFetcher';\nimport GenericKlassFetcher from 'src/fetchers/GenericKlassFetcher'; \nimport UsersFetcher from 'src/fetchers/UsersFetcher';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport { FunctionLocation, GenericMenu, Unauthorized } from 'src/apps/generic/GenericUtils';\nimport { notification, submit } from 'src/apps/generic/Utils';\n\nconst FN_ID = 'GenericElements';\n\nconst validateKlass = klass => /\\b[a-z]{3,5}\\b/g.test(klass);\nconst validateInput = element => {\n if (element.name === '') {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'Please input Element.',\n });\n return false;\n }\n if (element.klass_prefix === '') {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'Please input Prefix.',\n });\n return false;\n }\n if (element.label === '') {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'Please input Element Label.',\n });\n return false;\n }\n if (element.icon_name === '') {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'Please input Icon.',\n });\n return false;\n }\n return true;\n};\n\nexport default class GenericElementsAdmin extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n elements: [],\n element: {},\n show: { tab: '', modal: '' },\n revisions: [],\n repoData: [],\n user: {},\n };\n\n this.fetchElements = this.fetchElements.bind(this);\n this.handleShowState = this.handleShowState.bind(this);\n this.closeModal = this.closeModal.bind(this);\n this.handleCreateKlass = this.handleCreateKlass.bind(this);\n this.handleUpdateKlass = this.handleUpdateKlass.bind(this);\n this.handleActivateKlass = this.handleActivateKlass.bind(this);\n this.handleDeleteKlass = this.handleDeleteKlass.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.delRevision = this.delRevision.bind(this);\n this.fetchRevisions = this.fetchRevisions.bind(this);\n this.handleCreateRepo = this.handleCreateRepo.bind(this);\n this.handleShowRepo = this.handleShowRepo.bind(this);\n this.handleUploadKlass = this.handleUploadKlass.bind(this);\n this.handleDownloadKlass = this.handleDownloadKlass.bind(this);\n }\n\n componentDidMount() {\n this.fetchElements();\n UsersFetcher.fetchCurrentUser()\n .then(result => {\n if (!result.error) {\n this.setState({ user: result.user });\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n });\n }\n\n handleShowRepo() {\n LoadingActions.start();\n GenericElsFetcher.fetchRepo().then(result => {\n if (result.error) {\n notification({\n title: 'Cannot connect to Chemotion Repository',\n lvl: 'error',\n msg: result.error,\n });\n LoadingActions.stop();\n } else {\n this.setState(\n { repoData: result, show: this.getShowState('modal', 'NewRepo') },\n () => LoadingActions.stop()\n );\n }\n });\n }\n\n handleCreateRepo(element) {\n GenericElsFetcher.createRepo({ identifier: element['identifier'] }).then(\n result => {\n if (result?.status === 'success') {\n this.setState({ elements: result?.klass || this.state.elements });\n }\n notification({\n title: 'Sync from LabIMotion Hub',\n lvl: result?.status || 'error',\n msg: result?.message || 'Unknown error',\n });\n }\n );\n this.closeModal();\n }\n\n getShowState(att, val) {\n return { ...this.state.show, [att]: val };\n }\n\n handleShowState(att, val, cb = () => {}) {\n this.setState({ show: this.getShowState(att, val) }, cb);\n }\n\n closeModal(cb = () => {}) {\n this.handleShowState('modal', '', cb);\n }\n\n handleCreateKlass(_response) {\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n element.is_generic = true;\n if (!validateInput(element)) return;\n if (!validateKlass(element.name)) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'This Element is invalid, please try a different one.',\n });\n return;\n }\n const { elements } = this.state;\n const existKlass = elements.filter(el => el.name === element.name);\n if (existKlass.length > 0) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'This Element is already taken. Please choose another one.',\n });\n return;\n }\n LoadingActions.start();\n GenericElsFetcher.createElementKlass(element)\n .then(result => {\n if (result.error) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'info',\n msg: 'Created successfully',\n });\n this.fetchElements();\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleUpdateKlass(_response) {\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n const inputs = element;\n if (!validateInput(element)) return;\n LoadingActions.start();\n GenericElsFetcher.updateElementKlass(inputs)\n .then(result => {\n if (result.error) {\n notification({\n title: `Element [${inputs.name}]`,\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `Element [${inputs.name}]`,\n lvl: 'info',\n msg: 'Updated successfully',\n });\n this.fetchElements();\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n\n handleActivateKlass(e) {\n const act = e.is_active ? 'De-activate' : 'Activate';\n LoadingActions.start();\n GenericElsFetcher.deActivateKlass({\n id: e.id,\n is_active: !e.is_active,\n klass: 'ElementKlass',\n })\n .then(result => {\n if (result.error) {\n notification({\n title: `${act} Element failed`,\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `${act} Element [${result.name}] successfully`,\n lvl: 'info',\n msg: `Element is ${act.toLowerCase()} now`,\n });\n this.fetchElements();\n }\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n \n handleDeleteKlass(element) {\n if (element.is_active) {\n notification({\n title: 'Delete failed',\n lvl: 'error',\n msg: `You cannot delete an active element [${element.name}]. Please make it [inactive] first.`,\n });\n return;\n }\n const confirmed = confirm('Are you sure you want to delete this record?');\n if (confirmed) {\n GenericElsFetcher.deleteKlass({\n id: element.id,\n klass: 'ElementKlass',\n })\n .then(result => {\n if (result.error) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'info',\n msg: 'Deleted successfully',\n });\n this.fetchElements();\n }\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n }\n \n handleDownloadKlass(e) {\n LoadingActions.start();\n GenericKlassFetcher.downloadKlass(e.id, 'ElementKlass')\n .then(result => {\n LoadingActions.stop();\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleUploadKlass(_response) {\n const { elements } = this.state;\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n if (!validateInput(element)) return;\n if (!validateKlass(element.name)) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'This Element is invalid, please try a different one.',\n });\n return;\n }\n const existKlass = elements.filter(el => el.name === element.name && el.identifier !== element.identifier);\n if (existKlass.length > 0) {\n notification({\n title: `Element [${element.name}]`,\n lvl: 'error',\n msg: 'This Element is already taken. The Element name must be unique. Please choose another one.',\n });\n return;\n }\n LoadingActions.start();\n GenericElsFetcher.uploadKlass(element)\n .then(result => {\n if (result?.status === 'success') {\n this.fetchElements(); \n }\n notification({\n title: 'Upload Element',\n lvl: result?.status || 'error',\n msg: result?.message || 'Unknown error',\n });\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n fetchRevisions(_element) {\n const element = _element;\n if (element?.id) {\n GenericElsFetcher.fetchKlassRevisions(element.id, 'ElementKlass').then(\n result => {\n let curr = Object.assign({}, { ...element.properties_template });\n curr = Object.assign(\n {},\n { properties_release: curr },\n { uuid: 'current' }\n );\n const revisions = [].concat(curr, result.revisions);\n this.setState({ revisions });\n }\n );\n }\n }\n\n delRevision(params) {\n const { id, data, uuid } = params;\n LoadingActions.start();\n GenericElsFetcher.deleteKlassRevision({\n id: id,\n klass_id: data?.id,\n klass: 'ElementKlass',\n })\n .then(response => {\n if (response.error) {\n notification({\n title: 'Delete Revision',\n lvl: 'error',\n msg: response.error,\n });\n } else {\n this.fetchRevisions(data);\n notification({\n title: `Revision [${uuid}] deleted successfully`,\n lvl: 'info',\n msg: 'Deleted successfully',\n });\n }\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n fetchElements() {\n GenericElsFetcher.fetchElementKlasses().then(result => {\n if (\n typeof result !== 'undefined' &&\n typeof result.klass !== 'undefined' &&\n result?.klass?.length > 0\n )\n this.setState(\n { elements: result.klass.filter(k => k.is_generic) },\n () => LoadingActions.stop()\n );\n });\n }\n\n async handleSubmit(_element, _release = 'draft') {\n const [element, release] = [_element, _release];\n element.release = release;\n LoadingActions.start();\n const result = await submit(GenericElsFetcher, { update: Constants.GENERIC_TYPES.ELEMENT, element, release });\n if (result.isSuccess) {\n notification(result);\n this.fetchElements();\n this.setState({ element: result.response }, () => LoadingActions.stop());\n } else {\n notification(result);\n }\n LoadingActions.stop();\n }\n\n renderGrid() {\n const { elements } = this.state;\n const els = orderBy(\n elements,\n ['is_active', 'name', 'klass_prefix'],\n ['desc', 'asc', 'asc']\n );\n return (\n \n ,\n domElement\n );\n});\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { orderBy } from 'lodash';\nimport { Constants, Designer } from 'chem-generic-ui';\nimport SyncBtn from 'src/apps/generic/SyncButton';\nimport LoadingModal from 'src/components/common/LoadingModal';\nimport Notifications from 'src/components/Notifications';\nimport UsersFetcher from 'src/fetchers/UsersFetcher';\nimport GenericSgsFetcher from 'src/fetchers/GenericSgsFetcher';\nimport GenericElsFetcher from 'src/fetchers/GenericElsFetcher';\nimport GenericKlassFetcher from 'src/fetchers/GenericKlassFetcher';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport { FunctionLocation, GenericMenu, Unauthorized } from 'src/apps/generic/GenericUtils';\nimport { notification, submit } from 'src/apps/generic/Utils';\n\nconst FN_ID = 'GenericSegments';\n\nconst validateInput = element => {\n if (element.klass_element === '') {\n notification({\n title: 'Create Segment Error',\n lvl: 'error',\n msg: 'Please select Element.',\n });\n return false;\n }\n if (element.label === '') {\n notification({\n title: 'Create Segment Error',\n lvl: 'error',\n msg: 'Please input Segment Label.',\n });\n return false;\n }\n return true;\n};\n\nexport default class GenericSegmentsAdmin extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n elements: [],\n klasses: [],\n show: { tab: '', modal: '' },\n propTabKey: 1,\n revisions: [],\n repoData: [],\n user: {},\n };\n\n this.fetchElements = this.fetchElements.bind(this);\n this.handleShowState = this.handleShowState.bind(this);\n this.closeModal = this.closeModal.bind(this);\n this.handleCreateKlass = this.handleCreateKlass.bind(this);\n this.handleUpdateKlass = this.handleUpdateKlass.bind(this);\n this.handleActivateKlass = this.handleActivateKlass.bind(this);\n this.handleDeleteKlass = this.handleDeleteKlass.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.delRevision = this.delRevision.bind(this);\n this.fetchRevisions = this.fetchRevisions.bind(this);\n this.handleCreateRepo = this.handleCreateRepo.bind(this);\n this.handleShowRepo = this.handleShowRepo.bind(this);\n this.fetchElementKlasses = this.fetchElementKlasses.bind(this);\n this.handleUploadKlass = this.handleUploadKlass.bind(this);\n this.handleDownloadKlass = this.handleDownloadKlass.bind(this);\n }\n\n componentDidMount() {\n const fetchData = async () => {\n LoadingActions.start();\n try {\n const [segmentResult, klassResult, userResult] = await Promise.all([\n GenericSgsFetcher.listSegmentKlass(),\n GenericElsFetcher.fetchElementKlasses(),\n UsersFetcher.fetchCurrentUser()\n ]);\n\n const klasses = klassResult.error ? [] : klassResult?.klass?.sort((a, b) => a.place - b.place) || [];\n this.setState({\n elements: segmentResult.error ? [] : segmentResult.klass,\n klasses,\n user: userResult.error ? {} : userResult.user\n });\n } catch (error) {\n console.log(error);\n } finally {\n LoadingActions.stop();\n }\n };\n\n fetchData();\n }\n\n getShowState(att, val) {\n return { ...this.state.show, [att]: val };\n }\n\n fetchRevisions(_element) {\n const element = _element;\n if (element?.id) {\n LoadingActions.start();\n GenericSgsFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')\n .then(result => {\n let curr = Object.assign({}, { ...element.properties_template });\n curr = Object.assign(\n {},\n { properties_release: curr },\n { uuid: 'current' }\n );\n const revisions = [].concat(curr, result.revisions);\n this.setState({ revisions });\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n }\n\n delRevision(params) {\n const { id, data, uuid } = params;\n LoadingActions.start();\n GenericSgsFetcher.deleteKlassRevision({\n id: id,\n klass_id: data?.id,\n klass: 'SegmentKlass',\n })\n .then(response => {\n if (response.error) {\n notification({\n title: 'Delete Revision',\n lvl: 'error',\n msg: response.error,\n });\n } else {\n this.fetchRevisions(data);\n notification({\n title: `Revision [${uuid}] deleted successfully`,\n lvl: 'info',\n msg: 'Deleted successfully',\n });\n }\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleShowState(att, val, cb = () => {}) {\n this.setState({ show: this.getShowState(att, val) }, cb);\n }\n closeModal(cb = () => {}) {\n this.handleShowState('modal', '', cb);\n }\n\n handleShowRepo() {\n LoadingActions.start();\n GenericSgsFetcher.fetchRepo().then(result => {\n if (result.error) {\n notification({\n title: 'Cannot connect to Chemotion Repository',\n lvl: 'error',\n msg: result.error,\n });\n LoadingActions.stop();\n } else {\n this.setState(\n { repoData: result, show: this.getShowState('modal', 'NewRepo') },\n () => LoadingActions.stop()\n );\n }\n });\n }\n\n handleCreateRepo(element) {\n GenericSgsFetcher.createRepo({ identifier: element['identifier'] }).then(\n result => {\n if (result?.status === 'success') {\n this.setState({ elements: result?.klass || this.state.elements });\n }\n notification({\n title: 'Sync from LabIMotion Hub',\n lvl: result?.status || 'error',\n msg: result?.message || 'Unknown error',\n });\n }\n );\n this.closeModal(this.fetchElements);\n }\n\n handleCreateKlass(_response) {\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n if (!validateInput(element)) return;\n GenericSgsFetcher.createKlass(element)\n .then(result => {\n if (result.error) {\n notification({\n title: 'Create Segment fail',\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: 'Create Segment successfully',\n lvl: 'info',\n msg: 'Created successfully',\n });\n this.fetchElements();\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleUpdateKlass(_response) {\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n const inputs = element;\n if (!validateInput(inputs)) return;\n GenericSgsFetcher.updateSegmentKlass(inputs)\n .then(result => {\n if (result.error) {\n notification({\n title: 'Update Segment fail',\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: 'Update Segment successfully',\n lvl: 'info',\n msg: 'Updated successfully',\n });\n this.fetchElements();\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleActivateKlass(e) {\n const act = e.is_active ? 'De-activate' : 'Activate';\n GenericSgsFetcher.deActivateKlass({\n id: e.id,\n is_active: !e.is_active,\n klass: 'SegmentKlass',\n })\n .then(result => {\n if (result.error) {\n notification({\n title: `${act} Segment fail`,\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `${act} Segment successfully`,\n lvl: 'info',\n msg: `Segment is ${act.toLowerCase()} now`,\n });\n this.fetchElements();\n }\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleDeleteKlass(element) {\n if (element.is_active) {\n notification({\n title: 'Delete Segment fail',\n lvl: 'error',\n msg: `You cannot delete an active segment [${element.label}]. Please make it [inactive] first.`,\n });\n return;\n }\n const confirmed = confirm('Are you sure you want to delete this record?');\n if (confirmed) {\n GenericSgsFetcher.deleteKlass({\n id: element.id,\n klass: 'SegmentKlass',\n })\n .then(result => {\n if (result.error) {\n notification({\n title: 'Delete Segment fail',\n lvl: 'error',\n msg: result.error,\n });\n } else {\n notification({\n title: `Segment [${element.label}]`,\n lvl: 'info',\n msg: 'Deleted successfully',\n });\n this.fetchElements();\n this.handleShowState('tab', '');\n }\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n }\n\n handleDownloadKlass(e) {\n LoadingActions.start();\n GenericKlassFetcher.downloadKlass(e.id,'SegmentKlass')\n .then(result => {\n LoadingActions.stop();\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n handleUploadKlass(_response) {\n const { elements } = this.state;\n const { element, notify } = _response;\n if (!notify.isSuccess) {\n notification(notify);\n return;\n }\n if (!validateInput(element)) return;\n LoadingActions.start();\n GenericSgsFetcher.uploadKlass(element)\n .then(result => {\n if (result?.status === 'success') {\n this.fetchElements();\n }\n notification({\n title: 'Upload Segment',\n lvl: result?.status || 'error',\n msg: result?.message || 'Unknown error',\n });\n })\n .catch(errorMessage => {\n console.log(errorMessage);\n })\n .finally(() => {\n LoadingActions.stop();\n });\n }\n\n fetchElements() {\n GenericSgsFetcher.listSegmentKlass().then(result => {\n this.setState({ elements: result.klass }, () => LoadingActions.stop());\n });\n }\n\n fetchElementKlasses() {\n GenericElsFetcher.fetchElementKlasses().then(result => {\n const klasses = result?.klass?.sort((a, b) => a.place - b.place) || [];\n this.setState({ klasses });\n });\n }\n\n async handleSubmit(_element, _release = 'draft') {\n const [element, release] = [_element, _release];\n element.release = release;\n LoadingActions.start();\n const result = await submit(GenericSgsFetcher, { update: Constants.GENERIC_TYPES.SEGMENT, element, release });\n if (result.isSuccess) {\n notification(result);\n this.fetchElements();\n this.setState({ element: result.response }, () => LoadingActions.stop());\n } else {\n notification(result);\n }\n LoadingActions.stop();\n }\n\n renderGrid() {\n const { elements } = this.state;\n const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);\n\n return (\n \n ,\n domElement\n );\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Navbar } from 'react-bootstrap';\n\nconst contentComponents = {\n GenericElements: 'Generic Elements Designer',\n GenericSegments: 'Generic Segments Designer',\n GenericDatasets: 'Generic Datasets Designer',\n};\n\nexport function FunctionLocation({ name }) {\n const text = contentComponents[name];\n return (\n \n You're in the \n {text}\n \n );\n}\n\nFunctionLocation.propTypes = { name: PropTypes.string.isRequired };\n\nconst createMenu = (text, type) => {\n let menu = (\n \n {contentComponents[type]}\n \n );\n menu = text === type ? {menu} : menu;\n return {menu} ;\n};\n\nexport function GenericMenu({ userName, text }) {\n return (\n \n \n \n Back to MyDB\n \n \n \n {['GenericElements', 'GenericSegments', 'GenericDatasets'].map((e) => createMenu(text, e))}\n {`Login as: ${userName}`} \n \n \n );\n}\n\nGenericMenu.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };\nGenericMenu.defaultProps = { userName: 'unknown' };\n\nexport function Unauthorized({ userName, text }) {\n return (\n \n Fetch public templates from Hub\n \n )}\n >\n \n \n {' '}\n Fetch from LabIMotion Hub\n \n \n \n Type (Chemical Methods Ontology) has been changed.
\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']\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 { Jumbotron } from 'react-bootstrap';\nimport ReactMarkdown from 'react-markdown';\n\nfunction Message(props) {\n const { post } = props;\n if (post != null && post !== undefined) {\n return (\n\n \n );\n }\n return null;\n}\n\nclass WelcomeMessage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n post: null\n };\n }\n\n componentDidMount() {\n fetch(`welcome-message.md?${Date.now()}`) // Prevent caching\n .then((res) => {\n if (res.ok) {\n return res.text();\n }\n return null;\n }).then((post) => this.setState((state) => ({ ...state, post })))\n .catch((errorMessage) => { console.error(errorMessage); });\n }\n\n render() {\n const { post } = this.state;\n return (\n \n delete this molecule name
\n \n );\n\n return (\n \n \n \n \n \n );\n }\n\n\n renderEditButton(nameObj) {\n return (\n Edit molecule name}>\n \n \n );\n }\n\n\n renderModal() {\n const { show, isNew, molName } = this.state;\n return (\n \n \n {isNew ? 'Create Molecule Name' : 'Edit Molecule Name'} \n \n \n \n \n \n {isNew ? 'Create Molecule Name' : 'Edit Molecule Name'}\n \n \n \n \n \n \n \n \n\n \n );\n }\n\n render() {\n const { molNames } = this.state;\n const componentEditor = (\n \n # \n Action \n Add new molecule name}>\n \n \n \n Attr. \n Moledule Name \n \n \n );\n\n const tbodyContent = molNames.map((na, i) => (\n \n {i + 1} \n \n {this.renderDeleteButton(na)}\n \n {this.renderEditButton(na)}\n \n {na.description} \n {na.name} \n \n ));\n\n return (\n \n \n \n Home\n \n \n \n \n Molecule Moderator\n \n \n \n);\n\nconst pageNotify = (title, level, message) => {\n const notification = {\n title,\n message,\n level,\n dismissible: 'button',\n autoDismiss: 5,\n position: 'tc',\n uid: 'moderator'\n };\n NotificationActions.add(notification);\n};\n\nclass MoleculeModerator extends Component {\n constructor(props) {\n super(props);\n this.state = {\n molecule: null,\n showStructureEditor: false,\n msg: { show: false, level: null, message: null },\n };\n\n this.handleEditor = this.handleEditor.bind(this);\n this.handleSearch = this.handleSearch.bind(this);\n this.handleEditorSave = this.handleEditorSave.bind(this);\n this.onSave = this.onSave.bind(this);\n }\n\n onSave() {\n LoadingActions.start();\n let { molecule } = this.state;\n const { msg } = this.state;\n MoleculesFetcher.updateMolfileSVG(molecule).then((json) => {\n if (json.msg.level !== 'error') {\n ({ molecule } = json);\n }\n msg.show = true;\n msg.level = json.msg.level;\n msg.message = json.msg.message;\n this.setState({ molecule, msg, showStructureEditor: false });\n LoadingActions.stop();\n pageNotify('Save', msg.level, msg.message);\n });\n }\n\n handleEditor(show) {\n this.setState({ showStructureEditor: show });\n }\n\n handleSearch() {\n LoadingActions.start();\n const { msg } = this.state;\n MoleculesFetcher.getByInChiKey(this.refInChiKey.value.trim())\n .then((result) => {\n msg.show = true;\n msg.level = result ? 'info' : 'error';\n msg.message = result ? 'Record found!' : 'No record found!';\n this.setState({ msg, molecule: result.molecule, showStructureEditor: false });\n LoadingActions.stop();\n pageNotify('Search', msg.level, msg.message);\n }).catch((errorMessage) => {\n msg.show = true;\n msg.level = 'error';\n msg.message = errorMessage;\n this.setState({ msg });\n LoadingActions.stop();\n pageNotify('Search', msg.level, msg.message);\n });\n }\n\n handleEditorSave(molfile, svg_file = null, config = null) {\n const { molecule } = this.state;\n molecule.molfile = molfile;\n const smiles = config ? config.smiles : null;\n const isChemdraw = !!smiles;\n MoleculesFetcher.renewSVGFile(molecule.id, svg_file, isChemdraw).then((json) => {\n molecule.molecule_svg_file = json.svg_path;\n this.setState({ molecule, showStructureEditor: false });\n });\n }\n\n render() {\n const formSearch = (\n \n );\n\n const pageComponent = this.state.molecule ?\n ( { this.handleLabelChange(e, node) }}\n />\n )\n }\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 actions(node) {\n if (node.id == -1) {\n const { isChange } = this.state;\n return (\n \n this.doSync(node, 'CreateSync')}\n >\n \n \n\n {this.addSubcollectionButton(node)}\n\n \n \n \n \n )\n }\n }\n\n renderSync(node) {\n let syncOut = node.sync_collections_users;\n let users = [];\n\n if (syncOut) {\n users = syncOut.map((collection, ind) => {\n return (\n {this.addSubcollection(node);}}\n onMouseDown={(e)=>{e.stopPropagation();}}\n >\n \n \n )\n }\n\n addSubcollectionButton(node) {\n return (\n \n \n \n )\n }\n\n addSubcollection(node) {\n if (node.children) {\n node.children.push({\n id: Math.random(),\n label: 'New Collection',\n isNew: true\n });\n } else {\n node.children = [{\n id: Math.random(),\n label: 'New Collection',\n isNew: true\n }];\n }\n }\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 } else if (parent.label == 'My Collections') {\n parent.children.push({});\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 component: \"\",\n action: null,\n collection: {},\n selectUsers: true,\n }\n });\n }\n\n renderNode(node) {\n if (!Object.keys(node).length == 0) {\n return (\n { this.handleLabelChange(e, node) }}\n />\n )\n }\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 actions(node) {\n if (node.label == \"My Shared Collections\") {\n return (\n \n \n \n \n )\n }\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 } else if (parent.label == 'My Shared Collections') {\n parent.children.push({});\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 component: \"\",\n action: null\n }\n });\n }\n\n renderNode(node) {\n if (!Object.keys(node).length == 0) {\n if (node.is_locked) {\n return (\n \n {this.label(node)}\n {this.actions(node)}\n \n )\n } else {\n return (\n \n {this.label(node)}\n {this.actions(node)}\n \n );\n\n }\n\n }\n }\n\n\n\n render() {\n let actNode = this.state.active\n let trees = () => this.state.tree.children.map((e, i) => {\n return (\n \n delete collection:
{node.label} ?
\n\n \n \n \n \n );\n\n if (!node.is_locked && node.label !== 'Shared with me Collections') {\n if (typeof (node.shared_to) === 'undefined' || !node.shared_to) {\n return (\n \n \n \n \n \n )\n }\n }\n return (\n \n )\n }\n\n renderNode(node) {\n if (!Object.keys(node).length == 0) {\n return (\n \n {this.label(node)}\n {this.actions(node)}\n \n );\n }\n return (\n \n )\n }\n\n render() {\n const trees = () => this.state.tree.children.map((e, i) => {\n return (\n \n delete collection:
{node.label} ?
\n\n \n \n \n \n );\n if (!node.is_locked && node.label !== 'Synchronized with me Collections') {\n if (typeof (node.user) !== 'undefined' && node.user.type === 'Person') {\n return (\n \n \n \n \n \n )\n }\n }\n return (\n \n )\n }\n\n renderNode(node) {\n if (!Object.keys(node).length == 0) {\n return (\n \n {this.label(node)}\n {this.actions(node)}\n \n );\n }\n return (\n \n )\n }\n\n render() {\n const trees = () => this.state.tree.children.map((e, i) => {\n return (\n \n \n );\n });\n\n const hiddenCells = hidden.map((cell, index) => {\n const defTitle = segmentTabs.includes(cell) ? cell : capitalizeWords(cell);\n return (\n \n \n );\n });\n\n return (\n \n \n
\n );\n }\n}\n\nTabLayoutContainer.propTypes = {\n tabTitles: PropTypes.object,\n};\n\nTabLayoutContainer.defaultProps = {\n tabTitles: {},\n};\n","import { getElementSegments } from './ElementUtils';\nimport Immutable from 'immutable';\n\nconst getVisibilityList = (layout, availableTabs, addInventoryTab) => {\n if (typeof layout === 'undefined') {\n // eslint-disable-next-line no-param-reassign\n layout = { properties: 1, analyses: 2, attachments: 3 };\n }\n const layoutKeys = Object.keys(layout);\n\n if (addInventoryTab && layout) {\n // eslint-disable-next-line no-param-reassign\n layout.inventory = layout.inventory || layoutKeys.length + 1;\n }\n const enabled = availableTabs.filter(val => layoutKeys.includes(val));\n const leftover = availableTabs.filter(val => !layoutKeys.includes(val));\n const visible = [];\n let hidden = [];\n\n enabled.forEach((key) => {\n const order = layout[key];\n if (order < 0) { hidden[Math.abs(order)] = key; }\n if (order > 0) { visible[order] = key; }\n });\n\n leftover.forEach(key => hidden.push(key));\n\n let first = null;\n if (visible.length === 0) {\n first = hidden.filter(n => n !== undefined)[0];\n if (first) {\n visible.push(first);\n }\n }\n hidden = hidden.filter(n => n);\n if (hidden.length === 0) {\n hidden.push('hidden');\n }\n return {\n visible: Immutable.List(visible.filter(n => n !== undefined)),\n hidden: Immutable.List(hidden.filter(n => (n !== undefined && n !== first)))\n };\n};\n\nconst getArrayFromLayout = (layout, element, addInventoryTab, availableTabs = null ) => {\n if (typeof layout === 'undefined') {\n // eslint-disable-next-line no-param-reassign\n layout = { properties: 1, analyses: 2, attachments: 3 };\n }\n const layoutKeys = Object.keys(layout);\n let segmentAvailableTabs = availableTabs ? [] : getElementSegments(element, layoutKeys);\n availableTabs = [...availableTabs, ...segmentAvailableTabs];\n return getVisibilityList(layout, availableTabs, addInventoryTab);\n};\n\nconst filterTabLayout = (layoutState) => {\n const { visible, hidden } = layoutState;\n const layout = {};\n\n visible.forEach((value, index) => {\n layout[value] = (index + 1);\n });\n hidden.filter(val => val !== 'hidden').forEach((value, index) => {\n layout[value] = (-index - 1);\n });\n return layout;\n};\n\nexport { getArrayFromLayout, filterTabLayout };\n","import React from 'react';\nimport Tree from 'react-ui-tree';\nimport {\n Button, FormControl, Modal, Col, ButtonGroup,\n} from 'react-bootstrap';\nimport _ from 'lodash';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\nimport TabLayoutContainer from 'src/apps/mydb/elements/tabLayout/TabLayoutContainer';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport UserActions from 'src/stores/alt/actions/UserActions';\nimport { filterTabLayout, getArrayFromLayout } from 'src/utilities/CollectionTabsHelper';\n\nconst elements = [\n { name: 'sample', label: 'Sample' },\n { name: 'reaction', label: 'Reaction' },\n { name: 'wellplate', label: 'Wellplate' },\n { name: 'screen', label: 'Screen' },\n { name: 'research_plan', label: 'Research Plan' }\n];\n\nexport default class CollectionTabs extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n profileData: {},\n showModal: false,\n currentCollection: {},\n layouts: [],\n tree: {\n label: 'My Collections',\n id: -1,\n children: [{}]\n },\n };\n this.tabRef = [];\n\n this.onStoreChange = this.onStoreChange.bind(this);\n this.onClickCollection = this.onClickCollection.bind(this);\n this.clickedOnBack = this.clickedOnBack.bind(this);\n this.onUserStoreChange = this.onUserStoreChange.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onStoreChange);\n UserStore.listen(this.onUserStoreChange);\n UserActions.fetchProfile();\n CollectionActions.fetchUnsharedCollectionRoots();\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onStoreChange);\n UserStore.unlisten(this.onUserStoreChange);\n }\n\n onStoreChange(state) {\n const children = state.unsharedRoots.length > 0 ? state.unsharedRoots : [{}];\n\n this.setState({\n tree: {\n label: 'My Collections',\n id: -1,\n children\n }\n });\n }\n\n onUserStoreChange(state) {\n const data = (state.profile && state.profile.data) || {};\n if (!data) {\n UserActions.fetchProfile();\n }\n this.setState({ profileData: data });\n }\n\n onClickCollection(node) {\n const { addInventoryTab } = this.props;\n const { layouts, profileData } = this.state;\n this.setState({ currentCollection: node });\n this.handleModalOptions(this.state.showModal);\n elements.forEach((element, index) => {\n let layout = {};\n if (_.isEmpty(node.tabs_segment[element.name])) {\n layout = (profileData && profileData[`layout_detail_${element.name}`]) || {};\n } else {\n layout = node.tabs_segment[element.name];\n }\n const { visible, hidden } = getArrayFromLayout(layout, element.name, addInventoryTab);\n layout = { visible, hidden };\n layouts[index] = layout;\n });\n\n this.setState({ layouts });\n }\n\n handleChange(tree) {\n this.setState({\n tree\n });\n }\n\n handleModalOptions(showModal) {\n this.setState({ showModal: !showModal });\n }\n\n handleSave(showModal) {\n const cCol = this.state.currentCollection;\n let layoutSegments = {};\n elements.map((_e, index) => {\n const layout = filterTabLayout(this.tabRef[index].state);\n layoutSegments = { ...layoutSegments, [elements[index].name]: layout };\n });\n const params = { layoutSegments, currentCollectionId: cCol.id };\n CollectionActions.createTabsSegment(params);\n this.setState({ showModal: !showModal });\n if (cCol.ancestry) {\n this.state.tree.children.find((c) => c.id === parseInt(cCol.ancestry)).children.find((ch) => ch.id === cCol.id).tabs_segment = layoutSegments;\n } else {\n this.state.tree.children.find((c) => c.id === cCol.id).tabs_segment = layoutSegments;\n }\n }\n\n clickedOnBack() {\n this.handleModalOptions(this.state.showModal);\n }\n\n label(node) {\n if (node.label === 'My Collections') {\n return (\n \n \n \n {this.label(node)}\n \n \n \n \n \n \n \n \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
\n })\n return (\n \n {tipUsers.map(u => u)}\n \n )\n}\n\nUserInfos.propTypes = {\n users: PropTypes.array.isRequired,\n}\n\nexport default UserInfos;\n","import React from 'react';\nimport { ButtonGroup, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';\n\nclass GatePushBtn extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n transmitting(e, collection_id, method = 'GET') {\n if (this.ovltg) {\n this.ovltg.hide();\n }\n this.setState(() => ({}));\n // eslint-disable-next-line camelcase\n return fetch(`/api/v1/gate/transmitting/${collection_id}`, {\n credentials: 'same-origin',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n method,\n })\n .then(resp =>\n resp.json().then(data => ({\n status: resp.status,\n ok: resp.ok,\n error: data && data.error,\n target: data && data.target,\n }))\n )\n .then(response => {\n const newState = { status: 'redirect', target: response.target };\n if (response.status === 404) {\n newState.message =\n 'The access token is not set. Retrieve one now on chemotion.net?';\n } else if (response.status === 401) {\n if (response.error && response.error.match(/expired/)) {\n newState.message =\n 'The access token has expired. Renew it now on chemotion.net?';\n } else {\n newState.message = `The access token is misconfigured ('${response.error}'). Renew it now on chemotion.net?`;\n }\n } else if (!response.ok) {\n newState.status = 'unavailable';\n } else {\n newState.status = 'confirm';\n }\n this.setState(() => newState);\n });\n }\n\n tooltipContent() {\n const { status, message, target } = this.state;\n let content;\n if (status === 'confirm') {\n content = (\n {content} ;\n }\n\n render() {\n return (\n \n {\n this.ovltg = ov;\n }}\n >\n this.transmitting(e, this.props.collection_id)}\n >\n \n \n \n \n );\n }\n}\n\nexport default GatePushBtn;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Aviator from 'aviator';\nimport { Glyphicon, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\nimport UserInfos from 'src/apps/mydb/collections/UserInfos';\nimport GatePushBtn from 'src/components/common/GatePushBtn';\nimport { collectionShow, scollectionShow } from 'src/utilities/routesUtils';\n\nexport default class CollectionSubtree extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isRemote: props.isRemote,\n label: props.root.label,\n inventoryPrefix: props.root.inventory_prefix,\n selected: false,\n root: props.root,\n visible: false\n }\n\n this.onChange = this.onChange.bind(this)\n this.toggleExpansion = this.toggleExpansion.bind(this)\n this.handleClick = this.handleClick.bind(this)\n }\n\n\n componentDidMount() {\n UIStore.listen(this.onChange);\n }\n\n // eslint-disable-next-line camelcase\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n root: nextProps.root,\n label: nextProps.root.label,\n inventoryPrefix: nextProps.root.inventory_prefix\n });\n }\n\n componentWillUnmount() {\n UIStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n if (state.currentCollection) {\n const visible = this.isVisible(this.state.root, state)\n const { root } = this.state;\n\n const selectedCol = (\n state.currentCollection.id == root.id &&\n state.currentCollection.is_synchronized == root.is_synchronized\n ) || (\n state.currentCollection.id == root.id &&\n state.currentCollection.isRemote == root.isRemote\n )\n\n if (selectedCol) {\n this.setState({\n selected: true,\n visible\n });\n } else {\n this.setState({\n selected: false,\n visible\n });\n }\n }\n }\n\n isVisible(node, uiState) {\n if (node.descendant_ids) {\n let currentCollectionId = parseInt(uiState.currentCollection.id)\n if (node.descendant_ids.indexOf(currentCollectionId) > -1) return true\n }\n\n let { visibleRootsIds } = CollectionStore.getState();\n return (visibleRootsIds.indexOf(node.id) > -1)\n }\n\n selectedCssClass() {\n return (this.state.selected) ? \"selected\" : \"\";\n }\n\n children() {\n return this.state.root.children || [];\n }\n\n hasChildren() {\n return this.children().length > 0;\n }\n\n subtrees() {\n const children = this.children();\n\n if (this.hasChildren()) {\n return children.map((child, index) => {\n return (\n \n \n );\n });\n }\n return null;\n }\n\n expandButton() {\n let icon = this.state.visible ? 'minus' : 'plus';\n\n if (this.hasChildren()) {\n return (\n \n \n \n : null\n )\n }\n\n\n render() {\n const { fakeRoot } = this.props;\n const { label, root, inventoryPrefix } = this.state;\n let { visible } = this.state;\n\n let style;\n if (!visible) {\n style = {\n display: 'none',\n marginBottom: 0\n };\n }\n const gated = root && root.is_locked && label == 'chemotion-repository.net' ?\n Toggle own collections ;\n\nexport default class CollectionTree extends React.Component {\n constructor(props) {\n super(props);\n\n const collecState = CollectionStore.getState();\n\n this.state = {\n unsharedRoots: collecState.unsharedRoots,\n sharedRoots: collecState.sharedRoots,\n remoteRoots: collecState.remoteRoots,\n lockedRoots: collecState.lockedRoots,\n syncInRoots: collecState.syncInRoots,\n ownCollectionVisible: true,\n sharedWithCollectionVisible: false,\n sharedToCollectionVisible: false,\n syncCollectionVisible: false,\n visible: false,\n root: {},\n selected: false,\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onChange);\n CollectionActions.fetchLockedCollectionRoots();\n CollectionActions.fetchUnsharedCollectionRoots();\n CollectionActions.fetchSharedCollectionRoots();\n CollectionActions.fetchRemoteCollectionRoots();\n CollectionActions.fetchSyncInCollectionRoots();\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onChange);\n }\n\n handleSectionToggle = (visible) => {\n this.setState((prevState) => ({\n [visible]: !prevState[visible],\n }));\n };\n\n onChange(state) {\n this.setState(state);\n }\n\n lockedSubtrees() {\n const roots = this.state.lockedRoots;\n\n return this.subtrees(roots, null, false);\n }\n\n removeOrphanRoots(roots) {\n let newRoots = []\n roots.forEach((root) => {\n if (root.children.length > 0) newRoots.push(root)\n })\n\n return newRoots;\n }\n\n unsharedSubtrees() {\n let roots = this.state.unsharedRoots;\n roots = roots.filter(function (item) { return !item.isNew })\n\n return this.subtrees(roots, null, false);\n }\n\n sharedSubtrees() {\n let { sharedRoots, sharedToCollectionVisible } = this.state\n sharedRoots = this.removeOrphanRoots(sharedRoots)\n\n let labelledRoots = sharedRoots.map(e => {\n return update(e, {\n label: {\n $set:\n {this.labelRoot('shared_to', e)}\n }\n })\n })\n\n let subTreeLabels = (\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 return update(e, {\n label: {\n $set:\n \n {this.labelRoot('shared_by', e)}\n {' '}\n {this.labelRoot('shared_to', e)}\n \n }\n })\n })\n\n let subTreeLabels = (\n { this.canvas = ref; }}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n />\n \n \n \n
\n );\n }\n}\n\nexport default CnC;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport CnC from 'src/apps/commandAndControl/CnC';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('CnC');\n if (domElement) { ReactDOM.render(\n \n \n\n \n\n \n {this.dispatchView()}\n \n \n \n Profile successfully created! \n \n\n \n \n \n \n\n \n \n Do you really want to delete this profile? \n \n \n \n \n \n \n
\n )\n }\n\n}\n\nexport default ConverterAdmin;\n\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('ConverterAdmin');\n if (domElement) ReactDOM.render(\n {this.state.status == \"list\" && this.state.client !== null &&\n
\n \n \n \n
\n }\n\n \n {this.state.status == 'list' && 'Profiles List' }\n {['upload', 'create'].includes(this.state.status) && 'Create Profile'}\n {this.state.status == 'update' && 'Edit Profile'}\n {this.state.status == 'import' && 'Import Profile'}\n
\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 PropTypes from 'prop-types';\nimport { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport { RepoNewModal, Constants } from 'chem-generic-ui';\n\nfunction SyncBtn(props) {\n const {\n data,\n fnCreate,\n fnModalClose,\n fnModalOpen,\n genericType,\n klasses,\n showModal,\n } = props;\n return (\n <>\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']\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 { Jumbotron } from 'react-bootstrap';\nimport ReactMarkdown from 'react-markdown';\n\nfunction Message(props) {\n const { post } = props;\n if (post != null && post !== undefined) {\n return (\n
\n \n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default Home;\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 \n \n
\n \n
\n );\n\n const tbodyHeader = (\n \n \n {componentEditor}\n
\n );\n }\n}\n\nMoleculeModeratorComponent.propTypes = {\n molecule: PropTypes.object,\n showStructureEditor: PropTypes.bool.isRequired,\n handleEditorSave: PropTypes.func.isRequired,\n handleEditor: PropTypes.func.isRequired,\n onSave: PropTypes.func.isRequired,\n};\n","import React, { Component } from 'react';\nimport { Navbar, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';\n\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport LoadingModal from 'src/components/common/LoadingModal';\nimport MoleculeModeratorComponent from 'src/apps/moleculeModerator/MoleculeModeratorComponent';\nimport MoleculesFetcher from 'src/fetchers/MoleculesFetcher';\nimport NotificationActions from 'src/stores/alt/actions/NotificationActions';\nimport Notifications from 'src/components/Notifications';\n\nconst pageNav = (\n \n \n \n InChiKey: {this.props.molecule.inchikey}\n (Chemotion molecule id: {this.props.molecule.id})\n
\n Canonical Smiles: {this.props.molecule.cano_smiles}\n \n \n \n
\n \n
\n
\n
\n \n \n \n {tbodyHeader}\n \n {tbodyContent}\n \n
\n \n
\n {this.renderModal()}\n \n \n
\n \n Canonical Smiles: {this.props.molecule.cano_smiles}\n
\n
\n
\n \n
\n \n \n {pageNav}\n
\n );\n }\n}\n\nexport default MoleculeModerator;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport MoleculeModerator from 'src/apps/moleculeModerator/MoleculeModerator';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('MoleculeModerator');\n if (domElement) ReactDOM.render(\n {formSearch}\n
\n
\n {pageComponent}\n \n
\n {isChange && }\n {this.addCollectionButton(node)}\n
\n )\n } else {\n return (\n \n \n \n \n \n \n\n\n
\n )\n })\n }\n return (\n {users.map(u => u)}
\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 \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, FormControl, 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 label: 'My Shared Collections',\n id: -1,\n children: [{}]\n },\n modalProps: {\n show: false,\n title: \"\",\n component: \"\",\n action: null\n }\n }\n\n this.onStoreChange = this.onStoreChange.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 let children = state.sharedRoots.length > 0 ? state.sharedRoots : [{}];\n\n this.setState({\n tree: {\n label: 'My Shared Collections',\n children: children\n }\n });\n }\n\n handleChange(tree) {\n let oldTree = this.state.tree\n let children = oldTree.children\n children.map((child, i) => {\n if ('label' in tree && typeof (tree.label) == 'string' && tree.label == child.label) {\n children[i] = tree\n return\n }\n });\n oldTree.children = children\n this.setState({\n tree: oldTree\n });\n\n }\n\n isActive(node) {\n return node === this.state.active ? \"node is-active\" : \"node\";\n }\n\n hasChildren(node) {\n return node.children && node.children.length > 0\n }\n\n label(node) {\n if (node.label == \"My Shared Collections\") {\n return (\n \n \n
\n )\n } else if (!node.is_locked) {\n return (\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, FormControl, 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 label: 'Shared with me Collections',\n id: -1,\n children: [{}]\n }\n }\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleClick = this.handleClick.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.length > 0 ? state.remoteRoots : [{}];\n\n children.map((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 return child;\n });\n\n this.setState({\n tree: {\n label: 'Shared with me Collections',\n children\n }\n });\n }\n\n handleClick() {\n this.setState({ show: !this.state.show });\n }\n\n label(node) {\n if(node.label == \"Shared with me Collections\") {\n return (\n {node.label} ?
\n
\n
\n )\n }\n}\n","import React from 'react';\nimport Tree from 'react-ui-tree';\nimport { Button, ButtonGroup, FormControl, 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 label: 'Synchronized with me Collections',\n id: -1,\n children: [{}],\n }\n }\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleClick = this.handleClick.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.length > 0 ? state.syncInRoots : [{}];\n children.map((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 return child;\n });\n\n this.setState({\n tree: {\n label: 'Synchronized with me Collections',\n children\n }\n });\n }\n\n handleClick() {\n this.setState({ show: !this.state.show });\n }\n\n label(node) {\n if (node.root) {\n return (\n {node.label} ?
\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\nexport default capitalizeWords;\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};\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, component) {\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 = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan','cell_line'];\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 \n
\n ) : (\n {title === 'hidden' ? '-' : title}
\n\n \n {isHidden ? '\\u00A0' : ''}\n \n
\n );\n\n content = isCollectionTab ? (\n \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 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 {title === 'hidden' ? '-' : title}
\n\n this.handleModalOptions(showModal)}>\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\nconst CollectionManagement = () => {\n const tabContents = [\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 {tabContents.map(e => e)}\n \n
\n );\n};\n\nexport default CollectionManagement;\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 let tipUsers = users.map((user, ind) => {\n return \n Mirror Sample and Reaction data to your chemotion.net account ?\n \n \n this.transmitting(e, this.props.collection_id, 'POST')\n }\n >\n Yes\n \n this.ovltg.hide()}\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\n moment\n \n this.ovltg.hide()}\n >\n OK\n \n \n
\n );\n } else if (status === 'redirect') {\n content = (\n \n {message} \n \n {\n this.ovltg.hide();\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 this.ovltg.hide()}\n >\n No\n \n \n
\n );\n } else if (this.ovlg) {\n this.ovltg.hide();\n }\n return \n this.handleTakeOwnership(e)} />\n
\n )\n }\n return ();\n }\n\n handleTakeOwnership() {\n const isSync = !!this.state.root.sharer;\n CollectionActions.takeOwnership({ id: this.state.root.id, isSync });\n }\n\n handleClick(e) {\n const { fakeRoot } = this.props;\n if (fakeRoot) {\n e.stopPropagation();\n return;\n }\n\n const { root } = this.state;\n let { visible } = this.state;\n const uiState = UIStore.getState();\n\n visible = visible || this.isVisible(root, uiState);\n this.setState({ visible });\n let collectionID = 'all';\n if (root.label === 'All' && root.is_locked) {\n Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`, { silent: true });\n collectionShow({ params: { collectionID } });\n return;\n }\n const url = (this.props.root.sharer)\n ? `/scollection/${root.id}/${this.urlForCurrentElement()}`\n : `/collection/${root.id}/${this.urlForCurrentElement()}`;\n Aviator.navigate(url, { silent: true });\n collectionID = this.state.root.id;\n const collShow = this.props.root.sharer ? scollectionShow : collectionShow;\n collShow({ params: { collectionID } });\n }\n\n urlForCurrentElement() {\n const { currentElement } = ElementStore.getState();\n if (currentElement) {\n if (currentElement.isNew) {\n return `${currentElement.type}/new`;\n }\n return `${currentElement.type}/${currentElement.id}`;\n }\n return '';\n }\n\n toggleExpansion(e) {\n e.stopPropagation()\n let { visible, root } = this.state\n visible = !visible\n this.setState({ visible: visible })\n\n let { visibleRootsIds } = CollectionStore.getState()\n if (visible) {\n visibleRootsIds.push(root.id)\n } else {\n let descendantIds = root.descendant_ids\n ? root.descendant_ids\n : root.children.map(function (s) { return s.id })\n descendantIds.push(root.id)\n visibleRootsIds = visibleRootsIds.filter(x => descendantIds.indexOf(x) == -1)\n }\n\n // Remove duplicate\n let newIds = Array.from(new Set(visibleRootsIds))\n CollectionActions.updateCollectrionTree(newIds)\n }\n\n synchronizedIcon() {\n let sharedUsers = this.state.root.sync_collections_users\n return (\n sharedUsers && sharedUsers.length > 0\n ? \n {this.takeOwnershipButton()}\n\n
\n )\n }\n}\n\nCollectionSubtree.propTypes = {\n isRemote: PropTypes.bool,\n root: PropTypes.object\n};\n","import React from 'react';\nimport { Button, OverlayTrigger, Badge, Glyphicon, Tooltip } from 'react-bootstrap';\nimport update from 'immutability-helper';\nimport Aviator from 'aviator';\nimport CollectionStore from 'src/stores/alt/stores/CollectionStore';\nimport CollectionActions from 'src/stores/alt/actions/CollectionActions';\nimport CollectionSubtree from 'src/apps/mydb/collections/CollectionSubtree';\nimport UIActions from 'src/stores/alt/actions/UIActions';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport UserInfos from 'src/apps/mydb/collections/UserInfos';\n\nconst colVisibleTooltip = \n {this.expandButton()}\n {this.synchronizedIcon()}\n {gated}\n {label}\n {inventoryPrefix ? (\n
\n \n Inventory Label}\n >\n \n \n {inventoryPrefix}\n \n \n \n
\n ) : null}\n - \n {this.subtrees()}\n
\n this.handleSectionToggle('sharedToCollectionVisible')}\n >\n \n My shared collections\n
\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 return update(e, {\n label: {\n $set:\n \n {this.labelRoot('shared_by', e)}\n {' '}\n {this.labelRoot('shared_to', e)}\n \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
\n )\n }\n\n collectionManagementButton() {\n return (\n \n {subtrees}\n
\n \n \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 const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';\n\n return (\n \n
\n \n {this.collectionManagementButton()}\n \n this.handleSectionToggle('ownCollectionVisible')}\n >\n Collections\n
\n \n \n {this.lockedSubtrees()}\n {this.unsharedSubtrees()}\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(e) {\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 let {showOptions, currentOption} = this.state\n let {ui, type} = this.props\n\n let checkMarkClass = \"fa \"\n if (ui.checkedAll == true) {\n checkMarkClass += \"fa-check\"\n } else if (ui.checkedIds && ui.checkedIds.size > 0) {\n checkMarkClass += \"fa-minus\"\n }\n let checkMark = ()\n\n let optionStyle = {}\n if (showOptions) {\n optionStyle.display = \"block\"\n } else {\n optionStyle.display = \"none\"\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 if (sourceType === DragDropItemTypes.SAMPLE || sourceType === DragDropItemTypes.MOLECULE) {\n return connectDragSource(\n ,\n { dropEffect: 'copy' },\n );\n } else if (sourceType === DragDropItemTypes.GENERALPROCEDURE) {\n return connectDragSource();\n } else if (sourceType === DragDropItemTypes.WELLPLATE ||\n sourceType === DragDropItemTypes.REACTION ||\n sourceType === DragDropItemTypes.RESEARCH_PLAN) {\n return connectDragSource();\n } else if (sourceType === DragDropItemTypes.ELEMENT) {\n return connectDragSource();\n }\n return ;\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 UIActions from 'src/stores/alt/actions/UIActions';\n\nexport default class ElementCheckbox extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: false,\n element: props.element\n }\n }\n\n // eslint-disable-next-line camelcase\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { element, checked } = nextProps;\n this.setState({\n element,\n checked\n });\n }\n\n updateCheckedStatus(element, state) {\n let checked = this.isChecked(element, state);\n this.setState({checked: checked});\n }\n\n toggleCheckbox() {\n let newChecked = !this.props.checked;\n\n if(newChecked) {\n UIActions.checkElement(this.state.element);\n } else {\n UIActions.uncheckElement(this.state.element);\n }\n }\n\n render() {\n return (\n \n \n {checkMark}\n \n \n \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\n render() {\n const { element } = this.state;\n\n if (!element.tag || !element.tag.taggable_data || !element.tag.taggable_data.collection_labels) {\n return ();\n }\n\n let { currentUser } = UserStore.getState();\n currentUser = currentUser || {};\n\n const { collection_labels } = element.tag.taggable_data;\n const shared_labels = [];\n const labels = [];\n const sync_labels = [];\n collection_labels.forEach((label) => {\n if (label) {\n if (!label.is_shared && !label.is_synchronized && label.user_id === currentUser.id) {\n labels.push(label);\n } else if (label.is_shared && !label.is_synchronized\n && (label.user_id === currentUser.id || label.shared_by_id === currentUser.id)) {\n shared_labels.push(label);\n } else if (label.is_synchronized && (label.user_id\n === currentUser.id || label.shared_by_id === currentUser.id)) {\n let isOwner = false;\n if (label.shared_by_id === currentUser.id) {\n isOwner = true;\n }\n sync_labels.push({ ...label, isOwner });\n }\n }\n });\n\n const total_shared_collections = shared_labels.length + sync_labels.length;\n\n if (labels.length === 0 && total_shared_collections === 0) { return (); }\n\n const collectionOverlay = (\n {collectionName}
\n\n {this.formatLabels(labels, is_synchronized)}\n
\n \n \n \n \n \n \n
\n );\n }\n}\n\nElementCollectionLabels.propTypes = {\n element: PropTypes.shape({\n id: PropTypes.number,\n type: PropTypes.string,\n tag: PropTypes.shape({\n taggable_data: PropTypes.shape({\n collection_labels: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n is_shared: PropTypes.bool,\n is_synchronized: PropTypes.bool,\n user_id: PropTypes.number,\n shared_by_id: PropTypes.number,\n })),\n }),\n }),\n }).isRequired,\n placement: PropTypes.string,\n};\n\nElementCollectionLabels.defaultProps = {\n placement: 'left',\n};\n","import React from 'react';\nimport { Label, OverlayTrigger, Popover } from 'react-bootstrap';\n\nexport default class ElementAnalysesLabels extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n element: props.element\n }\n }\n\n render() {\n\n return (\n { e.stopPropagation() }}>\n {this.analysesLabels(this.state.element)}\n
\n );\n }\n\n\n\n analysesLabels(element) {\n if (!element.tag) return ()\n if (!element.tag.taggable_data) return ()\n\n let analyses = element.tag.taggable_data.analyses\n\n if (!analyses) return ()\n\n let unconfirmedTitle = 'Unconfirmed Analysis'\n if (analyses.Unconfirmed && Object.keys(analyses.unconfirmed).length > 1)\n unconfirmedTitle = 'Unconfirmed Analyses'\n\n let confirmedTitle = 'Confirmed Analysis'\n if (analyses.Confirmed && Object.keys(analyses.confirmed).length > 1)\n confirmedTitle = 'Confirmed Analyses'\n\n return (\n \n {this.labelWithPopover(unconfirmedTitle, analyses.unconfirmed)}\n {this.labelWithPopover(confirmedTitle, analyses.confirmed)}\n
\n )\n }\n\n labelWithPopover(title, labels) {\n if (!labels) return ()\n\n let { element } = this.state\n let experiment = \n\n let label_popover = (\n | \n \n | \n
\n
\n )\n }\n}\n","import React from 'react';\nimport { Label, Modal, Button } from 'react-bootstrap';\n\nimport ElementActions from 'src/stores/alt/actions/ElementActions';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\n\nexport default class ElementWellplateLabels extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n showWarning: false,\n clicked: false\n }\n\n let { element } = props;\n\n this.handleOnClick = this.handleOnClick.bind(this)\n this.closeWarning = this.closeWarning.bind(this)\n\n this.onStoreChange = this.onStoreChange.bind(this)\n }\n\n componentDidMount() {\n ElementStore.listen(this.onStoreChange)\n }\n\n componentWillUnmount() {\n ElementStore.unlisten(this.onStoreChange)\n }\n\n onStoreChange(state) {\n if (this.state.showWarning != state.elementWarning) {\n this.setState({\n showWarning: state.elementWarning\n })\n }\n }\n\n closeWarning() {\n this.setState({ showWarning: false });\n ElementActions.closeWarning();\n }\n\n handleOnClick(e) {\n let { element } = this.props;\n\n ElementActions.tryFetchWellplateById(element.tag.taggable_data.wellplate_id)\n this.setState({ clicked: true });\n e.stopPropagation();\n }\n\n render() {\n let { element } = this.props;\n\n if (!element.tag || !element.tag.taggable_data ||\n !element.tag.taggable_data.wellplate_id) {\n return ();\n }\n\n const { showWarning, clicked } = this.state;\n\n const wellplate = \n\n return (\n \n \n \n \n
\n {/* */}\n \n \n \n No Access to Element \n \n \n Sorry, you cannot access this Reaction.\n \n \n \n \n \n
\n \n
\n )\n }\n}\n","import React from 'react';\nimport { Label, Modal, Button } from 'react-bootstrap';\nimport ElementActions from 'src/stores/alt/actions/ElementActions';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport UserStore from 'src/stores/alt/stores/UserStore';\n\nexport default class GenericElementLabels extends React.Component {\n constructor(props) {\n super(props);\n this.state = { showWarning: false, clicked: false };\n this.handleOnClick = this.handleOnClick.bind(this);\n this.closeWarning = this.closeWarning.bind(this);\n this.onStoreChange = this.onStoreChange.bind(this);\n }\n\n componentDidMount() {\n ElementStore.listen(this.onStoreChange);\n }\n\n componentWillUnmount() {\n ElementStore.unlisten(this.onStoreChange);\n }\n\n onStoreChange(state) {\n if (this.state.showWarning !== state.elementWarning) {\n this.setState({ showWarning: state.elementWarning });\n }\n }\n\n closeWarning() {\n this.setState({ showWarning: false });\n ElementActions.closeWarning();\n }\n\n handleOnClick(e) {\n const { element } = this.props;\n const elInfo = element.tag.taggable_data.element || {};\n ElementActions.tryFetchGenericElById(elInfo.id);\n this.setState({ clicked: true });\n e.stopPropagation();\n }\n\n render() {\n const { element } = this.props;\n if (!element.tag || !element.tag.taggable_data || !element.tag.taggable_data.element) {\n return ();\n }\n const elInfo = element.tag.taggable_data.element;\n const klasses = UserStore.getState().genericEls;\n const klass = (klasses && klasses.find(el => el.name === elInfo.type)) || {};\n const { showWarning, clicked } = this.state;\n return (\n \n \n \n \n
\n {/* */}\n \n \n \n No Access to Element \n \n \n Sorry, you cannot access this Wellplate.\n \n \n \n \n \n
\n \n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst PubchemLabels = ({element}) =>{\n let cid = element.pubchem_tag && element.pubchem_tag.pubchem_cid\n let labelStyle = {\n display: 'inline-block',\n marginLeft: \"5px\",\n marginRight: \"5px\"\n };\n if (!cid) {labelStyle.WebkitFilter = \"grayscale(100%)\"}\n const handleOnClick = (e) => {\n if (!!cid){\n window.open(\"https://pubchem.ncbi.nlm.nih.gov/compound/\" + cid, '_blank')\n }\n e.stopPropagation()\n }\n return (\n \n \n \n \n \n
\n \n \n \n No Access to Element \n \n Sorry, you cannot access this Element. \n \n \n \n \n
\n ![](\"/images/wild_card/pubchem.svg\")
\n \n )\n}\n\nPubchemLabels.propTypes = {\n element: PropTypes.object,\n}\n\nexport default PubchemLabels;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ChemrepoLabels = ({ chemrepoId }) => {\n const id = chemrepoId;\n const handleOnClick = (e) => {\n e.stopPropagation();\n };\n return (\n id == null ? :\n (\n \n e.stopPropagation()}>\n is decoupled from molecule}>\n \n \n
\n) : null);\n\nconst overlayToggle = \n {\n showPreviews\n ? (\n
\n);\n\nfunction MoleculeHeader({\n sample, show, showDragColumn, onClick, targetType\n}) {\n const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';\n\n const { collId, showPreviews } = UIStore.getState();\n return (\n (No-structure sample)
\n \n \n \n \n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n {dragColumn(sample, showDragColumn, DragDropItemTypes.SAMPLE, this.state.targetType)}\n \n
\n );\n }\n\n return null;\n};\n\nfunction ReactionsHeader({\n group, element, show, showDragColumn, onClick\n}) {\n const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';\n const { showPreviews } = UIStore.getState();\n\n return (\n \n \n \n \n \n \n
\n \n
\n \n {group}\n
\n \n \n \n \n \n \n
\n \n
\n \n {dragColumn(element, showDragColumn)}\n \n {reactionStatus(element)}\n {reactionRole(element)}\n
\n \n
\n \n {dragColumn(element, showDragColumn)}\n \n {element.title()}\n
\n \n
\n \n );\n }\n}\n\nCellLineItemEntry.propTypes = {\n cellLineItem: PropTypes.shape({\n amount: PropTypes.number.isRequired,\n itemName: PropTypes.string,\n passage: PropTypes.number.isRequired,\n contamination: PropTypes.string.isRequired,\n }).isRequired,\n showDetails: PropTypes.func.isRequired\n};\n","import PropTypes from 'prop-types';\n\nexport const CellLinePropTypeTableEntry = PropTypes.shape({\n id: PropTypes.string.isRequired,\n cellLineName: PropTypes.string.isRequired,\n organism: PropTypes.string.isRequired,\n disease: PropTypes.string.isRequired,\n tissue:PropTypes.string.isRequired,\n mutation:PropTypes.string.isRequired,\n variant:PropTypes.string.isRequired,\n bioSafetyLevel:PropTypes.string.isRequired,\n cryopreservationMedium:PropTypes.string.isRequired,\n gender:PropTypes.string.isRequired,\n})","import React, { Component } from 'react';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport { Table } from 'react-bootstrap';\nimport ElementCheckbox from 'src/apps/mydb/elements/list/ElementCheckbox';\nimport ElementContainer from 'src/apps/mydb/elements/list/ElementContainer';\nimport { elementShowOrNew } from 'src/utilities/routesUtils';\nimport { DragDropItemTypes } from 'src/utilities/DndConst';\nimport Aviator from 'aviator';\nimport CellLineItemText from 'src/apps/mydb/elements/list/cellLine/CellLineItemText';\nimport ArrayUtils from 'src/utilities/ArrayUtils';\nimport ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';\nimport { CellLinePropTypeTableEntry } from 'src/models/cellLine/CellLinePropTypes';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\n\nexport default class CellLineItemEntry extends Component {\n constructor(props) {\n super(props);\n this.showDetails = this.showDetails.bind(this);\n }\n\n showDetails() {\n const { currentCollection, isSync } = UIStore.getState();\n const { cellLineItem } = this.props;\n const { id, type } = cellLineItem;\n\n const uri = isSync\n ? `/scollection/${currentCollection.id}/${type}/${id}`\n : `/collection/${currentCollection.id}/${type}/${id}`;\n Aviator.navigate(uri, { silent: true });\n const e = {\n type,\n params: {\n collectionID: currentCollection.id,\n new_cellLine: false,\n cellLineId: id\n }\n };\n e.params[`${type}ID`] = id;\n\n elementShowOrNew(e);\n }\n\n // eslint-disable-next-line class-methods-use-this\n isElementChecked(element) {\n const { checkedIds, uncheckedIds, checkedAll } = UIStore.getState().cell_line;\n return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))\n || ArrayUtils.isValInArray(checkedIds || [], element.id);\n }\n\n render() {\n const { cellLineItem } = this.props;\n const { currentElement } = ElementStore.getState();\n let backgroundColor=\"white-background\"\n if(currentElement) { \n backgroundColor=currentElement!==null&¤tElement.id==cellLineItem.id?\"blue-background\":\"white-background\";\n }\n return (\n \n
\n {cellLineItem.itemName}
\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';\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 componentDidMount() {\n UIStore.getState();\n }\n\n getBorderStyle() {\n const { showEntries } = this.state;\n return showEntries\n ? 'list-container title-panel'\n : 'list-container title-panel cell-line-group-bottom-border';\n }\n\n renderItemEntries(cellLineItems) {\n const { showEntries } = this.state;\n return showEntries ? cellLineItems.map(\n (cellLineItem) => | \n | \n { this.showDetails(); }}>\n {cellLineItem.short_label}\n | \n\n\n | \n \n \n | \n
\n \n
\n\n );\n }\n\n renderDetailedInfos(firstCellLineItem) {\n const { detailedInformation } = this.state;\n return !detailedInformation ? [] : [\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 renderDetailedInfoButton() {\n const { detailedInformation } = this.state;\n const buttonActive = detailedInformation ? 'detailed-info-on' : 'detailed-info-off';\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, { Component } 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\n// eslint-disable-next-line react/prefer-stateless-function\nexport default class CellLineContainer extends Component {\n render() {\n const { cellLineGroups } = this.props;\n\n return (\n \n {cellLineGroups.map(\n (group) => (\n
\n );\n }\n}\n\nCellLineContainer.propTypes = {\n cellLineGroups: PropTypes.arrayOf(\n PropTypes.shape({\n cellLineItems: PropTypes.arrayOf(CellLinePropTypeTableEntry),\n })\n ).isRequired\n};\n","/* eslint-disable camelcase */\nimport React from 'react';\n\nimport {\n Pagination, Form, Col, Row, InputGroup, FormGroup, FormControl, Glyphicon, Tooltip, OverlayTrigger\n} from 'react-bootstrap';\nimport DatePicker from 'react-datepicker';\nimport deepEqual from 'deep-equal';\n\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport UIActions from 'src/stores/alt/actions/UIActions';\nimport ElementActions from 'src/stores/alt/actions/ElementActions';\nimport UserActions from 'src/stores/alt/actions/UserActions';\n\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport ElementAllCheckbox from 'src/apps/mydb/elements/list/ElementAllCheckbox';\nimport ElementsTableEntries from 'src/apps/mydb/elements/list/ElementsTableEntries';\nimport ElementsTableSampleEntries from 'src/apps/mydb/elements/list/ElementsTableSampleEntries';\nimport { SearchUserLabels } from 'src/components/UserLabels';\n\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport ElementsTableGroupedEntries from 'src/apps/mydb/elements/list/ElementsTableGroupedEntries';\nimport Select from 'react-select';\nimport PropTypes from 'prop-types';\nimport CellLineGroup from 'src/models/cellLine/CellLineGroup';\nimport CellLineContainer from 'src/apps/mydb/elements/list/cellLine/CellLineContainer';\n\nexport default class ElementsTable extends React.Component {\n constructor(props) {\n super(props);\n this.elementRef = React.createRef();\n\n this.state = {\n elements: [],\n currentElement: null,\n ui: {},\n collapseAll: false,\n moleculeSort: false,\n searchResult: false,\n productOnly: false,\n page: null,\n pages: null,\n elementsGroup: 'none',\n elementsSort: true,\n sortDirection: 'DESC',\n };\n\n this.onChange = this.onChange.bind(this);\n this.onChangeUI = this.onChangeUI.bind(this);\n\n this.changeDateFilter = this.changeDateFilter.bind(this);\n\n this.toggleProductOnly = this.toggleProductOnly.bind(this);\n this.setUserLabel = this.setUserLabel.bind(this);\n this.setFromDate = this.setFromDate.bind(this);\n this.setToDate = this.setToDate.bind(this);\n this.timer = null;\n }\n\n componentDidMount() {\n UIStore.getState();\n ElementStore.listen(this.onChange);\n UIStore.listen(this.onChangeUI);\n this.initState();\n }\n\n componentWillUnmount() {\n ElementStore.unlisten(this.onChange);\n UIStore.unlisten(this.onChangeUI);\n }\n\n handlePaginationSelect(eventKey) {\n const { pages } = this.state;\n const { type } = this.props;\n\n if (eventKey > 0 && eventKey <= pages) {\n this.setState({\n page: eventKey\n }, () => {\n const { page } = this.state;\n UIActions.setPagination({ type, page });\n this.handleScrollToElement(this.elementRef);\n });\n }\n }\n handleScrollToElement = () => {\n if (this.elementRef.current) {\n this.elementRef.current.scrollTo({ top: 0, left: 0, behavior: \"smooth\", });\n }\n };\n\n onChangeUI(state) {\n const { type } = this.props;\n if (typeof state[type] === 'undefined' || state[type] === null) {\n return;\n }\n const { checkedIds, uncheckedIds, checkedAll } = state[type];\n const {\n filterCreatedAt, fromDate, toDate, userLabel, number_of_results, currentSearchByID, productOnly\n } = state;\n\n // check if element details of any type are open at the moment\n const currentId = state.sample.currentId || state.reaction.currentId\n || state.wellplate.currentId;\n\n let isSearchResult = currentSearchByID ? true : false;\n\n const { currentStateProductOnly, searchResult } = this.state;\n const stateChange = (\n checkedIds || uncheckedIds || checkedAll || currentId || filterCreatedAt\n || fromDate || toDate || userLabel || productOnly !== currentStateProductOnly\n || isSearchResult !== searchResult\n );\n const moleculeSort = isSearchResult ? true : ElementStore.getState().moleculeSort;\n\n if (stateChange) {\n this.setState({\n filterCreatedAt,\n ui: {\n checkedIds,\n uncheckedIds,\n checkedAll,\n currentId,\n number_of_results,\n fromDate,\n toDate,\n userLabel,\n },\n productOnly,\n searchResult: isSearchResult,\n moleculeSort: moleculeSort\n });\n }\n }\n\n onChange(state) {\n const { type } = this.props;\n const elementsState = (state && state.elements && state.elements[`${type}s`]) || {};\n const { elements, page, pages } = elementsState;\n\n let currentElement;\n if (!state.currentElement || state.currentElement.type === type) {\n const { currentElement: stateCurrentElement } = state;\n currentElement = stateCurrentElement;\n }\n\n const { elements: stateElements, currentElement: stateCurrentElement } = this.state;\n const elementsDidChange = elements && !deepEqual(elements, stateElements);\n const currentElementDidChange = !deepEqual(currentElement, stateCurrentElement);\n\n const nextState = { page, pages, currentElement };\n if (elementsDidChange) { nextState.elements = elements; }\n if (elementsDidChange || currentElementDidChange) { this.setState(nextState); }\n }\n\n setUserLabel(label) {\n const { userLabel } = this.state;\n if (userLabel !== label) UIActions.setUserLabel(label);\n }\n\n setFromDate(date) {\n const { fromDate } = this.state;\n if (fromDate !== date) UIActions.setFromDate(date);\n }\n\n setToDate(date) {\n const { toDate } = this.state;\n if (toDate !== date) UIActions.setToDate(date);\n }\n\n initState = () => {\n this.onChange(ElementStore.getState());\n\n const { type, genericEl } = this.props;\n\n if (type === 'reaction' || genericEl) {\n const userState = UserStore.getState();\n const filters = userState.profile.data.filters || {};\n\n // you are not able to use this.setState because this would rerender it again and again ...\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state.elementsGroup = filters[type]?.group || 'none';\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state.elementsSort = filters[type]?.sort ?? true;\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state.sortDirection = filters[type]?.direction || 'DESC';\n }\n };\n\n changeCollapse = (collapseAll) => {\n this.setState({ collapseAll: !collapseAll });\n };\n\n changeSampleSort = () => {\n let { moleculeSort } = this.state;\n moleculeSort = !moleculeSort;\n\n this.setState({\n moleculeSort\n }, () => ElementActions.changeSorting(moleculeSort));\n };\n\n updateFilterAndUserProfile = (elementsSort, sortDirection, elementsGroup) => {\n const { type } = this.props;\n\n ElementActions.changeElementsFilter({\n name: type,\n sort: elementsSort,\n direction: sortDirection,\n group: elementsGroup,\n });\n\n UserActions.updateUserProfile({\n data: {\n filters: {\n [type]: {\n sort: elementsSort,\n direction: sortDirection,\n group: elementsGroup,\n },\n },\n },\n });\n };\n\n changeElementsGroup = (elementsGroup) => {\n const { elementsSort, sortDirection } = this.state;\n\n this.setState({\n elementsGroup,\n elementsSort,\n }, () => {\n this.updateFilterAndUserProfile(elementsSort, sortDirection, elementsGroup);\n });\n };\n\n changeElementsSort = () => {\n const { elementsGroup, sortDirection } = this.state;\n let { elementsSort } = this.state;\n elementsSort = !elementsSort;\n\n this.setState({\n elementsSort\n }, () => {\n this.updateFilterAndUserProfile(elementsSort, sortDirection, elementsGroup);\n });\n };\n\n changeSortDirection = () => {\n const { elementsGroup, elementsSort, sortDirection } = this.state;\n const newSortDirection = sortDirection === 'DESC' ? 'ASC' : 'DESC';\n\n this.setState(\n { sortDirection: newSortDirection },\n () => {\n this.updateFilterAndUserProfile(elementsSort, newSortDirection, elementsGroup);\n }\n );\n };\n\n collapseButton = () => {\n const { collapseAll } = this.state;\n const collapseIcon = collapseAll ? 'chevron-right' : 'chevron-down';\n\n return (\n \n \n {items}\n \n
\n )\n }\n\n renderSamplesHeader = () => {\n const {\n moleculeSort,\n productOnly,\n } = this.state;\n\n const options = [\n { value: false, label: 'Grouped by Sample' },\n { value: true, label: 'Grouped by Molecule' }\n ];\n const color = productOnly ? '#5cb85c' : 'currentColor';\n const tooltipText = productOnly ? 'Show all' : 'Show products only';\n\n return (\n <>\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 showReport: 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 ReactDOM from 'react-dom';\nimport { Popover, Button, FormGroup, Checkbox, Overlay } from 'react-bootstrap';\nimport _ from 'lodash';\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 visible: props.visible,\n hidden: props.hidden,\n currentType: '',\n showSampleExternalLabel: false,\n showSampleShortLabel: false,\n showSampleName: false,\n tableSchemePreviews: true,\n showTabLayoutContainer: false\n }\n\n this.onCloseTabLayoutContainer = this.onCloseTabLayoutContainer.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 this.toggleTabLayoutContainer = this.toggleTabLayoutContainer.bind(this);\n }\n\n // to force popups to stay anchored to button\n resize = () => this.forceUpdate()\n\n componentDidMount() {\n UserStore.listen(this.onChangeUser);\n UIStore.listen(this.onChangeUI);\n window.addEventListener('resize', this.resize);\n }\n\n componentWillUnmount() {\n UserStore.unlisten(this.onChangeUser);\n UIStore.unlisten(this.onChangeUI);\n window.removeEventListener('resize', this.resize);\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 onCloseTabLayoutContainer() {\n this.toggleTabLayoutContainer();\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 }\n\n const { showSampleExternalLabel, showSampleShortLabel, showSampleName } = this.state;\n UserActions.updateUserProfile({\n show_external_name: showSampleExternalLabel,\n show_sample_short_label: showSampleShortLabel,\n show_sample_name: showSampleName\n });\n }\n\n // eslint-disable-next-line camelcase\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n visible: nextProps.visible,\n hidden: nextProps.hidden\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 _.set(userProfile, 'data.layout', layout);\n\n UserActions.updateUserProfile(userProfile);\n }\n\n toggleTabLayoutContainer() {\n this.setState({ showTabLayoutContainer: !this.state.showTabLayoutContainer });\n }\n\n render() {\n const {\n visible, hidden, currentType,\n tableSchemePreviews, showSampleExternalLabel, showSampleShortLabel, showSampleName,\n } = this.state;\n\n const wd = 35 + ((visible && visible.size * 50) || 0) + ((hidden && hidden.size * 50) || 0);\n\n let sampleSettings = ();\n if (currentType == \"sample\" || currentType == \"reaction\") {\n sampleSettings = (\n \n \n
\n
\n \n
\n )\n }\n const tabLayoutContainerElement = (\n Settings
\n\n \n \n Show schemes images\n \n \n \n \n Show sample external name on title\n \n \n Show sample short label\n \n \n Show sample name\n \n \n
\n \n
\n {sampleSettings}\n \n )\n\n return (\n Tab Layout
\n\n {tabLayoutContainerElement}\n
\n \n { this.tabLayoutButton = button; }}\n onClick={this.toggleTabLayoutContainer}\n >\n \n \n ReactDOM.findDOMNode(this.tabLayoutButton)}\n shouldUpdatePosition // works alongside resize event listener\n >\n {popoverSettings}\n \n
\n );\n }\n}\n","import Immutable from 'immutable';\nimport React from 'react';\nimport { Col, Nav, NavItem, Row, Tab, OverlayTrigger, Tooltip, Alert, Button } from 'react-bootstrap';\nimport KeyboardActions from 'src/stores/alt/actions/KeyboardActions';\nimport UIActions from 'src/stores/alt/actions/UIActions';\nimport UserActions from 'src/stores/alt/actions/UserActions';\nimport ElementActions from 'src/stores/alt/actions/ElementActions';\nimport MatrixCheck from 'src/components/common/MatrixCheck';\nimport ElementsTable from 'src/apps/mydb/elements/list/ElementsTable';\nimport ElementsTableSettings from 'src/apps/mydb/elements/list/ElementsTableSettings';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport { StoreContext } from 'src/stores/mobx/RootStore';\nimport ArrayUtils from 'src/utilities/ArrayUtils';\nimport PropTypes from 'prop-types';\n\nfunction getSortedHash(inputHash) {\n const resultHash = {};\n\n const keys = Object.keys(inputHash);\n keys.sort((a, b) => inputHash[a] - inputHash[b]).forEach((k) => {\n resultHash[k] = inputHash[k];\n });\n return resultHash;\n}\n\nfunction getArrayFromLayout(layout, isVisible) {\n let array = Immutable.List();\n let sortedLayout = layout;\n\n if (isVisible === true) {\n sortedLayout = getSortedHash(sortedLayout);\n }\n\n Object.keys(sortedLayout).forEach((key, idx) => {\n const order = sortedLayout[key];\n if (isVisible && order < 0) { return; }\n if (!isVisible && order > 0) { return; }\n\n if (isVisible === true) {\n array = array.set(idx + 1, key);\n } else {\n array = array.set(Math.abs(order), key);\n }\n });\n\n array = array.filter((n) => n !== undefined);\n return array;\n}\n\nexport default class ElementsList extends React.Component {\n static contextType = StoreContext;\n\n constructor(props) {\n super(props);\n this.state = {\n totalElements: {},\n visible: Immutable.List(),\n hidden: Immutable.List(),\n genericEls: [],\n currentTab: 0,\n totalCheckedElements: {},\n };\n\n this.onChange = this.onChange.bind(this);\n this.onChangeUser = this.onChangeUser.bind(this);\n this.onChangeUI = this.onChangeUI.bind(this);\n this.initState = this.initState.bind(this);\n this.handleTabSelect = this.handleTabSelect.bind(this);\n }\n\n componentDidMount() {\n ElementStore.listen(this.onChange);\n UserStore.listen(this.onChangeUser);\n UIStore.listen(this.onChangeUI);\n\n this.initState();\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n const { overview, showReport } = this.props;\n const {\n visible, hidden, currentTab, totalElements\n } = this.state;\n\n return nextProps.overview !== overview\n || nextProps.showReport !== showReport\n || nextProps.totalElements !== totalElements\n || nextState.visible !== visible\n || nextState.hidden !== hidden\n || nextState.currentTab !== currentTab;\n }\n\n componentWillUnmount() {\n ElementStore.unlisten(this.onChange);\n UserStore.unlisten(this.onChangeUser);\n UIStore.unlisten(this.onChangeUI);\n }\n\n handleTabSelect(tab) {\n UserActions.selectTab(tab);\n\n // TODO sollte in tab action handler\n const uiState = UIStore.getState();\n const { visible } = this.state;\n const type = visible.get(tab);\n\n if (!uiState[type] || !uiState[type].page) { return; }\n\n const { page } = uiState[type];\n\n UIActions.setPagination({ type, page });\n\n KeyboardActions.contextChange(type);\n }\n\n onChange(state) {\n const { totalElements } = this.state;\n Object.keys(state.elements).forEach((key) => {\n totalElements[key] = state.elements[key]?.totalElements;\n });\n\n this.setState({\n totalElements\n });\n }\n\n onChangeUser(state) {\n let visible = '';\n let hidden = '';\n let currentTabIndex = 0;\n\n const { currentType } = state;\n let type = state.currentType;\n\n if (typeof (state.profile) !== 'undefined' && state.profile\n && typeof (state.profile.data) !== 'undefined' && state.profile.data) {\n visible = getArrayFromLayout(state.profile.data.layout, true);\n hidden = getArrayFromLayout(state.profile.data.layout, false);\n currentTabIndex = visible.findIndex((e) => e === currentType);\n if (type === '') { type = visible.get(0); }\n }\n if (hidden.size === 0) {\n hidden = ArrayUtils.pushUniq(hidden, 'hidden');\n }\n\n if (currentTabIndex < 0) currentTabIndex = 0;\n\n if (typeof type !== 'undefined' && type != null) {\n KeyboardActions.contextChange.defer(type);\n }\n\n this.setState({\n currentTab: currentTabIndex,\n genericEls: state.genericEls || [],\n visible,\n hidden\n });\n }\n\n onChangeUI(state) {\n const { totalCheckedElements } = this.state;\n let forceUpdate = false;\n // const genericNames = (genericEls && genericEls.map(el => el.name)) || [];\n let genericKlasses = [];\n const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};\n if (MatrixCheck(currentUser.matrix, 'genericElement')) {\n const { klasses } = UIStore.getState();\n genericKlasses = klasses;\n }\n const elNames = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan', 'cell_line'].concat(genericKlasses);\n\n elNames.forEach((type) => {\n const elementUI = state[type] || {\n checkedAll: false, checkedIds: [], uncheckedIds: [], currentId: null\n };\n const element = ElementStore.getState().elements[`${type}s`];\n const nextCount = elementUI.checkedAll\n ? (element.totalElements - elementUI.uncheckedIds.size)\n : elementUI.checkedIds.size;\n if (!forceUpdate && nextCount !== (totalCheckedElements[type] || 0)) { forceUpdate = true; }\n totalCheckedElements[type] = nextCount;\n });\n\n this.setState((previousState) => ({ ...previousState, totalCheckedElements }));\n // could not use shouldComponentUpdate because state.totalCheckedElements\n // has already changed independently of setstate\n if (forceUpdate) { this.forceUpdate(); }\n }\n\n handleRemoveSearchResult(searchStore) {\n searchStore.changeShowSearchResultListValue(false);\n UIActions.clearSearchById();\n ElementActions.changeSorting(false);\n const { currentCollection, isSync } = UIStore.getState();\n isSync ? UIActions.selectSyncCollection(currentCollection)\n : UIActions.selectCollection(currentCollection);\n }\n\n handleTabSelect(tab) {\n UserActions.selectTab(tab);\n\n // TODO sollte in tab action handler\n const uiState = UIStore.getState();\n const type = this.state.visible.get(tab);\n\n if (!uiState[type] || !uiState[type].page) { return; }\n\n const { page } = uiState[type];\n\n UIActions.setPagination({ type, page });\n\n KeyboardActions.contextChange(type);\n }\n\n initState() {\n this.onChange(ElementStore.getState());\n }\n\n render() {\n const {\n visible, hidden, currentTab, totalCheckedElements\n } = this.state;\n const constEls = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan', 'cell_line'];\n const { overview, showReport } = this.props;\n const elementState = this.state;\n\n let removeSearchResultAlert = '';\n if (UIStore.getState().currentSearchByID) {\n removeSearchResultAlert = (\n \n {genericEl.desc}\n
\n \n \n \n
\n | Sample | \nStatus | \nUpdated at | \nActions | \n
|---|
\n \n Device-Management\n \n handleCloseDeviceManagement()}\n >\n \n \n
\n )\n}\n\nDeviceManagement.getStores = () => {\n return [ElementStore]\n}\n\nDeviceManagement.getPropsFromStores = () => {\n return ElementStore.getState().elements.devices\n}\n\nexport default connectToStores(DeviceManagement)\n\nconst Devices = ({ devices, activeAccordionDevice }) => {\n const styleByDeviceState = (device) => {\n return device.isNew || device.isEdited\n ? \"info\"\n : \"default\"\n }\n if (devices.length > 0) {\n return (\n \n There are currently no Devices.\n
\n )\n }\n}\n\nconst Device = ({ device }) => {\n const styleBySelectedType = (type) => {\n return device.types.includes(type)\n ? \"primary\"\n : \"default\"\n }\n\n const handleTypeClick = (type) => {\n ElementActions.toggleDeviceType(device, type)\n }\n\n const handleSave = () => {\n device.updateChecksum()\n ElementActions.saveDevice(device)\n }\n\n const handleChangeDeviceProp = (prop, value) => {\n ElementActions.changeDeviceProp(device, prop, value)\n }\n\n const bottomSpacer = {\n marginBottom: \"10px\"\n }\n\n return (\n\n Title \n handleChangeDeviceProp(\"title\", e.target.value)}\n style={bottomSpacer}\n />\n Code \n handleChangeDeviceProp(\"code\", e.target.value)}\n style={bottomSpacer}\n />\n Types
\n\n handleTypeClick(\"NMR\")}\n >\n NMR\n \n handleTypeClick(\"EA\")}\n >\n EA\n \n handleTypeClick(\"MS\")}\n >\n MS\n \n handleTypeClick(\"IR\")}\n >\n IR\n \n \n
\n handleSave()}\n >\n Save\n \n
\n )\n}\n\nconst DeviceHeader = ({ device, state, onChangeState }) => {\n const handleRemoveDevice = (e) => {\n if (confirm('Delete the Device?')) {\n ElementActions.deleteDevice(device)\n }\n e.preventDefault()\n }\n\n return (\n \n
\n
\n {device.title}\n handleRemoveDevice(e)}\n >\n \n \n
\n )\n}\n\nconst AddDeviceButton = () => {\n return (\n \n \n \n
\n )\n}\n","import React from 'react'\nimport { Panel, PanelGroup, ButtonToolbar, Button, OverlayTrigger, Tooltip } from 'react-bootstrap'\nimport ElementActions from 'src/stores/alt/actions/ElementActions'\nimport DetailActions from 'src/stores/alt/actions/DetailActions'\nimport DeviceManagement from 'src/apps/mydb/elements/details/devices/DeviceManagement'\n\n\nconst DeviceDetails = ({ device, toggleFullScreen }) => {\n return (\n\n {device.title}\n Close Device}>\n \n \n Save Device}>\n \n \n FullScreen}>\n \n \n
\n )\n}\n","import _ from 'lodash';\n\nconst contentToText = (content) => {\n if (typeof (content) === 'undefined' || !content ||\n typeof (content.ops) === 'undefined' || !content.ops) {\n return '';\n }\n return (content.ops || []).reduce((txt, operation) => {\n if (typeof operation.insert !== 'string') { return txt + ' ' };\n return txt + operation.insert;\n }, '');\n};\n\nconst keepSupSub = (value) => {\n const content = [];\n value.ops.forEach((op) => {\n if (typeof op.insert === 'string' && op.insert !== '\\n') {\n if (op.attributes\n && op.attributes.script\n && (op.attributes.script === 'super'\n || op.attributes.script === 'sub')) {\n content.push({\n insert: op.insert,\n attributes: { script: op.attributes.script }\n });\n } else {\n content.push({ insert: op.insert });\n }\n }\n });\n content.filter(op => op).push({ insert: '\\n' });\n // NB: what is this for?\n // if (content.length === 1) {\n // content.unshift({ insert: '-' });\n // }\n return content;\n};\n\nconst rmRedundantSpaceBreak = (target) => {\n return target.replace(/\\n/g, '').replace(/\\s\\s+/g, ' ');\n};\n\nconst rmOpsRedundantSpaceBreak = (ops) => {\n const clearOps = ops.map((op) => {\n op.insert = rmRedundantSpaceBreak(op.insert);\n return op;\n });\n return clearOps;\n};\n\nconst rmDeltaRedundantSpaceBreak = (delta) => {\n const clearOps = rmOpsRedundantSpaceBreak(delta.ops);\n return { ops: clearOps };\n};\n\nconst frontBreak = (content) => {\n const res = [{ insert: '\\n' }, ...content];\n return res;\n};\n\nconst mapValueToGroupRegex = (content, matchedGroup) => {\n let newContent = _.cloneDeep(content);\n matchedGroup.forEach((m, idx) => {\n newContent = newContent.map((d) => {\n const patt = `#{${idx + 1}}`;\n const insertString = d.insert;\n const dd = { ...d };\n dd.insert = insertString.replace(patt, m || '');\n return dd;\n });\n });\n\n return newContent;\n};\n\nexport {\n contentToText,\n keepSupSub,\n rmDeltaRedundantSpaceBreak,\n rmOpsRedundantSpaceBreak,\n rmRedundantSpaceBreak,\n frontBreak,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Quill from 'quill';\nimport _ from 'lodash';\n\nimport { keepSupSub } from 'src/utilities/quillFormat';\n\nexport default class QuillViewer extends React.Component {\n constructor(props) {\n super(props);\n\n this.viewer = false;\n }\n\n componentDidMount() {\n this.initQuill();\n }\n\n // eslint-disable-next-line camelcase\n UNSAFE_componentWillReceiveProps(nextProps) {\n const oldVal = this.props.value;\n const newVal = nextProps.value;\n if (oldVal && newVal && !_.isEqual(newVal, oldVal)) {\n this.viewer.setContents(newVal);\n }\n }\n\n initQuill() {\n if (!this.viewer) {\n const { quillViewer } = this;\n const defaultOptions = {\n theme: this.theme,\n readOnly: this.readOnly,\n };\n\n this.viewer = new Quill(quillViewer, defaultOptions);\n const oriValue = this.props.value;\n const value = this.props.preview ? keepSupSub(oriValue) : oriValue;\n this.viewer.setContents(value);\n }\n }\n\n render() {\n this.theme = 'bubble';\n this.readOnly = true;\n\n return (\n this.props.preview\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';\n\nconst PanelHeader = ({ title, btns }) => {\n return (\n \n {title}\n
\n );\n};\n\nexport default PanelHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Panel, Accordion, Button } from 'react-bootstrap';\nimport QuillViewer from 'src/components/QuillViewer';\n\nimport PanelHeader from 'src/components/common/PanelHeader';\n\nconst tryParse = function TryParseToJson(obj) {\n if (typeof obj === 'object') return obj;\n return JSON.parse(obj);\n};\n\nfunction ElementAnalyses({ element, idx }) {\n const children = element.children.map(x => (\n \n {btns}\n
\n This {element.type} does not have any analysis.
\n );\n }\n\n return (\nClose {el.type}?
\n
\n {warningMessage} \n
\n );\n}\n\nSaveEditedImageWarning.propTypes = {\n visible: PropTypes.bool.isRequired,\n warningStyle: PropTypes.string,\n warningMessage: PropTypes.string\n};\n\nSaveEditedImageWarning.defaultProps = {\n warningStyle: 'imageEditedWarning',\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 { Panel, ButtonToolbar } from 'react-bootstrap';\nimport {\n GenInterface,\n GenButtonReload,\n absOlsTermLabel,\n} 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 Selected analysis type: {absOlsTermLabel(kind)}\n
\n Content is designed for: {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 ;\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 \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 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 downloadButton = (attachment) => (\n \n
\n \n Or you are not authorized to edit this file.\n \n ) : (\n Edit attachment\n )}\n
\n
\n \n \n hideImportConfirmFunction(attachment.id)}\n target={importButtonRefs[attachment.id]}\n >\n {confirmTooltip}\n \n
\n );\n};\n\nexport const customDropzone = (onDrop) => (\n \n { importButtonRefs[attachment.id] = ref; }}\n className={`attachment-button-size ${importDisabled\n || extension !== 'xlsx' ? 'attachment-gray-button' : ''}`}\n onClick={() => showImportConfirmFunction(attachment.id)}\n >\n
\n \n {isSortingEnabled && (\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\nexport function ThirdPartyAppButton({ attachment, options = [] }) {\n const [menuItems, setMenuItems] = useState([]);\n const contentType = mime.contentType(attachment.content_type) ? attachment.content_type : mime.lookup(attachment.filename);\n\n useEffect(() => {\n const generatedMenuItems = () => {\n if (isUUID(attachment?.id)) { return noChoice; }\n const filteredOptions = filterOptions(contentType, options);\n if (filteredOptions.length === 0) { return noChoice; }\n return filteredOptions.map((option) => (\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n
\n )}\n\n \n \n \n \n \n \n \n {sortDirection === 'asc' ? '▲' : '▼'}\n \n
\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n
\n \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\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 {formatDate(attachment.created_at)}\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 {downloadButton(attachment)}\n
\n {attachment.updatedAnnotation && \n
\n );\n\n const hasProcessedAttachments = Object.keys(attachmentGroups.Processed).some(\n (groupName) => attachmentGroups.Processed[groupName].length > 0\n );\n\n return (\n \n {title}\n
\n {attachments.map((attachment) => this.renderAttachmentRow(attachment))}\n \n {this.renderImageEditModal()}\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 {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 \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, ButtonGroup, 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 {\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 className=\"attachment-name-input\"\n />\n
\n ) : (\n \n
\n )}\n \n {this.state.localName}\n {!readOnly && (\n
\n \n {mode === 'attachments' && instrumentIsEmpty && (\n
\n \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 {/* \n Discard Changes\n */}\n \n Keep Changes\n \n
\n \n {datasetContainer.name}\n\n handleUndo(datasetContainer)}\n disabled={disabled}\n >\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 {gdsDownload}\n download data + metadata}>\n \n \n {this.removeButton(datasetContainer)}\n \n {isOver && canDrop && ColoredOverlay({color: 'green'})}\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.isRequired,\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 Drop File(s) from the inbox\n {isOver && canDrop && ColoredOverlay({color: 'green'})}\n \n
\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 {\n ListGroup, ListGroupItem, Button, Well\n} 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 \n \n {container.children.map((datasetContainer, key) => (\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 {this.addButton()}\n \n {modal.show && modal.datasetContainer && (\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 \n \n this.handleAddWithAttachments(attachments)}\n />\n \n \n {this.addButton()}\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 componentWillUnmount() {\n this.destroyEditor();\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 There are currently no Datasets.
\n