- {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 { value: 'disabled', label: 'disabled' }\n ];\n\n const authenticationOptions = [\n { value: 'password', label: 'password' },\n { value: 'keyfile', label: 'keyfile' }\n ];\n\n let methodValue = '';\n let authenticationValue = { value: 'password', label: 'password' };\n\n if (device && device.datacollector_method) {\n methodValue = methodOptions.filter(f => f.value == device.datacollector_method);\n }\n if (device && device.datacollector_authentication) {\n authenticationValue = authenticationOptions.filter(f => f.value == device.datacollector_authentication);\n }\n\n const methodValueCheck = methodValue ? methodValue[0].value : '';\n const readonlyKeyName = authenticationValue !== null && authenticationValue[0] && authenticationValue[0].value == 'password';\n const userValue = device && device.datacollector_user ? device.datacollector_user : '';\n const hostValue = device && device.datacollector_host ? device.datacollector_host : '';\n const keyFileValue = device && device.datacollector_key_name ? device.datacollector_key_name : '';\n const numberOfFilesValue = device && device.datacollector_number_of_files ? device.datacollector_number_of_files : '1';\n const dir = device && device.datacollector_dir ? device.datacollector_dir : '';\n const userLevelSelected = device && device.datacollector_user_level_selected ? device.datacollector_user_level_selected : false;\n const dirValue = userLevelSelected && dir ? `${dir}/{UserSubDirectories}` : (dir ? dir : '');\n\n const 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 PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport PublicFetcher from 'src/repo/fetchers/PublicFetcher';\nimport RepoNavListTypes from 'src/repoHome/RepoNavListTypes';\nimport ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\n\nconst routes = {\n '/': 'root',\n target: {\n root: function(e) {\n Aviator.navigate('/home/welcome')\n }\n },\n\n '/welcome': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"welcome\")\n },\n },\n '/': 'show'\n },\n\n '/home': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"home\")\n },\n },\n '/': 'show'\n },\n '/publications': {\n target: {\n show: function(e) {\n LoadingActions.start();\n PublicActions.setSearchParams({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n });\n PublicActions.getReactions.defer();\n PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.REACTION}`)\n },\n },\n '/': 'show',\n },\n '/genericHub': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage('genericHub')\n },\n },\n '/': 'show'\n },\n '/moleculeArchive': {\n target: {\n show: function(e) {\n LoadingActions.start();\n PublicActions.setSearchParams({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n });\n PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }); // .defer();\n PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)\n },\n },\n '/': 'show'\n },\n '/review': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"review\")\n },\n },\n '/': 'show'\n },\n '/about': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"about\")\n },\n },\n '/': 'show'\n },\n '/contact': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"contact\")\n },\n },\n '/': 'show'\n },\n\n '/newsroom': {\n target: {\n list: function (e) {\n PublicActions.articles();\n },\n show: function (e) {\n PublicActions.displayArticle(e.params.key)\n },\n },\n '/': 'list',\n '/:key': 'show'\n },\n\n '/newseditor': {\n target: {\n edit: function (e) {\n PublicActions.editArticle(e.params.key)\n },\n show: function (e) {\n PublicActions.editArticle('new')\n },\n },\n '/show': 'show',\n '/:key': 'edit'\n },\n\n '/howtoeditor': {\n target: {\n edit: function (e) {\n PublicActions.editHowTo(e.params.key)\n },\n show: function (e) {\n PublicActions.editHowTo('ein')\n },\n },\n '/show': 'show',\n '/:key': 'edit'\n },\n\n '/directive': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"directive\")\n },\n },\n '/': 'show'\n },\n\n '/preservation': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"preservation\")\n },\n },\n '/': 'show'\n },\n\n '/datasets': {\n target: {\n show: function(e) {\n PublicActions.displayDataset(e.params.datasetId)\n },\n },\n '/:datasetId': 'show'\n },\n\n '/molecules': {\n target: {\n show: function(e) {\n PublicActions.displayMolecule(e.params.moleculeId)\n },\n tag: function (e) {\n PublicActions.displayMolecule(e.params.moleculeId, e.params.suffix)\n }\n },\n '/:moleculeId/:suffix': 'tag',\n '/:moleculeId': 'show'\n },\n\n '/reactions': {\n target: {\n show: function(e) {\n PublicActions.displayReaction(e.params.reactionId)\n },\n },\n '/:reactionId': 'show'\n },\n\n '/collection': {\n target: {\n show: function(e) {\n PublicActions.displayCollection(e.params.collectionId)\n },\n },\n '/:collectionId': 'show'\n },\n\n '/pid': {\n target: {\n show: function(e) {\n PublicFetcher.queryPid({id: e.params.id})\n }\n },\n '/:id': 'show'\n },\n\n '/inchikey': {\n target: {\n show: function(e) {\n let url = e.uri.replace(\"/inchikey/\", \"\")\n let query = url.split(\".\")\n\n if (query.length > 0) {\n let version = query[1] || \"\"\n let splitIndex = query[0].indexOf(\"/\")\n if (splitIndex < 0) splitIndex = query[0].length\n let params = {\n inchikey: query[0].substring(0, splitIndex),\n type: query[0].substring(splitIndex + 1),\n version: version\n }\n\n PublicFetcher.queryInchikey(params)\n }\n\n },\n },\n '/*': 'show'\n },\n\n '/review_reaction': {\n target: {\n show: function(e) {\n ReviewActions.displayReviewReaction(e.params.reactionId)\n },\n },\n '/:reactionId': 'show'\n },\n\n '/review_sample': {\n target: {\n show: function(e) {\n ReviewActions.displayReviewSample(e.params.sampleId)\n },\n },\n '/:sampleId': 'show'\n },\n\n '/embargo': {\n target: {\n list: function (e) {\n PublicActions.openRepositoryPage(\"embargo\");\n },\n show: function (e) {\n EmbargoActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)\n },\n },\n '/': 'list',\n '/:elementType/:elementId': 'show'\n },\n\n '/howto': {\n target: {\n list: function (e) {\n PublicActions.howtos();\n },\n show: function (e) {\n PublicActions.displayHowTo(e.params.key)\n },\n },\n '/': 'list',\n '/:key': 'show'\n },\n}\n\nexport default function() {\n Aviator.root = '/home'\n Aviator.pushStateEnabled = true\n Aviator.setRoutes(routes)\n}\n","import React from 'react'\nimport { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';\n\nconst Title =![\"chemotion-\"](\"/images/repo/logo.png\")
Repository\n\nconst NavHead = () => {\n const isHome = window.location.href.match(/\\/home/)\n return(\n \n \n \n \n \n \n \n \n )\n}\n\nexport default NavHead;\n","import React from 'react';\nimport {\n Button,\n Nav,\n Navbar,\n NavItem,\n OverlayTrigger,\n Tooltip,\n} from 'react-bootstrap';\nimport Aviator from 'aviator';\nimport UserAuth from 'src/components/navigation/UserAuth';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport UserActions from 'src/stores/alt/actions/UserActions';\nimport NavNewSession from 'src/components/navigation/NavNewSession';\nimport NavHead from 'src/repoHome/NavHead';\nimport DocumentHelper from 'src/utilities/DocumentHelper';\n\nconst aviItem = (currentUser, key, url, text) => {\n if (!currentUser) return null;\n return (\n Aviator.navigate(url)}\n className=\"white-nav-item\"\n >\n {text}\n \n );\n};\n\nexport default class Navigation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n currentUser: null,\n modalProps: {\n show: false,\n title: '',\n component: '',\n action: null,\n listSharedCollections: false,\n },\n };\n this.onChange = this.onChange.bind(this);\n this.onUIChange = this.onUIChange.bind(this);\n // this.toggleCollectionTree = this.toggleCollectionTree.bind(this)\n }\n\n componentDidMount() {\n UIStore.listen(this.onUIChange);\n UserStore.listen(this.onChange);\n UserActions.fetchCurrentUser();\n UserActions.fetchUserLabels();\n UserActions.fetchOmniauthProviders();\n }\n\n componentWillUnmount() {\n UIStore.unlisten(this.onUIChange);\n UserStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n const newId = state.currentUser ? state.currentUser.id : null;\n const oldId = this.state.currentUser ? this.state.currentUser.id : null;\n if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }\n\n\n if (state.omniauthProviders !== this.state.omniauthProviders) {\n this.setState({\n omniauthProviders: state.omniauthProviders\n });\n }\n }\n\n onUIChange(state) {\n this.setState({\n modalProps: state.modalParams,\n });\n }\n\n // toggleCollectionTree() {\n // this.props.toggleCollectionTree();\n // }\n\n token() { return DocumentHelper.getMetaContent(\"csrf-token\") }\n\n updateModalProps(modalProps) { this.setState({ modalProps }); }\n\n navHeader() {\n return (\n \n \n {/* */}\n \n \n )\n }\n\n render() {\n const { modalProps, currentUser, omniauthProviders } = this.state;\n\n let userBar = ;\n if (currentUser) {\n userBar = ![\"Chemotion-Repository\"](\"/images/repo/chemotion_full.svg\"/)
\n return (\n \n \n \n Aviator.navigate('/home')}\n >\n Chemotion-Repository\n \n \n \n \n {userBar}\n \n \n \n );\n }\n}\n","import Aviator from 'aviator';\nimport alt from 'src/stores/alt/alt';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\n\nclass EmbargoStore {\n constructor() {\n this.selectEmbargoId;\n this.bundles = [];\n this.selectType;\n this.selectState;\n this.searchType;\n this.searchValue;\n this.review_info == {};\n this.element = null;\n // this.elements = [];\n\n this.bindListeners({\n handleEmbargoMove: EmbargoActions.moveEmbargo,\n handleEmbargoAssign: EmbargoActions.assignEmbargo,\n handleEmbargoRelease: [EmbargoActions.releaseEmbargo, EmbargoActions.deleteEmbargo],\n handleFetchBundles: EmbargoActions.fetchEmbargoBundle,\n handleDisplayEmbargoElement: EmbargoActions.displayReviewEmbargo,\n handleGetEmbargoElements: EmbargoActions.getEmbargoElements,\n handleGetEmbargoElement: EmbargoActions.getEmbargoElement,\n handleClose: PublicActions.close,\n });\n }\n\n handleClose({ deleteEl }) {\n this.setState({ currentElement: null });\n }\n\n handleDisplayEmbargoElement(result) {\n const publication = result?.element?.publication || {};\n if (result?.element?.review_info?.review_level === 0) {\n Aviator.navigate('/home/');\n } else {\n const elementType = (result.element.sample ? 'sample' : 'reaction');\n this.setState({\n selectEmbargo: result.element.selectEmbargo,\n guestPage: 'embargo',\n elementType,\n queryId: result.id,\n currentElement: result.element,\n review: publication?.review || {},\n review_info: result.element?.review_info\n });\n Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });\n }\n }\n\n handleGetEmbargoElement(results) {\n this.setState({ element: results })\n }\n\n\n handleEmbargoRelease(result) {\n EmbargoActions.fetchEmbargoBundle();\n }\n\n handleEmbargoAssign(result) {\n if (result.error) {\n alert(result.error);\n } else {\n alert(result.message);\n // refresh embargo list\n EmbargoActions.getEmbargoBundle();\n // refresh element list\n PublicActions.getElements(\n this.selectType, this.selectState, null, this.searchType,\n this.searchValue, this.page, this.perPage\n );\n }\n }\n\n handleEmbargoMove(results) {\n const { col_id, is_new_embargo, new_embargo, message } = results.result;\n if (is_new_embargo === true) {\n this.bundles.push(new_embargo);\n }\n alert(message);\n EmbargoActions.getEmbargoElements(col_id);\n }\n\n\n handleRefreshEmbargoBundles(result) {\n const cols = result.repository;\n const { current_user } = result;\n const bundles = [];\n if (cols && cols.length > 0) {\n cols.forEach((col) => {\n bundles.push(col);\n });\n }\n this.setState({ bundles, current_user });\n }\n handleFetchBundles(result) {\n const bundles = result.repository || [];\n // eslint-disable-next-line camelcase\n const { current_user } = result;\n this.setState({\n guestPage: 'embargo', bundles, current_user, elements: [], element: null\n });\n }\n\n handleGetEmbargoElements(results) {\n const { elements, current_user, embargo_id, embargo } = results;\n this.setState({\n selectEmbargoId: embargo_id,\n selectEmbargo: embargo,\n elements,\n element: null,\n currentUser: current_user\n });\n }\n}\n\nexport default alt.createStore(EmbargoStore, 'EmbargoStore');\n","import React, { Component } from 'react';\nimport EmbargoStore from 'src/stores/alt/repo/stores/EmbargoStore';\nimport RepoReactionDetails from 'src/repoHome/RepoReactionDetails';\nimport RepoSampleDetails from 'src/repoHome/RepoSampleDetails';\n\nexport default class RepoEmbargoDetails extends Component {\n constructor(props) {\n super(props);\n this.state = {\n element: props.element\n };\n\n this.onStoreChange = this.onStoreChange.bind(this);\n }\n\n componentDidMount() {\n EmbargoStore.listen(this.onStoreChange);\n }\n\n componentWillUnmount() {\n EmbargoStore.unlisten(this.onStoreChange);\n }\n\n onStoreChange(state) {\n this.setState(prevState => ({ ...prevState, ...state }));\n }\n\n switchTypeRender() {\n const { elementType } = this.state;\n const { currentElement } = this.props;\n\n if (typeof (currentElement) === 'undefined' || !currentElement) {\n return ;\n }\n switch (elementType) {\n case 'reaction':\n return (\n copy to clipboard}>\n \n \n \n );\n return (\n \n \n \n \n \n Author{author_ids.length > 1 ? 's' : ''}: \n
\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport { MetadataModal, InfoModal };\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport uuid from 'uuid';\nimport {\n Modal,\n Button,\n ButtonToolbar,\n Table,\n Label,\n FormControl,\n} from 'react-bootstrap';\n\nexport default class EmbargoCommentsModal extends React.Component {\n constructor(props) {\n super(props);\n this.onSave = this.onSave.bind(this);\n }\n\n componentDidMount() {}\n\n onSave(comment) {\n this.props.onSaveFn(comment);\n }\n\n render() {\n const { showModal, selectEmbargo, onCloseFn } = this.props;\n const review = selectEmbargo?.review || {};\n const label = selectEmbargo?.taggable_data?.label || '';\n const history = review?.history || [];\n const historyTbl = history.map((his, idx) => {\n if (idx === history.length - 1) return ;\n return (\n \n {idx + 1} \n {his.timestamp} \n {his.comment} \n {his.username} \n \n );\n });\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nEmbargoCommentsModal.propTypes = {\n showModal: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/require-default-props\n selectEmbargo: PropTypes.object,\n onSaveFn: PropTypes.func.isRequired,\n onCloseFn: PropTypes.func.isRequired,\n};\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport { Col, Button } from 'react-bootstrap';\nimport PropTypes from 'prop-types';\nimport uuid from 'uuid';\nimport { AffiliationMap } from 'repo-review-ui';\nimport { OrcidIcon } from 'src/repoHome/RepoCommon';\nimport RepoConst from 'src/components/chemrepo/common/RepoConst';\nimport StateLabel from 'src/components/chemrepo/common/StateLabel';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\n\nconst renderAffiliations = ({ affiliations, affiliationMap }) => {\n const names = [];\n Object.keys(affiliationMap).map(affiliationId => {\n const ind = affiliationMap[affiliationId];\n names[ind] = affiliations[affiliationId];\n return null;\n });\n return (\n \n
\n \n );\n};\n\nconst renderRecord = (rec, index, currentUser) => {\n const history = rec?.review?.history || [];\n const comment = history.length > 1 ? history[history.length - 2].comment : '';\n const { element_id: recId, taggable_data: taggableData } = rec;\n const { element_dois: dois = [] } = taggableData;\n const affiliationMap = AffiliationMap(taggableData.affiliation_ids);\n const states = { reviewed: {}, accepted: {}, pending: {} };\n\n dois.forEach(item => {\n const {\n label,\n id,\n element_id: elementId,\n state,\n element_type: elementType,\n } = item;\n if (!states[state]) {\n console.log(\n 'label, id, elementId, elementType, state=',\n label,\n id,\n elementId,\n elementType,\n state\n );\n states[state] = {};\n }\n if (!states[state][elementType]) {\n states[state][elementType] = 0;\n }\n states[state][elementType] += 1;\n });\n\n const viewDetailBtn =\n currentUser.is_reviewer ||\n currentUser.is_submitter ||\n (rec?.review?.submitters || []).includes(currentUser?.id) ||\n currentUser?.type === RepoConst.U_TYPE.ANONYMOUS ? (\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 PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport PublicFetcher from 'src/repo/fetchers/PublicFetcher';\nimport RepoNavListTypes from 'src/repoHome/RepoNavListTypes';\nimport ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\n\nconst routes = {\n '/': 'root',\n target: {\n root: function(e) {\n Aviator.navigate('/home/welcome')\n }\n },\n\n '/welcome': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"welcome\")\n },\n },\n '/': 'show'\n },\n\n '/home': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"home\")\n },\n },\n '/': 'show'\n },\n '/publications': {\n target: {\n show: function(e) {\n LoadingActions.start();\n PublicActions.setSearchParams({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n });\n PublicActions.getReactions.defer();\n PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.REACTION}`)\n },\n },\n '/': 'show',\n },\n '/genericHub': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage('genericHub')\n },\n },\n '/': 'show'\n },\n '/moleculeArchive': {\n target: {\n show: function(e) {\n LoadingActions.start();\n PublicActions.setSearchParams({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n });\n PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }); // .defer();\n PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)\n },\n },\n '/': 'show'\n },\n '/review': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"review\")\n },\n },\n '/': 'show'\n },\n '/about': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"about\")\n },\n },\n '/': 'show'\n },\n '/contact': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"contact\")\n },\n },\n '/': 'show'\n },\n\n '/newsroom': {\n target: {\n list: function (e) {\n PublicActions.articles();\n },\n show: function (e) {\n PublicActions.displayArticle(e.params.key)\n },\n },\n '/': 'list',\n '/:key': 'show'\n },\n\n '/newseditor': {\n target: {\n edit: function (e) {\n PublicActions.editArticle(e.params.key)\n },\n show: function (e) {\n PublicActions.editArticle('new')\n },\n },\n '/show': 'show',\n '/:key': 'edit'\n },\n\n '/howtoeditor': {\n target: {\n edit: function (e) {\n PublicActions.editHowTo(e.params.key)\n },\n show: function (e) {\n PublicActions.editHowTo('ein')\n },\n },\n '/show': 'show',\n '/:key': 'edit'\n },\n\n '/directive': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"directive\")\n },\n },\n '/': 'show'\n },\n\n '/preservation': {\n target: {\n show: function(e) {\n PublicActions.openRepositoryPage(\"preservation\")\n },\n },\n '/': 'show'\n },\n\n '/datasets': {\n target: {\n show: function(e) {\n PublicActions.displayDataset(e.params.datasetId)\n },\n },\n '/:datasetId': 'show'\n },\n\n '/molecules': {\n target: {\n show: function(e) {\n PublicActions.displayMolecule(e.params.moleculeId)\n },\n tag: function (e) {\n PublicActions.displayMolecule(e.params.moleculeId, e.params.suffix)\n }\n },\n '/:moleculeId/:suffix': 'tag',\n '/:moleculeId': 'show'\n },\n\n '/reactions': {\n target: {\n show: function(e) {\n PublicActions.displayReaction(e.params.reactionId)\n },\n },\n '/:reactionId': 'show'\n },\n\n '/collection': {\n target: {\n show: function(e) {\n PublicActions.displayCollection(e.params.collectionId)\n },\n },\n '/:collectionId': 'show'\n },\n\n '/pid': {\n target: {\n show: function(e) {\n PublicFetcher.queryPid({id: e.params.id})\n }\n },\n '/:id': 'show'\n },\n\n '/inchikey': {\n target: {\n show: function(e) {\n let url = e.uri.replace(\"/inchikey/\", \"\")\n let query = url.split(\".\")\n\n if (query.length > 0) {\n let version = query[1] || \"\"\n let splitIndex = query[0].indexOf(\"/\")\n if (splitIndex < 0) splitIndex = query[0].length\n let params = {\n inchikey: query[0].substring(0, splitIndex),\n type: query[0].substring(splitIndex + 1),\n version: version\n }\n\n PublicFetcher.queryInchikey(params)\n }\n\n },\n },\n '/*': 'show'\n },\n\n '/review_reaction': {\n target: {\n show: function(e) {\n ReviewActions.displayReviewReaction(e.params.reactionId)\n },\n },\n '/:reactionId': 'show'\n },\n\n '/review_sample': {\n target: {\n show: function(e) {\n ReviewActions.displayReviewSample(e.params.sampleId)\n },\n },\n '/:sampleId': 'show'\n },\n\n '/embargo': {\n target: {\n list: function (e) {\n PublicActions.openRepositoryPage(\"embargo\");\n },\n show: function (e) {\n EmbargoActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)\n },\n },\n '/': 'list',\n '/:elementType/:elementId': 'show'\n },\n\n '/howto': {\n target: {\n list: function (e) {\n PublicActions.howtos();\n },\n show: function (e) {\n PublicActions.displayHowTo(e.params.key)\n },\n },\n '/': 'list',\n '/:key': 'show'\n },\n}\n\nexport default function() {\n Aviator.root = '/home'\n Aviator.pushStateEnabled = true\n Aviator.setRoutes(routes)\n}\n","import React from 'react'\nimport { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';\n\nconst Title =
Repository\n\nconst NavHead = () => {\n const isHome = window.location.href.match(/\\/home/)\n return(\n \n return (\n \n {this.switchTypeRender()}\n
);\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport { AffiliationMap } from 'repo-review-ui';\nimport Utils from 'src/utilities/Functions';\nimport {\n AffiliationList,\n AuthorList,\n ContributorInfo,\n DownloadMetadataBtn\n} from 'src/repoHome/RepoCommon';\n\nconst Doi = (props) => {\n const { type, id, doi } = props;\n const title = `${type} DOI:`.replace(/(^\\w)/g, m => m.toUpperCase());\n const data = (\n \n \n \n {title} \n {data}\n
\n );\n};\n\nconst MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {\n const contentUrl = `/api/v1/public/metadata/download?type=${elementType.toLowerCase()}&id=${elementId}`;\n return (\n\n \n \n
\n\n \n \n \n \n \n
\n );\n};\n\nMetadataModal.propTypes = {\n elementId: PropTypes.number.isRequired,\n elementType: PropTypes.string.isRequired\n};\n\nconst ElementDoi = (edois, isPublished) => {\n if (edois == null || typeof edois === 'undefined' || edois.length === 0) { return (); }\n const dois = edois.map(edoi => (\n
\n {metadata}\n
\n \n
{dois}
);\n};\n\nconst InfoModal = ({ showModal, selectEmbargo, onCloseFn, editable=false }) => {\n const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};\n const affiliationMap = AffiliationMap(tag.affiliation_ids);\n const doi = tag.col_doi || '';\n const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;\n const isPublished = true;\n const author_ids = tag.author_ids || [];\n const id = (selectEmbargo && selectEmbargo.element_id) || 0;\n return (\n \n Author{author_ids.length > 1 ? 's' : ''}: \n
\n \n {ElementDoi(tag.element_dois, isPublished)}\n
\n \n \n
\n\n
\n Comment:\n {\n this.summaryInput = m;\n }}\n />\n
\n \n \n \n
\n
\n | # | \nDate | \nComment | \nFrom User | \n
|---|
\n Comment:\n
\n {names.map((e, i) =>\n i === 0 ? null : (\n
\n );\n};\n\nconst renderAuthors = ({ creators, affiliationMap }) => {\n if (!creators) return null;\n return (\n \n {creators.map(creator => (\n \n {i}. {e}\n
\n )\n )}\n \n
\n ))}\n \n );\n};\n\nconst renderOverview = ({ states, state }) => {\n return (\n \n \n {` ${states[state].Reaction || 0} `}\n
\n \n \n {` ${states[state].Sample || 0}`}\n
\n \n \n {` ${taggableData.label} `}\n {viewDetailBtn}\n \n {viewComment}\n
\n \n\n \n \n \n \n \n
\n \n {taggableData.contributors?.affiliations?.map((e, i) => (\n
\n \n
\n \n \n
\n \n {taggableData.contributors?.affiliations?.map((e, i) => (\n \n \n {i + 1}. {e.replace(/,/g, ',\\u00A0')}\n \n
\n \n ))}\n
\n \n \n
\n Author(s):\n
{' '}\n {renderAuthors({ creators: taggableData.creators, affiliationMap })}\n {renderAffiliations({\n affiliations: taggableData.affiliations,\n affiliationMap,\n })}\n \n\n Overview:\n
\n {renderOverview({ states, state: 'pending' })}\n {renderOverview({ states, state: 'reviewed' })}\n {renderOverview({ states, state: 'accepted' })}\n \n \n );\n};\n\nfunction RepoEmbargoOverview(props) {\n const { collections, currentUser } = props;\n\n if (collections?.length === 0) return null;\n\n const overview = collections.map((m, index) =>\n renderRecord(m, index, currentUser)\n );\n\n return overview;\n}\n\nRepoEmbargoOverview.propTypes = {\n collections: PropTypes.arrayOf(PropTypes.object).isRequired,\n currentUser: PropTypes.object.isRequired,\n};\n\nexport default RepoEmbargoOverview;\n","import React, { Component } from 'react';\nimport {\n Table,\n Col,\n Row,\n Navbar,\n ButtonGroup,\n Button,\n ButtonToolbar,\n Modal,\n Panel,\n OverlayTrigger,\n Tooltip,\n} from 'react-bootstrap';\nimport uuid from 'uuid';\nimport Select from 'react-select';\nimport { filter } from 'lodash';\nimport RepoEmbargoDetails from 'src/repoHome/RepoEmbargoDetails';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\nimport EmbargoStore from 'src/stores/alt/repo/stores/EmbargoStore';\nimport { ElAspect } from 'src/repoHome/RepoCommon';\nimport { ConfirmModal } from 'src/components/common/ConfirmModal';\nimport { MetadataModal, InfoModal } from 'src/repoHome/RepoEmbargoModal';\nimport RepoReviewAuthorsModal from 'src/components/chemrepo/common/RepoReviewAuthorsModal';\nimport EmbargoCommentsModal from 'src/components/chemrepo/common/EmbargoCommentsModal';\nimport EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';\nimport RepoEmbargoOverview from 'src/repoHome/RepoEmbargoOverview';\nimport RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';\n\nconst btnMessage = (_msg, _btn) => (\n\n {filterDropdown}\n
\n );\n }\n\n renderSearch(bundles) {\n const { selectEmbargo, elements, current_user } = this.state;\n const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');\n const options = [];\n const hasComment = selectEmbargo?.review?.history?.length > 0;\n bundles?.forEach((col) => {\n if (current_user.is_reviewer || current_user.is_submitter || col.published_by === current_user.id ||\n (col.review?.submitters || []).includes(current_user.id) || current_user.type === 'anonymous') {\n const tag = col.taggable_data || {};\n options.push({ value: col.element_id, name: tag.label, label: tag.label });\n }\n });\n\n const filterDropdown = (\n \n this.handleElementSelection(e)}\n options={options}\n style={{ width: '148px' }}\n clearable={false}\n />\n \n {btnMessage('Show all embargos', this.handleOverview()}\n >\n \n \n )}\n {btnMessage('Comments', this.handleCommentsShow()}\n >\n \n \n )}\n {btnMessage('Metadata', this.handleMetadataShow()}\n >\n \n \n )}\n {btnMessage('Info. and DOIs', this.handleInfoShow()}\n >\n \n \n )}\n \n
\n );\n\n return (\n \n {filterDropdown}\n
\n );\n }\n\n renderMoveModal() {\n const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;\n const options = [\n { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },\n ];\n\n bundles?.forEach((col) => {\n const tag = col.taggable_data || {};\n options.push({ value: col.element_id, name: tag.label, label: tag.label });\n });\n\n const allBundles = filter(options, b => b.value !== (selectEmbargo == null ? '' : selectEmbargo.element_id));\n\n return (\n \n \n \n \n Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.taggable_data.label}] to :\n \n \n \n \n \n
\n \n this.handleEmbargoChange(e)}\n options={allBundles}\n className=\"select-assign-collection\"\n />\n
\n\n \n \n
\n \n
\n
\n \n \n \n {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, EmbargoActions.displayReviewEmbargo, current_user, isOwner, currentElement, this.handleMoveShow)) }\n \n
\n
\n {this.rendeActionBtn(bundles)}\n \n {this.switchTypeRender()}\n
);\n }\n}\n","import React, { Component } from 'react';\nimport { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport uuid from 'uuid';\nimport RepoCollectionDetails from 'src/repoHome/RepoCollectionDetails';\nimport PublicStore from 'src/stores/alt/repo/stores/PublicStore';\nimport { MetadataModal, InfoModal } from 'src/repoHome/RepoEmbargoModal';\nimport EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';\nimport { getFormattedISODate } from 'src/components/chemrepo/date-utils';\nimport SVGView from 'src/components/chemrepo/SVGViewPan';\n\nconst infoTag = (el, la) => {\n let authorInfo = '';\n authorInfo = (Author
{el.published_by}
\n
\n ID
{`${el.type === 'Reaction' ? 'CRR' : 'CRS'}-${el.pub_id}`}
\n \n
\n Embargo
{la}
\n \n
\n Published on
{getFormattedISODate(el.published_at)}
\n \n
\n Analyses
{el.ana_cnt || 0}
\n \n \n
\n {infoTag(el, la)}\n
\n \n );\n};\n\nexport default class RepoCollection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n elements: [],\n element: null,\n selectEmbargo: null,\n showInfoModal: false,\n showMetadataModal: false,\n };\n this.onChange = this.onChange.bind(this);\n this.handleInfoShow = this.handleInfoShow.bind(this);\n this.handleInfoClose = this.handleInfoClose.bind(this);\n this.handleMetadataShow = this.handleMetadataShow.bind(this);\n this.handleMetadataClose = this.handleMetadataClose.bind(this);\n this.fetchEmbargoElement = this.fetchEmbargoElement.bind(this);\n this.fetchEmbargoElements = this.fetchEmbargoElements.bind(this);\n }\n\n componentDidMount() {\n PublicStore.listen(this.onChange);\n if (!this.state.selectEmbargo) {\n const id = window.location.pathname.split('/').pop();\n this.fetchEmbargoElements(id);\n }\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n if (state.elements && state.elements != this.state.elements) {\n this.setState({ elements: state.elements });\n }\n if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {\n this.setState({ selectEmbargo: state.selectEmbargo });\n this.fetchEmbargoElements(state.selectEmbargo.element_id);\n }\n\n if (state.element !== this.state.element) {\n this.setState({ element: state.element });\n }\n }\n\n fetchEmbargoElements(embargoId) {\n EmbargoFetcher.fetchEmbargoElements(embargoId)\n .then((result) => {\n if (!result.error) {\n const {\n elements, current_user, embargo\n } = result;\n this.setState({\n selectEmbargo: embargo,\n elements,\n currentUser: current_user\n });\n }\n }).catch((errorMessage) => {\n console.log(errorMessage);\n });\n }\n\n fetchEmbargoElement(cid, el) {\n EmbargoFetcher.fetchEmbargoElement(cid, el)\n .then((result) => {\n if (!result.error) { this.setState({ element: result }); }\n }).catch((errorMessage) => {\n console.log(errorMessage);\n });\n }\n\n handleInfoShow() {\n this.setState({ showInfoModal: true });\n }\n\n handleInfoClose() {\n this.setState({ showInfoModal: false });\n }\n\n handleMetadataShow() {\n this.setState({ showMetadataModal: true });\n }\n\n handleMetadataClose() {\n this.setState({ showMetadataModal: false });\n }\n\n renderSearch() {\n const { selectEmbargo, elements } = this.state;\n const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;\n\n const actionButtons =\n (\n \n \n The data on this page refers to the data collection: {la} \n {filterDropdown}\n
\n );\n }\n\n render() {\n const {\n elements, element, currentUser, showInfoModal, selectEmbargo, showMetadataModal\n } = this.state;\n const id = (selectEmbargo && selectEmbargo.element_id) || 0;\n const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;\n const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';\n return (\n \n \n \n {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element, this.fetchEmbargoElement)) }\n \n
\n
\n \n \n
\n research data repository
\n \nSamples
\n \n {stsSample.e_cnt}{' '}\n \n \n \n
\n {stsSampleReview.e_cnt} under review
\n {stsSampleEmbargo.e_cnt} under embargo
\n Reactions
\n \n {stsReaction.e_cnt}{' '}\n \n \n \n
\n {stsReactionReview.e_cnt} under review
\n {stsReactionEmbargo.e_cnt} under embargo
\n Analyses
\n {stsAnalysisCnt} published
\n \n
\n Top 3:
\n \n {stsAnalysisSort[0].e_cnt} {stsAnalysisSort[0].ex_type}\n
\n {stsAnalysisSort[1].e_cnt} {stsAnalysisSort[1].ex_type}\n
\n {stsAnalysisSort[2].e_cnt} {stsAnalysisSort[2].ex_type}\n
\n \n {stsAnalysisSort[1].e_cnt} {stsAnalysisSort[1].ex_type}\n
\n {stsAnalysisSort[2].e_cnt} {stsAnalysisSort[2].ex_type}\n
\n \n \n \n \n \n \n
\n );\n }\n return ;\n};\n\nexport default RepoCardLatestPublish;\n","import React from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport RepoCardLatestPublish from 'src/repoHome/RepoCardLatestPublish';\n\nconst RepoCardIntro = ({ lastPublished }) => (\n \n PublicActions.displayMolecule(sample.molecule.id)}>\n \n \n \n Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}\n \n
\n \n PublicActions.displayReaction(reaction.id)}>\n \n \n \n Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}\n \n
\n \n \n
\n \n
\n
\n);\n\nexport default RepoCardIntro;\n","import React from 'react';\nimport { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport Aviator from 'aviator';\n\nconst RepoCardMoleculeArchive = (params) => {\n const { publishedStatics } = params;\n let count = 0;\n if (publishedStatics && publishedStatics.length !== 0) {\n count = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'xvial'))?.e_cnt || 0;\n }\n const tooltipView = Repository for samples, reactions and related research data
\n \n\n
\n \n \n this repository is part of the strategy of\n
\narchive for materials
\n \nSamples
\n \n
\n \n \n \n {count}{' '}\n \n \n \n
\n Compounds
\n \n }`})
\n
\n
\n);\n\nReviewerCard.propTypes = {\n name: PropTypes.string.isRequired,\n photo: PropTypes.string.isRequired,\n tel: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n};\n\nexport const ReviewGuidelines = () => (\n \n {name}
\nTel.: {tel}
\n\n
\n
\n \n Chemotion Repository Review Guidelines
\n\n The Chemotion Repository is a curated repository. The submitted entries are curated with respect to formal aspects and feedback is given referring to possible questions or errors. This effort is done to ensure a high quality of the submitted data and to provide data according to community standards. The most important formatting requirements and other hints that can help users to pass the curation easily are described in detail in the documentation, e.g. here (and following pages): Chemotion Repository > Details and Standards\n
\n\n The reviewers involved in the curation are volunteers that support the idea of collecting open data. They do their best to guide and support users. All reviewers confirmed to work according to ethical standards. This means in detail that reviewers declare that they will thoroughly review all submissions for publication to the best of their knowledge and ability. They pledge to treat all content confidentially and to not disclose any information, whether personal or factual, to third parties during the review process. They will assess all submissions neutrally, impartially, and by the same criteria. If a conflict of interest arises, they will decline the review of the submission and transfer it to another reviewer for evaluation.\n
\n\n Please don't hesitate to contact the reviewers assigned to your submissions if there are any questions. Please use the option to answer per feedback note, we are glad for all comments and explanations.\n
\nThe Reviewers
\n \n
\n {header}
\n{content}
\n\n {Infos.slice(start, end).map((info, index) => PartnerInfo(info, index))}\n
\n );\n}\n\nPartners.propTypes = {\n start: PropTypes.number.isRequired,\n end: PropTypes.number.isRequired,\n};\n\nexport default Partners;\n","import React, { Component } from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport PublicStore from 'src/stores/alt/repo/stores/PublicStore';\nimport { HomeFeature } from 'src/repoHome/RepoCommon';\nimport RepoCardStaticsBoard from 'src/repoHome/RepoCardStaticsBoard';\nimport RepoCardIntro from 'src/repoHome/RepoCardIntro';\nimport RepoCardMoleculeArchive from 'src/repoHome/RepoCardMoleculeArchive';\nimport {\n RepoCardReviewerIntro,\n RepoCardReviewerIntroBtn,\n} from 'src/repoHome/RepoCardReviewerIntro';\nimport PublicSearchIcons from 'src/components/chemrepo/search/PublicSearchIcons';\nimport Partners from 'src/repoHome/RepoPartners';\n\nconst features = {\n metadata: {\n fa: 'fa fa-file-code-o',\n title: 'Metadata',\n intro:\n 'Keep your research data findable and accessible and collect descriptions about the data. ' +\n 'Based on DataCite Metadata Scheme.',\n },\n doi: {\n fa: 'fa fa-id-card-o',\n title: 'DOI',\n intro:\n 'Tie Digital Object Identifier (DOI) to your research data. ' +\n 'This registers your data in DataCite and makes it identifiable, ' +\n 'searchable and citable.',\n },\n license: {\n fa: 'fa fa-creative-commons',\n title: 'Licenses',\n intro:\n 'Choose which license is suitable for your research data to allow others to re-use your data.',\n },\n embargo: {\n fa: 'fa fa-ban',\n title: 'Embargo',\n intro:\n 'Put an embargo on your data. This allows you to delay the publication of your research data. ' +\n 'You can release to make your research data visible to the public whenever you are ready.',\n },\n // usage: {\n // fa: 'fa fa-bar-chart',\n // title: 'Usage',\n // intro: 'Assess your research data and track the published research data......'\n // },\n oai: {\n fa: 'fa fa-tasks',\n title: 'OAI Provider',\n intro:\n 'Exposes your research data using the Open Archives Initiative Protocol ' +\n 'for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata ' +\n 'and we support representing the metadata of your published research data.',\n },\n dataQuality: {\n fa: 'fa fa-diamond',\n title: 'Data Quality',\n intro:\n 'Release your research data and pass an internal review that ensures data quality.',\n },\n peer: {\n fa: 'fa fa-users',\n title: 'Peer review',\n intro:\n 'Before publication, you can share your data with external reviewers or the publishers.',\n },\n store: {\n fa: 'fa fa-database',\n title: 'Storage',\n intro:\n 'Hosted by an experienced data center, ' +\n 'Chemotion repository can store your research data reliably and securely.',\n },\n api: {\n fa: 'fa fa-connectdevelop',\n title: 'APIs',\n intro:\n 'With Chemotion APIs, transfer data easily from your ELN to the Chemotion repository.',\n },\n labimotion: {\n fa: 'fa fa-empire',\n title: 'Extensive Customization',\n intro:\n 'With LabIMotion: Tailor your modules or benefit from the availability of new elements, ' +\n \"sections, and dataset templates that can be tailored to meet scientists' specific requirements.\",\n },\n};\n\nclass RepoHome extends Component {\n constructor() {\n super();\n this.state = { showReviewers: false };\n this.onChange = this.onChange.bind(this);\n this.onShow = this.onShow.bind(this);\n }\n\n componentDidMount() {\n PublicStore.listen(this.onChange);\n PublicActions.lastPublished();\n PublicActions.publishedStatics();\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n }\n\n onChange(PublicState) {\n if (PublicState.lastPublished || PublicState.publishedStatics) {\n this.setState(prevState => ({\n ...prevState,\n lastPublished: PublicState.lastPublished,\n publishedStatics: PublicState.publishedStatics,\n }));\n }\n }\n\n onShow() {\n this.setState(prevState => ({\n ...prevState,\n showReviewers: !prevState.showReviewers,\n }));\n }\n\n render() {\n const { publishedStatics, lastPublished, showReviewers } = this.state;\n\n return (\n \n
\n \n \n Features\n
\n \n \n Partners, Affiliations, APIs\n
\n \n \n {this.switchTypeRender()}\n
\n );\n }\n}\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport uuid from 'uuid';\nimport SVG from 'react-inlinesvg';\nimport PropTypes from 'prop-types';\nimport { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport { getFormattedISODate } from 'src/components/chemrepo/date-utils';\n\nconst xvialTag = (element, hasXvial = null) => {\n const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);\n let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);\n if (element.xvial_com === -1 || element.xvial_com === -2) {\n hasXCom = hasX;\n } else {\n hasXCom = (element.xvial_com > 0);\n }\n if (!hasX && !hasXCom) return (-);\n return ();\n};\n\nconst svgTag = (path, klassName, isPubElement) => {\n const popHover = (\n Author
{taggData.creators[0] && taggData.creators[0].name}
Contributor
{taggData.contributors.name}
Author
\n
\n ID
{`CRR-${pubData}`}
\n \n
\n Embargo
{reaction.embargo}
\n \n
\n Published on
{getFormattedISODate(reaction.published_at)}
\n \n
\n Analyses
{reaction.ana_cnt || 0}
\n \n
\n Sample
{xvialTag(reaction)}
\n \n \n
\n {infoTag(element, schemeOnly, listClass)}\n
\n \n );\n};\n\nRepoReactionList.propTypes = {\n element: PropTypes.object.isRequired,\n currentElement: PropTypes.object,\n isPubElement: PropTypes.bool,\n schemeOnly: PropTypes.bool\n};\n\nRepoReactionList.defaultProps = {\n isPubElement: false,\n schemeOnly: false,\n currentElement: null\n};\n\nexport default RepoReactionList;\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport uuid from 'uuid';\nimport PropTypes from 'prop-types';\nimport { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport Formula from 'src/components/common/Formula';\nimport PubchemLabels from 'src/components/pubchem/PubchemLabels';\nimport { xvialTag, svgTag } from 'src/repoHome/RepoPubCommon';\nimport { getFormattedISODate } from 'src/components/chemrepo/date-utils';\nimport { ExtIcon } from 'src/components/chemrepo/ExtIcon';\n\nconst pubchemTag = molecule => {\n if (molecule?.tag?.taggable_data?.pubchem_cid) {\n return {\n pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid },\n };\n }\n return false;\n};\n\nconst infoTag = molecule => {\n const pubData = (molecule && molecule.pub_id) || '';\n return (\n \n
\n \n ID
\n {`CRS-${pubData}`}
\n \n
\n \n Embargo
\n {molecule.embargo}
\n \n
\n Author
\n {molecule.author_name}
\n \n
\n Published on
\n \n {getFormattedISODate(molecule.published_at)}\n
\n \n
\n Analyses
\n {molecule.ana_cnt || 0}
\n \n
\n \n Sample
\n {xvialTag(molecule)}
\n \n \n \n
\n \n {molecule.iupac_name}\n \n {pubchemInfo ? (\n
\n \n
\n {infoTag(molecule)}\n
\n \n );\n}\n\nRepoMoleculeList.propTypes = {\n molecule: PropTypes.object.isRequired,\n currentElement: PropTypes.object,\n isPubElement: PropTypes.bool,\n advFlag: PropTypes.bool.isRequired,\n advType: PropTypes.string.isRequired,\n advValue: PropTypes.array.isRequired,\n};\n\nRepoMoleculeList.defaultProps = { isPubElement: false, currentElement: null };\n\nexport default RepoMoleculeList;\n","/* eslint-disable react/forbid-prop-types */\nimport React from 'react';\nimport SVG from 'react-inlinesvg';\nimport { Popover, OverlayTrigger } from 'react-bootstrap';\n\nconst xvialTag = (element, hasXvial = null) => {\n const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);\n let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);\n if (element.xvial_com === -1 || element.xvial_com === -2) {\n hasXCom = hasX;\n } else {\n hasXCom = (element.xvial_com > 0);\n }\n if (!hasX && !hasXCom) return (-);\n return ();\n};\n\nconst svgTag = (path, klassName, isPop, popW = '26vw') => {\n const popHover = (\n \n
\n ID
{`CRS-${pubData}`}
\n \n
\n Embargo
{molecule.embargo}
\n \n
\n Analyses
{molecule.ana_cnt || 0}
\n \n
\n \n );\n};\n\nRepoMoleculeArchive.propTypes = {\n molecule: PropTypes.object.isRequired,\n currentElement: PropTypes.object,\n isPubElement: PropTypes.bool,\n};\n\nRepoMoleculeArchive.defaultProps = {\n isPubElement: false,\n currentElement: null\n};\n\nexport default RepoMoleculeArchive;\n","import React, { Component } from 'react';\nimport {\n Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,\n Grid, Radio, DropdownButton, MenuItem,\n FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,\n Tabs, Tab\n} from 'react-bootstrap';\nimport Select from 'react-select';\nimport AsyncSelect from 'react-select5/async';\nimport uuid from 'uuid';\nimport UIActions from 'src/stores/alt/actions/UIActions';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport PublicStore from 'src/stores/alt/repo/stores/PublicStore';\nimport RepoElementDetails from 'src/repoHome/RepoElementDetails';\nimport SuggestionsFetcher from 'src/fetchers/SuggestionsFetcher';\nimport PublicFetcher from 'src/repo/fetchers/PublicFetcher';\nimport AutoCompleteInput from 'src/components/navigation/search/AutoCompleteInput';\nimport StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport RepoReactionList from 'src/repoHome/RepoReactionList';\nimport RepoMoleculeList from 'src/repoHome/RepoMoleculeList';\nimport RepoMoleculeArchive from 'src/repoHome/RepoMoleculeArchive';\nimport RepoNavListTypes from 'src/repoHome/RepoNavListTypes';\nimport { capitalizeFirstLetter } from 'src/components/chemrepo/format-utils';\nimport { SearchUserLabels } from 'src/components/UserLabels';\n\nconst renderMoleculeArchive =\n (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (\n \n \n
\n \n
\n \n
\n \n
\n \n Formula\n
\n \n
\n Provided by
\n {molecule.xvial_archive[0]?.provided_by}
\n \n
\n Group
\n {molecule.xvial_archive[0]?.group || 'Stefan Bräse Group'}
\n \n {infoTag(molecule)}\n
\n {hints[props.tab].title}
\n \n);\n\nconst handleSelectAdvType = (val) => {\n if (val) PublicActions.setSearchParams({ advFlag: true, advType: val, advValue: null });\n};\n\nexport default class RepoPubl extends Component {\n constructor(props) {\n super(props);\n this.state = {\n // ...PublicStore.getState(),\n page: 1,\n perPage: 10,\n showStructureEditor: false,\n isSearch: false,\n defaultSearchValue: null,\n selectType: 'all',\n inputDisabled: false,\n queryMolfile: null,\n searchType: 'similar',\n tanimotoThreshold: 0.7,\n listType: props.listType || RepoNavListTypes.REACTION,\n advFlag: false,\n advType: 'Authors',\n advValue: [],\n selectUsers: [],\n key: uuid.v4(),\n showSearch: false,\n };\n\n this.onChange = this.onChange.bind(this);\n this.changeSort = this.changeSort.bind(this);\n this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);\n this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);\n this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);\n this.showAdvancedSearch = this.showAdvancedSearch.bind(this);\n this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);\n this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);\n this.advSearchClick = this.advSearchClick.bind(this);\n this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);\n this.handleElementSelection = this.handleElementSelection.bind(this);\n this.handleShowSearch = this.handleShowSearch.bind(this);\n }\n\n componentDidMount() {\n PublicActions.selectPublicCollection.defer();\n PublicStore.listen(this.onChange);\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n const { searchOptions, advFlag } = state;\n this.setState(prevState => ({\n ...prevState, ...state, searchOptions: searchOptions || [], showSearch: (advFlag || false)\n }));\n }\n\n handleSearchTypeChange(e) {\n this.setState({ searchType: e.target && e.target.value });\n }\n\n handleStructureEditorCancel() {\n this.setState({ isSearch: false });\n this.hideStructureEditor();\n }\n\n showStructureEditor() {\n this.setState(\n { showStructureEditor: true },\n () => PublicActions.setSearchParams({ showStructureEditor: true, advFlag: true })\n );\n }\n\n hideStructureEditor() {\n this.setState(\n { showStructureEditor: false },\n () => {\n PublicActions.setSearchParams({ showStructureEditor: false });\n LoadingActions.stop();\n }\n );\n }\n\n showAdvancedSearch() {\n this.setState({ advFlag: true });\n }\n\n onPerPageChange(e) {\n this.setState({ perPage: e.target.value }, () => {\n PublicActions.setSearchParams({ perPage: e.target.value });\n this.getList();\n });\n }\n\n getList(ps = {}) {\n const {\n advFlag, advType, advValue,\n isSearch,\n selectType, selection,\n page, perPage, listType\n } = this.state;\n let params = {\n advFlag,\n advType,\n advValue,\n elementType: selectType,\n page,\n perPage,\n selection,\n listType,\n ...ps\n };\n LoadingActions.start();\n if (isSearch) {\n switch (listType) {\n case RepoNavListTypes.REACTION:\n PublicActions.getSearchReactions(params);\n break;\n case RepoNavListTypes.MOLECULE_ARCHIVE:\n case RepoNavListTypes.SAMPLE:\n PublicActions.getSearchMolecules(params);\n break;\n case RepoNavListTypes.SCHEME:\n params = { ...params, collectionId: 'schemeOnly' };\n PublicActions.getSearchReactions(params);\n break;\n default:\n }\n return;\n }\n switch (listType) {\n case RepoNavListTypes.REACTION:\n params = { ...params, schemeOnly: false };\n PublicActions.getReactions(params);\n break;\n case RepoNavListTypes.MOLECULE_ARCHIVE:\n case RepoNavListTypes.SAMPLE:\n PublicActions.getMolecules(params);\n break;\n case RepoNavListTypes.SCHEME:\n params = { ...params, schemeOnly: true };\n PublicActions.getReactions(params);\n break;\n default:\n PublicActions.getReactions(params);\n }\n UIActions.clearSearchSelection();\n }\n\n handleClearSearchSelection() {\n this.setState({\n defaultSearchValue: null,\n searchType: 'similar',\n tanimotoThreshold: 0.7,\n queryMolfile: null,\n isSearch: false,\n key: uuid.v4(),\n page: 1\n }, () => {\n PublicActions.setSearchParams({\n defaultSearchValue: null,\n searchType: 'similar',\n tanimotoThreshold: 0.7,\n queryMolfile: null,\n isSearch: false,\n key: uuid.v4(),\n page: 1\n });\n this.getList();\n });\n }\n\n handleElementSelection(event) {\n this.setState({ selectType: event.toLowerCase() });\n }\n\n handleShowSearch() {\n const { showSearch, advFlag } = this.state;\n PublicActions.setSearchParams({\n showSearch: !showSearch, advFlag: !advFlag\n });\n }\n\n closeAdvancedSearch() {\n this.setState({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n }, () => {\n PublicActions.setSearchParams({\n advType: 'Authors', advValue: [], page: 1, searchOptions: []\n });\n this.getList();\n });\n }\n\n\n loadAdvValuesByName(input) {\n if (!input || input.length < 3) {\n this.setState({ searchOptions: [] });\n return Promise.resolve([]);\n }\n return PublicFetcher.fetchAdvancedValues(capitalizeFirstLetter(this.state.advType), input)\n .then((res) => {\n const result = res.result.map(u => ({ value: u.key, name: u.name, label: u.label }))\n this.setState({ searchOptions: result });\n return result;\n })\n .catch((errorMessage) => {\n console.log(errorMessage);\n });\n }\n\n changeSort(e) {\n this.setState({\n page: 1,\n listType: e\n }, () => this.getList());\n }\n\n renderMenuItems() {\n const elements = [\n 'All', 'Samples', 'Reactions'\n ];\n\n const menu = elements.map(element => (\n \n ));\n\n return menu;\n }\n\n handleTanimotoChange(e) {\n const val = e.target && e.target.value;\n if (!isNaN(val - val)) {\n this.setState({ tanimotoThreshold: val });\n }\n }\n\n handleSelectionChange(selection) {\n this.setState({\n isSearch: true,\n selection,\n page: 1\n }, () => {\n PublicActions.setSearchParams({\n isSearch: true,\n selection,\n page: 1,\n });\n this.getList();\n });\n }\n\n structureSearch(molfile) {\n const { searchType, tanimotoThreshold } = this.state;\n\n const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;\n const selection = {\n molfile,\n search_type: searchType,\n tanimoto_threshold: tanimoto,\n search_by_method: 'structure',\n structure_search: true\n };\n\n this.setState(\n {\n isSearch: true,\n selection,\n page: 1,\n defaultSearchValue: 'structure',\n queryMolfile: molfile\n },\n () => {\n PublicActions.setSearchParams({\n isSearch: true,\n selection,\n page: 1,\n defaultSearchValue: 'structure',\n queryMolfile: molfile,\n showStructureEditor: false\n });\n this.getList();\n }\n );\n }\n\n handleStructureEditorSave(molfile) {\n this.hideStructureEditor();\n if (molfile) {\n const molfileLines = molfile.match(/[^\\r\\n]+/g);\n if (molfileLines && molfileLines[1].trim()[0] !== 0) {\n this.structureSearch(molfile);\n } else {\n // TODO: clear search?\n }\n }\n }\n\n perPageInput() {\n const { perPage } = this.state;\n return (\n \n );\n }\n\n onPaginationSelect(eventKey) {\n const { pages } = this.state;\n if (eventKey > 0 && eventKey <= pages) {\n this.setState({ page: eventKey }, () => this.getList());\n }\n }\n\n pagination() {\n const { page, pages } = this.state;\n const items = [];\n const minPage = Math.max(page - 2, 1);\n const maxPage = Math.min(minPage + 4, pages);\n items.push(\n
\n );\n }\n return ();\n }\n\n renderSearch() {\n const { isSearch, defaultSearchValue } = this.state;\n const customClass = '.btn-unified';\n\n const stSearchTooltip = \n
\n {valSelect}
\n \n \n Advanced Search}>\n \n \n Reset Advanced Search}>\n \n \n \n
\n \n
\n );\n }\n\n render() {\n const {\n molecules, listType, reactions, currentElement, showSearch, advFlag, advType, advValue\n } = this.state;\n const isPubElement = !!(((currentElement && this.state.currentElement.publication &&\n this.state.currentElement.publication.published_at) || (\n this.state.currentElement && this.state.currentElement.published_samples\n && this.state.currentElement.published_samples.length > 0 &&\n this.state.currentElement.published_samples[0].published_at\n )));\n const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';\n const elementList = () => {\n switch (listType) {\n case RepoNavListTypes.MOLECULE_ARCHIVE:\n return (molecules || []).map(m => renderMoleculeArchive(m, currentElement, isPubElement, advFlag, advType, advValue));\n case RepoNavListTypes.REACTION:\n return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));\n case RepoNavListTypes.SAMPLE:\n return (molecules || []).map(m => renderMolecule(m, currentElement, isPubElement, advFlag, advType, advValue));\n case RepoNavListTypes.SCHEME:\n return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));\n default:\n return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));\n }\n };\n\n return (\n \n
\n {\n this.state.showSearch ?\n (\n \n \n \n SuggestionsFetcher.fetchSuggestionsForCurrentUser(\n this.state.selectType.toLowerCase(), input, 'public', false)}\n ref={(input) => { this.autoComplete = input; }}\n onSelectionChange={selection => this.handleSelectionChange(selection)}\n buttonBefore={innerDropdown}\n buttonAfter={buttonAfter}\n />\n
\n \n ) :\n (\n \n )\n }\n \n \n \n {elementList()}\n \n
\n
\n \n \n
\n
\n \n \n
\n \n \n {this.switchTypeRender()}\n
\n );\n }\n}\n","import React, { Component } from 'react';\nimport SVG from 'react-inlinesvg';\nimport { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';\nimport Select from 'react-select';\nimport { filter } from 'lodash';\nimport { RepoReviewModal, RepoCommentModal } from 'repo-review-ui';\nimport RepoReviewDetails from 'src/repoHome/RepoReviewDetails';\nimport ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';\nimport EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';\nimport ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';\nimport LoadingActions from 'src/stores/alt/actions/LoadingActions';\nimport { getFormattedISODateTime } from 'src/components/chemrepo/date-utils';\nimport StateLabel from 'src/components/chemrepo/common/StateLabel';\nimport SVGView from 'src/components/chemrepo/SVGViewPan';\nimport { SchemeWord, ChecklistPanel } from 'src/repoHome/RepoCommon';\nimport { ShowUserLabels, SearchUserLabels } from 'src/components/UserLabels';\n\n\n// import RepoReviewModal from '../components/common/RepoReviewModal';\n\nconst renderElement = (e, currentElement, embargoBtn) => {\n if (e.type === 'Reaction') {\n const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';\n const schemeOnly = (e && e.scheme_only === true) || false;\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n\n return (\n \n { filterDropdown }\n { searchTypeTbl }\n { searchValueTbl }\n
\n \n {searchTbl}\n
\n );\n }\n\n renderEmabrgoModal() {\n const { showEmbargoModal, bundles, selectedElement, selectedEmbargo } = this.state;\n\n const options = [\n { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },\n ];\n\n bundles.forEach((col) => {\n const tag = col.taggable_data || {};\n options.push({ value: col.element_id, name: tag.label, label: tag.label });\n });\n\n const allBundles = filter(options, b => b.value !== (selectedEmbargo == null ? '' : selectedEmbargo.element_id));\n\n const element = selectedElement || {};\n return (\n \n
\n \n \n {this.renderSearch()}\n \n \n
\n {this.renderReviewModal()}\n {this.renderCommentModal()}\n
\n );\n }\n}\n","import React from 'react';\nimport { Col, Row, Panel } from 'react-bootstrap';\nimport { OrcidIcon } from 'src/repoHome/RepoCommon';\n\nfunction RepoAbout() {\n const bodyStyle = {\n maxHeight: 'calc(100vh - 262px)',\n overflowY: 'auto',\n backgroundColor: '#f5f5f5',\n borderRadius: '6px',\n padding: '30px',\n textAlign: 'center'\n };\n\n return (\n \n
\n \n \n \n \n {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement, embargoBtn(r))) }\n \n
\n
\n \n \n
\n
\n \n ![\"Karlsruhe](\"/images/repo/KIT.svg\")
\n \n ![\"\"](\"/images/repo/Chemotion-V1.png\")
\n \n ![\"\"](\"/images/repo/dfg_logo_schriftzug_blau.jpg\")
\n \n
\n );\n}\n\nfunction CardAbout() {\n return (\n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n Research Group Bräse\n
\n
\n
\n
\n );\n}\n\nexport default RepoAbout;\n","import React from 'react';\nimport { Well, Col, Row } from 'react-bootstrap';\n\nconst RepoContact = () => {\n const cpmail = nicole.jungkit.edu;\n const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';\n return (\n This development is part of the work of the Stefan Bräse group at the KIT.
\n\n
Project description and mission
\n\n
\n \n The repository Chemotion was developed as a freely available infrastructure for the\n publication of research data in order to increase the amount of available data and\n to improve the quality of the information obtained and published.\n
\n\n The aim of Chemotion repository is to make a substantial contribution to securing\n research results in a cost-efficient and simple manner, to support scientists, in\n particular chemists, in their efforts to generate FAIR data and to increase the\n visibility of research data in the domain of chemistry.\n
\n\n Free access to and free use of scientific data is one principle of this project\n allowing and promoting collaborative work and scientific exchange among scientists.\n We think that openly available data is the prerequisite for better science in terms\n of more efficient and sustainable work but also with respect to a faster progress of\n science in general.\n
\n\n To date, a lot of research data in chemistry is not made available due to technical\n limitations and missing infrastructure. Chemotion repository can be used to overcome\n these limitations - providing an option for the chemistry community to collect and\n share data on chemical reactions and analytical data of chemical compounds. The\n repository can be used to build data collections as an alternative to commercial\n databases.\n
\n\n The mission of Chemotion repository is supported by its host institution KIT and\n the science data center MoMaF as well as the National Research Data Infrastructure\n NFDI4Chem.\n
\n\n
Chemotion repository and related projects
\n\n
\n \n Chemotion repository is one of several projects that are built to support research\n data management in chemistry.\n It can be used as stand alone software for the publication of research data or it\n can be used in combination with chemotion ELN (electronic lab notebook), an open source\n software for the documentation of research data. Both system are being developed on the\n same technological level which allows a combination of recording and documentation as\n well as publication and storage of data sets. The ELN enables a fast and easy transfer\n of selected research data to the repository as a requirement for efficient strategies\n for the publication of research data.\n
\n\n
Imprint
\nKarlsruhe Institute of Technology
\nLeader of the research group
\n\n
Institute of Organic Chemistry
\nFritz-Haber-Weg 6, Building 30.42
\n76131 Karlsruhe
\nGermany
\n\n
Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)
\nHermann-von-Helmholtz-Platz 1, Building 341
\n76344 Eggenstein-Leopoldshafen
\nGermany
\nPhone: +49 721 608 42903
\nFax: +49 721 608 48581
\n\n \n Research Group Bräse\n
\n
Office Campus North (KIT)
\n\n
Institute of Organic Chemistry
\nInstitute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)
\nHermann-von-Helmholtz-Platz 1, Building 319
\n76344 Eggenstein-Leopoldshafen
\nGermany
\nPhone: +49 721 608 24697
\n\n
Authors
\n\n {' '}\n
\n
\n
\n
Copyright Notices
\n\n
\n
\n\n \n Unless otherwise stated,\n {' '}\n chemotion-repository\n {' '}\n and/or its contributors own\n the intellectual property rights in the website and material on the website.\n Subject to the license below, all these intellectual property rights are reserved.\n
\n Each content contributed and published by a user can be made available under one of\n the following licenses that the contributing user has chosen during the publication\n process:\n
- \n
- \n
- \n
- \n
\n The contributing user may select the type of license during the publication process or\n choose not to apply any license.\n Contributors should be aware that some research data is not suitable for a licensing\n option as it may be in the public domain. Public domain data should be added without a\n license if this is apparent.\n
\n\n The source code of the chemotion REPOSITORY web server and client is currently licensed under the\n {' '}\n
DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.
\n\n
Content
\n\n
\n \n All texts, pictures and other information published here are subject to\n copyright. The logo may not be used without the prior consent\n of the working group.\n A change of the logo is not permitted. The contents of our website are\n created with the utmost care. Nevertheless, no guarantee for topicality\n and completeness can be taken over. The Compound Platform does not\n assume any responsibility for any web content connected by a link,\n as this is not its own content.\n
\n\n
\n\n \n \n \n
\n \n
\n \n
\n
\n );\n};\n\nexport default RepoContact;\n","import React from 'react';\nimport { Col, Row, Panel } from 'react-bootstrap';\nimport { Parser } from 'html-to-react';\n\nexport default class RepoDirective extends React.Component {\n constructor() {\n super();\n this.state = {\n content: \n };\n }\n\n componentDidMount() {\n fetch('/directives/directives.html', { credentials: 'same-origin' })\n .then(res => res.text())\n .then((html) => {\n // const parser = new HtmlToReactParser();\n this.setState({ content: Parser().parse(html) });\n })\n .catch((errorMessage) => { console.log(errorMessage); });\n }\n\n render() {\n return (\n \n
Complat |
| {institute} |
| Hermann-von-Helmholtz-Platz 1 |
| Building 341 |
| 76344 Eggenstein-Leopoldshafen |
| Germany |
| Dr. Nicole Jung |
| +49 721 608 24697 |
| {cpmail} |
\n
\n \n If you need assistance, please feel free to
\n
\n );\n}\n\nexport default BackSoonPage;\n","import React, { Component } from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport { orderBy, slice } from 'lodash';\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport PublicStore from 'src/stores/alt/repo/stores/PublicStore';\nimport ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';\nimport { DateFormatYMDLong } from 'src/repoHome/RepoCommon';\nimport BackSoonPage from 'src/components/chemrepo/BackSoonPage';\n\nconst renderEditRead = (article, isEditor) => {\n if (isEditor === true) {\n return (\n {`We'll be back soon!`}
\n\n \n
\n\n {`Apologies for the inconvenience as we're currently undergoing maintenance.`}\n
\n\n If you need assistance, please feel free to
\n — ComPlat Team
\n\n Aviator.navigate(`/home/newseditor/${article.key}`)}> Edit \n Aviator.navigate(`/home/newsroom/${article.key}`)}> Read more\n
\n );\n }\n\n return (\n \n );\n};\n\n\nconst mainImage = (article) => {\n let imageUrl = '/images/repo/news_cover.png';\n if (typeof (article) !== 'undefined' && article\n && typeof (article.cover_image) !== 'undefined' && article.cover_image) {\n imageUrl = `/newsroom/${article.cover_image}`;\n }\n return (\n \n
\n );\n};\n\nexport default class RepoNewsroom extends Component {\n constructor(props) {\n super(props);\n this.state = {\n articles: PublicStore.getState().articles || [],\n isEditor: false\n };\n this.onChange = this.onChange.bind(this);\n this.initial = this.initial.bind(this);\n }\n\n componentDidMount() {\n this.initial();\n PublicStore.listen(this.onChange);\n PublicActions.articles();\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n if (state.articles) {\n this.setState(prevState => ({\n ...prevState, articles: state.articles\n }));\n }\n if (state.isEditor) {\n this.setState(prevState => ({\n ...prevState, isEditor: state.isEditor\n }));\n }\n }\n\n initial() {\n ArticleFetcher.initial()\n .then((result) => {\n this.setState({\n isEditor: result.is_article_editor\n });\n });\n }\n\n render() {\n let { articles } = this.state;\n const { isEditor } = this.state;\n articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));\n articles = orderBy(\n articles,\n (o) => {\n if (!o.published_at || o.published_at === '') return o.created_at;\n return o.published_at;\n },\n 'desc'\n );\n\n return articles.length > 0 ? (\n \n
\n );\n};\n\nconst NewsList = ({ articles, isEditor }) => {\n return articles.length > 0 ? (\n Latest
\n \n \n {article.firstParagraph}\n \n
\n \n {renderEditRead(article, isEditor)}\n
\n \n \n {article.creator_name} \n {DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}\n
\n \n \n \n {\n articles.map(a => (
\n - \n
- \n \n {article.title}\n{article.firstParagraph}\n\n\n {article.creator_name}\n {renderEditRead(article, isEditor)}\n\n\n {DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}\n\n \n
\n Aviator.navigate(`/home/howtoeditor/${article.key}`)}> Edit \n Aviator.navigate(`/home/howto/${article.key}`) }> Read more\n
\n );\n }\n\n return (\n \n );\n};\n\n\nconst mainImage = (howto) => {\n let imageUrl = '';\n if (typeof (howto) !== 'undefined' && howto\n && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {\n imageUrl = `/howto/${howto.cover_image}`;\n }\n return (\n \n {\n imageUrl === '' ?\n
\n );\n};\n\nexport default class RepoHowTo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n howtos: PublicStore.getState().howtos || [],\n isEditor: false\n };\n this.onChange = this.onChange.bind(this);\n this.initial = this.initial.bind(this);\n }\n\n componentDidMount() {\n this.initial();\n PublicStore.listen(this.onChange);\n PublicActions.howtos();\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n }\n\n onChange(state) {\n if (state.howtos) {\n this.setState(prevState => ({\n ...prevState, howtos: state.howtos\n }));\n }\n if (state.isEditor) {\n this.setState(prevState => ({\n ...prevState, isEditor: state.isEditor\n }));\n }\n }\n\n initial() {\n ArticleFetcher.initialHowTo()\n .then((result) => {\n this.setState({\n isEditor: result.is_howto_editor\n });\n });\n }\n\n render() {\n let { howtos } = this.state;\n const { isEditor } = this.state;\n howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));\n howtos = orderBy(\n howtos,\n (o) => {\n if (!o.published_at || o.published_at === '') return o.created_at;\n return o.published_at;\n },\n 'desc'\n );\n\n return howtos.length > 0 ? (\n \n \n HOW TO \n \n
\n :\n \n
\n \n );\n};\n\nconst NewsList = (param) => {\n const { howtos } = param;\n return howtos.length > 0 ? (\n \n
\n \n
\n \n
\n {howto.title}
\n\n \n {howto.firstParagraph}\n \n
\n \n {renderEditRead(howto, isEditor)}\n
\n \n \n {howto.creator_name} \n Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}\n , updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}\n
\n \n \n LabIMotion Template Hub\n \n
\n
\n
\n );\n}\n\nexport default RepoGenericHubDesc;\n","import React, { useState } from 'react';\nimport { Button, ButtonGroup, Col, Row } from 'react-bootstrap';\nimport { GenGridBase } from 'chem-generic-ui-viewer';\nimport GenericBaseFetcher from 'src/fetchers/GenericBaseFetcher';\nimport Utils from 'src/utilities/Functions';\nimport RepoGenericHubDesc from 'src/repoHome/RepoGenericHubDesc';\nimport { capitalizeFirstLetter } from 'src/components/chemrepo/format-utils';\n\nconst getCurrentDateTimeString = () => {\n const now = new Date();\n const year = now.getFullYear();\n const month = String(now.getMonth() + 1).padStart(2, '0'); // Month is zero-based, so we add 1 and pad with leading zero if needed.\n const day = String(now.getDate()).padStart(2, '0');\n const hours = String(now.getHours()).padStart(2, '0');\n const minutes = String(now.getMinutes()).padStart(2, '0');\n const seconds = String(now.getSeconds()).padStart(2, '0');\n\n return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;\n};\n\nconst downloadFile = (data, filename) => {\n const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data))}`;\n Utils.downloadFile({ contents: href, name: `${filename}_${getCurrentDateTimeString()}.json` });\n};\n\nconst RepoGenericHub = () => {\n const [state, setState] = useState({\n menuSelected: '',\n gridData: [],\n });\n\n const { menuSelected, gridData } = state;\n\n const TemplateRenderer = (params) => {\n const {\n node, downloadName\n } = params;\n const onShow = () => {\n node.setSelected(true, true);\n downloadFile(\n node.data.properties_release || {}\n , `${downloadName}_${node.data.label || ''}_${node.data.identifier || ''}`\n );\n };\n\n return (\n \n \n \n );\n };\n\n const BelongsToRenderer = (params) => {\n const { data } = params;\n return (\n <>\n {data.element_klass?.label}\n \n \n \n );\n };\n\n const IconRenderer = (params) => {\n const { value, iconStyle } = params;\n return ;\n };\n\n const elColumnDefs = [\n {\n field: 'name',\n minWidth: 170,\n },\n { headerName: 'Prefix', width: 80, minWidth: 80, field: 'klass_prefix' },\n { headerName: 'Element label', field: 'label' },\n {\n headerName: 'Icon',\n field: 'icon_name',\n minWidth: 80,\n width: 80,\n sortable: false,\n filter: false,\n cellRenderer: IconRenderer,\n },\n { headerName: 'Description', field: 'desc' },\n { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },\n { headerName: 'Released at', field: 'released_at' },\n { headerName: 'Id', field: 'uuid' },\n {\n headerName: 'Template',\n cellRenderer: TemplateRenderer,\n cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },\n sortable: false,\n filter: false,\n },\n ];\n\n const sgColumnDefs = [\n { headerName: 'Segment label', field: 'label' },\n { headerName: 'Description', field: 'desc' },\n {\n headerName: 'Belongs to',\n field: 'element_klass.name',\n minWidth: 80,\n cellRenderer: BelongsToRenderer,\n },\n { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },\n { headerName: 'Released at', field: 'released_at' },\n { headerName: 'Id', field: 'uuid' },\n {\n headerName: 'Template',\n cellRenderer: TemplateRenderer,\n cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },\n sortable: false,\n filter: false,\n },\n ];\n\n const dsColumnDefs = [\n {\n hide: true,\n headerName: '#',\n valueFormatter: params => `${parseInt(params.node.id, 10) + 1}`,\n sortable: false,\n },\n {\n headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,\n },\n { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },\n { headerName: 'Released at', field: 'released_at' },\n { headerName: 'Id', field: 'uuid' },\n {\n headerName: 'Template',\n cellRenderer: TemplateRenderer,\n cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },\n sortable: false,\n filter: false,\n },\n ];\n\n\n const columnDefs = {\n element: elColumnDefs,\n segment: sgColumnDefs,\n dataset: dsColumnDefs,\n };\n\n const clickMenu = (e, type) => {\n e.stopPropagation();\n GenericBaseFetcher.open(`list?klass=${capitalizeFirstLetter(type)}Klass&with_props=true`, 'GET')\n .then((result) => {\n setState({ ...state, menuSelected: type, gridData: result?.list || [] });\n })\n .catch((error) => {\n console.error('Error fetching dataset klasses:', error);\n setState({ ...state, menuSelected: type, gridData: [] });\n });\n };\n\n return (\n \n LabIMotion Template Hub\n \n {\n window.open(\n 'https://www.chemotion.net/docs/labimotion',\n '_blank'\n );\n }}\n >\n \n LabIMotion Docs\n \n \n
\n \n Welcome to the LabIMotion Template Hub, your platform for sharing\n new elements, segments, and datasets templates.\n
\n\n
Getting Started: Selecting a Template
\n\n The templates are conveniently displayed in a grid layout. You can:{' '}\n
\n\n
\n \n Sort the grid by clicking on the column headers.{' '}\n
\n\n \n Filter the grid by clicking on the filter icon{' '}\n \n \n {' '}\n located at the right of the column headers.{' '}\n
\n\n \n Download a specific template by clicking on the button{' '}\n \n \n Download\n \n .{' '}\n
\n \n\n Now, let's get started. Choose the template you need and begin the\n download process.\n
\n\n
\n \n \n
\n \n \n \n \n \n \n {\n menuSelected && (\n
\n \n
\n )\n }\n {menuSelected ? `Generic ${capitalizeFirstLetter(menuSelected)} Template` : ''}
\n\n
\n \n \n {' '}\n )))\n \n \n
\n \n \n )\n );\n}\n\nexport default SysInfo;\n","import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Grid, Row } from 'react-bootstrap';\nimport Aviator from 'aviator';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport initPublicRoutes from 'src/libHome/homeRoutes';\nimport Navigation from 'src/libHome/Navigation';\nimport Notifications from 'src/components/Notifications';\nimport RepoEmbargo from 'src/repoHome/RepoEmbargo';\nimport RepoCollection from 'src/repoHome/RepoCollection';\nimport RepoHome from 'src/repoHome/RepoHome';\nimport RepoPubl from 'src/repoHome/RepoPubl';\nimport RepoReview from 'src/repoHome/RepoReview';\nimport RepoAbout from 'src/repoHome/RepoAbout';\nimport RepoContact from 'src/repoHome/RepoContact';\nimport RepoDirective from 'src/repoHome/RepoDirective';\nimport RepoPreservation from 'src/repoHome/RepoPreservation';\nimport RepoNewsroom from 'src/repoHome/RepoNewsroom';\nimport RepoNewsReader from 'src/repoHome/RepoNewsReader';\nimport RepoNewsEditor from 'src/repoHome/RepoNewsEditor';\nimport RepoHowTo from 'src/repoHome/RepoHowTo';\nimport RepoHowToReader from 'src/repoHome/RepoHowToReader';\nimport RepoHowToEditor from 'src/repoHome/RepoHowToEditor';\n\nimport PublicStore from 'src/stores/alt/repo/stores/PublicStore';\nimport RStore from 'src/stores/alt/repo/stores/RStore';\nimport RepoElementDetails from 'src/repoHome/RepoElementDetails';\nimport NavFooter from 'src/libHome/NavFooter';\nimport LoadingModal from 'src/components/common/LoadingModal';\n\nimport PublicActions from 'src/stores/alt/repo/actions/PublicActions';\nimport RepoGenericHub from 'src/repoHome/RepoGenericHub';\n\nimport embedMatomo from 'src/components/chemrepo/matomo';\nimport SysInfo from 'src/components/chemrepo/SysInfo';\n\nclass Home extends Component {\n constructor(props) {\n super();\n this.state = {\n guestPage: null,\n };\n this.onChange = this.onChange.bind(this);\n }\n\n componentDidMount() {\n embedMatomo();\n PublicStore.listen(this.onChange);\n RStore.listen(this.onChange);\n PublicActions.initialize();\n PublicActions.fetchOlsChmo();\n }\n\n componentWillUnmount() {\n PublicStore.unlisten(this.onChange);\n RStore.unlisten(this.onChange);\n }\n\n onChange(publicState) {\n const { guestPage, listType } = this.state;\n if (\n (publicState.guestPage && publicState.guestPage !== guestPage) ||\n (publicState.listType && publicState.listType !== listType) ||\n publicState.searchOptions\n ) {\n this.setState(prevState => ({\n ...prevState,\n guestPage: publicState.guestPage,\n listType: publicState.listType,\n }));\n }\n }\n\n renderGuestPage() {\n const { guestPage, listType } = this.state;\n switch (guestPage) {\n case 'genericHub':\n return \n \n New to the Repository? Check the{' '}\n {infoLink(\n 'https://chemotion.net/docs/repo/settings_preparation',\n 'Settings and Preparation'\n )}{' '}\n guide.{' '}\n \n \n Starting your research? Review our{' '}\n {infoLink(\n 'https://www.chemotion.net/docs/repo/workflow/new',\n 'How to provide data'\n )}{' '}\n instructions.{' '}\n \n \n Learn more in{' '}\n {infoLink('https://www.chemotion.net/docs/repo', 'How-To')}{' '}\n section, and feel free to reach out via{' '}\n \n window.open(\n 'https://github.com/ComPlat/chemotion_REPO',\n '_blank'\n )\n }\n >\n \n
\n \n \n
\n \n
\n );\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const domElement = document.getElementById('Home');\n if (domElement) {\n ReactDOM.render(\n \n \n \n
\n {this.renderGuestPage()}
\n \n {this.renderNavFooter()}\n
\n \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
No Spectra Found!
\nPlease refresh the page!
\n\n
Click here to close the window...
\n\n {content}\n
\n );\n }\n\n renderInvalid() {\n const { fetched } = this.state;\n const content = fetched\n ? (\n Invalid spectrum!
\nPlease delete it and upload a valid file!
\n\n
Click here to close the window...
\n\n {content}\n
\n );\n }\n\n renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles) {\n const sample = this.onChangeElement(); // REPO multiple samples\n const {\n entity, isExist,\n } = FN.buildData(jcamp);\n\n let currEntity = entity;\n\n let multiEntities = false;\n let entityFileNames = false;\n if (!isExist) {\n if (!listMuliSpcs || listMuliSpcs.length === 0) return this.renderInvalid();\n listMuliSpcs = listMuliSpcs.filter(((x) => x !== undefined));\n listEntityFiles = listEntityFiles.filter(((x) => x !== undefined));\n multiEntities = listMuliSpcs.map((spc) => {\n const {\n entity\n } = FN.buildData(spc.jcamp);\n currEntity = entity;\n return entity;\n });\n entityFileNames = listEntityFiles.map((x) => x.label);\n }\n\n const others = this.buildOthers();\n const operations = this.buildOpsByLayout(currEntity);\n const descriptions = this.getQDescVal();\n const forecast = {\n btnCb: this.predictOp,\n refreshCb: this.refreshOp,\n molecule: 'molecule',\n predictions,\n };\n\n return (\n \n \n {modalTitle}\n \n \n \n Close without Save\n \n \n
\n );\n }\n\n onSpectraDescriptionChanged(value) {\n const { spcInfos, spcIdx } = this.state;\n const sis = spcInfos.filter((x) => x.idx === spcIdx);\n const si = sis.length > 0 ? sis[0] : spcInfos[0];\n const sample = this.onChangeElement(); // REPO multiple samples\n sample.analysesContainers().forEach((ae) => {\n if (ae.id !== si.idAe) return;\n ae.children.forEach((ai) => {\n if (ai.id !== si.idAi) return;\n ai.extended_metadata.content.ops = value.ops;\n });\n });\n }\n\n render() {\n const { showModal } = this.state;\n\n const {\n jcamp, predictions, idx, listMuliSpcs, listEntityFiles\n } = this.getContent();\n const dialogClassName = 'spectra-editor-dialog';\n // WORKAROUND: react-stickydiv duplicates elements.\n const specElements = Array.from(document.getElementsByClassName(dialogClassName));\n if (specElements.length > 1) {\n specElements.slice(1).forEach(el => el.parentNode.style.display = 'none'); // eslint-disable-line\n }\n // WORKAROUND: react-stickydiv duplicates elements.\n\n return (\n \n this.onDSSelectChange(e)}\n />\n
\n \n \n {\n this.renderTitle(idx)\n }\n {\n showModal && (jcamp || (listMuliSpcs && listMuliSpcs.length > 0))\n ? this.renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles)\n : this.renderEmpty()\n }\n \n
\n );\n }\n}\n\nViewSpectra.propTypes = {\n sample: PropTypes.object.isRequired,\n handleSampleChanged: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n isPublic: PropTypes.bool,\n};\n\nViewSpectra.defaultProps = { isPublic: false };\n\nexport default ViewSpectra;","import { cellLineCitationTypeMap, CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';\n\nconst getKeysOfMap = (citationMap) => Object.keys(citationMap).filter((e) => e !== 'uncategorized');\n\nconst createCitationTypeMap = (type) => (type === 'placeholder' ? cellLineCitationTypeMap : CitationTypeMap);\n\nexport {\n getKeysOfMap,\n createCitationTypeMap\n};\n","const CitationTypeMap = {\n citedOwn: {\n def: 'cited own work - reference describing exactly this experiment/same authors',\n short: 'cited own work',\n datacite: ['IsCitedBy']\n },\n citedRef: {\n def: 'cited reference - reference describing the experiment done by others',\n short: 'cited reference',\n dataCite: ['Continues']\n },\n referTo: {\n def: 'referring to - reference similar experiments or related literature',\n short: 'referring to',\n dataCite: ['References']\n },\n uncategorized: {\n def: 'uncategorized - no citation type has been set',\n short: 'uncategorized',\n dataCite: []\n }\n};\n\nconst cellLineCitationTypeMap = {\n literatureOfSource: {\n def: 'Official literature',\n short: 'literature from source',\n datacite: []\n },\n additionalLiterature: {\n def: 'Additional literature',\n short: 'additional literature',\n datacite: []\n }\n};\nconst CitationType = Object.keys(CitationTypeMap).filter((e) => e !== 'uncategorized');\nconst CitationTypeEOL = ['cited', 'citing', null, ''];\n\nexport {\n CitationTypeMap, CitationType, CitationTypeEOL, cellLineCitationTypeMap\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Button, FormControl, OverlayTrigger, Tooltip\n} from 'react-bootstrap';\nimport uuid from 'uuid';\nimport Literature from 'src/models/Literature';\nimport Cite from 'citation-js';\nimport { CitationType, CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';\nimport { getKeysOfMap,createCitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationTools';\n\nfunction RefByUserInfo({ info, litype }) {\n if (typeof (info) === 'undefined' || !info || info.length === 0) {\n return ();\n }\n return (\n \n {citation?.format('bibliography', { format: 'text', template: 'apa' })}\n
\n );\n }\n } else if (onlyText) {\n content = literature.title || ' ';\n } else {\n content = (\n \n {literature.title}\n {literature.year ? `, ${literature.year}` : null}\n \n );\n }\n return content;\n};\n\nfunction Citation({ literature }) {\n const {\n title, doi, url, isbn\n } = literature;\n const formatedDoi = doi ? `https://dx.doi.org/${sanitizeDoi(doi)}` : null;\n const link = formatedDoi || url || isbn;\n const content = literatureContent(literature);\n return (\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 React, { useState, useEffect } from 'react';\nimport {\n Button, OverlayTrigger, Tooltip, Dropdown, MenuItem, Glyphicon, Overlay, ButtonGroup\n} from 'react-bootstrap';\nimport ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';\nimport { values } from 'lodash';\n// import { v4 as uuidv4 } from 'uuid';\nimport uuid from 'uuid';\nimport mime from 'mime-types';\nimport SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';\nimport Dropzone from 'react-dropzone';\nimport Utils from 'src/utilities/Functions';\nimport ImageModal from 'src/components/common/ImageModal';\nimport ThirdPartyAppFetcher from 'src/fetchers/ThirdPartyAppFetcher';\n\nexport const attachmentThumbnail = (attachment, pubSrc = '') => (\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, isPublic = false) => {\n const isImage = isImageFile(attachment.filename);\n if (isImage && !attachment.isNew) {\n const contents = isPublic\n ? `/api/v1/public/download/annotated_image?id=${attachment.id}`\n : `/api/v1/attachments/${attachment.id}/annotated_image`;\n Utils.downloadFile({\n contents,\n name: attachment.filename,\n });\n }\n};\n\nconst handleDownloadOriginal = (attachment, isPublic = false) => {\n const contents = isPublic\n ? `/api/v1/public/download/attachment?id=${attachment.id}`\n : `/api/v1/attachments/${attachment.id}`;\n Utils.downloadFile({\n contents,\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, isPublic = false) => (\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 Select Users to share with \n
\n )\n }\n\n render() {\n const displayWarning = (this.state.permissionLevel || '') === '5' ? 'inline-block' : 'none';\n return (\n \n \n Role \n this.handleShortcutChange(e)}>\n \n \n \n \n \n \n \n \n \n Permission level \n this.handlePLChange(e)}\n value={this.state.permissionLevel || ''}>\n \n \n \n \n \n \n \n \n \n Sample detail level \n this.handleDLChange(e, 'sample')}\n value={this.state.sampleDetailLevel || ''}>\n \n \n \n \n \n \n \n \n Reaction detail level \n this.handleDLChange(e, 'reaction')}\n value={this.state.reactionDetailLevel || ''}>\n \n \n \n \n \n Wellplate detail level \n this.handleDLChange(e, 'wellplate')}\n value={this.state.wellplateDetailLevel || ''}>\n \n \n \n \n \n \n Screen detail level \n this.handleDLChange(e, 'screen')}\n value={this.state.screenDetailLevel || ''}>\n \n \n \n \n \n Element detail level \n this.handleDLChange(e, 'element')}\n value={this.state.elementDetailLevel || ''}>\n \n \n \n {this.selectUsers()}\n
\n \n
\n )\n }\n}\n\nManagingModalSharing.propTypes = {\n collectionId: PropTypes.number,\n collAction: PropTypes.string,\n selectUsers: PropTypes.bool,\n permissionLevel: PropTypes.number,\n sampleDetailLevel: PropTypes.number,\n reactionDetailLevel: PropTypes.number,\n wellplateDetailLevel: PropTypes.number,\n screenDetailLevel: PropTypes.number,\n elementDetailLevel: PropTypes.number,\n onHide: PropTypes.func.isRequired,\n listSharedCollections: PropTypes.bool\n};\n\nManagingModalSharing.defaultProps = {\n collectionId: null,\n collAction: \"Create\",\n selectUsers: true,\n permissionLevel: 0,\n sampleDetailLevel: 0,\n reactionDetailLevel: 0,\n wellplateDetailLevel: 0,\n screenDetailLevel: 0,\n elementDetailLevel: 10\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst UserInfoIcon = ({type}) =>{\n switch(type) {\n case 'Person':\n return \n case 'Group':\n return \n default:\n return \n }\n}\n\nUserInfoIcon.propTypes = {\n type: PropTypes.string.isRequired,\n}\n\nexport default UserInfoIcon;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst PermissionIcons = ({pl}) =>{\n return(pl>-1 ?\n \n \n {pl>0 ? : null}\n {pl>1 ? : null}\n {pl>2 ? : null}\n {pl>3 ? : null}\n {pl>4 ? : null}\n \n : null\n )\n}\n\nPermissionIcons.propTypes = {\n pl: PropTypes.number.isRequired,\n}\n\nexport default PermissionIcons;\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';\nimport UserInfoIcon from 'src/apps/mydb/collections/UserInfoIcon';\nimport PermissionIcons from 'src/apps/mydb/collections/PermissionIcons'\n\nexport default class MyCollections 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 Collections',\n id: -1,\n children: [{}]\n },\n modalProps: {\n show: false,\n title: \"\",\n component: \"\",\n action: null,\n collection: {},\n selectUsers: true,\n isChange: false\n }\n }\n this.addSubcollection=this.addSubcollection.bind(this);\n this.onStoreChange = this.onStoreChange.bind(this);\n }\n\n componentDidMount() {\n CollectionStore.listen(this.onStoreChange)\n CollectionActions.fetchUnsharedCollectionRoots()\n }\n\n componentWillUnmount() {\n CollectionStore.unlisten(this.onStoreChange)\n }\n\n onStoreChange(state) {\n let children = state.unsharedRoots.length > 0 ? state.unsharedRoots : [{}];\n\n this.setState({\n tree: {\n label: 'My Collections',\n id: -1,\n children: children\n }\n });\n }\n\n handleChange(tree) {\n this.setState({\n tree: tree,\n isChange: true\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.id == -1) {\n return (\n \n Transfering ownership applies for all sub collections.\n
\n \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 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 {ls[0]} {sicon} {ricon}\n
\n ) :\n (\n \n {ls[0]} {sicon} {ricon}\n
\n );\n }\n }\n return label;\n}\n\nexport default class CollectionSubtree extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isRemote: props.isRemote,\n currentCollection: props.currentCollection,\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 currentCollection: state.currentCollection,\n visible\n });\n } else {\n this.setState({\n selected: false,\n currentCollection: state.currentCollection,\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(currentCollection) {\n const { root } = this.state;\n if (this.state.selected || (currentCollection && currentCollection.id == root.id && currentCollection.is_synchronized == root.is_synchronized)) {\n return 'selected';\n }\n return '';\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 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 { 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
\n - \n {this.subtrees()}\n
\n this.handleSectionToggle('sharedToCollectionVisible')}\n >\n \n My shared collections\n
\n \n )\n return this.subtrees(labelledRoots, subTreeLabels,\n false, sharedToCollectionVisible)\n }\n\n remoteSubtrees() {\n let { remoteRoots, sharedWithCollectionVisible } = this.state\n remoteRoots = this.removeOrphanRoots(remoteRoots)\n\n let labelledRoots = remoteRoots.map(e => {\n 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('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 // For Repository\n publicRoots(roots, preservePublic) {\n let newRoots =[]\n roots.forEach((root) => {\n if(preservePublic) {\n if (root.is_public) newRoots.push(root)\n } else {\n if (!root.is_public) newRoots.push(root)\n }\n })\n\n return newRoots\n }\n\n\n // For Repository\n publicSubtrees() {\n let {syncInRoots, syncChemotionVisible} = this.state\n syncInRoots = this.removeOrphanRoots(syncInRoots)\n syncInRoots = this.publicRoots(syncInRoots, true)\n\n let orderedRoots = []\n if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {\n syncInRoots[0].children.map((e,idx) => {\n if (e.label.match(/hemotion/) ) {\n orderedRoots[0] = e;\n orderedRoots[0].label = 'Chemotion';\n } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {\n orderedRoots[1] = e;\n } else if (e.label.match(/Published Elements/)) {\n orderedRoots[2] = e\n orderedRoots[2].label = 'My Published Elements'\n } else if (e.label === 'Pending Publications') {orderedRoots[3] = e }\n else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e }\n else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e }\n else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }\n else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }\n else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e }\n else {orderedRoots[idx+10] = e }\n })\n }\n\n let subTreeLabels = (\n \n
\n )\n\n return this.subtrees(orderedRoots, subTreeLabels,\n true, syncChemotionVisible)\n }\n\n render() {\n const { ownCollectionVisible } = this.state;\n\n const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';\n\n return (\n \n
\n \n
\n \n \n this.handleSectionToggle('ownCollectionVisible')}\n >\n My Collections\n
\n \n \n {this.publicSubtrees()}\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 {previewObj}\n
\n );\n }\n\n render() {\n const { hasPop } = this.props;\n\n if (!hasPop) {\n return this.renderPreview();\n }\n\n return (\n \n \n {this.renderPreview()}\n \n
\n );\n }\n}\n\nSvgWithPopover.propTypes = {\n hasPop: PropTypes.bool.isRequired,\n previewObject: PropTypes.shape({\n txtOnly: PropTypes.string.isRequired,\n isSVG: PropTypes.bool,\n src: PropTypes.string,\n className: PropTypes.string,\n }).isRequired,\n popObject: PropTypes.shape({\n title: PropTypes.string,\n src: PropTypes.string,\n height: PropTypes.string,\n width: PropTypes.string,\n }).isRequired,\n};\n","const formatSection = (section, type = '') => {\n const words = type ? section?.replace(`${type}_`, '')?.split('_') : section?.replace('_header', '')?.split('_');\n for (let i = 0; i < words?.length; i += 1) {\n words[i] = words[i][0].toUpperCase() + words[i].substr(1);\n }\n return words?.join(' ');\n};\n\nconst getSectionComments = (comments, section) => {\n return comments?.filter((cmt) => (cmt.section === section));\n};\nconst getAllComments = (comments, section) => comments?.filter((cmt) => (cmt.section !== section));\n\nconst selectCurrentUser = (state) => state.currentUser || {};\n\nconst commentActivation = 'commentActivation';\n\nexport {\n formatSection,\n getSectionComments,\n getAllComments,\n selectCurrentUser,\n commentActivation,\n};\n","import React from 'react';\nimport { OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport PropTypes from 'prop-types';\nimport UserStore from 'src/stores/alt/stores/UserStore';\nimport MatrixCheck from 'src/components/common/MatrixCheck';\nimport { selectCurrentUser, commentActivation } from 'src/utilities/CommentHelper';\n\nexport default function CommentIcon(props) {\n const { commentCount } = props;\n const currentUser = selectCurrentUser(UserStore.getState());\n\n if (MatrixCheck(currentUser.matrix, commentActivation)) {\n return (\n commentCount && commentCount > 0\n ? (\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 ChemrepoLabels = ({ chemrepoId }) => {\n const id = chemrepoId;\n const handleOnClick = (e) => {\n e.stopPropagation();\n };\n return (\n id == null ? :\n (\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 \n
\n );\n }\n return (\n \n {polymerName} \n
\n
\n );\n};\n\nexport default SampleName;\n","import React, { Component } from 'react';\nimport {\n Table, Button, Tooltip, OverlayTrigger, Label\n} from 'react-bootstrap';\nimport PropTypes from 'prop-types';\nimport ElementCheckbox from 'src/apps/mydb/elements/list/ElementCheckbox';\nimport ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';\nimport ElementAnalysesLabels from 'src/apps/mydb/elements/labels/ElementAnalysesLabels';\nimport ElementReactionLabels from 'src/apps/mydb/elements/labels/ElementReactionLabels';\nimport ElementWellplateLabels from 'src/apps/mydb/elements/labels/ElementWellplateLabels';\nimport GenericElementLabels from 'src/apps/mydb/elements/labels/GenericElementLabels';\nimport PubchemLabels from 'src/components/pubchem/PubchemLabels';\nimport ChemrepoLabels from 'src/apps/mydb/elements/labels/ChemrepoLabels';\nimport ComputedPropLabel from 'src/apps/mydb/elements/labels/ComputedPropLabel';\nimport ArrayUtils from 'src/utilities/ArrayUtils';\nimport ElementContainer from 'src/apps/mydb/elements/list/ElementContainer';\n\nimport UIStore from 'src/stores/alt/stores/UIStore';\nimport ElementStore from 'src/stores/alt/stores/ElementStore';\nimport KeyboardStore from 'src/stores/alt/stores/KeyboardStore';\n\nimport { DragDropItemTypes } from 'src/utilities/DndConst';\nimport SampleName from 'src/components/common/SampleName';\nimport { sampleShowOrNew } from 'src/utilities/routesUtils';\nimport SvgWithPopover from 'src/components/common/SvgWithPopover';\nimport { ShowUserLabels } from 'src/components/UserLabels';\nimport CommentIcon from 'src/components/comments/CommentIcon';\n\nimport { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';\n\nconst buildFlattenSampleIds = (displayedMoleculeGroup) => {\n let flatIndex = 0;\n const flattenSamplesId = [];\n\n displayedMoleculeGroup.forEach((groupSample, index) => {\n const length = displayedMoleculeGroup[index].numSamples;\n for (let i = 0; i < length; i++) {\n flattenSamplesId[flatIndex + i] = groupSample[i].id;\n }\n flatIndex += length;\n });\n\n return flattenSamplesId;\n};\n\nconst showDetails = (id) => {\n const { currentCollection, isSync } = UIStore.getState();\n const uri = `/${isSync ? 's' : ''}collection/${currentCollection.id}/sample/${id}`;\n Aviator.navigate(uri, { silent: true });\n sampleShowOrNew({ params: { sampleID: id, collectionID: currentCollection.id } });\n};\n\nconst targets = {\n sample: ['reaction', 'wellplate', 'device', 'research_plan'],\n molecule: ['reaction'],\n};\n\nconst isCurrEleDropType = (sourceType, targetType) => {\n if (['molecule', 'sample'].includes(sourceType) && !['wellplate', 'device', 'research_plan'].includes(targetType)) {\n return sourceType && targetType;\n }\n return sourceType && targetType && targets[sourceType].includes(targetType);\n};\n\nconst dragColumn = (element, showDragColumn, sourceType, targetType) => {\n if (showDragColumn) {\n return (\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';\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 { stopEvent } from 'src/utilities/DomHelper';\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 handleNumberOfResultsChange(event, query=false) {\n const { value } = event.target;\n const { type } = this.props;\n\n if (parseInt(value, 10) > 0) {\n UIActions.changeNumberOfResultsShown(value);\n if (query === true) ElementActions.refreshElements(type);\n }\n }\n\n handleKeyDown(event) {\n switch (event.keyCode) {\n case 13: // Enter\n stopEvent(event);\n break;\n default:\n break;\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 getSortedHash(inputHash) {\n var resultHash = {};\n\n var keys = Object.keys(inputHash);\n keys.sort(function (a, b) {\n return inputHash[a] - inputHash[b]\n }).forEach(function (k) {\n resultHash[k] = inputHash[k];\n });\n return resultHash;\n }\n\n getArrayFromLayout(layout, isVisible) {\n let array = Immutable.List();\n\n if (isVisible == true) {\n layout = this.getSortedHash(layout);\n }\n\n Object.keys(layout).forEach(function (key, idx) {\n const order = layout[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 => [\"sample\", \"reaction\"].includes(n));\n return array;\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 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.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