diff --git a/web/js/cfm_view3d.js b/web/js/cfm_view3d.js
index 6435690d..55a04d39 100644
--- a/web/js/cfm_view3d.js
+++ b/web/js/cfm_view3d.js
@@ -196,19 +196,22 @@ function sendParams3Dview() {
   let params=get_PARAMS();
   let iwindow=document.getElementById('view3DIfram').contentWindow;
   let  eparams=encodeURI(params);
-window.console.log("SERVER SEND, post a param message to iframe.");
-window.console.log(">>>"+eparams);
-  iwindow.postMessage({call:'fromSCEC',value:eparams},"*");
+
+window.console.log("SERVER >>> post param to iframe");
+//window.console.log(">>>"+eparams);
+  iwindow.postMessage({call:'fromSCEC param',value:eparams},"*");
 }
 
 function sendCamera3Dview(myCamera) {
   let iwindow=document.getElementById('view3DIfram').contentWindow;
   let ecamera=encodeURI(myCamera);
+window.console.log("SERVER >>> post camera info to iframe");
   iwindow.postMessage({call:'fromSCEC camera',value:ecamera},"*");
 }
 
 function sendDone3Dview(note) {
   let iwindow=document.getElementById('view3DIfram').contentWindow;
+window.console.log("SERVER >>> post done to iframe");
   iwindow.postMessage({call:'fromSCEC done',value:note},"*");
 }
 
