UNPKG

@savantly/ngx-graphexp

Version:

Gremlin client [Tinkerpop] for an Angular app

1 lines 15.5 kB
{"__symbolic":"module","version":4,"metadata":{"GraphexpModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":33,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":36,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":39,"character":4}],"declarations":[{"__symbolic":"reference","name":"GraphexpComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"providers":[],"exports":[{"__symbolic":"reference","name":"GraphexpComponent"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":59,"character":4}]}]}],"members":{}},"GraphConfig":{"__symbolic":"class","members":{}},"GraphexpComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"sv-graphexp","template":"<div fxLayout fxFlexFill class=\"content sv-graphexp\">\n\t<mat-sidenav-container fxFLex>\n\t\t<mat-sidenav #graphexpSideMenu position=\"end\" fxLayout=\"column\" fxLayoutGap=\"1.5em\">\n\t\t\t<button mat-mini-fab color=\"accent\" (click)=\"graphexpSideMenu.toggle()\">\n\t\t <mat-icon>arrow_right</mat-icon>\n\t\t </button>\n\t\t <div fxLayout fxLayoutGap=\"1em\">\n\t\t \t<button mat-raised-button (click)=\"getGraphInfo()\">\n\t\t \t\tRefresh<mat-icon>refresh</mat-icon>\n\t\t \t</button>\n\t\t \t<button mat-raised-button (click)=\"openNodeEditDialog()\">\n\t\t\t\t\tCreate<mat-icon>add</mat-icon>\n\t\t\t\t</button>\n\t\t \t<span fxFlex></span>\n\t\t\t\t<button mat-raised-button (click)=\"clearGraph()\">\n\t\t\t\t\tClear<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t </div>\n\t\t <mat-checkbox [(ngModel)]=\"showGraphInfo\">Show Graph Info</mat-checkbox>\n\t\t <mat-checkbox>Show Selection Properties</mat-checkbox>\n\t\t <mat-checkbox (click)=\"showNames()\">Show Labels</mat-checkbox>\n\t\t <mat-checkbox>Freeze Graph</mat-checkbox>\n\t\t\t<section>\n\t\t\t\t<div fxLayout>\n\t\t\t\t\t<label>Visible Layers</label>\n\t\t \t\t<mat-slider min=\"1\" max=\"5\" [(ngModel)]=\"numberOfLayers\" thumbLabel tickInterval=\"1\"></mat-slider>\n\t\t\t\t</div>\n\t\t </section>\t\t \n\t\t</mat-sidenav>\n\t\t<div fxLayout=\"column\" fxFlexFill>\n\t\t\t<mat-toolbar fxLayoutGap=\"1em\">\n\t\t\t <label>Search</label>\n\t\t\t\t<mat-form-field>\n\t\t\t\t\t<mat-select [(ngModel)]=\"searchField\">\n\t\t\t\t\t\t<mat-optgroup label=\"Node\">\n\t\t\t\t\t\t\t<mat-option value=\"id\">id</mat-option>\n\t\t\t\t\t\t\t<mat-option *ngFor=\"let item of nodeProperties | async\" [value]=\"item\">{{item}}</mat-option>\n\t\t\t\t\t\t</mat-optgroup>\n\t\t\t\t\t\t<mat-optgroup label=\"Edge\">\n\t\t\t\t\t\t\t<mat-option value=\"id\">id</mat-option>\n\t\t\t\t\t\t\t<mat-option *ngFor=\"let item of edgeProperties | async\" [value]=\"item\">{{item}}</mat-option>\n\t\t\t\t\t\t</mat-optgroup>\n\t\t\t\t\t</mat-select>\n\t\t\t\t</mat-form-field>\n\t\t\t\t<mat-input-container>\n\t\t\t\t\t<input matInput name=\"searchValue\" [(ngModel)]=\"searchValue\" placeholder=\"Id/Keyword\">\n\t\t\t\t</mat-input-container>\n\t\t\t\t<button (click)=\"search()\" mat-mini-fab>\n\t\t\t\t\t<mat-icon>search</mat-icon>\n\t\t\t\t</button>\n\t\t\t\t<button mat-mini-fab (click)=\"openNodeEditDialog()\">\n\t\t\t\t\t<mat-icon>add</mat-icon>\n\t\t\t\t</button>\n\t\t\t <span fxFlex></span>\n\t\t\t\t<button mat-mini-fab (click)=\"graphexpSideMenu.toggle()\">\n\t\t\t <mat-icon>menu</mat-icon>\n\t\t\t </button>\n\t\t\t</mat-toolbar>\n\t\t\t\n\t\t\t<div class=\"sv-graphexp-content\">\n\t\t\t\t<div class=\"sv-graphexp-left-bar\">\n\t\t\t\t\t<div *ngIf=\"showGraphInfo\"><br/>\n\t\t\t\t\t\t<strong>Node Names</strong>\n\t\t\t\t\t\t<div *ngFor=\"let item of nodeNames | async\">\n\t\t\t\t\t\t\t{{item.key}}: {{item.value}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sv-graphexp-right-bar\">\n\t\t\t\t\t<strong>Selected Node</strong>\n\t\t\t\t\t\t<div *ngIf=\"selectedNode\">\n\t\t\t\t\t\t\t<div>Label: {{selectedNode.label}}</div>\n\t\t\t\t\t\t\t<div>Type: {{selectedNode.type}}</div>\n\t\t\t\t\t\t\t<div *ngFor=\"let prop of getFlattenedNodeProperties(selectedNode)\">\n\t\t\t\t\t\t\t\t<div>{{prop.name}}: {{prop.value}}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<div class=\"sv-graphexp\" id=\"sv_graphexp\">\n\t\t\t\t\t<svg></svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</mat-sidenav-container>\n</div>\n\n","styles":[".hidden{\n\tdisplay:none;\n}\n\n.sv-graphexp mat-sidenav-container{\n\twidth:100%;\n}\n.sv-graphexp mat-sidenav{\n\tpadding:1em;\n\twidth:25em;\n}\n.sv-graphexp mat-divider{\n\tpadding:5px 0;\n}\n\ndiv.sv-graphexp{\n\theight:100%;\n} \n\n.sv-graphexp-content{\n\tpadding:1em;\n\tposition:relative;\n\ttop:0;\n\theight:100%;\n}\n\n.sv-graphexp-left-bar{\n\tposition:absolute;\n\ttop:0;\n\twidth:10em;\n}\n\n.sv-graphexp-right-bar{\n\tposition:absolute;\n\ttop:0;\n\tright:0;\n\twidth:10em;\n}\n\npath.drag-line{\n fill:none;\n stroke:#333;\n stroke-width:4px;\n stroke-dasharray:5 5;\n cursor:default;\n}\n\n.edge{\n\tstroke:#999;\n\tstroke-opacity:0.8;\n}\n\n.old_edge0{\n\tstroke:#999;\n\tstroke-opacity:0.6;\n}\n\n.node circle{\n\tstroke:#000;\n\tstroke-width:1.5px;\n}\n\n.node text{\n\tfont:10px sans-serif;\n}\n\n.node:hover circle{\n\tstroke-opacity:0.6;\n}\n\n.pinned circle{\n\tstroke:#000;\n\tstroke-width:1.5px;\n}\n\n.pinned text{\n\tfont:10px sans-serif;\n}\n\n.pinned:hover circle{\n\tstroke-opacity:0.6;\n}\n\n.old_node0 circle{\n\tstroke-opacity:0.9;\n}\n\n.old_node0 text{\n\tfont:10px sans-serif;\n\topacity:0.9;\n\tcolor:#000;\n\tcolor:rgba(0, 0, 0, 0.5);\n}\n\n.cell{\n\tfill:none;\n\tpointer-events:all;\n}"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":204,"character":17},"member":"None"}}]}],"members":{"graphexpService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":3}}]}],"graphConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"openLinkEditDialog":[{"__symbolic":"method"}],"openNodeEditDialog":[{"__symbolic":"method"}],"createLink":[{"__symbolic":"method"}],"createNode":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"getFlattenedNodeProperties":[{"__symbolic":"method"}],"showNames":[{"__symbolic":"method"}],"setNumberOfLayers":[{"__symbolic":"method"}],"clearGraph":[{"__symbolic":"method"}],"toggleGraphInfo":[{"__symbolic":"method"}],"getGraphInfo":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatDialog","line":358,"character":29}]}]}},"GraphexpService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"queryGraphInfo":[{"__symbolic":"method"}],"queryNodes":[{"__symbolic":"method"}],"getRelatedNodes":[{"__symbolic":"method"}],"createNode":[{"__symbolic":"method"}],"createLink":[{"__symbolic":"method"}],"executeQuery":[{"__symbolic":"method"}],"handleGraphInfo":[{"__symbolic":"method"}],"graphson3to1":[{"__symbolic":"method"}],"arrangeData":[{"__symbolic":"method"}],"arrange_datav3":[{"__symbolic":"method"}],"arrange_datav2":[{"__symbolic":"method"}],"extract_infov2":[{"__symbolic":"method"}],"extract_infov3":[{"__symbolic":"method"}],"get_vertex_prop_in_list":[{"__symbolic":"method"}],"idIndex":[{"__symbolic":"method"}],"make_properties_list":[{"__symbolic":"method"}],"isInt":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sv-node-edit","template":"<h2 mat-dialog-title>Edit Node</h2>\n<mat-dialog-content>\n\t<div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"1em\">\n\t\t<mat-input-container>\n\t\t\t<mat-select [(ngModel)]=\"data.item.label\" placeholder=\"Label\">\n\t\t\t\t<mat-option *ngFor=\"let item of data.labels\" [value]=\"item\">{{item}}</mat-option>\n\t\t\t</mat-select>\n\t\t</mat-input-container>\n\t\t<div>\n\t\t\t<button mat-raised-button (click)=\"createProperty()\"><mat-icon>add</mat-icon>Add Property</button>\n\t\t</div>\n\t</div>\n\t\n\t\n\t<div fxLayout fxLayoutGap=\"1em\" *ngFor=\"let item of data.item.properties\">\n\t\t<mat-input-container>\n\t\t\t<input #propertyName matInput placeholder=\"property name\" [(ngModel)]=\"item.key\" />\n\t\t</mat-input-container>\n\t\t<mat-input-container>\n\t\t\t<input #propertyValue matInput placeholder=\"property value\" [(ngModel)]=\"item.value\" />\n\t\t</mat-input-container>\n\t</div>\n</mat-dialog-content>\n<mat-dialog-actions>\n\t<button mat-button mat-dialog-close>Cancel</button>\n\t<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->\n\t<button mat-button [mat-dialog-close]=\"data.item\">Confirm</button>\n</mat-dialog-actions>","styles":[""]}]}],"members":{"createProperty":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":45,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA","line":45,"character":12}]}]],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material","arguments":[{"__symbolic":"reference","name":"ɵa"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sv-link-edit","template":"<h2 mat-dialog-title>Edit Link</h2>\n<mat-dialog-content>\n\t<div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"1em\">\n\t\t<mat-input-container>\n\t\t\t<mat-select [(ngModel)]=\"data.item.label\" placeholder=\"Label\">\n\t\t\t\t<mat-option *ngFor=\"let item of data.labels\" [value]=\"item\">{{item}}</mat-option>\n\t\t\t</mat-select>\n\t\t</mat-input-container>\n\t\t<div>\n\t\t\t<button mat-raised-button (click)=\"createProperty()\"><mat-icon>add</mat-icon>Add Property</button>\n\t\t</div>\n\t</div>\n\t\n\t\n\t<div fxLayout fxLayoutGap=\"1em\" *ngFor=\"let item of data.item.properties\">\n\t\t<mat-input-container>\n\t\t\t<input matInput placeholder=\"property name\" [(ngModel)]=\"item.key\">\n\t\t</mat-input-container>\n\t\t<mat-input-container>\n\t\t\t<input matInput placeholder=\"property value\" [(ngModel)]=\"item.value\">\n\t\t</mat-input-container>\n\t</div>\n</mat-dialog-content>\n<mat-dialog-actions>\n\t<button mat-button mat-dialog-close>Cancel</button>\n\t<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->\n\t<button mat-button [mat-dialog-close]=\"data.item\">Confirm</button>\n</mat-dialog-actions>","styles":[""]}]}],"members":{"createProperty":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":44,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA","line":44,"character":12}]}]],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material","arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"GraphexpModule":"./src/app/modules/graphexp/graphexp.module","GraphConfig":"./src/app/modules/graphexp/graphViz/graphConfig","GraphexpComponent":"./src/app/modules/graphexp/graphexp.component","GraphexpService":"./src/app/modules/graphexp/graphexp.service","ɵa":"./src/app/modules/graphexp/node-edit/node-edit.component","ɵb":"./src/app/modules/graphexp/link-edit/link-edit.component"},"importAs":"@savantly/ngx-graphexp"}