Neo4jD3Com.jsx 4.9 KB
Newer Older
1 2
import React from 'react';
import Neo4jD3 from '@/webPublic/one_stop_public/utils/Neo4jD3';
tb53863844's avatar
tb53863844 committed
3 4
import UUID from 'react-native-uuid';
export default class Neo4jD3Com extends React.Component {
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
	state = {
		uid: UUID.v4(),
	};

	triggerChange = (changedValue) => {
		// Should provide an event to pass value to Form.
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	data;
	q;
	componentWillReceiveProps(nextProps) {
		if ('option' in nextProps && nextProps.option && nextProps.option.neo4jData) {
			if (this.neo4jd3 == null) {
				this.q = nextProps.option.q;
				this.neo4jd3 = this.init(nextProps.option.neo4jData);
			} else {
				if (this.q != nextProps.option.q) {
					const newuid = UUID.v4();
					this.q = nextProps.option.q;
					this.setState({ uid: UUID.v4() }, () => {
						this.init(nextProps.option.neo4jData, newuid);
					});
				}
			}
		}
	}
	/*   componentWillReceiveProps(nextProps) {
tb53863844's avatar
tb53863844 committed
35 36
        // Should be a controlled component.
        if ('option' in nextProps&&nextProps.option&&nextProps.option.neo4jData) {
37

tb53863844's avatar
tb53863844 committed
38
            if(this.neo4jd3==null){
tb53863844's avatar
tb53863844 committed
39 40
               this.q=nextProps.option.q
               this.neo4jd3=this.init(nextProps.option.neo4jData,this.uid)
tb53863844's avatar
tb53863844 committed
41
            }else{
tb53863844's avatar
tb53863844 committed
42 43 44 45 46 47
                if(this.q!=nextProps.option.q){
                    const newuid=UUID.v4()
                    this.neo4jd3.clear()
                    var test=document.createElement('div');
                    test.setAttribute("id","id_"+newuid);
                    test.setAttribute("key",newuid);
48

tb53863844's avatar
tb53863844 committed
49 50
                    console.log(document.getElementById("zhishi"));
                    document.getElementById("zhishi").append(test)
51

tb53863844's avatar
tb53863844 committed
52 53
                    this.neo4jd3=this.init(nextProps.option.neo4jData,newuid)
                    this.q=nextProps.option.q
tb53863844's avatar
tb53863844 committed
54
                }
55

tb53863844's avatar
tb53863844 committed
56
            }
57

tb53863844's avatar
tb53863844 committed
58 59
        }
    }
tb53863844's avatar
tb53863844 committed
60
     */
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
	changePos = (obj) => {
		if (!('value' in this.props)) {
			this.setState({ ...obj });
		}
		this.triggerChange({ ...obj });
	};
	neo4jd3;
	init = (neo4jData) => {
		return new Neo4jD3('#id_' + this.state.uid, {
			highlight: [
				{
					class: 'Project',
					property: 'name',
					value: 'neo4jd3',
				},
				{
					class: 'User',
					property: 'userId',
					value: 'eisman',
				},
			],
			icons: {
				//                        'Address': 'home',
				Api: 'gear',
				//                        'BirthDate': 'birthday-cake',
				Cookie: 'paw',
				//                        'CreditCard': 'credit-card',
				//                        'Device': 'laptop',
				Email: 'at',
				Git: 'git',
				Github: 'github',
				Google: 'google',
				//                        'icons': 'font-awesome',
				Ip: 'map-marker',
				Issues: 'exclamation-circle',
				Language: 'language',
				Options: 'sliders',
				Password: 'lock',
				Phone: 'phone',
				Project: 'folder-open',
				SecurityChallengeAnswer: 'commenting',
				User: 'user',
				zoomFit: 'arrows-alt',
				zoomIn: 'search-plus',
				zoomOut: 'search-minus',
			},
			images: {
				Address: 'img/twemoji/1f3e0.svg',
				//                        'Api': 'img/twemoji/1f527.svg',
				BirthDate: 'img/twemoji/1f382.svg',
				Cookie: 'img/twemoji/1f36a.svg',
				CreditCard: 'img/twemoji/1f4b3.svg',
				Device: 'img/twemoji/1f4bb.svg',
				Email: 'img/twemoji/2709.svg',
				Git: 'img/twemoji/1f5c3.svg',
				Github: 'img/twemoji/1f5c4.svg',
				icons: 'img/twemoji/1f38f.svg',
				Ip: 'img/twemoji/1f4cd.svg',
				Issues: 'img/twemoji/1f4a9.svg',
				Language: 'img/twemoji/1f1f1-1f1f7.svg',
				Options: 'img/twemoji/2699.svg',
				Password: 'img/twemoji/1f511.svg',
				//                        'Phone': 'img/twemoji/1f4de.svg',
				Project: 'img/twemoji/2198.svg',
				'Project|name|neo4jd3': 'img/twemoji/2196.svg',
				//                        'SecurityChallengeAnswer': 'img/twemoji/1f4ac.svg',
				User: 'img/twemoji/1f600.svg',
				//                        'zoomFit': 'img/twemoji/2194.svg',
				//                        'zoomIn': 'img/twemoji/1f50d.svg',
				//                        'zoomOut': 'img/twemoji/1f50e.svg'
			},
			minCollision: 60,
			neo4jData: neo4jData,
			nodeRadius: 25,
			onNodeDoubleClick: function(node) {
				/*     switch(node.id) {
tb53863844's avatar
tb53863844 committed
137 138 139 140 141 142 143 144 145
                        case '25':
                            // Google
                            window.open(node.properties.url, '_blank');
                            break;
                        default:
                            var maxNodes = 5,
                                data = neo4jd3.randomD3Data(node, maxNodes);
                            neo4jd3.updateWithD3Data(data);
                            break;
tb53863844's avatar
tb53863844 committed
146
                    } */
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
			},
			onRelationshipDoubleClick: function(relationship) {
				console.log('double click on relationship: ' + JSON.stringify(relationship));
			},
			zoomFit: true,
		});
	};

	render() {
		return (
			<div id="zhishi">
				<div id={'id_' + this.state.uid} style={{ height: this.props.json.height || 500 }}>
					{' '}
				</div>
			</div>
		);
	}
}