{"version":3,"file":"sedeh-visualize-it.mjs","sources":["../../../projects/visualize-it/src/lib/components/visualize-it.component.ts","../../../projects/visualize-it/src/lib/components/visualize-it.component.html","../../../projects/visualize-it/src/lib/visualize-it.module.ts","../../../projects/visualize-it/src/public-api.ts","../../../projects/visualize-it/src/sedeh-visualize-it.ts"],"sourcesContent":["/*\r\n * tool to display result of a search on set of points of interests on objects.\r\n */\r\nimport {\r\n Component,\r\n OnInit,\r\n OnChanges,\r\n AfterViewInit ,\r\n Input,\r\n Output,\r\n EventEmitter,\r\n Renderer2,\r\n RendererFactory2,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'visualize-it',\r\n templateUrl: './visualize-it.component.html',\r\n styleUrls: ['./visualize-it.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class VisualizeItComponent implements OnInit, AfterViewInit, OnChanges {\r\n\r\n showLegend = false;\r\n showHelp = false;\r\n expanded = false;\r\n\r\n private renderer: Renderer2;\r\n \r\n @Input(\"showCurvedConnections\")\r\n showCurvedConnections!: string;\r\n \r\n @Input(\"visualizerId\")\r\n visualizerId = 'd3-container';\r\n \r\n @Input(\"enableTooltip\")\r\n enableTooltip!: boolean;\r\n\r\n @Input(\"gradientsEnabled\")\r\n gradientsEnabled = true;\r\n\r\n @Input(\"repealForce\")\r\n repealForce = 300;\r\n \r\n @Input(\"fixedDistance\")\r\n fixedDistance = 60;\r\n \r\n @Input(\"outlineNodes\")\r\n outlineNodes!: boolean;\r\n\r\n @Input(\"enableLegends\")\r\n enableLegends!: boolean;\r\n\r\n @Input(\"showTypeOnHover\")\r\n showTypeOnHover!: boolean;\r\n\r\n @Input(\"showDirections\")\r\n showDirections!: boolean;\r\n\r\n @Input(\"data\")\r\n data: any;\r\n\r\n @Input(\"typeMapping\")\r\n typeMapping: any = {};\r\n\r\n @Input(\"width\")\r\n width!: string;\r\n\r\n @Input(\"height\")\r\n height!: string;\r\n\r\n @Output(\"onVisualization\")\r\n onVisualization = new EventEmitter();\r\n\r\n constructor(private factory: RendererFactory2) {\r\n this.renderer = this.factory.createRenderer(null, null);\r\n if (navigator.platform.toUpperCase().indexOf('MAC')<0) {\r\n document.addEventListener(\"webkitfullscreenchange\", (event: Event) => {\r\n if(!window.screenTop && !window.screenY) {\r\n this.expand(false);\r\n }\r\n });\r\n document.addEventListener(\"mozfullscreenchange\", (event: Event) => {\r\n const win: any = window;\r\n const isFullScreen = win.fullScreen ||\r\n (win.innerWidth == screen.width && win.innerHeight == screen.height)\r\n if(!isFullScreen) {\r\n this.expand(false);\r\n }\r\n });\r\n document.addEventListener(\"MSFullscreenChange\", (event: Event) => {\r\n const win: any = window;\r\n const isFullScreen = win.fullScreen ||\r\n (win.innerWidth == screen.width && win.innerHeight == screen.height)\r\n if(!isFullScreen) {\r\n this.expand(false);\r\n }\r\n });\r\n }\r\n }\r\n\r\n private triggerEvaluation(points: any) {\r\n if (points.length) {\r\n const indexOf: any = {};\r\n const errors: any = [];\r\n const dataSet: any = {\r\n links:[],\r\n nodes: []\r\n };\r\n this.renderer.selectRootElement('#' + this.visualizerId).innerHTML = \"\";\r\n points.map( (node: any,index: number) => indexOf[node.id] = index);\r\n points.map( (node: any, i: number) => {\r\n dataSet.nodes.push({\r\n size: node.size ? node.size: 10, \r\n group: node.group? node.group : 0, \r\n type: node.type && node.type.length ? node.type : \"circle\",\r\n name: node.name,\r\n image: node.image,\r\n data: node.data ? node.data : []\r\n });\r\n if(node.sources) {\r\n node.sources.map( (id: string) => {\r\n const item = indexOf[id];\r\n if (item != undefined) {\r\n dataSet.links.push({source: item, target: i});\r\n } else {\r\n errors.push(\"Missing source node '\" + id + \"' for node '\" + node.id + \"'.\");\r\n }\r\n })\r\n }\r\n if(node.destinations) {\r\n node.destinations.map( (id: any) => {\r\n const item = indexOf[id];\r\n if (item != undefined) {\r\n dataSet.links.push({source: i, target: item});\r\n } else {\r\n errors.push(\"Missing destination node '\" + id + \"' for node '\" + node.id + \"'.\");\r\n }\r\n })\r\n }\r\n });\r\n\r\n if (errors.length) {\r\n this.renderer.selectRootElement('#' + this.visualizerId).innerHTML = \"\"+errors.join(\"
\")+\"
\";\r\n } else {\r\n const el = this.renderer.selectRootElement('#' + this.visualizerId).parentNode;\r\n const win: any = window;\r\n const config = {\r\n width: window.innerWidth, \r\n height: window.innerHeight,\r\n offset: {x: el.offsetLeft, y: el.offsetTop}, \r\n data: dataSet,\r\n mapping: this.typeMapping, \r\n showTypeOnHover: this.showTypeOnHover, \r\n showDirections: this.showDirections,\r\n enableTooltip: this.enableTooltip,\r\n showCurvedConnections: this.showCurvedConnections,\r\n outlineNodes: this.outlineNodes,\r\n charge: -1 * this.repealForce,\r\n fixedDistance: this.fixedDistance,\r\n gradientsEnabled: this.gradientsEnabled,\r\n targetDiv: \"#\" + this.visualizerId\r\n };\r\n win['initiateD3'](config);\r\n }\r\n } else {\r\n this.renderer.selectRootElement('#' + this.visualizerId).innerHTML = \"Missing data.
\";\r\n }\r\n }\r\n\r\n ngOnChanges(changes: any) {\r\n if (changes.data) {\r\n setTimeout(this.ngOnInit.bind(this), 333);\r\n }\r\n }\r\n\r\n ngOnInit() {\r\n if( !(this.data instanceof Array)) {\r\n this.data = [this.data];\r\n }\r\n }\r\n\r\n async ngAfterViewInit() {\r\n const win: any = window;\r\n if (!win['initiateD3']) {\r\n await this.loadScript(\"assets/d3.js\", 'd3js').then( () => {\r\n this.triggerEvaluation(this.data);\r\n });\r\n } else {\r\n this.triggerEvaluation(this.data);\r\n }\r\n \t}\r\n \r\n\tprivate loadScript(url: string, id: string) { \r\n return new Promise((resolve, reject) => {\r\n const scriptElement = document.createElement('script');\r\n \r\n scriptElement.type = \"text/javascript\";\r\n scriptElement.src = url;\r\n scriptElement.onload = resolve;\r\n \r\n document.body.appendChild(scriptElement);\r\n\t\t})\r\n }\r\n\r\n expand(flag: boolean) {\r\n const win: any = window;\r\n const doc: any = document;\r\n\r\n if (flag) {\r\n const el = this.renderer.selectRootElement('#' + this.visualizerId).parentNode;\r\n const element: any = doc.documentElement;\r\n if(element.requestFullscreen) {\r\n element.requestFullscreen();\r\n } else if(element.mozRequestFullScreen) {\r\n element.mozRequestFullScreen();\r\n } else if(element.webkitRequestFullscreen) {\r\n element.webkitRequestFullscreen();\r\n } else if(element.msRequestFullscreen) {\r\n element.msRequestFullscreen();\r\n }\r\n el.classList.add(\"expanded-container\");\r\n this.expanded = true;\r\n if (win[\"centerVisibility\"]) {\r\n win[\"centerVisibility\"](0, 0);\r\n }\r\n } else {\r\n if(doc.exitFullscreen) {\r\n doc.exitFullscreen();\r\n } else if(doc.mozCancelFullScreen) {\r\n doc.mozCancelFullScreen();\r\n } else if(doc.webkitExitFullscreen) {\r\n doc.webkitExitFullscreen();\r\n }\r\n const el = this.renderer.selectRootElement('#' + this.visualizerId).parentNode;\r\n el.classList.remove(\"expanded-container\");\r\n this.expanded = false;\r\n if (win[\"centerVisibility\"]) {\r\n win[\"centerVisibility\"](el.offsetLeft, el.offsetTop);\r\n }\r\n }\r\n }\r\n\r\n onchange(event: any) {\r\n this.triggerEvaluation(event.points);\r\n }\r\n}\r\n","\r\n\r\n
♢\r\n \r\n
⚃\r\n
⚄\r\n \r\n
?\r\n
\r\n
\r\n