\n 
\n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport PropTypes from \"prop-types\";\n\nimport MenuItem from \"./MenuItem\";\n\nimport menuStyle from './menu.scss';\n\n@observer\nexport default class Menu extends React.Component {\n\n constructor(props) {\n super(props);\n\t}\n\n render() {\n return (\n \n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport Tooltip from \"react-tooltip\";\n\nimport menuStyle from './top-menu.scss';\n\n@observer\nexport default class TopMenu extends React.Component {\n\n constructor(props) {\n super(props);\n\t}\n\n render() {\n return (\n \n {\n this.props.objects.map((o, i) => {\n if (o.active) {\n return
\n \n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport { toJS } from \"mobx\";\nimport PropTypes from \"prop-types\";\nimport classNames from \"classnames\";\n\nimport nodeStyle from './node.scss';\n\nfunction importAll(r) {\n let images = {};\n r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });\n return images;\n}\n\nconst images = importAll(require.context('../imgs', false, /\\.(png|jpe?g|svg)$/));\n\n@observer\nexport default class Node extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onDragStartHandler = this.onDragStartHandler.bind(this);\n this.onDragOverHandler = this.onDragOverHandler.bind(this);\n this.onDropHandler = this.onDropHandler.bind(this);\n this.onDragEndHandler = this.onDragEndHandler.bind(this);\n this.onDragLeaveHandler = this.onDragLeaveHandler.bind(this);\n\t}\n\n onClickHandler(node) {\n this.props.onClickHandler(node);\n }\n\n onDragStartHandler(event) {\n event.dataTransfer.setData(\"node\", JSON.stringify(this.props.n));\n this.props.onDragStartHandler(event);\n }\n\n onDragEndHandler(event) {\n this.props.onDragEndHandler(event);\n }\n\n onDragOverHandler(event) {\n event.preventDefault();\n this.props.onDragOverNodeHandler(event, this.props.n);\n }\n\n onDropHandler(event) {\n event.preventDefault();\n this.props.onDropOnNodeHandler(this.props.n);\n this.props.resetBorders();\n event.stopPropagation();\n }\n\n onDragLeaveHandler(event) {\n this.props.resetBorders();\n }\n\n render() {\n const node = this.props.n;\n let hide = true;\n\n const cls = classNames({\n node: true,\n 'hide-node': hide\n });\n\n let display = node.id.split(\"--\")[0];\n\n if (node.properties.name && node.properties.name.value) {\n display = node.properties.name.value;\n }\n\n return (\n \n
\n \n {\"{ + }\"}\n
\n\n \n {\"{ }\"}\n
\n\n \n refresh Reset\n
\n\n this.onClickHandler(node)}\n onDragStart={this.onDragStartHandler}\n onDragEnd={this.onDragEndHandler}\n onDragOver={this.onDragOverHandler}\n onDrop={this.onDropHandler}\n onDragLeave={this.onDragLeaveHandler}>\n 
{display}\n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport PropTypes from \"prop-types\";\nimport classNames from \"classnames\";\n\nimport panelStyle from './panel.scss';\n\n@observer\nexport default class Panel extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onClickHideHandler = this.onClickHideHandler.bind(this);\n\t}\n\n onClickHideHandler() {\n if (this.props.onClickHideHandler) {\n this.props.onClickHideHandler();\n } else {\n console.warn(\"No JSON Viewer close handler\");\n }\n\n }\n\n onClickPanelHandler(event) {\n event.stopPropagation();\n }\n\n render() {\n const cls = classNames({\n mask: true,\n 'hide-mask': !this.props.show\n });\n\n return (\n \n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport { toJS } from \"mobx\";\n\nimport RCSlider from \"rc-slider/lib/Slider\";\nimport 'rc-slider/assets/index.css'\n\nimport textStyle from \"./slider.scss\";\n\n@inject(\"store\")\n@observer\nexport default class Slider extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChangeSliderHandler = this.onChangeSliderHandler.bind(this);\n }\n\n onChangeSliderHandler(value) {\n this.props.onChangeHandler(this.props.field, value);\n }\n\n render() {\n return (\n \n {this.props.children}\n
\n \n { this.input = c }}\n autoComplete={this.props.autocomplete || \"off\"}\n className=\"def\"\n placeholder={this.props.placeholder}\n onChange={this.onChangeHandler}\n onKeyDown={e => this.onKeyDownHandler(e)}\n value={this.props.value}\n disabled={this.props.disabled}\n id={this.props.id}\n />\n
\n )\n }\n}\n\nText.propTypes = {\n hasInitialFocus: PropTypes.bool,\n onChange: PropTypes.func.isRequired,\n onReturn: PropTypes.func,\n onEscape: PropTypes.func\n};\n","import React from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport textStyle from \"./text.scss\";\n\n@inject(\"store\")\n@observer\nexport default class TextArea extends React.Component {\n\n constructor(props) {\n super(props);\n this.onChangeHandler = this.onChangeHandler.bind(this);\n }\n\n componentDidMount() {\n if (this.props.hasInitialFocus) {\n this.focus();\n }\n }\n\n focus() {\n if (this.input) {\n this.input.focus();\n }\n }\n\n onKeyDownHandler(event) {\n if (event.keyCode === 13 && this.props.onReturn) {\n this.props.onReturn();\n } else if (event.keyCode === 27 && this.props.onEscape) {\n this.props.onEscape();\n }\n }\n\n onChangeHandler(event) {\n this.props.onChange(event);\n }\n\n render() {\n let rows = this.props.rows ? this.props.rows : 1;\n\n return (\n \n { this.input = c }}\n autoComplete={this.props.autocomplete || \"off\"}\n className=\"def\"\n placeholder={this.props.placeholder}\n onChange={this.onChangeHandler}\n onKeyDown={e => this.onKeyDownHandler(e)}\n value={this.props.value}\n disabled={this.props.disabled}\n id={this.props.id}\n />\n
\n )\n }\n}\n","import React from 'react';\nimport {observer, inject} from 'mobx-react';\nimport moment from 'moment';\nimport DatePicker from 'react-datepicker';\n\nimport 'react-datepicker/dist/react-datepicker.css';\nimport dateStyle from './datetime.scss';\n\nexport default class DateTime extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(datetime) {\n this.props.onChange(this.props.name, datetime);\n }\n\n render() {\n let dts = this.props.selected;\n\n if (typeof dts === 'string') {\n let dateObj = new Date(dts);\n dts = dateObj;\n }\n\n return (\n \n
\n )\n }\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {observer, inject} from \"mobx-react\";\nimport classNames from \"classnames\";\nimport Tooltip from \"react-tooltip\";\n\nimport killChainStyle from \"./killchain.scss\";\n\n@inject(\"store\")\n@observer\nexport default class KillChain extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChangePhaseHandler = this.onChangePhaseHandler.bind(this);\n this.populatePhase = this.populatePhase.bind(this);\n }\n\n componentDidMount() {\n\n }\n\n onChangePhaseHandler(event) {\n const kcDomName = `kc-name-${this.props.node.id}`;\n const phaseDomName = `phase-${this.props.node.id}`;\n const kcIndex = document.getElementById(kcDomName).selectedIndex;\n const kcValue = document.getElementById(kcDomName)[kcIndex].value;\n const phaseValue = event.currentTarget.value;\n\n const value = {\n kill_chain_name: kcValue,\n phase_name: phaseValue\n };\n\n this.props.onChangeHandler(this.props.field, value);\n\n document.getElementById(kcDomName).selectedIndex = 0;\n document.getElementById(phaseDomName).selectedIndex = 0;\n\n // Reset phase name so we don't keep adding the same values\n // multiple times.\n document.getElementById(phaseDomName).innerHTML = \"\";\n var option = document.createElement(\"option\");\n option.value = 0\n option.text = \" -- Select Phase -- \";\n document.getElementById(phaseDomName).add(option);\n }\n\n populatePhase(event) {\n const phaseDomName = `phase-${this.props.node.id}`;\n const phaseDOM = document.getElementById(phaseDomName);\n const kc = event.currentTarget.value;\n\n this.props.vocab.map(item => {\n if (item.value === kc) {\n item.phases.map(phase => {\n var option = document.createElement(\"option\");\n option.value = phase.phase_name;\n option.text = phase.label;\n phaseDOM.add(option);\n });\n }\n });\n }\n\n render() {\n const vocab = this.props.vocab ? this.props.vocab : [];\n const field = this.props.field;\n const value = this.props.value;\n const description = this.props.description;\n\n const len = value.len;\n const kcName = `kc-name-${this.props.node.id}`;\n const phaseName = `phase-${this.props.node.id}`;\n\n return (\n \n {field} info\n
\n \n {\n items.map((item, i) => {\n if (value.indexOf(item) > -1) {\n cls = classNames({\n \"array-container-item\": true,\n \"array-container-selected\": true\n });\n } else {\n cls = classNames({\n \"array-container-item\": true\n });\n }\n return
\n this.onClickHandler(field, item)}>{item}
\n })\n }\n \n
\n )\n }\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {observer, inject} from \"mobx-react\";\nimport classNames from \"classnames\";\nimport Tooltip from \"react-tooltip\";\nimport Text from \"../inputs/Text\";\nimport uuid from \"uuid\";\n\nimport killChainStyle from \"./externalreferences.scss\";\n\n@inject(\"store\")\n@observer\nexport default class ExternalReferences extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onClickHandler = this.onClickHandler.bind(this);\n this.onChangeERHandler = this.onChangeERHandler.bind(this);\n this.onClickAddHandler = this.onClickAddHandler.bind(this);\n this.onClickDeleteHandler = this.onClickDeleteHandler.bind(this);\n }\n\n componentDidMount() {\n\n }\n\n onChangeERHandler(event, value) {\n return undefined;\n }\n\n onClickAddHandler(input, select, idx) {\n this.props.onChangeERHandler(input.value, select.options[select.selectedIndex].value, idx);\n input.value = \"\";\n }\n\n onClickHandler() {\n const property = this.state.property;\n const value = this.state.value;\n }\n\n onClickDeleteHandler(select, idx) {\n this.props.onClickDeletePropertyHandler(select, idx);\n }\n\n render() {\n const vocab = this.props.vocab ? this.props.vocab : [];\n const field = this.props.field;\n const value = this.props.value;\n const description = this.props.description;\n\n const len = value.len;\n\n return (\n \n {field} info\n
\n \n
\n \n \n\n \n
\n\n {\n value.map((p, i) => {\n return (\n \n
\n )\n })\n }\n {p.kill_chain_name} - {p.phase_name} this.props.onClickRemoveHandler(field, p)} className=\"material-icons\">highlight_off
\n \n
\n )\n }\n}\n\nconst ReferenceBlock = (props) => {\n const blocks = [];\n const idx = props.i;\n const selectID = `select-${props.i}`;\n const inputID = `input-${props.i}`;\n\n const propValues = [\n \"source_name\",\n \"description\",\n \"url\",\n \"hashes\",\n \"external_id\"\n ];\n\n for (let item in props.kv) {\n let remove = props.onClickDeleteHandler(item, props.i)} className=\"remove material-icons\">highlight_off;\n\n if (item === \"source_name\") {\n remove = undefined;\n }\n\n blocks.push(\n \n {field}\n info\n this.props.onClickAddObjectHandler(field)} className=\"add material-icons\">control_point\n
\n \n {\n value.map((p, i) => {\n return (\n
\n \n
\n )\n }\n\n return {item}: {props.kv[item]} {remove}
\n \n
\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {observer, inject} from \"mobx-react\";\nimport classNames from \"classnames\";\nimport Tooltip from \"react-tooltip\";\nimport Text from \"./Text\";\n\nimport csvStyle from \"./csvselector.scss\";\n\n@inject(\"store\")\n@observer\nexport default class ArraySelector extends React.Component {\n\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n\n }\n\n onClickHandler(field, value) {\n this.props.onClickHandler(field, value);\n }\n\n render() {\n\n const value = this.props.value.join();\n\n return (\n \n \n
\n {blocks}\n \n
\n )\n }\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {observer, inject} from \"mobx-react\";\nimport classNames from \"classnames\";\nimport Tooltip from \"react-tooltip\";\nimport Text from \"../inputs/Text\";\nimport uuid from \"uuid\";\n\nimport killChainStyle from \"./genericobject.scss\";\n\n@inject(\"store\")\n@observer\nexport default class GenericObject extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChangeInputHandler = this.onChangeInputHandler.bind(this);\n this.onClickAddObjectHandler = this.onClickAddObjectHandler.bind(this);\n this.onClickDeleteHandler = this.onClickDeleteHandler.bind(this);\n this.onClickCreateBlankHandler = this.onClickCreateBlankHandler.bind(this);\n\n this.state = {\n key: \"\",\n value: \"\"\n };\n }\n\n componentDidMount() {\n\n }\n\n onChangeInputHandler(event) {\n event.preventDefault();\n\n this.setState({\n [event.currentTarget.name]: event.currentTarget.value\n });\n }\n\n onClickDeleteHandler(select, idx) {\n this.props.onClickDeletePropertyHandler(select, idx);\n }\n\n onClickCreateBlankHandler() {\n this.setState({\n key: \"\",\n value: \"\"\n });\n }\n\n onClickAddObjectHandler() {\n const o = {};\n\n o[this.state.key] = this.state.value;\n\n this.props.onClickAddObjectHandler(this.props.field, o);\n }\n\n render() {\n const field = this.props.field;\n const value = this.props.value ? this.props.value : [];\n const description = this.props.description;\n const rows = [];\n\n for (let key in value) {\n rows.push(\n this.props.onClick(this.props.name, true)}>True
\n this.props.onClick(this.props.name, false)}>False
\n \n
\n )\n }\n}\n\nconst ExtBlocks = (props) => {\n let v = props.v;\n\n if (typeof props.v === \"object\") {\n v = JSON.stringify(props.v);\n }\n\n return \n {field}\n info\n
\n \n\n
\n \n
\n\n {rows}\n \n
\n \n
\n \n control_point\n
\n \n
\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {observer, inject} from \"mobx-react\";\nimport classNames from \"classnames\";\nimport Tooltip from \"react-tooltip\";\nimport TextArea from \"../inputs/TextArea\";\nimport uuid from \"uuid\";\n\nimport confirmTextareaStyle from \"./confirmtextarea.scss\";\n\n@inject(\"store\")\n@observer\nexport default class ConfirmTextarea extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChangeInputHandler = this.onChangeInputHandler.bind(this);\n this.onClickAddObjectHandler = this.onClickAddObjectHandler.bind(this);\n this.onClickDeleteHandler = this.onClickDeleteHandler.bind(this);\n\n this.state = {\n value: \"\"\n };\n }\n\n componentDidMount() {\n\n }\n\n onChangeInputHandler(event) {\n event.preventDefault();\n\n this.setState({\n value: event.currentTarget.value\n });\n }\n\n onClickDeleteHandler(select, idx) {\n this.props.onClickDeletePropertyHandler(select, idx);\n }\n\n onClickAddObjectHandler() {\n this.props.onClickAddTextHandler(this.props.field, this.state.value);\n }\n\n render() {\n const field = this.props.field;\n const value = this.props.value ? this.props.value : [];\n const description = this.props.description;\n const rows = [];\n\n return (\n {props.k}: {v} props.onClickDeleteHandler(props.field, props.k)} className=\"remove material-icons\">highlight_off
\n \n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport { toJS } from \"mobx\";\nimport Tooltip from \"react-tooltip\";\nimport PropTypes from \"prop-types\";\nimport Panel from \"./ui/panel/Panel\";\nimport Slider from \"./ui/inputs/Slider\";\nimport Text from \"./ui/inputs/Text\";\nimport TextArea from \"./ui/inputs/TextArea\";\nimport DateTime from \"./ui/inputs/DateTime\";\nimport ArraySelector from \"./ui/inputs/ArraySelector\";\nimport KillChain from \"./ui/complex/KillChain\";\nimport ExternalReferences from \"./ui/complex/ExternalReferences\";\nimport CSVInput from \"./ui/inputs/CSVInput\";\nimport Boolean from \"./ui/inputs/Boolean\";\nimport GenericObject from \"./ui/complex/GenericObject\";\nimport ConfirmTextarea from \"./ui/complex/ConfirmTextarea\";\nimport uuid from \"uuid\";\n\nimport detailsStyle from './details.scss';\n\nfunction importAll(r) {\n let images = {};\n r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });\n return images;\n}\n\nconst images = importAll(require.context('../imgs', false, /\\.(png|jpe?g|svg)$/));\n\n@observer\nexport default class Details extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChangeHandler = this.onChangeHandler.bind(this);\n this.onChangeDateHandler = this.onChangeDateHandler.bind(this);\n\t}\n\n onChangeHandler(event) {\n this.props.onChangeNodeHandler(event);\n }\n\n onChangeDateHandler(property, datetime) {\n this.props.onChangeDateHandler(property, datetime);\n }\n\n render() {\n const node = toJS(this.props.node);\n let props = {};\n let img;\n let details = [];\n\n let deleteIcon = delete_forever;\n\n if (node.properties) {\n props = node.properties;\n img = \n {field}\n info\n
\n \n
\n \n
\n\n \n \n
\n \n control_point\n
\n \n {value}\n
\n {prop}\n info\n
\n\n let control = \n {header}\n
;\n // If there is no type, we do not want to process. If a \"control\"\n // is defined, that indicates special handling of the value.\n if (props[prop].type && !props[prop].control) {\n switch (props[prop].type) {\n case \"number\":\n case \"string\":\n control = {props[prop].value}
\n \n {header}\n
\n break;\n case \"dts\":\n control = \n
\n \n {header}\n
\n break;\n case \"array\":\n control = \n
\n \n {header}\n
\n break\n case \"object\":\n control = \n
\n \n {header}\n\n
\n break\n }\n }\n\n switch (props[prop].control) {\n case \"hidden\":\n control = \"\";\n break;\n case \"slider\":\n control = \n {header}\n
\n break;\n case \"csv\":\n control = \n
\n \n {header}\n
\n break;\n case \"killchain\":\n control = \n
\n \n {header}\n
\n break;\n case \"genericobject\":\n control = \n \n
\n \n
\n \n
\n {img} {node.id}
\n {deleteIcon} Delete
\n \n {details}\n
\n\n \n \n \n
\n )\n }\n}\n\nButton.propTypes = {\n cls: PropTypes.string,\n disabled: PropTypes.bool,\n onClick: PropTypes.func\n};\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport PropTypes from \"prop-types\";\nimport Panel from \"./ui/panel/Panel\";\nimport Button from \"./ui/button/Button\";\n\n\nimport detailsStyle from './json-viewer.scss';\n\n@observer\nexport default class JsonViewer extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onClickCopyJSONHandler = this.onClickCopyJSONHandler.bind(this);\n\t}\n\n onClickCopyJSONHandler() {\n let me = this;\n let range = document.createRange();\n let message = \"JSON Copied to Clipboard\";\n\n range.selectNode(\n document.getElementById(\"json-content\")\n );\n\n window.getSelection().removeAllRanges();\n window.getSelection().addRange(range);\n document.execCommand(\"copy\");\n\n window.getSelection().removeAllRanges();\n\n this.props.onClickShowGrowlHandler(message);\n }\n\n render() {\n return (\n \n
\n \n
\n\n\n {JSON.stringify(this.props.json, null, 2)}\n \n \n
\n \n\n
\n \n \n
\n\n \n \n
\n \n ![]({images[\"relationship.png\"].default})
Possible Relationships\n
\n Possible Relationships\n {\n this.props.relationships.map(relationship => {\n\n let src = relationship.source_ref.split(\"--\")[0];\n let target = relationship.target_ref.split(\"--\")[0];\n let srcImg = `${src}.png`;\n let targetImg = `${target}.png`;\n\n if (!images[srcImg]) {\n images[srcImg] = {};\n images[srcImg].default = \"imgs/3536f3f7f55d746d1a9eac4ca5073246.png\";\n }\n\n if (!images[targetImg]) {\n images[targetImg] = {};\n images[targetImg].default = \"imgs/3536f3f7f55d746d1a9eac4ca5073246.png\";\n }\n\n if (relationship.subTarget) {\n target = relationship.subTarget;\n }\n\n return
\n this.onClickSelectRelHandler(relationship)}>\n 
{src}\n {relationship.relationship_type} \n {target} 
\n
\n })\n }\n \n
\n )\n }\n}\n","import React from \"react\";\nimport { inject, observer } from \"mobx-react\";\nimport { toJS } from \"mobx\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport Menu from \"./menus/Menu\";\nimport TopMenu from \"./menus/TopMenu\";\nimport Node from \"./Node\";\nimport LeaderLine from \"leader-line\";\nimport Details from \"./Details\";\nimport JsonViewer from \"./JsonViewer\";\nimport JsonPaste from \"./JsonPaste\";\nimport RelationshipPicker from \"./RelationshipPicker\";\nimport Growl from \"./ui/growl/Growl\";\n\nimport canvasStyle from \"./canvas.scss\";\n\n@inject(\"store\")\n@observer\nexport default class Canvas extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.store = this.props.store.appStore;\n\n this.generateNodeID = this.generateNodeID.bind(this);\n\n this.onDragStartHandler = this.onDragStartHandler.bind(this);\n this.onDragEndHandler = this.onDragEndHandler.bind(this);\n this.onDragOverHandler = this.onDragOverHandler.bind(this);\n this.onDropHandler = this.onDropHandler.bind(this);\n this.onClickHandler = this.onClickHandler.bind(this);\n this.onDragOverNodeHandler = this.onDragOverNodeHandler.bind(this);\n this.onDropOnNodeHandler = this.onDropOnNodeHandler.bind(this);\n this.onClickShowJsonHandler = this.onClickShowJsonHandler.bind(this);\n this.onClickHideJsonHandler = this.onClickHideJsonHandler.bind(this);\n this.onClickHideRelPickerHandler = this.onClickHideRelPickerHandler.bind(this);\n this.onClickHideDetailsHandler = this.onClickHideDetailsHandler.bind(this);\n this.onClickSelectRelHandler = this.onClickSelectRelHandler.bind(this);\n this.onClickShowGrowlHandler = this.onClickShowGrowlHandler.bind(this);\n this.onChangeNodeHandler = this.onChangeNodeHandler.bind(this);\n this.onChangeDateHandler = this.onChangeDateHandler.bind(this);\n this.onMessageTimerHandler = this.onMessageTimerHandler.bind(this);\n this.onClickArrayHandler = this.onClickArrayHandler.bind(this);\n this.onChangeSliderHandler = this.onChangeSliderHandler.bind(this);\n this.onChangeCSVHandler = this.onChangeCSVHandler.bind(this);\n this.onClickBooleanHandler = this.onClickBooleanHandler.bind(this);\n this.onChangePhaseHandler = this.onChangePhaseHandler.bind(this);\n this.onClickRemovePhaseHander = this.onClickRemovePhaseHander.bind(this);\n this.onClickAddObjectHandler = this.onClickAddObjectHandler.bind(this);\n this.onClickDeletePropertyHandler = this.onClickDeletePropertyHandler.bind(this);\n this.onClickResetHandler = this.onClickResetHandler.bind(this);\n this.onChangeERHandler = this.onChangeERHandler.bind(this);\n this.onChangeGenericObjectHandler = this.onChangeGenericObjectHandler.bind(this);\n this.onClickAddGenericObjectHandler = this.onClickAddGenericObjectHandler.bind(this);\n this.onClickDeleteGenericObjectHandler = this.onClickDeleteGenericObjectHandler.bind(this);\n this.onClickAddTextHandler = this.onClickAddTextHandler.bind(this);\n this.resetBorders = this.resetBorders.bind(this);\n this.onClickHideJsonPasteHandler = this.onClickHideJsonPasteHandler.bind(this);\n this.onClickShowJsonPasteHandler = this.onClickShowJsonPasteHandler.bind(this);\n this.onChangeJSONPasteHandler = this.onChangeJSONPasteHandler.bind(this);\n this.onClickJSONPasteHandler = this.onClickJSONPasteHandler.bind(this);\n this.onClickDeleteHandler = this.onClickDeleteHandler.bind(this);\n }\n\n componentWillMount() {\n document.addEventListener(\"dragover\", (e) => {\n this.store.setMousePosition(e);\n }, false);\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"dragover\", (e) => {\n }, false);\n }\n\n onClickHandler(node) {\n this.store.showDetails = true;\n this.store.setSelected(node);\n }\n\n onClickHideDetailsHandler() {\n this.store.showDetails = false;\n }\n\n onClickHideJsonPasteHandler() {\n this.store.showJSONPaste = false;\n }\n\n onClickShowJsonPasteHandler() {\n this.store.showJSONPaste = true;\n }\n\n onClickShowGrowlHandler(message) {\n this.store.growlMessage = message;\n this.store.showGrowl = true;\n }\n\n transition(id, sticky, random) {\n const canvas = document.getElementById(\"canvas\");\n const node = document.getElementById(id);\n const calculate = (min, max) => {\n return Math.random() * ((max-100) - min) + min;\n };\n const bounds = {\n top: canvas.offsetTop+50,\n bottom: (canvas.offsetTop-50) + canvas.clientHeight,\n left: canvas.offsetLeft+50,\n right: (canvas.offsetLeft-50) + canvas.clientWidth\n };\n\n if (node) {\n // the first time the node is dropped,\n // we have to do some class manipulation.\n if (!sticky) {\n node.classList.add('show-node');\n node.classList.remove('hide-node');\n }\n\n let clientX = this.store.mousePosition.clientX;\n let clientY = this.store.mousePosition.clientY;\n\n if (clientX < bounds.left) {\n clientX = bounds.left + 50;\n } else if (clientX > bounds.right) {\n clientX = bounds.right - 50;\n }\n\n if (clientY < bounds.top) {\n clientY = bounds.top + 50;\n } else if (clientX > bounds.right) {\n clientY = bounds.bottom - 50;\n }\n\n if (random) {\n node.style.left = `${calculate(bounds.left, bounds.right)}px`;\n node.style.top = `${calculate(bounds.top, bounds.bottom)}px`;\n } else {\n node.style.left = `${clientX+50}px`;\n node.style.top = `${clientY-50}px`;\n }\n }\n }\n\n onClickDeleteHandler() {\n this.store.deleteSelectedNode();\n }\n\n resetBorders() {\n this.clearAllCSSBorderCls();\n this.store.failedRelationship = undefined;\n }\n\n onChangeNodeHandler(event) {\n this.store.editNodeValues(event);\n }\n\n mutateOnEvent(property, value) {\n const event = {\n currentTarget: {\n name: property,\n value: value\n }\n }\n\n this.onChangeNodeHandler(event);\n }\n\n onChangeDateHandler(property, datetime) {\n const value = moment(datetime).format()\n this.onChangeNodeHandler(property, value);\n }\n\n onClickArrayHandler(property, value) {\n this.mutateOnEvent(property, value);\n }\n\n onChangeSliderHandler(property, value) {\n this.mutateOnEvent(property, value);\n }\n\n onClickBooleanHandler(property, value) {\n this.mutateOnEvent(property, value);\n }\n\n onChangePhaseHandler(property, value) {\n this.mutateOnEvent(property, value);\n }\n\n onClickAddTextHandler(property, value) {\n this.mutateOnEvent(property, value);\n }\n\n onChangeGenericObjectHandler(property, event) {\n this.mutateOnEvent(property, event.currentTarget.value);\n }\n\n onClickRemovePhaseHander(property, value) {\n this.store.removeKillChainPhase(value);\n }\n\n onChangeCSVHandler(event) {\n this.store.editCSVInput(event);\n }\n\n onClickSelectRelHandler(rel) {\n const persisted = this.store.manuallySelectRelationship(rel);\n // if the node was persisted, we will want to move it\n // to a random place on the screen.\n if (persisted) {\n this.drawEdge(persisted);\n\n setTimeout(() => {\n this.transition(this.store.dragging.id, false);\n }, 500);\n }\n }\n\n onClickAddObjectHandler(field) {\n this.store.addDefaultObject(field);\n }\n\n onClickDeletePropertyHandler(select, idx) {\n this.store.deleteERObjectProperty(select, idx);\n }\n\n onChangeERHandler(input, select, idx) {\n this.store.changeERValue(input, select, idx);\n }\n\n generateNodeID(prefix) {\n return this.store.generateNodeID(prefix);\n }\n\n onClickShowJsonHandler() {\n this.store.showJSON = true;\n }\n\n onClickHideJsonHandler() {\n this.store.showJSON = false;\n }\n\n onChangeJSONPasteHandler(event) {\n this.store.pasteBundle = event.currentTarget.value;\n }\n\n onClickJSONPasteHandler() {\n this.store.loadBundleFromPaste();\n\n setTimeout(() => {\n this.store.nodes.map(n => {\n this.transition(n.id, false, true);\n });\n }, 200);\n\n this.store.edges.map(e => {\n this.drawEdge(e);\n });\n\n this.store.calculateLineDrag();\n }\n\n onClickHideRelPickerHandler() {\n this.store.showRelPicker = false;\n }\n\n onDragStartHandler(event) {\n let node = JSON.parse(event.dataTransfer.getData(\"node\"));\n this.store.dragging = node;\n }\n\n onDragEndHandler(event) {\n this.store.calculateLineDrag();\n }\n\n // Drag over canvas\n onDragOverHandler(event) {\n event.preventDefault();\n }\n\n onMessageTimerHandler() {\n setTimeout(() => {\n this.store.showGrowl = false;\n }, 2500);\n }\n\n // Drop on canvas\n onDropHandler(event) {\n event.preventDefault();\n\n let node = JSON.parse(event.dataTransfer.getData(\"node\"));\n\n if (node.properties.type.enum[0] === \"observable\") {\n this.store.growlMessage = \"Observables can only be dropped onto existing STIX objects.\";\n this.store.showGrowl = true;\n this.transition(node.id, true);\n } else {\n const persisted = this.store.persistNode(node);\n // if the node was persisted, we will want to move it\n // to a random place on the screen.\n if (persisted) {\n setTimeout(() => {\n this.transition(node.id, false);\n }, 200);\n } else {\n this.transition(node.id, true);\n }\n }\n }\n\n //Drag over another node on the screen\n onDragOverNodeHandler(event, nodeOnScreen) {\n let canRelate = this.store.canRelate(nodeOnScreen);\n\n if (event.currentTarget.id != this.store.dragging.id) {\n if (canRelate) {\n if (!event.currentTarget.classList.contains(\"ok-border\")) {\n event.currentTarget.classList.add(\"ok-border\");\n }\n } else {\n if (!event.currentTarget.classList.contains(\"noway-border\")) {\n event.currentTarget.classList.add(\"noway-border\");\n }\n }\n }\n\n }\n\n clearAllCSSBorderCls() {\n var nodes = document.getElementsByClassName(\"node\");\n\n for (let i=0; i\n {this.props.message}\n
\n \n\n {\n nodes.map(n => {\n return
\n )\n }\n}\n","import React, { Component } from 'react';\nimport {toJS} from 'mobx';\nimport {observer, inject} from 'mobx-react';\nimport { hot } from 'react-hot-loader/root';\nimport {withRouter, Route, NavLink, useParams} from \"react-router-dom\";\nimport LazyRoute from \"lazy-route\";\n\nimport defaultStyle from \"./app.scss\";\n\nimport Canvas from './components/Canvas';\n\n@withRouter\n@inject(\"store\")\n@observer\nclass App extends Component {\n\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n \n\n
\n \n }\n />\n\n
\n )\n }\n}\n\nexport default hot(App);\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { render } from \"react-dom\";\nimport { HashRouter } from \"react-router-dom\";\nimport stores from \"./stores/Stores\";\nimport { Provider } from \"mobx-react\";\nimport { AppContainer } from \"react-hot-loader\";\nimport App from './App.jsx';\n\nconst store = stores.inject({\n appStore: stores.appStore\n});\n\nconst renderApp = () => {\n\trender(\n