@@ -218,44 +221,44 @@ window.addEventListener("DOMContentLoaded", function () {
 
     var origin = event.origin;
     if (origin != "http://localhost:8082" && origin != "http://moho.scec.org" && origin != "https://www.scec.org") {
-        window.console.log("SERVER <<< service, bad message origin:", origin);
+        window.console.log("SERVER <<< bad message origin:", origin);
         return;
     }
 
     if (typeof event.data == 'object' && event.data.call=='from3DViewer') {
         if(event.data.value == "send params") {
-window.console.log(" SERVER <<<  send params");
+window.console.log(" to-SERVER <<< send params");
           sendParams3Dview();
           return;
         }
         if(event.data.value == "done with loading traces") {
-window.console.log(" SERVER <<<  turn off load spinner");
+window.console.log(" to-SERVER <<< turn off load spinner");
           document.getElementById('spinIconFor3D').style.display = "none";
           // plot3d in iframe is all up and ready
           presetPlot3d_first();
           return;
         }
         if(event.data.value == "start loading") {
-window.console.log(" SERVER <<< turn on loading spinner");
+window.console.log(" to-SERVER <<< turn on loading spinner");
           document.getElementById('spinIconFor3D').style.display = "block";
           return;
         }
         if(event.data.value == "ready") {
-window.console.log(" SERVER <<< 3d viewer is ready");
+window.console.log(" to-SERVER <<< 3d viewer is ready");
           return;
         }
         if(event.data.value == "done with base trace loading") {
-window.console.log(" SERVER <<< done with base trace loading");
+window.console.log(" to-SERVER <<< done with base trace loading");
           presetPlot3d_second();
           return;
         }
-        window.console.log(" SERVER <<< what the heck ..",event.data.value);
+        window.console.log(" to-SERVER <<< what the heck ..",event.data.value);
       } else if (typeof event.data == 'object' && event.data.call=='from3DViewer camera') {
-window.console.log(" SERVER <<< camera start");
+window.console.log(" to-SERVER <<< camera start");
           PLOT3D_CAMERA=event.data.value;
           window.console.log("GOT camera_str >> "+ PLOT3D_CAMERA);
       } else if (typeof event.data == 'object' && event.data.call=='from3DViewer camera done') {
-window.console.log(" SERVER <<< camera done");
+window.console.log(" to-SERVER <<< camera done");
           let tmp=event.data.value;
 //        presetPlot3d_second();
       } else {
diff --git a/web/js/plot3d/myWebApp.js b/web/js/plot3d/myWebApp.js
index 64828605..2ef42aa0 100644
--- a/web/js/plot3d/myWebApp.js
+++ b/web/js/plot3d/myWebApp.js
@@ -3135,7 +3135,7 @@ eval("module.exports = \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBY
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"load\", function() { return load; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"autoInitLocalFileLoader\", function() { return autoInitLocalFileLoader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"foo\", function() { return foo; });\n/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jszip */ \"./node_modules/jszip/lib/index.js\");\n/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jszip__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vtk_js_Sources_macro__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vtk.js/Sources/macro */ \"./node_modules/vtk.js/Sources/macro.js\");\n/* harmony import */ var vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper */ \"./node_modules/vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Misc_FullScreenRenderWindow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow */ \"./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_URLExtract__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/URLExtract */ \"./node_modules/vtk.js/Sources/Common/Core/URLExtract/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/TSReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/TSReader/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Mapper */ \"./node_modules/vtk.js/Sources/Rendering/Core/Mapper/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Actor */ \"./node_modules/vtk.js/Sources/Rendering/Core/Actor/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Property */ \"./node_modules/vtk.js/Sources/Rendering/Core/Property/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Camera__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Camera */ \"./node_modules/vtk.js/Sources/Rendering/Core/Camera/index.js\");\n/* harmony import */ var vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! vtk.js/Sources/Interaction/Widgets/OrientationMarkerWidget */ \"./node_modules/vtk.js/Sources/Interaction/Widgets/OrientationMarkerWidget/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_GeoAxesActor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/GeoAxesActor */ \"./node_modules/vtk.js/Sources/Rendering/Core/GeoAxesActor/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/Math */ \"./node_modules/vtk.js/Sources/Common/Core/Math/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_Widgets3D_InteractiveOrientationWidget__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! vtk.js/Sources/Widgets/Widgets3D/InteractiveOrientationWidget */ \"./node_modules/vtk.js/Sources/Widgets/Widgets3D/InteractiveOrientationWidget/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_Core_WidgetManager__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! vtk.js/Sources/Widgets/Core/WidgetManager */ \"./node_modules/vtk.js/Sources/Widgets/Core/WidgetManager/index.js\");\n/* harmony import */ var vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! vtk.js/Sources/Filters/General/OutlineFilter */ \"./node_modules/vtk.js/Sources/Filters/General/OutlineFilter/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_BoundingBox__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/BoundingBox */ \"./node_modules/vtk.js/Sources/Common/DataModel/BoundingBox/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_Points__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/Points */ \"./node_modules/vtk.js/Sources/Common/Core/Points/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_PointSet__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/PointSet */ \"./node_modules/vtk.js/Sources/Common/DataModel/PointSet/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_PolyData__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/PolyData */ \"./node_modules/vtk.js/Sources/Common/DataModel/PolyData/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_GMTReader__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/GMTReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/GMTReader/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_EQReader__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/EQReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/EQReader/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_SVG_SVGRepresentation__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! vtk.js/Sources/Widgets/SVG/SVGRepresentation */ \"./node_modules/vtk.js/Sources/Widgets/SVG/SVGRepresentation/index.js\");\n/* harmony import */ var _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TSViewer.module.css */ \"./src/TSViewer.module.css\");\n/* harmony import */ var _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default = /*#__PURE__*/__webpack_require__.n(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23__);\n\n/*************************/\n/* SCEC vtk.js ts viewer */\n/*************************/\n\n/*NOTE: zip fileURL input with background ts is not implemented */\n\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable import/no-extraneous-dependencies */\n\n/*remove links to kiteware site:  import 'vtk.js/Sources/favicon'; */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// for making SVG layer\n\n\n\n\n/*****\nvar myContainer = container || exampleContainer || rootBody;options>> viewUID=uid&viewerType=CFM&fileURL=[file1,file2]&name=[name1,name2]&filePATH=[path]\n*****/\n\nconst iOS = /iPad|iPhone|iPod/.test(window.navigator.platform);\nvar autoInit = false;// disable the file drop option\nvar fileCount = 0;\nvar fileIdx = 0;\nvar viewerType = \"CFM\"; //  or \"GFM\"\nvar evalMode = 0; // in evalMode, fault color is either gold or blue\n\nvar cameraOkay = 0;\n\n// hold fault name embeded as svg/g layer\nconst hold_name_layer=[];\nconst hold_fault_file_location=[];\nconst hold_fault_file_name=[];\nvar hold_uid=0;\nconst hold_clippingRange=[];\n\n/** housekeeping on actor **/\n// 3D actor for each fault line, one per tsurf file,\n// scene.push({ name, source/polydata, mapper, actor });\nconst scene = [];\n\n// California shoreline actor from GMAT file\n// coast_scene.push({ name, source/polydata, mapper, actor });\nconst coast_scene = [];\n\n// fault trace/blind, from GMAT file, could have multiple traces with\n// duplicate fault names\n// trace_scene.push({ name, source/polydata, mapper, actor });\nconst trace_scene = [];\nconst blind_scene = [];\n\n// seismicity\nconst hauksson_scene = [];\nconst ross_scene = [];\n\nvar toggled;\n\n// bounding box, one  per fault line\nconst bounds_scene = [];\n// overall bounding box, final_bounds_scene.push({'master', outline, mapper, actor });\nconst final_bounds_scene = [];\nvar final_bb=[];\n\n// need to expose at the top level\nvar fullScreenRenderer;\nvar renderer;\nvar renderWindow;\nvar orientationWidget;\nvar activeCamera;\nvar interactor;\nvar openGLRenderWindow;\nvar boundingBox;\n\nvar faultList=[];\nvar actorList=[];\nvar activeActorList=[];\n\n// to track the original Camera View\nvar initialCameraView;\nvar initialPosition;\nvar initialFocalPoint;\nvar initialViewUp;\n\n/***\n  MISC\n***/\n/**** SVG layer ****/\nconst { createSvgElement, createSvgDomElement } = vtk_js_Sources_Widgets_SVG_SVGRepresentation__WEBPACK_IMPORTED_MODULE_22__[\"default\"];\n// from vtk.js/Sources/Widgets/Core/WidgetManager \n// <div><svg><g><text/image></g></svg></div>\nfunction createSvgRoot(id) {\n  var wrapper = document.createElement('div');\n  wrapper.setAttribute( 'style', 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;');\n\n  var svgRoot = createSvgDomElement('svg');\n  // svgRoot.setAttribute('xmlns', \"http://www.w3.org/2000/svg\");\n  // fixed space at upper right corner \n  svgRoot.setAttribute('style', 'position:absolute; top:10px; right:1%; width: 20%; height: 10%; border:2px solid blue;background:transparent');\n    \n  svgRoot.setAttribute('version', '1.1');\n  svgRoot.setAttribute('baseProfile', 'full');\n  svgRoot.setAttribute('class', 'svgf');\n  svgRoot.setAttribute('data-id', id);\n\n  wrapper.appendChild(svgRoot);\n\n  return { svgWrapper: wrapper, svgRoot };\n}\n\n// making a text string\nfunction addSvgLabel(id,textstr,xval,yval) {\n\n  var svgContainers = createSvgRoot(id);\n  var svgWrapper=svgContainers.svgWrapper;\n  var svgRoot = svgContainers.svgRoot;\n\n  // reset to put this in the middle except for SCEC label\n  // make it random places for now..\n  if(id != 0) {\n    var topv= (id*10)+20;\n    svgRoot.setAttribute('style', 'position:absolute; top:'+topv+'%; right:50%; width: 20%; height: 10%; border:2px solid green;');\n  }\n\n  var gtop = createSvgDomElement('g');\n  var text = createSvgDomElement('text');\n  text.setAttribute('x', 0);\n  text.setAttribute('y', 0);\n  text.setAttribute('dx', 20);\n  text.setAttribute('dy', 40);\n  text.setAttribute('id', textstr+\"_\"+id);\n  text.setAttribute('fill', 'black');\n  text.textContent=textstr;\n  gtop.appendChild(text);\n  svgRoot.appendChild(gtop);\n\n  return svgWrapper;\n}\n\nfunction addSCECImgLabel() {\n  var svgContainers = createSvgRoot(0);\n  var svgWrapper=svgContainers.svgWrapper;\n  var svgRoot = svgContainers.svgRoot;\n\n  // reset the svg\n// upper right\n//  svgRoot.setAttribute('style', 'position:absolute; top:10px; right:15px; width: 60px; height:40px; border:6px solid #F9F9F9;background:#990000;opacity:80%;');\n\n// lower left\n  svgRoot.setAttribute('style', 'position:absolute; bottom:15px; left:15px; width: 60px; height:40px; border:6px solid #F9F9F9;background:#990000;opacity:80%;');\n\n  var gtop = createSvgDomElement('g');\n  var image = createSvgDomElement('image');\n  image.setAttribute('class', 'scec-logo');\n  image.setAttribute('width', '60');\n  image.setAttribute('height', '40');\n  image.setAttribute('href', 'img/sceclogo_transparent.png');\n  //image.setAttribute('href', 'sceclogo.png');\n  gtop.appendChild(image);\n  svgRoot.appendChild(gtop);\n\n  return svgWrapper;\n}\n\nfunction makeSCECSvgLayer() {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  var canvas = openGLRenderWindow.getCanvas();\n\n//  var {top, left, width, height }= canvas.getBoundingClientRect();\n//  var svg=document.querySelector('svg');\n//  var ccanvas=document.querySelector('canvas');\n\n  var slabel=addSCECImgLabel();\n  container.insertBefore(slabel,canvas.nextSibling);\n\n/*\n  var slabel2=addSvgLabel(0,\"www.SCEC.org\",0,0); \n  container.insertBefore(slabel2,canvas.nextSibling);\n*/\n\n// TESTING picking\n/*\n  var id=2;\n  var elt=insertFaultNameSvgLayer(\"fault-abc\",id,20,40);\n  hold_name_layer.push({fault_id:id,layer:elt});\n\n  id = 3;\n  elt=insertFaultNameSvgLayer(\"fault-xyz\",id,20,40);\n  hold_name_layer.push({fault_id:id,layer:elt});\n*/\n}\n\nfunction _lookupSvgLayer(id) {\n//  var div_elt=document.querySelector('.svgf[data-id='+id+']');\n  let sz=hold_name_layer.length;\n  for( var i=0;i<sz;i++ ) {\n    let elt=hold_name_layer[i];\n    if (elt.fault_id == id) {\n      return elt.layer;\n    }\n  }\n  return null;\n}\n\nfunction insertFaultNameSvgLayer(fname,id,x,y) {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  var canvas = openGLRenderWindow.getCanvas();\n\n  var div_elt=addSvgLabel(id,fname,x,y); \n  container.insertBefore(div_elt,canvas.nextSibling);\n  return div_elt;\n}\n\nfunction deleteFaultNameSvgLayer(id) {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  \n  var div_elt=_lookupSvgLayer(id);\n  container.removeChild(div_elt);\n}\n\n\n\nfunction downloadImage() {\n  let d=new Date();\n  let timestamp = Math.floor(d.getTime()/1000); // in seconds\n  let delta=(timestamp - hold_uid);\n  let fstub = 'CFM_3Dview_'+hold_uid+\"_\"+delta;\n\n  renderWindow.captureImages()[0].then(\n    (image) => { \n        let tmp=image;\n        let a = document.createElement('a');\n        a.href = image;\n        let imagename = fstub + '.png';\n        a.download = imagename;\n        a.style.display = 'none';\n        document.body.appendChild(a);\n        a.click();\n        a.remove()\n    }\n  );\n}\n\nfunction print_camera(note) {\n  let pos=activeCamera.getPosition();\n  let angle=activeCamera.getViewAngle();\n  let distance=activeCamera.getDistance();\n  let vmatrix=activeCamera.getViewMatrix();\n  let viewup=activeCamera.getViewUp();\n  let focal=activeCamera.getFocalPoint();\n\n  let clippingRange=activeCamera.getClippingRange();\n\n  window.console.log(\"plot3d >>  CAMERA NOTE:\"+note);\n  window.console.log(\"plot3d >>     position \"+pos.toString());\n  window.console.log(\"plot3d >>     angle    \"+angle);\n  window.console.log(\"plot3d >>     viewup   \"+viewup.toString());\n  window.console.log(\"plot3d >>     focal    \"+focal.toString());\n  window.console.log(\"plot3d >>     distance    \"+distance);\n  window.console.log(\"plot3d >>     clippingRange    \"+clippingRange.toString());\n  \n}\n\nfunction extract_camera() {\n  let pos=activeCamera.getPosition();\n  let angle=activeCamera.getViewAngle();\n  let distance=activeCamera.getDistance();\n  let vmatrix=activeCamera.getViewMatrix();\n  let viewup=activeCamera.getViewUp();\n  let focal=activeCamera.getFocalPoint();\n\n// let clippingRange=activeCamera.getClippingRange();\n  hold_clippingRange.push(activeCamera.getClippingRange());\n\n  let camera_info = { \"pos\":pos, \"angle\":angle, \"viewup\":viewup, \"distance\":distance, \"focal\":focal};\n  let camera_info_str= JSON.stringify(camera_info);\n  return camera_info_str;\n}\n\n// get camera information and send back to the parent\nfunction sendCamera2service() {\n  let camera_info=extract_camera()\n  window.top.postMessage({'call':'from3DViewer camera', value:camera_info}, '*');\n}\n\n//{\"pos\":[0,1,0],\"angle\":30,\"viewup\":[0,0,-1],\"focal\":[0,0,0]\nfunction goto_newCamera(camera_str) {\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n \n  let camera_info = JSON.parse(camera_str);\n  let pos=camera_info['pos'];\n  let angle=camera_info['angle'];\n  let distance=camera_info['distance'];\n  let viewup=camera_info['viewup'];\n  let focal=camera_info['focal'];\n  let tmp=camera_info['viewMatrix'];\n\n//  print_camera(\"before the resetCamera call\");\n  renderer.resetCamera();\n\n  if(pos) { activeCamera.setPosition(pos[0], pos[1], pos[2]); }\n  if(focal) { activeCamera.setFocalPoint(focal[0], focal[1], focal[2]); }\n  if(angle) { activeCamera.setViewAngle(angle); }\n  if(viewup) { activeCamera.setViewUp(viewup[0], viewup[1], viewup[2]); }\n  if(tmp) {\n    let matrix= [tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6],tmp[7],tmp[8],tmp[9],tmp[10],tmp[11],tmp[12],tmp[13],tmp[14],tmp[15]];\n    activeCamera.setViewMatrix(matrix);\n  }\n  if(distance) { activeCamera.setDistance(distance); }\n\n  orientationWidget.updateMarkerOrientation();\n  renderer.resetCamera();\n  renderWindow.render();\n// print_camera(\"after the resetCamera call\");\n\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) { toggleShoreline(); }\n  if(track_trace) { toggleTraceAndFault(); }\n}\n\n// when an entry on legend list get clicked,\n// alter actor's visibility\nfunction onVClick(event) {\n  var el = event.target;\n  var index = Number(el.dataset.index);\n  var actor = scene[index].actor;\n  var visibility = actor.getVisibility();\n\n  actor.setVisibility(!visibility);\n  if (visibility) {\n    el.classList.remove('visible');\n  } else {\n    el.classList.add('visible');\n  }\n  renderWindow.render();\n}\n\n// https://s3-us-west-2.amazonaws.com/files.scec.org/s3fs-public/projects/cfm/CFM5/CFM52_preferred/500m/CRFA-BPPM-WEST-Big_Pine_fault-CFM2_m500.ts\n//    also ... -LEGG-CFM4_m500.ts\n// http://localhost/~mei/testV/cfm_data/CFM_1571460363892.zip\n// cfm_data/WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5.ts\n\nfunction trim4Name(fname) {\n   // trim path   \n   var dname=fname.substring(fname.lastIndexOf('/')+1);\n   var nname=dname.substring(0,dname.lastIndexOf('.'));\n\n// WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5\n// WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5_m500\n   var teststr=nname.substring(nname.lastIndexOf(\"-\"));\n   var sname=nname;\n   if(teststr.includes('_')) {\n     sname=dname.substring(0,nname.lastIndexOf(\"_\"));\n   }\n   faultList.push(sname);\n\n   // trim abb and ext\n   var n = nname.split('-');\n   var idx=nname.lastIndexOf('-')+1;\n   if(idx != null) { // or a simple zip file\n     var pre=nname.substring(0,idx-1);\n     var post=nname.substring(idx);\n     var n = pre.split('-');\n     var sz=n.length;\n     if(sz >= 4) {\n//      nname=pre.substring(15,);\n        nname=n[3];\n/*** do not add the post part\n       if(post != null) { nname= nname+\"(\"+post+\")\"; }\n***/\n     }\n   }\n   // replace all underline with space\n   var nnname = nname.replace(/_/g, \" \");\n\n   return nnname;\n}\n\n\n/***\n  SHORELINE + SURFACE TRACES\n***/\nfunction loadGMTContent(gmtContent, gtype) {\n  const gmtReader = vtk_js_Sources_IO_Geometry_GMTReader__WEBPACK_IMPORTED_MODULE_20__[\"default\"].newInstance();\n  let gmtContentString=Decodeuint8arr(gmtContent);\n  gmtReader.parseAsText(gmtContentString);\n  const nbOutputs = gmtReader.getNumberOfOutputPorts();\n\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = gmtReader.getOutputData(idx); // polydata\n    var name = source.get('name').name;\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    prop.setLineWidth(1);\n    prop.setOpacity(1);\n\n    switch (gtype) {\n      case 'blind':\n         blind_scene.push({ name, source, mapper, actor });\n         actorList.push(actor);\n         prop.setColor(0.8,0.1,0.1); \n         break;\n      case 'trace':\n         trace_scene.push({ name, source, mapper, actor });\n         actorList.push(actor);\n         prop.setColor(1,0.1,1); \n         break;\n      case 'coast':\n         coast_scene.push({ name, source, mapper, actor });\n         prop.setColor(0,0,0); \n         prop.setLineWidth(200);\n         break;\n    }\n\n    actor.setProperty(prop);\n    actor.setVisibility(0);\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n  }\n\n  if(toggled === undefined && \n            retrieveSurfaceTraces_done() && retrieveShoreline_done()) {\n    if(final_bounds_scene.length > 0 ) {\n      toggled=true;\n      toggleTraceAndFault(); \n      toggleShoreline();\n    }\n  }\n  postRetrieveProcessing();\n}\n\n/***\n  HAUKSSON + ROSS TRACES\n***/\nfunction loadEQContent(eqContent,etype,renderer,renderWindow) {\n\nwindow.console.log(\"plot3d >> loadingEQContent \"+etype);\n  const eqReader = vtk_js_Sources_IO_Geometry_EQReader__WEBPACK_IMPORTED_MODULE_21__[\"default\"].newInstance();\n  let eqContentString=Decodeuint8arr(eqContent);\n  eqReader.parseAsText(eqContentString);\n  const nbOutputs = eqReader.getNumberOfOutputPorts();\n\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = eqReader.getOutputData(idx); // polydata\n    var meta = source.get('meta').meta;\n    var jmeta = JSON.parse(meta);\n    var color = jmeta['color'];\n    var sz = jmeta['size'];\n    var r=color['r'];\n    var g=color['g'];\n    var b=color['b'];\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    prop.setOpacity(1);\n//    window.console.log(\"plot3d >> size of hypocenter>>\"+sz);\n\n    switch (etype) {\n      case 'hauksson':\n         hauksson_scene.push({ name, source, mapper, actor });\n         prop.setEdgeVisibility(true);\n         prop.setPointSize(sz);\n         prop.setColor(r,g,b);\n         break;\n      case 'ross':\n         ross_scene.push({ name, source, mapper, actor });\n         prop.setEdgeVisibility(true);\n         prop.setPointSize(sz);\n         prop.setColor(r,g,b);\n         break;\n    }\n    actor.setProperty(prop);\n    actor.setVisibility(0);\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n  }\n\n  postRetrieveProcessing();\n}\n\nfunction retrieveQuakeTraces_done() {\n  if(hauksson_scene.length == 0)\n     return 0;\n  if(ross_scene.length == 0)\n     return 0;\n  return 1; \n}\n\nfunction retrieveQuakeTraces(container) {\n//window.console.log(\"plot3d >> retrieveQuakeTraces\");\n  const hauksson_file=\"cfm_data/hauksson_CFM.utm\";\n  const ross_file=\"cfm_data/ross_CFM.utm\";\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(hauksson_file, {}).then((content) => {\n      loadEQContent(content,'hauksson',renderer,renderWindow);\n  });\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(ross_file, {}).then((content) => {\n      loadEQContent(content,'ross',renderer,renderWindow);\n  });\n}\n\nfunction retrieveSurfaceTraces_done() {\n  if(blind_scene.length == 0)\n    return 0;\n  if(trace_scene.length == 0)\n    return 0;\n  return 1;\n}\n\nfunction retrieveSurfaceTraces(container) {\n  const blind_file=\"cfm_data/cfm_blind.utm\"\n  const trace_file=\"cfm_data/cfm_traces.utm\"\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(blind_file, {}).then((content) => {\n      loadGMTContent(content, 'blind');\n  });\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(trace_file, {}).then((content) => {\n      loadGMTContent(content, 'trace');\n  });\n}\n\nfunction collectActiveTraceAndFault()\n{\n  var cnt=faultList.length;\n  for(let i=0;i<cnt;i++) {\n    var name=faultList[i];\n    trace_scene.forEach((item, idx) => {\n      let n=item.name; \n      if(n == name)  {\n        let actor=item.actor;\n        activeActorList.push(actor);\n      }\n    });\n    blind_scene.forEach((item, idx) => {\n      let n=item.name; \n      if(n == name)  {\n        let actor=item.actor;\n        activeActorList.push(actor);\n      }\n    });\n  }\n}\n\n\nfunction toggleTraceAndFault() \n{\n  var cnt=actorList.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: trace list is empty\");\n    return;\n  }\n  for(let i=0;i<cnt; i++) {\n    let item=actorList[i];\n    let vis=item.getVisibility();\n    item.setVisibility(!vis);\n  };\n  renderWindow.render();\n  window.console.log(\"plot3d >> toggleTraceAndFault\");\n}\n\nfunction retrieveShoreline(container) {\n  if(coast_scene.length > 0) {\n    return;\n  }\n  const coast_file=\"cfm_data/coast.utm\"\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(coast_file, {}).then((content) => {\n      loadGMTContent(content, 'coast');\n  });\n}\n\nfunction retrieveShoreline_done() {\n  if(coast_scene.length == 0)\n    return 0;\n  return 1;\n}\n\nfunction toggleShoreline() {\n  let cnt=coast_scene.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: shoreline is empty\");\n    return;\n  }\n\n  for(let i=0; i<cnt; i++) {\n    let item=coast_scene[i]; \n    let actor=item.actor;\n    let vis = actor.getVisibility();\n    actor.setVisibility(!vis);\n  };\n  renderWindow.render();\n  window.console.log(\"plot3d >> toggleShorline\");\n}\n\n/***\n  DIRECTION MARKER\n***/\n\nfunction majorAxis(vec3, idxA, idxB) {\n  var axis = [0, 0, 0];\n  var idx = Math.abs(vec3[idxA]) > Math.abs(vec3[idxB]) ? idxA : idxB;\n  var value = vec3[idx] > 0 ? 1 : -1;\n  axis[idx] = value;\n  return axis;\n}\n\nfunction reset2North(direction) {\n\n  activeCamera.setPosition(0,0,1);\n  activeCamera.setViewUp(0,1,0);\n  activeCamera.setFocalPoint(0,0,0);\n\n  var viewUp = activeCamera.getViewUp();\n  var focalPoint = activeCamera.getFocalPoint();\n  var position = activeCamera.getPosition();\n\n  var distance = Math.sqrt(\n    vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__[\"distance2BetweenPoints\"](position, focalPoint)\n  );\n  activeCamera.setPosition(\n    focalPoint[0] + direction[0] * distance,\n    focalPoint[1] + direction[1] * distance,\n    focalPoint[2] + direction[2] * distance\n  );\n\n  if (direction[0]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 1, 2));\n  }\n  if (direction[1]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 2));\n  }\n  if (direction[2]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 1));\n  }\n  orientationWidget.updateMarkerOrientation();\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction retrieveInitialCameraView() {\n  initialPosition=activeCamera.getPosition();\n  initialFocalPoint=activeCamera.getFocalPoint();\n  initialViewUp=activeCamera.getViewUp();\n  initialCameraView === activeCamera.getViewMatrix();\n}\n\nfunction resetInitialCameraView() {\n  if( initialCameraView === undefined ) {\n    return;\n  }\n  activeCamera.setPosition(initialPosition[0], initialPosition[1], initialPosition[2]);\n  activeCamera.setFocalPoint(initialFocalPoint[0], initialFocalPoint[1], initialFocalPoint[2]);\n  activeCamera.setViewUp(initialViewUp[0], initialViewUp[1], initialViewUp[2]);\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction toggleNorth() {\n  reset2North([0,1,0]);\n  renderWindow.render();\n}\n\nfunction offTraceAndFault()\n{\n  var cnt=actorList.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: trace list is empty\");\n    return 0;\n  }\n  // need to toggle off ?\n  let item=actorList[0];\n  let vis=item.getVisibility();\n  if(vis) {\n    toggleTraceAndFault();\n    return 1;\n    } else {\n      return 0;\n  }\n}\n\nfunction offShoreline() {\n  let cnt=coast_scene.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: shoreline is empty\");\n    return 0;\n  }\n  let item=coast_scene[0];\n  let actor=item.actor;\n  let vis = actor.getVisibility();\n  if(vis) {\n    toggleShoreline();\n    return 1;\n    } else {\n      return 0;\n  }\n}\n\nfunction toggleNorthByBtn() {\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n  reset2North([0,1,0]);\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) {\n      toggleShoreline();\n  }\n  if(track_trace) {\n      toggleTraceAndFault();\n  }\n  renderWindow.render();\n}\n\nfunction buildOrientationMarker() {\n\n  var axes = vtk_js_Sources_Rendering_Core_GeoAxesActor__WEBPACK_IMPORTED_MODULE_11__[\"default\"].newInstance();\n  orientationWidget = vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__[\"default\"].newInstance({\n    actor: axes,\n    interactor: interactor,\n  });\n  orientationWidget.setEnabled(true);\n  orientationWidget.setViewportCorner(\n    vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__[\"default\"].Corners.BOTTOM_RIGHT\n  );\n  orientationWidget.setViewportSize(0.20);\n  orientationWidget.setMinPixelSize(100);\n  orientationWidget.setMaxPixelSize(300);\n\n// ----------------------------------------------------------------------------\n// Widget manager\n// ----------------------------------------------------------------------------\n\n  const widgetManager = vtk_js_Sources_Widgets_Core_WidgetManager__WEBPACK_IMPORTED_MODULE_14__[\"default\"].newInstance();\n  widgetManager.setRenderer(orientationWidget.getRenderer());\n\n// InteractiveOrientation Widget\n  const widget = vtk_js_Sources_Widgets_Widgets3D_InteractiveOrientationWidget__WEBPACK_IMPORTED_MODULE_13__[\"default\"].newInstance();\n  widget.placeWidget(axes.getBounds());\n  widget.setBounds(axes.getBounds());\n  widget.setPlaceFactor(1);\n\n  const vw = widgetManager.addWidget(widget);\n\n// Manage user interaction\nvw.onOrientationChange(({ up, direction0, action, event }) => {\n\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n\n  let direction=[0,0,1];\n\n  activeCamera.setPosition(0,0,1);\n  activeCamera.setViewUp(0,1,0);\n  activeCamera.setFocalPoint(0,0,0);\n\n  var viewUp = activeCamera.getViewUp();\n  var focalPoint = activeCamera.getFocalPoint();\n  var position = activeCamera.getPosition();\n\n  var distance = Math.sqrt(\n    vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__[\"distance2BetweenPoints\"](position, focalPoint)\n  );\n  activeCamera.setPosition(\n    focalPoint[0] + direction[0] * distance,\n    focalPoint[1] + direction[1] * distance,\n    focalPoint[2] + direction[2] * distance\n  );\n\n  if (direction[2]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 1));\n  }\n\n  renderer.resetCamera();\n  orientationWidget.updateMarkerOrientation();\n\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) { toggleShoreline(); }\n  if(track_trace) { toggleTraceAndFault(); }\n\n  widgetManager.enablePicking();\n  renderWindow.render();\n});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n/***\n  QUAKE\n***/\n// 0, none\n// 1, hauksson\n// 2, ross\nvar toQuake=0;\nfunction _flipVis(target, vis) {\n\n  let sz=target.length;\n  for(let i=0; i<sz; i++) {\n    let item=target[i];\n    let actor=item.actor;\n    actor.setVisibility(vis);\n  }\n}\n\nfunction setSeismicity(val) {\n\n  window.console.log(\"plot3d >> setSeismicity...\"+val);\n  window.console.log(\"plot3d >> Seismicity.. loading traces\");\n  window.console.log(\"plot3d >> hauksson_scene...\"+hauksson_scene.length);\n  window.console.log(\"plot3d >> ross_scene...\"+ross_scene.length);\n\n  if(toQuake == val) {\n    // do nothing\n    return;\n  }\n  if(val == 0) {\n    if(toQuake == 1) { // turn off hauksson_scene\n      _flipVis(hauksson_scene, 0);\n    }\n    if(toQuake == 2) { // turn off ross_scene \n      _flipVis(ross_scene, 0);\n    }\n  }\n  if(val == 1) { //turn on hauksson_scene\n    _flipVis(hauksson_scene, 1);\n    if(toQuake == 2) { //turn off ross_scene\n      _flipVis(ross_scene, 0);\n    }\n  }\n  if(val == 2) { //turn on ross_scene\n    _flipVis(ross_scene, 1);\n    if(toQuake == 1) { //turn off hauksson_scene\n      _flipVis(hauksson_scene, 0);\n    }\n  }\n\n  toQuake=val;\n  renderWindow.render();\n}\n\nfunction toggleSeismicity() {\n  toQuake = ( toQuake + 1 ) % 3;\n  window.console.log(\"toQuake is..\"+toQuake);\n\n  hauksson_scene.forEach((item, idx) => {\n      var actor=item.actor;\n      if(toQuake==1) {\n        actor.setVisibility(1);\n        } else { \n          actor.setVisibility(0);\n      }\n  })\n  ross_scene.forEach((item, idx) => {\n      var actor=item.actor;\n      if(toQuake==2) {\n        actor.setVisibility(1);\n        } else { \n          actor.setVisibility(0);\n      }\n  })\n  renderWindow.render();\n}\n\n/***\n  VIEW\n***/\n\n// 0, surface - edge\n// 1, wire\n// 2, surface + edge\nvar toWire=0;\nfunction toggleRepresentation() {\n  toWire = ( toWire + 1 ) % 3;\n  scene.forEach((item, idx) => {\n    var actor=item.actor;\n    var prop = actor.getProperty();\n    switch (toWire) {\n       case 0:\n         setRepresentationToSurface(prop);\n         break;\n       case 1:\n         setRepresentationToWireframe(prop);\n         break;\n       case 2:\n         setRepresentationToSurfaceWithEdge(prop);\n         break;\n    }\n  })\n  renderWindow.render();\n}\n\nfunction setRepresentationToWireframe(property) {\n   property.setRepresentationToWireframe();\n   property.setEdgeVisibility(0);\n}\n\nfunction setRepresentationToSurface(property) {\n   property.setRepresentationToSurface();\n   property.setEdgeVisibility(0);\n}\n\nfunction setRepresentationToSurfaceWithEdge(property) {\n   property.setRepresentationToSurface();\n   property.setEdgeVisibility(1);\n   property.setEdgeColor(0,0,0);\n}\n\nfunction setRepresentationToPoints(property) {\n   property.setRepresentationToPoints();\n}\n\n\n/***\n  COLOR\n***/\n\n/*\n  https://stackoverflow.com/questions/521295/\n      seeding-the-random-number-generator-in-javascript\n*/\nvar track_color_entry=0;\n//var seed = 1;\nfunction nextValue(fake_seed) {\n    var x = Math.sin(fake_seed) * 10000;\n    return (Math.round((x - Math.floor(x))*1000)/1000);\n}\n\nfunction _lookupFilenameIdx(name) {\n\n  let sz=hold_fault_file_name.length;\n  for(let i=0; i<sz; i++) {\n    if(hold_fault_file_name[i]== name)\n      return i;\n  }\n// this is not good\n  window.console.log(\"BAD...\");\n  return -1;\n}\n\nfunction setInitialColor(property,name) {\n   track_color_entry++;\n   let idx= _lookupFilenameIdx(name);\n   let Rc, Rg, Rb;\n\n// in special evaluation mode \n\n   if(evalMode) {\n     if(name.substring(0,2)=== \"2:\") { // GOLD\n       Rc=255/255;\n       Rg=215/255;\n       Rb=0/255;\n       } else {  // BLUE\n         Rc=0;\n         Rg=0;\n         Rb=1;\n     }\n   } else {\n       let fake_seed=(idx * 3)+1;\n       Rc=nextValue(fake_seed);\n       Rg=nextValue(fake_seed+1);\n       Rb=nextValue(fake_seed+2);\n   }\n   property.setColor(Rc,Rg,Rb);\n}\n\nfunction getColor(actor) {\n   var prop = actor.getProperty();\n   var color = prop.getColor();\n   var Rc=color[0];\n   var Rg=color[1];\n   var Rb=color[2];\n   var Rcx=Math.floor(Rc * 255.0 + 0.5);\n   var Rgx=Math.floor(Rg * 255.0 + 0.5);\n   var Rbx=Math.floor(Rb * 255.0 + 0.5);\n//   window.console.log(\"new color \",Rcx, \" \", Rgx, \" \", Rbx);\n   return [ Rcx, Rgx, Rbx ];\n}\n\n// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb\nfunction componentToHex(c) {\n  var hex = c.toString(16);\n  return hex.length == 1 ? \"0\" + hex : hex;\n}\n\nfunction rgbToHex(r, g, b) {\n  return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}\n\nfunction getHexColor(actor) {\n   var prop = actor.getProperty();\n   var color = prop.getColor();\n   var Rc=color[0];\n   var Rg=color[1];\n   var Rb=color[2];\n   var Rcx=Math.floor(Rc * 255.0 + 0.5);\n   var Rgx=Math.floor(Rg * 255.0 + 0.5);\n   var Rbx=Math.floor(Rb * 255.0 + 0.5);\n   var rt=rgbToHex(Rcx, Rgx, Rbx);\n   return rt;\n}\n\nfunction hex2rgb(hex) {\n  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];\n}\n\nfunction getRGBColorFromHex(hex) {\n  var rgb=hex2rgb(hex);\n  return rgb;\n}\n\nfunction getOpacity(actor) {\n   var prop = actor.getProperty();\n   var opacity = prop.getOpacity();\n   return opacity;\n}\n\nfunction changeOpacity(idx,opacity) {\n  var actor = scene[idx].actor;\n  var prop = actor.getProperty();\n  prop.setOpacity(opacity);\n  var visibility=actor.getVisibility();\n  var el=document.getElementById('legend_'+idx);\n  if(visibility) {\n    if(opacity == 0) {\n      actor.setVisibility(!visibility);\n      el.classList.remove('visible');\n     \n    }  \n    } else { // not visible\n      if(opacity != 0) {\n        actor.setVisibility(!visibility);\n        el.classList.add('visible');\n      }\n  }\n  renderWindow.render();\n}\n\n/***\n  BOUNDS\n***/\n\n// bounding box =[xMin, xMax, yMin, yMax, zMin, zMax]\nfunction addFinalBoundingBox() {\n  var outline = vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__[\"default\"].newInstance();\n  final_bb=boundingBox.getBounds();\n  outline.setInputData(boundingBox);\n\n  var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n  mapper.setInputConnection(outline.getOutputPort());\n\n  var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n  actor.setMapper(mapper);\n  actor.getProperty().set({ lineWidth: 10 , color: [1,0.2,0]});\n  renderer.addActor(actor);\n  var name='name';\n  final_bounds_scene.push({name, outline,mapper, actor});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction addBoundingBox(data,name) {\n\n  var outline = vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__[\"default\"].newInstance();\n  outline.setInputData(data);\n\n  var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n  mapper.setInputConnection(outline.getOutputPort());\n\n  var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n  actor.setMapper(mapper);\n  actor.setVisibility(0);\n  actor.getProperty().set({ lineWidth: 10, color: [0.80,0.83,0.85] });\n  renderer.addActor(actor);\n  bounds_scene.push({name, outline,mapper, actor});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\n// 0, \n// 1, \n// 2, \nvar toBounds=0;\nfunction toggleBounds() {\n  toBounds = ( toBounds + 1 ) % 3;\n  switch (toBounds) {\n     case 0:\n       setBounds();\n       break;\n     case 1:\n       setBoundsToAll();\n       break;\n     case 2:\n       setBoundsToNone();\n       break;\n  }\n  renderWindow.render();\n}\n\nfunction setBounds() {\n  var actor=final_bounds_scene[0].actor;\n  actor.setVisibility(1);\n}\n\nfunction setBoundsToAll() {\n  let actor=final_bounds_scene[0].actor;\n  actor.setVisibility(1);\n  bounds_scene.forEach((item, idx) => {\n    actor=item.actor;\n    actor.setVisibility(1);\n  });\n}\n\nfunction setBoundsToNone() {\n  let actor=final_bounds_scene[0].actor;\n  actor.setVisibility(0);\n  bounds_scene.forEach((item, idx) => {\n    actor=item.actor;\n    actor.setVisibility(0);\n  });\n}\n\n\n\n\n\n/***\n  LEGEND\n***/\n\n// iterating mulitple times as data increases\nfunction buildControlLegend() {\n  var htmlBuffer = [\n    '<style> .visible { font-weight: bold; } .click { cursor: pointer; min-width: 150px;} .dropdown { position: relative; display: inline-block; font-size:6pt } .dropdown-content { display: none; position: relative; background-color:transparent; width: 160px; padding: 0px 4px 0px 10px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } table td, th { border: 0px solid #ced4da; padding: 0; } table tr th { background-color: #F2F2F2; } </style>',\n    ];\n  htmlBuffer.push(\n    `<button id=\"Boundsbtn\" type=\"button\" title=\"show bounding boxes\" onClick=\"toggleBounds()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Northbtn\" type=\"button\" title=\"reset view to North\" onClick=\"toggleNorthByBtn()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Legendbtn\" type=\"button\" title=\"show Legend\" onClick=\"toggleLegend()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Quakebtn\" type=\"button\" title=\"switch Quake\" onClick=\"toggleSeismicity()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"SetQuakebtn\" type=\"button\" title=\"set Quake\" onClick=\"setSeismicity(this.value)\" value=0 style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Reprbtn\" type=\"button\" title=\"switch Repr\" onClick=\"toggleRepresentation()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Tracebtn\" type=\"button\" title=\"toggle trace\" onClick=\"toggleTraceAndFault()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Shorebtn\" type=\"button\" title=\"toggle coastline\" onClick=\"toggleShoreline()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Downloadbtn\" type=\"button\" title=\"download screenshot\" onClick=\"downloadImage()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Camerabtn\" type=\"button\" title=\"get Camera view\" onClick=\"sendCamera2service()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<div style=\"max-height:70vh; max-width:35vw; overflow:auto; margin:-1px -6px -1px -2px;\"><table><thead><tr class=size-row\" aria-hidden=\"true\"></tr></thead>`);\n  htmlBuffer.push(`<tbody>`);\n  scene.forEach((item, idx) => {\n    var ii=item;\n    var actor=item.actor;\n    var color=getColor(actor);\n    var color_hex=getHexColor(actor);\n    htmlBuffer.push(\n    `<tr><td>\n<input type=\"color\" id=\"color_${idx}\" name=\"${idx}\" style=\"width:20px;\" value=\"${color_hex}\" onchange=changeColor(${idx},this.value)>\n</td><td>\n<div class=\"dropdown\" >\n   <div class=\"visible\" id=\"legend_${idx}\" data-index=\"${idx}\">${item.name}</div>\n   <div class=\"row dropdown-content\">\n      Opacity:&nbsp<input type=\"range\" id=\"opacity_${idx}\" type=\"button\" style=\"width:60px\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" onchange=changeOpacity(${idx},this.value)>\n   </div>\n</div>\n    </td></tr>`);\n  });\n  htmlBuffer.push(`</tbody></table></div>`);\n\n  // remove old one\n  fullScreenRenderer.removeController();\n  fullScreenRenderer.addController(htmlBuffer.join('\\n'));\n}\n\n//  <input type=\"color\" id=\"favcolor\" name=\"favcolor\" value=\"#ff0000\"><br><br>\nfunction changeColor(idx, hex_color) {\n  var rgb=getRGBColorFromHex(hex_color);\n  var r=rgb[0];\n  var g=rgb[1];\n  var b=rgb[2];\n\n  var nr= Math.floor(((r - 0.5)/255)*100)/100;\n  var ng= Math.floor(((g - 0.5)/255)*100)/100;\n  var nb= Math.floor(((b - 0.5)/255)*100)/100;\n\n  var actor = scene[idx].actor;\n  var property = actor.getProperty();\n  property.setColor(nr,ng,nb);\n  renderWindow.render();\n}\n\nfunction toggleLegend() {\n  fullScreenRenderer.toggleControllerVisibility();\n}\n\n/***\n  LOADING\n***/\n\nfunction preventDefaults(e) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n\nfunction emptyContainer(container) {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n}\n\nfunction loadZipContent(zipContent) {\n  var fileContents = { ts: {} };\n  var zip = new jszip__WEBPACK_IMPORTED_MODULE_0___default.a();\n  zip.loadAsync(zipContent).then(() => {\n    let workLoad = 0;\n\n    function done() {\n      if (workLoad !== 0) {\n        return;\n      }\n\n      var promises = [];\n      Promise.all(promises).then(() => {\n        // Create pipeline from ts \n        Object.keys(fileContents.ts).forEach((tsFilePath) => {\n          window.console.log(\"retrieve, tsFilePath>>\",tsFilePath);\n\n          var tsReader = fileContents.ts[tsFilePath];\n\n          var size = tsReader.getNumberOfOutputPorts();\n          for (let i = 0; i < size; i++) {\n            var source = tsReader.getOutputData(i);\n            var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n            var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n            let name = source.get('name').name;\n            if ( name === undefined) {\n               name = trim4Name(tsFilePath);\n            }\n            scene.push({ name, source, mapper, actor });\nwindow.console.log(\"THIS is where scence is made..\", name);\n            boundingBox.addBounds(source.getBounds());\n            addBoundingBox(source);\n// color\n            var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n            setInitialColor(prop, name);\n            prop.setOpacity(0.8);\n            actor.setProperty(prop);\n\n            actor.setMapper(mapper);\n            mapper.setInputData(source);\n            renderer.addActor(actor);\n          }\n        });\n        buildControlLegend();\n        renderer.resetCamera();\n        renderWindow.render();\n      });\n    }\n\n    zip.forEach((relativePath, zipEntry) => {\n      if (relativePath.match(/\\.ts$/i)) {\n        workLoad++;\n        zipEntry.async('string').then((txt) => {\n          var reader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n          reader.parseAsText(txt);\n          fileContents.ts[relativePath] = reader;\n          workLoad--;\n          done();\n        });\n      }\n    });\n  });\n}\n\n// https://ourcodeworld.com/articles/read/164/how-to-convert-an-uint8array-to-string-in-javascript\nfunction Decodeuint8arr(uint8array){\n    return new TextDecoder(\"utf-8\").decode(uint8array);\n}\n\n\nfunction loadTSContent(tsContent, name) {\n  var tsReader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n  let tsContentString=Decodeuint8arr(tsContent);\n  tsReader.parseAsText(tsContentString);\n  var nbOutputs = tsReader.getNumberOfOutputPorts();\n\n  fileIdx++;\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = tsReader.getOutputData(idx);\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    scene.push({ name, source, mapper, actor});\n//window.console.log(\"PUSHING.. scene >>>\"+name);\n    boundingBox.addBounds(source.getBounds());\n    addBoundingBox(source,name);\n\n// color & representation\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    setRepresentationToSurface(prop);\n    setInitialColor(prop, name);\n    prop.setOpacity(0.8);\n    actor.setProperty(prop);\n\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n\n  }\n  buildControlLegend();\n//window.console.log(\"loadTSContent..\",name);\n  \n  renderer.resetCamera();\n  renderWindow.render();\n  if(fileIdx == fileCount) {\n    //window.console.log(\"HERE HERE\");\n    //window.console.log(\"TO-server, done loading\");\n    window.top.postMessage({'call':'from3DViewer', value:'done with loading traces'}, '*');\n\n    addFinalBoundingBox();\n    makeSCECSvgLayer();\n    if(toggled === undefined && \n          retrieveSurfaceTraces_done() && retrieveShoreline_done()) {\n      toggled=true;\n//      window.console.log(\"---CALLed with FOUND \",viewerType);\n      if (viewerType == \"CFM\") {\n//        window.console.log(\"---CALLed with CFM\");\n        toggleTraceAndFault(); \n      }\n      if (viewerType == \"GFM\") {\n//        window.console.log(\"---CALLed with GFM\");\n        offTraceAndFault(); \n      }\n      toggleShoreline();\n    }\n  }\n}\n\n\n/***\n   post message to SERVER when all the background traces are loaded\n   and also camera angled ??\n***/\nfunction postRetrieveProcessing() {\n  if(!retrieveSurfaceTraces_done())\n     return;\n  if(!retrieveShoreline_done())\n     return;\n  if(!retrieveQuakeTraces_done())\n     return;\n  if(cameraOkay) {\n    window.top.postMessage({'call':'from3DViewer',value:'done with base trace loading'}, '*');\n  } \n}\n\nfunction load(container, options) {\n  window.console.log(\"plot3d >> TOP load\");\n  autoInit = false;\n  emptyContainer(container);\n\n  fullScreenRenderer = vtk_js_Sources_Rendering_Misc_FullScreenRenderWindow__WEBPACK_IMPORTED_MODULE_3__[\"default\"].newInstance({\n    background: [242, 242, 242],\n    rootContainer: container,\n    containerStyle: { height: '100%', width: '100%', position: 'absolute' },\n  });\n\n  renderer = fullScreenRenderer.getRenderer();\n  activeCamera = renderer.getActiveCamera();\n  renderWindow=renderer.getRenderWindow();\n  interactor = renderWindow.getInteractor();\n  openGLRenderWindow = interactor.getView();\n  boundingBox = vtk_js_Sources_Common_DataModel_BoundingBox__WEBPACK_IMPORTED_MODULE_16__[\"default\"].newInstance();\n  faultList=[];\n  actorList=[];\n\n  retrieveSurfaceTraces(container);\n  retrieveShoreline(container);\n  retrieveQuakeTraces(container);\n\n  function retrieveFileContent(fname, name) {\n    window.console.log(\"retrieveFileContent, fname>>\",fname);\n    hold_fault_file_location.push(fname);\n    hold_fault_file_name.push(name);\n\n    var ext = fname.substr((fname.lastIndexOf('.') + 1));\n    var progressContainer = document.createElement('div');\n    progressContainer.setAttribute('class', _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.progress);\n    container.appendChild(progressContainer);\n\n    var progressCallback = (progressEvent) => {\n      if (progressEvent.lengthComputable) {\n        var percent = Math.floor(\n          (100 * progressEvent.loaded) / progressEvent.total\n        );\n        progressContainer.innerHTML = `Loading ${percent}%`;\n      } else {\n        progressContainer.innerHTML = vtk_js_Sources_macro__WEBPACK_IMPORTED_MODULE_1__[\"default\"].formatBytesToProperUnit(\n          progressEvent.loaded\n        );\n      }\n    };\n \n    vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(fname, {\n      progressCallback,\n    }).then((content) => {\n      container.removeChild(progressContainer);\n      if(ext === 'ts') {  // plain ts file\n         loadTSContent(content, name);\n         } else { \n           loadZipContent(content);\n      }\n    });\n  }\n\n// option: eval\n  if (options.eval) {\n    evalMode = 1;\n  }\n\n// option : file\n  if (options.file) {\n    if (options.ext === 'ts') {\n      var reader = new FileReader();\n      reader.onload = function onLoad(e) {\n        var tsReader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n        tsReader.parseAsText(reader.result);\n        var nbOutputs = tsReader.getNumberOfOutputPorts();\n        for (let idx = 0; idx < nbOutputs; idx++) {\n          var source = tsReader.getOutputData(idx);\n          var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n          var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n          var name = source.get('name').name;\n          scene.push({ name, source, mapper, actor });\n          boundingBox.addBounds(source.getBounds());\n          addBoundingBox(source,name);\n// color\n          var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n          setInitialColor(prop, name);\n          prop.setOpacity(0.8);\n          actor.setProperty(prop);\n\n          actor.setMapper(mapper);\n          mapper.setInputData(source);\n          renderer.addActor(actor);\n        }\n        buildControlLegend();\n        renderer.resetCamera();\n        renderWindow.render();\n      };\n      reader.readAsTex(options.file);\n    } else {\n      loadZipContent(options.file);\n    }\n\n  }  else { \n    if (options.fullFileURL) {\n      fileCount=fileCount+options.fullFileURL.length;\n// expect fullName=[n1] fullFileURL=[f1]\n      let op=options.fullFileURL;\n      let cnt=op.length;\n      for(let i=0; i<cnt; i++) {\n          let f=op[i];\n          if(options.fullName) {\n              retrieveFileContent(f,options.fullName[i]);\nwindow.console.log(\" >>>> trying to call GOLD..\");\n//XXX     setResetColor2Gold(options.fullName[i]);\n              } else {\n                retrieveFileContent(f,trim4Name(f));\n          }\n       }\n    } // else if only one\n    if (options.fileURL) { // option: fileURL\n      fileCount=fileCount+options.fileURL.length;\n  // expect name=[n1,n2],fileURL=[f1,f2]\n  // or fileURL=f1\n      let op=options.fileURL;\n      let path=options.filePATH;\n      // single set\n      if(typeof op === 'string') {\n            nm=trim4Name(op);\n          if(path) {\n            retrieveFileContent(path+op, trim4Name(op));\n            } else {\n              retrieveFileContent(op, trim4Name(op));\n          }\n          } else { // a whole set\n            let cnt=op.length;\n            for(var i=0; i<cnt; i++) {\n              let f=op[i];\n              if(path) {\n                f=path+f;\n              }\n            if(options.name) {\n              retrieveFileContent(f,options.name[i]);\n                } else {\n                  retrieveFileContent(f,trim4Name(op[i]));\n              }\n            }\n       }\n    }\n  }\n}\n\nfunction autoInitLocalFileLoader(container) {\n  var exampleContainer = document.querySelector('.content');\n  var rootBody = document.querySelector('body');\n  var myContainer = container || exampleContainer || rootBody;\n\n  if (myContainer !== container) {\n    myContainer.classList.add(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.fullScreen);\n    rootBody.style.margin = '0';\n    rootBody.style.padding = '0';\n  } else {\n    rootBody.style.margin = '0';\n    rootBody.style.padding = '0';\n  }\n\n  var fileContainer = document.createElement('div');\n  fileContainer.innerHTML = `<div class=\"${\n    _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.bigFileDrop\n  }\"/><input type=\"file\" accept=\".zip,.ts\" style=\"display: none;\"/>`;\n  myContainer.appendChild(fileContainer);\n\n  var fileInput = fileContainer.querySelector('input');\n\n  function handleFile(e) {\n    preventDefaults(e);\n    var dataTransfer = e.dataTransfer;\n    var files = e.target.files || dataTransfer.files;\n    if (files.length === 1) {\n      myContainer.removeChild(fileContainer);\n      var ext = files[0].name.split('.').slice(-1)[0];\n      load(myContainer, { file: files[0], ext });\n    }\n  }\n\n  fileInput.addEventListener('change', handleFile);\n  fileContainer.addEventListener('drop', handleFile);\n  fileContainer.addEventListener('click', (e) => fileInput.click());\n  fileContainer.addEventListener('dragover', preventDefaults);\n}\n\n\nfunction foo(myParams) {\n\n  var userParams = vtk_js_Sources_Common_Core_URLExtract__WEBPACK_IMPORTED_MODULE_4__[\"default\"].extractURLParameters(true, myParams);\n  if (userParams.file || userParams.fileURL || userParams.fullFileURL) {\n    var exampleContainer = document.querySelector('.content');\n    var rootBody = document.querySelector('body');\n    var myContainer = exampleContainer || rootBody;\n\n    if (myContainer) {\n      myContainer.classList.add(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.fullScreen);\n      rootBody.style.margin = '0';\n      rootBody.style.padding = '0';\n    }\n    if (userParams.viewerType) {\n      viewerType=userParams.viewerType;\n    }\n    if (userParams.viewUID) {\n      hold_uid=userParams.viewUID;\n    }\n\n    //window.console.log(\"TO-Server, start loading\");\n    window.top.postMessage({'call':'from3DViewer',value:'start loading'}, '*');\n    load(myContainer, userParams);\n    buildOrientationMarker();\n    toggleNorth();\n  }\n}\n\n/***\n   MAIN \n***/\n\n//   Add class to body if iOS device \nif (iOS) {\n  document.querySelector('body').classList.add('is-ios-device');\n}\n\nvar myParams=window.location.search;\n\n// to accept the url being sent from the service\n\n// only add it when the html is up and ready\nwindow.addEventListener(\"DOMContentLoaded\", function () {\n\n  //window.console.log(\"TO-Server: ready\");\n  window.top.postMessage({'call':'from3DViewer',value:'ready'}, '*');\n\n  window.addEventListener('message', function(event) {\n      window.console.log(\"view3DIfram, received a message..\");\n      var origin = event.origin;\n      if (origin != \"http://localhost:8082\" && origin != \"http://moho.scec.org\" && origin != \"https://www.scec.org\" ) {\n          window.console.log(\"plot3d >> view3DIfram, bad message origin >>\", origin);\n          return;\n      }\n\n      if (typeof event.data == 'object' && event.data.call=='fromSCEC') {\n          myParams=\"?\"+decodeURI(event.data.value);\n          } else if (typeof event.data == 'object' && event.data.call=='fromSCEC camera') {\n            let myCamera= decodeURI(event.data.value);\n            window.console.log(\"plot3d >> plot3d with camera \"+myCamera);\n            goto_newCamera(myCamera);\n            window.top.postMessage({'call':'from3DViewer camera done', value:myCamera}, '*');\n            cameraOkay=1;\n            postRetrieveProcessing();\n          } else if (typeof event.data == 'object' && event.data.call=='fromSCEC done') {\n            let msg= event.data.value;\n            window.console.log(\"plot3d >> got msg SCEC done (\"+msg+\")\");\n            //need to refresh the screen somehow\n            renderWindow.render();\n          } else {\n            window.console.log(\"plot3d >> view3DIfram, received invalid event data >>\"+event.data+\" from \"+origin);\n      }\n  },false);\n\n},false);\n\n\n/***\n   WAITING AND PROCESS PARAMS sent from SERVER\n***/\nwindow.console.log(\"plot3d >> initial myParams is \",myParams);\nif( myParams == undefined || myParams.includes(\"?2Long\") ) {\n\n//window.console.log(\"plot3d >> TO-Server: send me params\");\n  window.top.postMessage({'call':'from3DViewer',value:'send params'}, '*');\n\n  var waitInterval = setInterval(function () {\n    if ( !myParams.includes(\"?2Long\") ) {\n//window.console.log(\"plot3d << GOT params from service, size is >> \",myParams.length);\n\n      foo(myParams);\n\n      clearInterval(waitInterval);\n      waitInterval=0;\n      } else {\n         window.console.log(\"plot3d >> Looping in interval..\",waitInterval);\n    }\n  }, 1000);\n} else {\n\n  foo(myParams);\n\n}\n\n// Auto setup if no method get called within 100ms\nsetTimeout(() => {\n  if (autoInit) {\n    autoInitLocalFileLoader();\n    buildOrientationMarker();\n    toggleNorth();\n  }\n}, 100);\n\n\n// -----------------------------------------------------------\n// Make some variables global so that you can inspect and\n// modify objects in your browser's developer console:\n// -----------------------------------------------------------\n\nglobal.fileCount = fileCount;\nglobal.fileIdx = fileIdx;\nglobal.toggleBounds = toggleBounds;\nglobal.toggleNorthByBtn = toggleNorthByBtn;\nglobal.toggleLegend = toggleLegend;\nglobal.changeColor = changeColor;\nglobal.changeOpacity = changeOpacity;\nglobal.toggleSeismicity = toggleSeismicity;\nglobal.setSeismicity = setSeismicity;\nglobal.sendCamera2service = sendCamera2service;\nglobal.toggleRepresentation = toggleRepresentation;\nglobal.toggleTraceAndFault = toggleTraceAndFault;\nglobal.toggleShoreline = toggleShoreline;\nglobal.downloadImage = downloadImage;\nglobal.scene = scene;\nglobal.fullScreenRenderer = fullScreenRenderer;\n\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./src/index.js-CFM?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"load\", function() { return load; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"autoInitLocalFileLoader\", function() { return autoInitLocalFileLoader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"foo\", function() { return foo; });\n/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jszip */ \"./node_modules/jszip/lib/index.js\");\n/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jszip__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vtk_js_Sources_macro__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vtk.js/Sources/macro */ \"./node_modules/vtk.js/Sources/macro.js\");\n/* harmony import */ var vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper */ \"./node_modules/vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Misc_FullScreenRenderWindow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow */ \"./node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_URLExtract__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/URLExtract */ \"./node_modules/vtk.js/Sources/Common/Core/URLExtract/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/TSReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/TSReader/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Mapper */ \"./node_modules/vtk.js/Sources/Rendering/Core/Mapper/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Actor */ \"./node_modules/vtk.js/Sources/Rendering/Core/Actor/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Property */ \"./node_modules/vtk.js/Sources/Rendering/Core/Property/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_Camera__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/Camera */ \"./node_modules/vtk.js/Sources/Rendering/Core/Camera/index.js\");\n/* harmony import */ var vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! vtk.js/Sources/Interaction/Widgets/OrientationMarkerWidget */ \"./node_modules/vtk.js/Sources/Interaction/Widgets/OrientationMarkerWidget/index.js\");\n/* harmony import */ var vtk_js_Sources_Rendering_Core_GeoAxesActor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! vtk.js/Sources/Rendering/Core/GeoAxesActor */ \"./node_modules/vtk.js/Sources/Rendering/Core/GeoAxesActor/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/Math */ \"./node_modules/vtk.js/Sources/Common/Core/Math/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_Widgets3D_InteractiveOrientationWidget__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! vtk.js/Sources/Widgets/Widgets3D/InteractiveOrientationWidget */ \"./node_modules/vtk.js/Sources/Widgets/Widgets3D/InteractiveOrientationWidget/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_Core_WidgetManager__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! vtk.js/Sources/Widgets/Core/WidgetManager */ \"./node_modules/vtk.js/Sources/Widgets/Core/WidgetManager/index.js\");\n/* harmony import */ var vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! vtk.js/Sources/Filters/General/OutlineFilter */ \"./node_modules/vtk.js/Sources/Filters/General/OutlineFilter/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_BoundingBox__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/BoundingBox */ \"./node_modules/vtk.js/Sources/Common/DataModel/BoundingBox/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_Core_Points__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! vtk.js/Sources/Common/Core/Points */ \"./node_modules/vtk.js/Sources/Common/Core/Points/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_PointSet__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/PointSet */ \"./node_modules/vtk.js/Sources/Common/DataModel/PointSet/index.js\");\n/* harmony import */ var vtk_js_Sources_Common_DataModel_PolyData__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! vtk.js/Sources/Common/DataModel/PolyData */ \"./node_modules/vtk.js/Sources/Common/DataModel/PolyData/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_GMTReader__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/GMTReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/GMTReader/index.js\");\n/* harmony import */ var vtk_js_Sources_IO_Geometry_EQReader__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! vtk.js/Sources/IO/Geometry/EQReader */ \"./node_modules/vtk.js/Sources/IO/Geometry/EQReader/index.js\");\n/* harmony import */ var vtk_js_Sources_Widgets_SVG_SVGRepresentation__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! vtk.js/Sources/Widgets/SVG/SVGRepresentation */ \"./node_modules/vtk.js/Sources/Widgets/SVG/SVGRepresentation/index.js\");\n/* harmony import */ var _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TSViewer.module.css */ \"./src/TSViewer.module.css\");\n/* harmony import */ var _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default = /*#__PURE__*/__webpack_require__.n(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23__);\n\n/*************************/\n/* SCEC vtk.js ts viewer */\n/*************************/\n\n/*NOTE: zip fileURL input with background ts is not implemented */\n\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable import/no-extraneous-dependencies */\n\n/*remove links to kiteware site:  import 'vtk.js/Sources/favicon'; */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// for making SVG layer\n\n\n\n\n/*****\nvar myContainer = container || exampleContainer || rootBody;options>> viewUID=uid&viewerType=CFM&fileURL=[file1,file2]&name=[name1,name2]&filePATH=[path]\n*****/\n\nconst iOS = /iPad|iPhone|iPod/.test(window.navigator.platform);\nvar autoInit = false;// disable the file drop option\nvar fileCount = 0;\nvar fileIdx = 0;\nvar viewerType = \"CFM\"; //  or \"GFM\"\nvar evalMode = 0; // in evalMode, fault color is either gold or blue\n\nvar cameraOkay = 0;\n\n// hold fault name embeded as svg/g layer\nconst hold_name_layer=[];\nconst hold_fault_file_location=[];\nconst hold_fault_file_name=[];\nvar hold_uid=0;\nconst hold_clippingRange=[];\n\n/** housekeeping on actor **/\n// 3D actor for each fault line, one per tsurf file,\n// scene.push({ name, source/polydata, mapper, actor });\nconst scene = [];\n\n// California shoreline actor from GMAT file\n// coast_scene.push({ name, source/polydata, mapper, actor });\nconst coast_scene = [];\n\n// fault trace/blind, from GMAT file, could have multiple traces with\n// duplicate fault names\n// trace_scene.push({ name, source/polydata, mapper, actor });\nconst trace_scene = [];\nconst blind_scene = [];\n\n// seismicity\nconst hauksson_scene = [];\nconst ross_scene = [];\n\nvar toggled;\n\n// bounding box, one  per fault line\nconst bounds_scene = [];\n// overall bounding box, final_bounds_scene.push({'master', outline, mapper, actor });\nconst final_bounds_scene = [];\nvar final_bb=[];\n\n// need to expose at the top level\nvar fullScreenRenderer;\nvar renderer;\nvar renderWindow;\nvar orientationWidget;\nvar activeCamera;\nvar interactor;\nvar openGLRenderWindow;\nvar boundingBox;\n\nvar faultList=[];\nvar actorList=[];\nvar activeActorList=[];\n\n// to track the original Camera View\nvar initialCameraView;\nvar initialPosition;\nvar initialFocalPoint;\nvar initialViewUp;\n\n/***\n  MISC\n***/\n/**** SVG layer ****/\nconst { createSvgElement, createSvgDomElement } = vtk_js_Sources_Widgets_SVG_SVGRepresentation__WEBPACK_IMPORTED_MODULE_22__[\"default\"];\n// from vtk.js/Sources/Widgets/Core/WidgetManager \n// <div><svg><g><text/image></g></svg></div>\nfunction createSvgRoot(id) {\n  var wrapper = document.createElement('div');\n  wrapper.setAttribute( 'style', 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;');\n\n  var svgRoot = createSvgDomElement('svg');\n  // svgRoot.setAttribute('xmlns', \"http://www.w3.org/2000/svg\");\n  // fixed space at upper right corner \n  svgRoot.setAttribute('style', 'position:absolute; top:10px; right:1%; width: 20%; height: 10%; border:2px solid blue;background:transparent');\n    \n  svgRoot.setAttribute('version', '1.1');\n  svgRoot.setAttribute('baseProfile', 'full');\n  svgRoot.setAttribute('class', 'svgf');\n  svgRoot.setAttribute('data-id', id);\n\n  wrapper.appendChild(svgRoot);\n\n  return { svgWrapper: wrapper, svgRoot };\n}\n\n// making a text string\nfunction addSvgLabel(id,textstr,xval,yval) {\n\n  var svgContainers = createSvgRoot(id);\n  var svgWrapper=svgContainers.svgWrapper;\n  var svgRoot = svgContainers.svgRoot;\n\n  // reset to put this in the middle except for SCEC label\n  // make it random places for now..\n  if(id != 0) {\n    var topv= (id*10)+20;\n    svgRoot.setAttribute('style', 'position:absolute; top:'+topv+'%; right:50%; width: 20%; height: 10%; border:2px solid green;');\n  }\n\n  var gtop = createSvgDomElement('g');\n  var text = createSvgDomElement('text');\n  text.setAttribute('x', 0);\n  text.setAttribute('y', 0);\n  text.setAttribute('dx', 20);\n  text.setAttribute('dy', 40);\n  text.setAttribute('id', textstr+\"_\"+id);\n  text.setAttribute('fill', 'black');\n  text.textContent=textstr;\n  gtop.appendChild(text);\n  svgRoot.appendChild(gtop);\n\n  return svgWrapper;\n}\n\nfunction addSCECImgLabel() {\n  var svgContainers = createSvgRoot(0);\n  var svgWrapper=svgContainers.svgWrapper;\n  var svgRoot = svgContainers.svgRoot;\n\n  // reset the svg\n// upper right\n//  svgRoot.setAttribute('style', 'position:absolute; top:10px; right:15px; width: 60px; height:40px; border:6px solid #F9F9F9;background:#990000;opacity:80%;');\n\n// lower left\n  svgRoot.setAttribute('style', 'position:absolute; bottom:15px; left:15px; width: 60px; height:40px; border:6px solid #F9F9F9;background:#990000;opacity:80%;');\n\n  var gtop = createSvgDomElement('g');\n  var image = createSvgDomElement('image');\n  image.setAttribute('class', 'scec-logo');\n  image.setAttribute('width', '60');\n  image.setAttribute('height', '40');\n  image.setAttribute('href', 'img/sceclogo_transparent.png');\n  //image.setAttribute('href', 'sceclogo.png');\n  gtop.appendChild(image);\n  svgRoot.appendChild(gtop);\n\n  return svgWrapper;\n}\n\nfunction makeSCECSvgLayer() {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  var canvas = openGLRenderWindow.getCanvas();\n\n//  var {top, left, width, height }= canvas.getBoundingClientRect();\n//  var svg=document.querySelector('svg');\n//  var ccanvas=document.querySelector('canvas');\n\n  var slabel=addSCECImgLabel();\n  container.insertBefore(slabel,canvas.nextSibling);\n\n/*\n  var slabel2=addSvgLabel(0,\"www.SCEC.org\",0,0); \n  container.insertBefore(slabel2,canvas.nextSibling);\n*/\n\n// TESTING picking\n/*\n  var id=2;\n  var elt=insertFaultNameSvgLayer(\"fault-abc\",id,20,40);\n  hold_name_layer.push({fault_id:id,layer:elt});\n\n  id = 3;\n  elt=insertFaultNameSvgLayer(\"fault-xyz\",id,20,40);\n  hold_name_layer.push({fault_id:id,layer:elt});\n*/\n}\n\nfunction _lookupSvgLayer(id) {\n//  var div_elt=document.querySelector('.svgf[data-id='+id+']');\n  let sz=hold_name_layer.length;\n  for( var i=0;i<sz;i++ ) {\n    let elt=hold_name_layer[i];\n    if (elt.fault_id == id) {\n      return elt.layer;\n    }\n  }\n  return null;\n}\n\nfunction insertFaultNameSvgLayer(fname,id,x,y) {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  var canvas = openGLRenderWindow.getCanvas();\n\n  var div_elt=addSvgLabel(id,fname,x,y); \n  container.insertBefore(div_elt,canvas.nextSibling);\n  return div_elt;\n}\n\nfunction deleteFaultNameSvgLayer(id) {\n  var container = openGLRenderWindow.getReferenceByName('el');\n  \n  var div_elt=_lookupSvgLayer(id);\n  container.removeChild(div_elt);\n}\n\n\n\nfunction downloadImage() {\n  let d=new Date();\n  let timestamp = Math.floor(d.getTime()/1000); // in seconds\n  let delta=(timestamp - hold_uid);\n  let fstub = 'CFM_3Dview_'+hold_uid+\"_\"+delta;\n\n  renderWindow.captureImages()[0].then(\n    (image) => { \n        let tmp=image;\n        let a = document.createElement('a');\n        a.href = image;\n        let imagename = fstub + '.png';\n        a.download = imagename;\n        a.style.display = 'none';\n        document.body.appendChild(a);\n        a.click();\n        a.remove()\n    }\n  );\n}\n\nfunction print_camera(note) {\n  let pos=activeCamera.getPosition();\n  let angle=activeCamera.getViewAngle();\n  let distance=activeCamera.getDistance();\n  let vmatrix=activeCamera.getViewMatrix();\n  let viewup=activeCamera.getViewUp();\n  let focal=activeCamera.getFocalPoint();\n\n  let clippingRange=activeCamera.getClippingRange();\n\n  window.console.log(\"plot3d >>  CAMERA NOTE:\"+note);\n  window.console.log(\"plot3d >>     position \"+pos.toString());\n  window.console.log(\"plot3d >>     angle    \"+angle);\n  window.console.log(\"plot3d >>     viewup   \"+viewup.toString());\n  window.console.log(\"plot3d >>     focal    \"+focal.toString());\n  window.console.log(\"plot3d >>     distance    \"+distance);\n  window.console.log(\"plot3d >>     clippingRange    \"+clippingRange.toString());\n  \n}\n\nfunction extract_camera() {\n  let pos=activeCamera.getPosition();\n  let angle=activeCamera.getViewAngle();\n  let distance=activeCamera.getDistance();\n  let vmatrix=activeCamera.getViewMatrix();\n  let viewup=activeCamera.getViewUp();\n  let focal=activeCamera.getFocalPoint();\n\n// let clippingRange=activeCamera.getClippingRange();\n  hold_clippingRange.push(activeCamera.getClippingRange());\n\n  let camera_info = { \"pos\":pos, \"angle\":angle, \"viewup\":viewup, \"distance\":distance, \"focal\":focal};\n  let camera_info_str= JSON.stringify(camera_info);\n  return camera_info_str;\n}\n\n// get camera information and send back to the parent\nfunction sendCamera2service() {\n  let camera_info=extract_camera()\nwindow.console.log(\"plot3d >> TO-SERVER: camera info\");\n  window.top.postMessage({'call':'from3DViewer camera', value:camera_info}, '*');\n}\n\n//{\"pos\":[0,1,0],\"angle\":30,\"viewup\":[0,0,-1],\"focal\":[0,0,0]\nfunction goto_newCamera(camera_str) {\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n \n  let camera_info = JSON.parse(camera_str);\n  let pos=camera_info['pos'];\n  let angle=camera_info['angle'];\n  let distance=camera_info['distance'];\n  let viewup=camera_info['viewup'];\n  let focal=camera_info['focal'];\n  let tmp=camera_info['viewMatrix'];\n\n//  print_camera(\"before the resetCamera call\");\n  renderer.resetCamera();\n\n  if(pos) { activeCamera.setPosition(pos[0], pos[1], pos[2]); }\n  if(focal) { activeCamera.setFocalPoint(focal[0], focal[1], focal[2]); }\n  if(angle) { activeCamera.setViewAngle(angle); }\n  if(viewup) { activeCamera.setViewUp(viewup[0], viewup[1], viewup[2]); }\n  if(tmp) {\n    let matrix= [tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6],tmp[7],tmp[8],tmp[9],tmp[10],tmp[11],tmp[12],tmp[13],tmp[14],tmp[15]];\n    activeCamera.setViewMatrix(matrix);\n  }\n  if(distance) { activeCamera.setDistance(distance); }\n\n  orientationWidget.updateMarkerOrientation();\n  renderer.resetCamera();\n  renderWindow.render();\n// print_camera(\"after the resetCamera call\");\n\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) { toggleShoreline(); }\n  if(track_trace) { toggleTraceAndFault(); }\n}\n\n// when an entry on legend list get clicked,\n// alter actor's visibility\nfunction onVClick(event) {\n  var el = event.target;\n  var index = Number(el.dataset.index);\n  var actor = scene[index].actor;\n  var visibility = actor.getVisibility();\n\n  actor.setVisibility(!visibility);\n  if (visibility) {\n    el.classList.remove('visible');\n  } else {\n    el.classList.add('visible');\n  }\n  renderWindow.render();\n}\n\n// https://s3-us-west-2.amazonaws.com/files.scec.org/s3fs-public/projects/cfm/CFM5/CFM52_preferred/500m/CRFA-BPPM-WEST-Big_Pine_fault-CFM2_m500.ts\n//    also ... -LEGG-CFM4_m500.ts\n// http://localhost/~mei/testV/cfm_data/CFM_1571460363892.zip\n// cfm_data/WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5.ts\n\nfunction trim4Name(fname) {\n   // trim path   \n   var dname=fname.substring(fname.lastIndexOf('/')+1);\n   var nname=dname.substring(0,dname.lastIndexOf('.'));\n\n// WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5\n// WTRA-USAV-WLNC-Walnut_Creek_fault-CFM5_m500\n   var teststr=nname.substring(nname.lastIndexOf(\"-\"));\n   var sname=nname;\n   if(teststr.includes('_')) {\n     sname=dname.substring(0,nname.lastIndexOf(\"_\"));\n   }\n   faultList.push(sname);\n\n   // trim abb and ext\n   var n = nname.split('-');\n   var idx=nname.lastIndexOf('-')+1;\n   if(idx != null) { // or a simple zip file\n     var pre=nname.substring(0,idx-1);\n     var post=nname.substring(idx);\n     var n = pre.split('-');\n     var sz=n.length;\n     if(sz >= 4) {\n//      nname=pre.substring(15,);\n        nname=n[3];\n/*** do not add the post part\n       if(post != null) { nname= nname+\"(\"+post+\")\"; }\n***/\n     }\n   }\n   // replace all underline with space\n   var nnname = nname.replace(/_/g, \" \");\n\n   return nnname;\n}\n\n\n/***\n  SHORELINE + SURFACE TRACES\n***/\nfunction loadGMTContent(gmtContent, gtype) {\n  const gmtReader = vtk_js_Sources_IO_Geometry_GMTReader__WEBPACK_IMPORTED_MODULE_20__[\"default\"].newInstance();\n  let gmtContentString=Decodeuint8arr(gmtContent);\n  gmtReader.parseAsText(gmtContentString);\n  const nbOutputs = gmtReader.getNumberOfOutputPorts();\n\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = gmtReader.getOutputData(idx); // polydata\n    var name = source.get('name').name;\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    prop.setLineWidth(1);\n    prop.setOpacity(1);\n\n    switch (gtype) {\n      case 'blind':\n         blind_scene.push({ name, source, mapper, actor });\n         actorList.push(actor);\n         prop.setColor(0.8,0.1,0.1); \n         break;\n      case 'trace':\n         trace_scene.push({ name, source, mapper, actor });\n         actorList.push(actor);\n         prop.setColor(1,0.1,1); \n         break;\n      case 'coast':\n         coast_scene.push({ name, source, mapper, actor });\n         prop.setColor(0,0,0); \n         prop.setLineWidth(200);\n         break;\n    }\n\n    actor.setProperty(prop);\n    actor.setVisibility(0);\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n  }\n\n  if(toggled === undefined && \n            retrieveSurfaceTraces_done() && retrieveShoreline_done()) {\n    if(final_bounds_scene.length > 0 ) {\n      toggled=true;\n      toggleTraceAndFault(); \n      toggleShoreline();\n    }\n  }\n  postRetrieveProcessing();\n}\n\n/***\n  HAUKSSON + ROSS TRACES\n***/\nfunction loadEQContent(eqContent,etype,renderer,renderWindow) {\n\nwindow.console.log(\"plot3d >> loadingEQContent \"+etype);\n  const eqReader = vtk_js_Sources_IO_Geometry_EQReader__WEBPACK_IMPORTED_MODULE_21__[\"default\"].newInstance();\n  let eqContentString=Decodeuint8arr(eqContent);\n  eqReader.parseAsText(eqContentString);\n  const nbOutputs = eqReader.getNumberOfOutputPorts();\n\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = eqReader.getOutputData(idx); // polydata\n    var meta = source.get('meta').meta;\n    var jmeta = JSON.parse(meta);\n    var color = jmeta['color'];\n    var sz = jmeta['size'];\n    var r=color['r'];\n    var g=color['g'];\n    var b=color['b'];\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    prop.setOpacity(1);\n//    window.console.log(\"plot3d >> size of hypocenter>>\"+sz);\n\n    switch (etype) {\n      case 'hauksson':\n         hauksson_scene.push({ name, source, mapper, actor });\n         prop.setEdgeVisibility(true);\n         prop.setPointSize(sz);\n         prop.setColor(r,g,b);\n         break;\n      case 'ross':\n         ross_scene.push({ name, source, mapper, actor });\n         prop.setEdgeVisibility(true);\n         prop.setPointSize(sz);\n         prop.setColor(r,g,b);\n         break;\n    }\n    actor.setProperty(prop);\n    actor.setVisibility(0);\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n  }\n\n  postRetrieveProcessing();\n}\n\nfunction retrieveQuakeTraces_done() {\n  if(hauksson_scene.length == 0)\n     return 0;\n  if(ross_scene.length == 0)\n     return 0;\n  return 1; \n}\n\nfunction retrieveQuakeTraces(container) {\n//window.console.log(\"plot3d >> retrieveQuakeTraces\");\n  const hauksson_file=\"cfm_data/hauksson_CFM.utm\";\n  const ross_file=\"cfm_data/ross_CFM.utm\";\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(hauksson_file, {}).then((content) => {\n      loadEQContent(content,'hauksson',renderer,renderWindow);\n  });\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(ross_file, {}).then((content) => {\n      loadEQContent(content,'ross',renderer,renderWindow);\n  });\n}\n\nfunction retrieveSurfaceTraces_done() {\n  if(blind_scene.length == 0)\n    return 0;\n  if(trace_scene.length == 0)\n    return 0;\n  return 1;\n}\n\nfunction retrieveSurfaceTraces(container) {\n  const blind_file=\"cfm_data/cfm_blind.utm\"\n  const trace_file=\"cfm_data/cfm_traces.utm\"\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(blind_file, {}).then((content) => {\n      loadGMTContent(content, 'blind');\n  });\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(trace_file, {}).then((content) => {\n      loadGMTContent(content, 'trace');\n  });\n}\n\nfunction collectActiveTraceAndFault()\n{\n  var cnt=faultList.length;\n  for(let i=0;i<cnt;i++) {\n    var name=faultList[i];\n    trace_scene.forEach((item, idx) => {\n      let n=item.name; \n      if(n == name)  {\n        let actor=item.actor;\n        activeActorList.push(actor);\n      }\n    });\n    blind_scene.forEach((item, idx) => {\n      let n=item.name; \n      if(n == name)  {\n        let actor=item.actor;\n        activeActorList.push(actor);\n      }\n    });\n  }\n}\n\n\nfunction toggleTraceAndFault() \n{\n  var cnt=actorList.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: trace list is empty\");\n    return;\n  }\n  for(let i=0;i<cnt; i++) {\n    let item=actorList[i];\n    let vis=item.getVisibility();\n    item.setVisibility(!vis);\n  };\n  renderWindow.render();\n  window.console.log(\"plot3d >> toggleTraceAndFault\");\n}\n\nfunction retrieveShoreline(container) {\n  if(coast_scene.length > 0) {\n    return;\n  }\n  const coast_file=\"cfm_data/coast.utm\"\n\n  vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(coast_file, {}).then((content) => {\n      loadGMTContent(content, 'coast');\n  });\n}\n\nfunction retrieveShoreline_done() {\n  if(coast_scene.length == 0)\n    return 0;\n  return 1;\n}\n\nfunction toggleShoreline() {\n  let cnt=coast_scene.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: shoreline is empty\");\n    return;\n  }\n\n  for(let i=0; i<cnt; i++) {\n    let item=coast_scene[i]; \n    let actor=item.actor;\n    let vis = actor.getVisibility();\n    actor.setVisibility(!vis);\n  };\n  renderWindow.render();\n  window.console.log(\"plot3d >> toggleShorline\");\n}\n\n/***\n  DIRECTION MARKER\n***/\n\nfunction majorAxis(vec3, idxA, idxB) {\n  var axis = [0, 0, 0];\n  var idx = Math.abs(vec3[idxA]) > Math.abs(vec3[idxB]) ? idxA : idxB;\n  var value = vec3[idx] > 0 ? 1 : -1;\n  axis[idx] = value;\n  return axis;\n}\n\nfunction reset2North(direction) {\n\n  activeCamera.setPosition(0,0,1);\n  activeCamera.setViewUp(0,1,0);\n  activeCamera.setFocalPoint(0,0,0);\n\n  var viewUp = activeCamera.getViewUp();\n  var focalPoint = activeCamera.getFocalPoint();\n  var position = activeCamera.getPosition();\n\n  var distance = Math.sqrt(\n    vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__[\"distance2BetweenPoints\"](position, focalPoint)\n  );\n  activeCamera.setPosition(\n    focalPoint[0] + direction[0] * distance,\n    focalPoint[1] + direction[1] * distance,\n    focalPoint[2] + direction[2] * distance\n  );\n\n  if (direction[0]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 1, 2));\n  }\n  if (direction[1]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 2));\n  }\n  if (direction[2]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 1));\n  }\n  orientationWidget.updateMarkerOrientation();\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction retrieveInitialCameraView() {\n  initialPosition=activeCamera.getPosition();\n  initialFocalPoint=activeCamera.getFocalPoint();\n  initialViewUp=activeCamera.getViewUp();\n  initialCameraView === activeCamera.getViewMatrix();\n}\n\nfunction resetInitialCameraView() {\n  if( initialCameraView === undefined ) {\n    return;\n  }\n  activeCamera.setPosition(initialPosition[0], initialPosition[1], initialPosition[2]);\n  activeCamera.setFocalPoint(initialFocalPoint[0], initialFocalPoint[1], initialFocalPoint[2]);\n  activeCamera.setViewUp(initialViewUp[0], initialViewUp[1], initialViewUp[2]);\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction toggleNorth() {\n  reset2North([0,1,0]);\n  renderWindow.render();\n}\n\nfunction offTraceAndFault()\n{\n  var cnt=actorList.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: trace list is empty\");\n    return 0;\n  }\n  // need to toggle off ?\n  let item=actorList[0];\n  let vis=item.getVisibility();\n  if(vis) {\n    toggleTraceAndFault();\n    return 1;\n    } else {\n      return 0;\n  }\n}\n\nfunction offShoreline() {\n  let cnt=coast_scene.length;\n  if(cnt == 0) {\n    window.console.log(\"plot3d >> ERROR: shoreline is empty\");\n    return 0;\n  }\n  let item=coast_scene[0];\n  let actor=item.actor;\n  let vis = actor.getVisibility();\n  if(vis) {\n    toggleShoreline();\n    return 1;\n    } else {\n      return 0;\n  }\n}\n\nfunction toggleNorthByBtn() {\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n  reset2North([0,1,0]);\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) {\n      toggleShoreline();\n  }\n  if(track_trace) {\n      toggleTraceAndFault();\n  }\n  renderWindow.render();\n}\n\nfunction buildOrientationMarker() {\n\n  var axes = vtk_js_Sources_Rendering_Core_GeoAxesActor__WEBPACK_IMPORTED_MODULE_11__[\"default\"].newInstance();\n  orientationWidget = vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__[\"default\"].newInstance({\n    actor: axes,\n    interactor: interactor,\n  });\n  orientationWidget.setEnabled(true);\n  orientationWidget.setViewportCorner(\n    vtk_js_Sources_Interaction_Widgets_OrientationMarkerWidget__WEBPACK_IMPORTED_MODULE_10__[\"default\"].Corners.BOTTOM_RIGHT\n  );\n  orientationWidget.setViewportSize(0.20);\n  orientationWidget.setMinPixelSize(100);\n  orientationWidget.setMaxPixelSize(300);\n\n// ----------------------------------------------------------------------------\n// Widget manager\n// ----------------------------------------------------------------------------\n\n  const widgetManager = vtk_js_Sources_Widgets_Core_WidgetManager__WEBPACK_IMPORTED_MODULE_14__[\"default\"].newInstance();\n  widgetManager.setRenderer(orientationWidget.getRenderer());\n\n// InteractiveOrientation Widget\n  const widget = vtk_js_Sources_Widgets_Widgets3D_InteractiveOrientationWidget__WEBPACK_IMPORTED_MODULE_13__[\"default\"].newInstance();\n  widget.placeWidget(axes.getBounds());\n  widget.setBounds(axes.getBounds());\n  widget.setPlaceFactor(1);\n\n  const vw = widgetManager.addWidget(widget);\n\n// Manage user interaction\nvw.onOrientationChange(({ up, direction0, action, event }) => {\n\n  var track_shore=offShoreline();\n  var track_trace=offTraceAndFault();\n\n  let direction=[0,0,1];\n\n  activeCamera.setPosition(0,0,1);\n  activeCamera.setViewUp(0,1,0);\n  activeCamera.setFocalPoint(0,0,0);\n\n  var viewUp = activeCamera.getViewUp();\n  var focalPoint = activeCamera.getFocalPoint();\n  var position = activeCamera.getPosition();\n\n  var distance = Math.sqrt(\n    vtk_js_Sources_Common_Core_Math__WEBPACK_IMPORTED_MODULE_12__[\"distance2BetweenPoints\"](position, focalPoint)\n  );\n  activeCamera.setPosition(\n    focalPoint[0] + direction[0] * distance,\n    focalPoint[1] + direction[1] * distance,\n    focalPoint[2] + direction[2] * distance\n  );\n\n  if (direction[2]) {\n    activeCamera.setViewUp(majorAxis(viewUp, 0, 1));\n  }\n\n  renderer.resetCamera();\n  orientationWidget.updateMarkerOrientation();\n\n  // bring shore/trace back if had to hide them earlier\n  if(track_shore) { toggleShoreline(); }\n  if(track_trace) { toggleTraceAndFault(); }\n\n  widgetManager.enablePicking();\n  renderWindow.render();\n});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n/***\n  QUAKE\n***/\n// 0, none\n// 1, hauksson\n// 2, ross\nvar toQuake=0;\nfunction _flipVis(target, vis) {\n\n  let sz=target.length;\n  for(let i=0; i<sz; i++) {\n    let item=target[i];\n    let actor=item.actor;\n    actor.setVisibility(vis);\n  }\n}\n\nfunction setSeismicity(val) {\n\n  window.console.log(\"plot3d >> setSeismicity...\"+val);\n  window.console.log(\"plot3d >> Seismicity.. loading traces\");\n  window.console.log(\"plot3d >> hauksson_scene...\"+hauksson_scene.length);\n  window.console.log(\"plot3d >> ross_scene...\"+ross_scene.length);\n\n  if(toQuake == val) {\n    // do nothing\n    return;\n  }\n  if(val == 0) {\n    if(toQuake == 1) { // turn off hauksson_scene\n      _flipVis(hauksson_scene, 0);\n    }\n    if(toQuake == 2) { // turn off ross_scene \n      _flipVis(ross_scene, 0);\n    }\n  }\n  if(val == 1) { //turn on hauksson_scene\n    _flipVis(hauksson_scene, 1);\n    if(toQuake == 2) { //turn off ross_scene\n      _flipVis(ross_scene, 0);\n    }\n  }\n  if(val == 2) { //turn on ross_scene\n    _flipVis(ross_scene, 1);\n    if(toQuake == 1) { //turn off hauksson_scene\n      _flipVis(hauksson_scene, 0);\n    }\n  }\n\n  toQuake=val;\n  renderWindow.render();\n}\n\nfunction toggleSeismicity() {\n  toQuake = ( toQuake + 1 ) % 3;\n  window.console.log(\"toQuake is..\"+toQuake);\n\n  hauksson_scene.forEach((item, idx) => {\n      var actor=item.actor;\n      if(toQuake==1) {\n        actor.setVisibility(1);\n        } else { \n          actor.setVisibility(0);\n      }\n  })\n  ross_scene.forEach((item, idx) => {\n      var actor=item.actor;\n      if(toQuake==2) {\n        actor.setVisibility(1);\n        } else { \n          actor.setVisibility(0);\n      }\n  })\n  renderWindow.render();\n}\n\n/***\n  VIEW\n***/\n\n// 0, surface - edge\n// 1, wire\n// 2, surface + edge\nvar toWire=0;\nfunction toggleRepresentation() {\n  toWire = ( toWire + 1 ) % 3;\n  scene.forEach((item, idx) => {\n    var actor=item.actor;\n    var prop = actor.getProperty();\n    switch (toWire) {\n       case 0:\n         setRepresentationToSurface(prop);\n         break;\n       case 1:\n         setRepresentationToWireframe(prop);\n         break;\n       case 2:\n         setRepresentationToSurfaceWithEdge(prop);\n         break;\n    }\n  })\n  renderWindow.render();\n}\n\nfunction setRepresentationToWireframe(property) {\n   property.setRepresentationToWireframe();\n   property.setEdgeVisibility(0);\n}\n\nfunction setRepresentationToSurface(property) {\n   property.setRepresentationToSurface();\n   property.setEdgeVisibility(0);\n}\n\nfunction setRepresentationToSurfaceWithEdge(property) {\n   property.setRepresentationToSurface();\n   property.setEdgeVisibility(1);\n   property.setEdgeColor(0,0,0);\n}\n\nfunction setRepresentationToPoints(property) {\n   property.setRepresentationToPoints();\n}\n\n\n/***\n  COLOR\n***/\n\n/*\n  https://stackoverflow.com/questions/521295/\n      seeding-the-random-number-generator-in-javascript\n*/\nvar track_color_entry=0;\n//var seed = 1;\nfunction nextValue(fake_seed) {\n    var x = Math.sin(fake_seed) * 10000;\n    return (Math.round((x - Math.floor(x))*1000)/1000);\n}\n\nfunction _lookupFilenameIdx(name) {\n\n  let sz=hold_fault_file_name.length;\n  for(let i=0; i<sz; i++) {\n    if(hold_fault_file_name[i]== name)\n      return i;\n  }\n// this is not good\n  window.console.log(\"BAD...\");\n  return -1;\n}\n\nfunction setInitialColor(property,name) {\n   track_color_entry++;\n   let idx= _lookupFilenameIdx(name);\n   let Rc, Rg, Rb;\n\n// in special evaluation mode \n\n   if(evalMode) {\n     if(name.substring(0,2)=== \"2:\") { // GOLD\n       Rc=255/255;\n       Rg=215/255;\n       Rb=0/255;\n       } else {  // BLUE\n         Rc=0;\n         Rg=0;\n         Rb=1;\n     }\n   } else {\n       let fake_seed=(idx * 3)+1;\n       Rc=nextValue(fake_seed);\n       Rg=nextValue(fake_seed+1);\n       Rb=nextValue(fake_seed+2);\n   }\n   property.setColor(Rc,Rg,Rb);\n}\n\nfunction getColor(actor) {\n   var prop = actor.getProperty();\n   var color = prop.getColor();\n   var Rc=color[0];\n   var Rg=color[1];\n   var Rb=color[2];\n   var Rcx=Math.floor(Rc * 255.0 + 0.5);\n   var Rgx=Math.floor(Rg * 255.0 + 0.5);\n   var Rbx=Math.floor(Rb * 255.0 + 0.5);\n//   window.console.log(\"new color \",Rcx, \" \", Rgx, \" \", Rbx);\n   return [ Rcx, Rgx, Rbx ];\n}\n\n// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb\nfunction componentToHex(c) {\n  var hex = c.toString(16);\n  return hex.length == 1 ? \"0\" + hex : hex;\n}\n\nfunction rgbToHex(r, g, b) {\n  return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}\n\nfunction getHexColor(actor) {\n   var prop = actor.getProperty();\n   var color = prop.getColor();\n   var Rc=color[0];\n   var Rg=color[1];\n   var Rb=color[2];\n   var Rcx=Math.floor(Rc * 255.0 + 0.5);\n   var Rgx=Math.floor(Rg * 255.0 + 0.5);\n   var Rbx=Math.floor(Rb * 255.0 + 0.5);\n   var rt=rgbToHex(Rcx, Rgx, Rbx);\n   return rt;\n}\n\nfunction hex2rgb(hex) {\n  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];\n}\n\nfunction getRGBColorFromHex(hex) {\n  var rgb=hex2rgb(hex);\n  return rgb;\n}\n\nfunction getOpacity(actor) {\n   var prop = actor.getProperty();\n   var opacity = prop.getOpacity();\n   return opacity;\n}\n\nfunction changeOpacity(idx,opacity) {\n  var actor = scene[idx].actor;\n  var prop = actor.getProperty();\n  prop.setOpacity(opacity);\n  var visibility=actor.getVisibility();\n  var el=document.getElementById('legend_'+idx);\n  if(visibility) {\n    if(opacity == 0) {\n      actor.setVisibility(!visibility);\n      el.classList.remove('visible');\n     \n    }  \n    } else { // not visible\n      if(opacity != 0) {\n        actor.setVisibility(!visibility);\n        el.classList.add('visible');\n      }\n  }\n  renderWindow.render();\n}\n\n/***\n  BOUNDS\n***/\n\n// bounding box =[xMin, xMax, yMin, yMax, zMin, zMax]\nfunction addFinalBoundingBox() {\n  var outline = vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__[\"default\"].newInstance();\n  final_bb=boundingBox.getBounds();\n  outline.setInputData(boundingBox);\n\n  var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n  mapper.setInputConnection(outline.getOutputPort());\n\n  var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n  actor.setMapper(mapper);\n  actor.getProperty().set({ lineWidth: 10 , color: [1,0.2,0]});\n  renderer.addActor(actor);\n  var name='name';\n  final_bounds_scene.push({name, outline,mapper, actor});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\nfunction addBoundingBox(data,name) {\n\n  var outline = vtk_js_Sources_Filters_General_OutlineFilter__WEBPACK_IMPORTED_MODULE_15__[\"default\"].newInstance();\n  outline.setInputData(data);\n\n  var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n  mapper.setInputConnection(outline.getOutputPort());\n\n  var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n  actor.setMapper(mapper);\n  actor.setVisibility(0);\n  actor.getProperty().set({ lineWidth: 10, color: [0.80,0.83,0.85] });\n  renderer.addActor(actor);\n  bounds_scene.push({name, outline,mapper, actor});\n\n  renderer.resetCamera();\n  renderWindow.render();\n}\n\n// 0, \n// 1, \n// 2, \nvar toBounds=0;\nfunction toggleBounds() {\n  toBounds = ( toBounds + 1 ) % 3;\n  switch (toBounds) {\n     case 0:\n       setBounds();\n       break;\n     case 1:\n       setBoundsToAll();\n       break;\n     case 2:\n       setBoundsToNone();\n       break;\n  }\n  renderWindow.render();\n}\n\nfunction setBounds() {\n  var actor=final_bounds_scene[0].actor;\n  actor.setVisibility(1);\n}\n\nfunction setBoundsToAll() {\n  let actor=final_bounds_scene[0].actor;\n  actor.setVisibility(1);\n  bounds_scene.forEach((item, idx) => {\n    actor=item.actor;\n    actor.setVisibility(1);\n  });\n}\n\nfunction setBoundsToNone() {\n  let actor=final_bounds_scene[0].actor;\n  actor.setVisibility(0);\n  bounds_scene.forEach((item, idx) => {\n    actor=item.actor;\n    actor.setVisibility(0);\n  });\n}\n\n\n\n\n\n/***\n  LEGEND\n***/\n\n// iterating mulitple times as data increases\nfunction buildControlLegend() {\n  var htmlBuffer = [\n    '<style> .visible { font-weight: bold; } .click { cursor: pointer; min-width: 150px;} .dropdown { position: relative; display: inline-block; font-size:6pt } .dropdown-content { display: none; position: relative; background-color:transparent; width: 160px; padding: 0px 4px 0px 10px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } table td, th { border: 0px solid #ced4da; padding: 0; } table tr th { background-color: #F2F2F2; } </style>',\n    ];\n  htmlBuffer.push(\n    `<button id=\"Boundsbtn\" type=\"button\" title=\"show bounding boxes\" onClick=\"toggleBounds()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Northbtn\" type=\"button\" title=\"reset view to North\" onClick=\"toggleNorthByBtn()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Legendbtn\" type=\"button\" title=\"show Legend\" onClick=\"toggleLegend()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Quakebtn\" type=\"button\" title=\"switch Quake\" onClick=\"toggleSeismicity()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"SetQuakebtn\" type=\"button\" title=\"set Quake\" onClick=\"setSeismicity(this.value)\" value=0 style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Reprbtn\" type=\"button\" title=\"switch Repr\" onClick=\"toggleRepresentation()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Tracebtn\" type=\"button\" title=\"toggle trace\" onClick=\"toggleTraceAndFault()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Shorebtn\" type=\"button\" title=\"toggle coastline\" onClick=\"toggleShoreline()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Downloadbtn\" type=\"button\" title=\"download screenshot\" onClick=\"downloadImage()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<button id=\"Camerabtn\" type=\"button\" title=\"get Camera view\" onClick=\"sendCamera2service()\" style='display:none;'></button>`\n    );\n  htmlBuffer.push(\n    `<div style=\"max-height:70vh; max-width:35vw; overflow:auto; margin:-1px -6px -1px -2px;\"><table><thead><tr class=size-row\" aria-hidden=\"true\"></tr></thead>`);\n  htmlBuffer.push(`<tbody>`);\n  scene.forEach((item, idx) => {\n    var ii=item;\n    var actor=item.actor;\n    var color=getColor(actor);\n    var color_hex=getHexColor(actor);\n    htmlBuffer.push(\n    `<tr><td>\n<input type=\"color\" id=\"color_${idx}\" name=\"${idx}\" style=\"width:20px;\" value=\"${color_hex}\" onchange=changeColor(${idx},this.value)>\n</td><td>\n<div class=\"dropdown\" >\n   <div class=\"visible\" id=\"legend_${idx}\" data-index=\"${idx}\">${item.name}</div>\n   <div class=\"row dropdown-content\">\n      Opacity:&nbsp<input type=\"range\" id=\"opacity_${idx}\" type=\"button\" style=\"width:60px\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" onchange=changeOpacity(${idx},this.value)>\n   </div>\n</div>\n    </td></tr>`);\n  });\n  htmlBuffer.push(`</tbody></table></div>`);\n\n  // remove old one\n  fullScreenRenderer.removeController();\n  fullScreenRenderer.addController(htmlBuffer.join('\\n'));\n}\n\n//  <input type=\"color\" id=\"favcolor\" name=\"favcolor\" value=\"#ff0000\"><br><br>\nfunction changeColor(idx, hex_color) {\n  var rgb=getRGBColorFromHex(hex_color);\n  var r=rgb[0];\n  var g=rgb[1];\n  var b=rgb[2];\n\n  var nr= Math.floor(((r - 0.5)/255)*100)/100;\n  var ng= Math.floor(((g - 0.5)/255)*100)/100;\n  var nb= Math.floor(((b - 0.5)/255)*100)/100;\n\n  var actor = scene[idx].actor;\n  var property = actor.getProperty();\n  property.setColor(nr,ng,nb);\n  renderWindow.render();\n}\n\nfunction toggleLegend() {\n  fullScreenRenderer.toggleControllerVisibility();\n}\n\n/***\n  LOADING\n***/\n\nfunction preventDefaults(e) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n\nfunction emptyContainer(container) {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n}\n\nfunction loadZipContent(zipContent) {\n  var fileContents = { ts: {} };\n  var zip = new jszip__WEBPACK_IMPORTED_MODULE_0___default.a();\n  zip.loadAsync(zipContent).then(() => {\n    let workLoad = 0;\n\n    function done() {\n      if (workLoad !== 0) {\n        return;\n      }\n\n      var promises = [];\n      Promise.all(promises).then(() => {\n        // Create pipeline from ts \n        Object.keys(fileContents.ts).forEach((tsFilePath) => {\n          window.console.log(\"retrieve, tsFilePath>>\",tsFilePath);\n\n          var tsReader = fileContents.ts[tsFilePath];\n\n          var size = tsReader.getNumberOfOutputPorts();\n          for (let i = 0; i < size; i++) {\n            var source = tsReader.getOutputData(i);\n            var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n            var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n            let name = source.get('name').name;\n            if ( name === undefined) {\n               name = trim4Name(tsFilePath);\n            }\n            scene.push({ name, source, mapper, actor });\nwindow.console.log(\"THIS is where scence is made..\", name);\n            boundingBox.addBounds(source.getBounds());\n            addBoundingBox(source);\n// color\n            var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n            setInitialColor(prop, name);\n            prop.setOpacity(0.8);\n            actor.setProperty(prop);\n\n            actor.setMapper(mapper);\n            mapper.setInputData(source);\n            renderer.addActor(actor);\n          }\n        });\n        buildControlLegend();\n        renderer.resetCamera();\n        renderWindow.render();\n      });\n    }\n\n    zip.forEach((relativePath, zipEntry) => {\n      if (relativePath.match(/\\.ts$/i)) {\n        workLoad++;\n        zipEntry.async('string').then((txt) => {\n          var reader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n          reader.parseAsText(txt);\n          fileContents.ts[relativePath] = reader;\n          workLoad--;\n          done();\n        });\n      }\n    });\n  });\n}\n\n// https://ourcodeworld.com/articles/read/164/how-to-convert-an-uint8array-to-string-in-javascript\nfunction Decodeuint8arr(uint8array){\n    return new TextDecoder(\"utf-8\").decode(uint8array);\n}\n\n\nfunction loadTSContent(tsContent, name) {\n  var tsReader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n  let tsContentString=Decodeuint8arr(tsContent);\n  tsReader.parseAsText(tsContentString);\n  var nbOutputs = tsReader.getNumberOfOutputPorts();\n\n  fileIdx++;\n  for (let idx = 0; idx < nbOutputs; idx++) {\n    var source = tsReader.getOutputData(idx);\n    var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n    var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n\n    scene.push({ name, source, mapper, actor});\n//window.console.log(\"PUSHING.. scene >>>\"+name);\n    boundingBox.addBounds(source.getBounds());\n    addBoundingBox(source,name);\n\n// color & representation\n    var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n    setRepresentationToSurface(prop);\n    setInitialColor(prop, name);\n    prop.setOpacity(0.8);\n    actor.setProperty(prop);\n\n    actor.setMapper(mapper);\n    mapper.setInputData(source);\n    renderer.addActor(actor);\n\n  }\n  buildControlLegend();\n//window.console.log(\"loadTSContent..\",name);\n  \n  renderer.resetCamera();\n  renderWindow.render();\n  if(fileIdx == fileCount) {\nwindow.console.log(\"plot3d >> TO-SERVER: done loading traces\");\n    window.top.postMessage({'call':'from3DViewer', value:'done with loading traces'}, '*');\n\n    addFinalBoundingBox();\n    makeSCECSvgLayer();\n    if(toggled === undefined && \n          retrieveSurfaceTraces_done() && retrieveShoreline_done()) {\n      toggled=true;\n//      window.console.log(\"---CALLed with FOUND \",viewerType);\n      if (viewerType == \"CFM\") {\n//        window.console.log(\"---CALLed with CFM\");\n        toggleTraceAndFault(); \n      }\n      if (viewerType == \"GFM\") {\n//        window.console.log(\"---CALLed with GFM\");\n        offTraceAndFault(); \n      }\n      toggleShoreline();\n    }\n  }\n}\n\n\n/***\n   post message to SERVER when all the background traces are loaded\n   and also camera angled ??\n***/\nfunction postRetrieveProcessing() {\n  if(!retrieveSurfaceTraces_done())\n     return;\n  if(!retrieveShoreline_done())\n     return;\n  if(!retrieveQuakeTraces_done())\n     return;\n  if(cameraOkay) {\nwindow.console.log(\"plot3d >> TO-SERVER: done loading base traces\");\n    window.top.postMessage({'call':'from3DViewer',value:'done with base trace loading'}, '*');\n  } \n}\n\nfunction load(container, options) {\n  window.console.log(\"plot3d >> TOP load\");\n  autoInit = false;\n  emptyContainer(container);\n\n  fullScreenRenderer = vtk_js_Sources_Rendering_Misc_FullScreenRenderWindow__WEBPACK_IMPORTED_MODULE_3__[\"default\"].newInstance({\n    background: [242, 242, 242],\n    rootContainer: container,\n    containerStyle: { height: '100%', width: '100%', position: 'absolute' },\n  });\n\n  renderer = fullScreenRenderer.getRenderer();\n  activeCamera = renderer.getActiveCamera();\n  renderWindow=renderer.getRenderWindow();\n  interactor = renderWindow.getInteractor();\n  openGLRenderWindow = interactor.getView();\n  boundingBox = vtk_js_Sources_Common_DataModel_BoundingBox__WEBPACK_IMPORTED_MODULE_16__[\"default\"].newInstance();\n  faultList=[];\n  actorList=[];\n\n  retrieveSurfaceTraces(container);\n  retrieveShoreline(container);\n  retrieveQuakeTraces(container);\n\n  function retrieveFileContent(fname, name) {\n//    window.console.log(\"retrieveFileContent, fname>>\",fname);\n    hold_fault_file_location.push(fname);\n    hold_fault_file_name.push(name);\n\n    var ext = fname.substr((fname.lastIndexOf('.') + 1));\n    var progressContainer = document.createElement('div');\n    progressContainer.setAttribute('class', _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.progress);\n    container.appendChild(progressContainer);\n\n    var progressCallback = (progressEvent) => {\n      if (progressEvent.lengthComputable) {\n        var percent = Math.floor(\n          (100 * progressEvent.loaded) / progressEvent.total\n        );\n        progressContainer.innerHTML = `Loading ${percent}%`;\n      } else {\n        progressContainer.innerHTML = vtk_js_Sources_macro__WEBPACK_IMPORTED_MODULE_1__[\"default\"].formatBytesToProperUnit(\n          progressEvent.loaded\n        );\n      }\n    };\n \n    vtk_js_Sources_IO_Core_DataAccessHelper_HttpDataAccessHelper__WEBPACK_IMPORTED_MODULE_2__[\"default\"].fetchBinary(fname, {\n      progressCallback,\n    }).then((content) => {\n      container.removeChild(progressContainer);\n      if(ext === 'ts') {  // plain ts file\n         loadTSContent(content, name);\n         } else { \n           loadZipContent(content);\n      }\n    });\n  }\n\n// option: eval\n  if (options.eval) {\n    evalMode = 1;\n  }\n\n// option : file\n  if (options.file) {\n    if (options.ext === 'ts') {\n      var reader = new FileReader();\n      reader.onload = function onLoad(e) {\n        var tsReader = vtk_js_Sources_IO_Geometry_TSReader__WEBPACK_IMPORTED_MODULE_5__[\"default\"].newInstance();\n        tsReader.parseAsText(reader.result);\n        var nbOutputs = tsReader.getNumberOfOutputPorts();\n        for (let idx = 0; idx < nbOutputs; idx++) {\n          var source = tsReader.getOutputData(idx);\n          var mapper = vtk_js_Sources_Rendering_Core_Mapper__WEBPACK_IMPORTED_MODULE_6__[\"default\"].newInstance();\n          var actor = vtk_js_Sources_Rendering_Core_Actor__WEBPACK_IMPORTED_MODULE_7__[\"default\"].newInstance();\n          var name = source.get('name').name;\n          scene.push({ name, source, mapper, actor });\n          boundingBox.addBounds(source.getBounds());\n          addBoundingBox(source,name);\n// color\n          var prop = vtk_js_Sources_Rendering_Core_Property__WEBPACK_IMPORTED_MODULE_8__[\"default\"].newInstance();\n          setInitialColor(prop, name);\n          prop.setOpacity(0.8);\n          actor.setProperty(prop);\n\n          actor.setMapper(mapper);\n          mapper.setInputData(source);\n          renderer.addActor(actor);\n        }\n        buildControlLegend();\n        renderer.resetCamera();\n        renderWindow.render();\n      };\n      reader.readAsTex(options.file);\n    } else {\n      loadZipContent(options.file);\n    }\n\n  }  else { \n    if (options.fullFileURL) {\n      fileCount=fileCount+options.fullFileURL.length;\n// expect fullName=[n1] fullFileURL=[f1]\n      let op=options.fullFileURL;\n      let cnt=op.length;\n      for(let i=0; i<cnt; i++) {\n          let f=op[i];\n          if(options.fullName) {\n              retrieveFileContent(f,options.fullName[i]);\nwindow.console.log(\" >>>> trying to call GOLD..\");\n//XXX     setResetColor2Gold(options.fullName[i]);\n              } else {\n                retrieveFileContent(f,trim4Name(f));\n          }\n       }\n    } // else if only one\n    if (options.fileURL) { // option: fileURL\n      fileCount=fileCount+options.fileURL.length;\n  // expect name=[n1,n2],fileURL=[f1,f2]\n  // or fileURL=f1\n      let op=options.fileURL;\n      let path=options.filePATH;\n      // single set\n      if(typeof op === 'string') {\n            nm=trim4Name(op);\n          if(path) {\n            retrieveFileContent(path+op, trim4Name(op));\n            } else {\n              retrieveFileContent(op, trim4Name(op));\n          }\n          } else { // a whole set\n            let cnt=op.length;\n            for(var i=0; i<cnt; i++) {\n              let f=op[i];\n              if(path) {\n                f=path+f;\n              }\n            if(options.name) {\n              retrieveFileContent(f,options.name[i]);\n                } else {\n                  retrieveFileContent(f,trim4Name(op[i]));\n              }\n            }\n       }\n    }\n  }\n}\n\nfunction autoInitLocalFileLoader(container) {\n  var exampleContainer = document.querySelector('.content');\n  var rootBody = document.querySelector('body');\n  var myContainer = container || exampleContainer || rootBody;\n\n  if (myContainer !== container) {\n    myContainer.classList.add(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.fullScreen);\n    rootBody.style.margin = '0';\n    rootBody.style.padding = '0';\n  } else {\n    rootBody.style.margin = '0';\n    rootBody.style.padding = '0';\n  }\n\n  var fileContainer = document.createElement('div');\n  fileContainer.innerHTML = `<div class=\"${\n    _TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.bigFileDrop\n  }\"/><input type=\"file\" accept=\".zip,.ts\" style=\"display: none;\"/>`;\n  myContainer.appendChild(fileContainer);\n\n  var fileInput = fileContainer.querySelector('input');\n\n  function handleFile(e) {\n    preventDefaults(e);\n    var dataTransfer = e.dataTransfer;\n    var files = e.target.files || dataTransfer.files;\n    if (files.length === 1) {\n      myContainer.removeChild(fileContainer);\n      var ext = files[0].name.split('.').slice(-1)[0];\n      load(myContainer, { file: files[0], ext });\n    }\n  }\n\n  fileInput.addEventListener('change', handleFile);\n  fileContainer.addEventListener('drop', handleFile);\n  fileContainer.addEventListener('click', (e) => fileInput.click());\n  fileContainer.addEventListener('dragover', preventDefaults);\n}\n\n\nfunction foo(myParams) {\n\n  var userParams = vtk_js_Sources_Common_Core_URLExtract__WEBPACK_IMPORTED_MODULE_4__[\"default\"].extractURLParameters(true, myParams);\n  if (userParams.file || userParams.fileURL || userParams.fullFileURL) {\n    var exampleContainer = document.querySelector('.content');\n    var rootBody = document.querySelector('body');\n    var myContainer = exampleContainer || rootBody;\n\n    if (myContainer) {\n      myContainer.classList.add(_TSViewer_module_css__WEBPACK_IMPORTED_MODULE_23___default.a.fullScreen);\n      rootBody.style.margin = '0';\n      rootBody.style.padding = '0';\n    }\n    if (userParams.viewerType) {\n      viewerType=userParams.viewerType;\n    }\n    if (userParams.viewUID) {\n      hold_uid=userParams.viewUID;\n    }\n\nwindow.console.log(\"plot3d >> TO-SERVER: start loading\");\n    window.top.postMessage({'call':'from3DViewer',value:'start loading'}, '*');\n    load(myContainer, userParams);\n    buildOrientationMarker();\n    toggleNorth();\n  }\n}\n\n/***\n   MAIN \n***/\n\n//   Add class to body if iOS device \nif (iOS) {\n  document.querySelector('body').classList.add('is-ios-device');\n}\n\nvar myParams=window.location.search;\n\n// to accept the url being sent from the service\n\n// only add it when the html is up and ready\nwindow.addEventListener(\"DOMContentLoaded\", function () {\n\nwindow.console.log(\"plot3d >> TO-SERVER: I am ready\");\n  window.top.postMessage({'call':'from3DViewer',value:'ready'}, '*');\n\n  window.addEventListener('message', function(event) {\n      var origin = event.origin;\n      if (origin != \"http://localhost:8082\" && origin != \"http://moho.scec.org\" && origin != \"https://www.scec.org\" ) {\n          window.console.log(\"view3DIfram, bad message origin >>\", origin);\n          return;\n      }\n\n      window.console.log(\"view3DIfram, received a message :\"+event.data.call);\n\n      if (typeof event.data == 'object' && event.data.call=='fromSCEC param') {\nwindow.console.log(\"  to-plot3d <<< param fromSCEC\");\n          myParams=\"?\"+decodeURI(event.data.value);\n          foo(myParams);\n      } else if (typeof event.data == 'object' && event.data.call=='fromSCEC camera') {\n            let myCamera= decodeURI(event.data.value);\nwindow.console.log(\"  to-plot3d <<<  camera string fromSCEC \"+myCamera);\n            goto_newCamera(myCamera);\nwindow.console.log(\"plot3d >> TO-SERVER: camera done\");\n            window.top.postMessage({'call':'from3DViewer camera done', value:myCamera}, '*');\n            cameraOkay=1;\n            postRetrieveProcessing();\n      } else if (typeof event.data == 'object' && event.data.call=='fromSCEC done') {\n            let msg= event.data.value;\nwindow.console.log(\"  to-plot3d <<< done fromSCEC (\"+msg+\")\");\n            //need to refresh the screen somehow\n            renderWindow.render();\n      } else {\n            window.console.log(\"view3DIfram, received invalid event data >>\"+event.data+\" from \"+origin);\n      }\n  });\n\n// and then tell server that we are ready..\n/***\n   WAITING AND PROCESS PARAMS sent from SERVER\n***/\nwindow.console.log(\"plot3d >> initial myParams is \",myParams);\nif( myParams == undefined || myParams.includes(\"?2Long\") ) {\n\nwindow.console.log(\"plot3d >> TO-SERVER: send me params\");\n  window.top.postMessage({'call':'from3DViewer',value:'send params'}, '*');\n\n  if ( !myParams.includes(\"?2Long\") ) {\n      foo(myParams);\n      } else {\n      // handle this after receive param from server\nwindow.console.log(\"plot3d HERE...\");\n  }\n\n} else {\n\n  foo(myParams);\n\n}\n\n},false);\n\n\n// Auto setup if no method get called within 100ms\nsetTimeout(() => {\n  if (autoInit) {\n    autoInitLocalFileLoader();\n    buildOrientationMarker();\n    toggleNorth();\n  }\n}, 100);\n\n\n// -----------------------------------------------------------\n// Make some variables global so that you can inspect and\n// modify objects in your browser's developer console:\n// -----------------------------------------------------------\n\nglobal.fileCount = fileCount;\nglobal.fileIdx = fileIdx;\nglobal.toggleBounds = toggleBounds;\nglobal.toggleNorthByBtn = toggleNorthByBtn;\nglobal.toggleLegend = toggleLegend;\nglobal.changeColor = changeColor;\nglobal.changeOpacity = changeOpacity;\nglobal.toggleSeismicity = toggleSeismicity;\nglobal.setSeismicity = setSeismicity;\nglobal.sendCamera2service = sendCamera2service;\nglobal.toggleRepresentation = toggleRepresentation;\nglobal.toggleTraceAndFault = toggleTraceAndFault;\nglobal.toggleShoreline = toggleShoreline;\nglobal.downloadImage = downloadImage;\nglobal.scene = scene;\nglobal.fullScreenRenderer = fullScreenRenderer;\n\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./src/index.js-CFM?");
 
 /***/ }),