Best JavaScript code snippet using playwright-internal
main.js
Source:main.js
1import {OrbitControls} from 'https://unpkg.com/three@0.108.0/examples/jsm/controls/OrbitControls.js';2import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.108.0/examples/jsm/renderers/CSS2DRenderer.js';3import {TWEEN} from 'https://unpkg.com/three@0.108.0/examples/jsm/libs/tween.module.min';4import 'https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js'5const urlParams = new URLSearchParams(window.location.search);6const GLOBE_STYLE_TEXTURE = "texture";7const GLOBE_STYLE_POLYGON = "polygon";8const GLOBE_STYLE = (urlParams.has('style') ? urlParams.get('style') : GLOBE_STYLE_TEXTURE);9function loadJSON(url, callback) {10 var request = new XMLHttpRequest;11 request.open('GET', url, true);12 request.onload = function() {13 if (request.status >= 200 && request.status < 400){14 // Success!15 var data = JSON.parse(request.responseText);16 callback(data);17 } else {18 console.log("Status code error: " + request.status);19 }20 };21 request.onerror = function() {22 console.log("Error connecting."); 23 };24 request.send();25}26(function() {27 Vue.component('poi', {28 props: {29 text: String,30 id: String,31 },32 template: `<a class="poi" href='#' v-on:click="handleClick"><img :src="icon[0]" :title="icon[1]" :alt="icon[1]" style="width: 1em; display: inline; margin-right: 2px; position: relative; vertical-align: middle;"></img>{{text}}</a>`,33 methods: {34 handleClick() {35 renderInfoForPOI(this.id);36 }37 },38 computed: {39 icon: function() {40 // TODO(iandioch): It's dumb to get this point instead of just having a getVisitForID(this.id) func.41 const visit = getPointForName(this.id).visit;42 if (visit.location.type == 'TOWN' || visit.location.type == "TOWN_CLUSTER") {43 return ['town.svg', 'Town by mapbox on svgrepo.com'];44 } else if (visit.location.type == "STATION") {45 return ['station.svg', 'Railway Station 14 by gmgeo on svgrepo.com'];46 } else if (visit.location.type == "AIRPORT") {47 return ['airport.svg', 'Airplane Plane by SVG Repo on svgrepo.com'];48 }49 return ['town.svg', 'TODO'];50 }51 }52 });53 Vue.component('country', {54 props: {55 text: String,56 id: String,57 },58 template: `<a class="poi" href='#' v-on:click="handleClick"><span v-if="flag">{{flag}} </span>{{text}}</a>`,59 methods: {60 handleClick() {61 renderInfoForCountry(this.text);62 },63 flagEmojiForCountryCode(countryCode) {64 const codePoints = countryCode.toUpperCase().split('').map(c => 127397 + c.charCodeAt());65 return String.fromCodePoint(...codePoints);66 }67 },68 computed: {69 flag: function() {70 if (this.id.length != 2) {71 // Only the three regional flags of [Scotland, Wales, England] are recommended for general interchange by the Unicode consortium.72 switch(this.id) {73 case 'GBSCT': return 'ð´ó §ó ¢ó ³ó £ó ´ó ¿';74 case 'GBWLS': return 'ð´ó §ó ¢ó ·ó ¬ó ³ó ¿';75 case 'GBENG': return 'ð´ó §ó ¢ó ¥ó ®ó §ó ¿';76 default: return null;77 }78 }79 return this.flagEmojiForCountryCode(this.id);80 },81 }82 });83 Vue.component('region', {84 props: {85 country: String, // name of country86 name: String, // name of region87 },88 template: `<a class="poi" href='#' v-on:click="handleClick"><img src="region.svg" title="Location by SVG Repo on svgrepo.com" style="width: 1em; display: inline; margin-right: 2px; position: relative; vertical-align: middle"></img>{{name}}</a>`,89 methods: {90 handleClick() {91 renderInfoForRegion(this.country, this.name);92 },93 }94 });95 Vue.component('collection', {96 props: {97 collection: Object,98 },99 template: `<a class="poi" href='#' v-on:click="handleClick">{{collection.title}}</a>`,100 methods: {101 handleClick() {102 renderInfoForCollection(this.collection);103 },104 }105 });106 Vue.component('top-poi-table', {107 props: {108 pois: Array, // Expecting a list of (user-visible text, poi id/name, number)109 metric: String110 },111 template: `112 <ul class="top-poi-table">113 <li v-for="poi in pois">114 <poi :text="poi[0]" :id="poi[1]"></poi> <span class="fact">{{poi[2]}}</span> {{metric}}115 </li>116 </ul>`117 });118 // TODO(iandioch): It might be easier to have separate components for clusters vs. individual POIs, instead of wrapping everything in ifs.119 Vue.component('poi-visit-dashboard', {120 props: {121 visits: Array, // One (or more, if poi is a cluster) visit objs. 122 poi: Object, // a single visitObj123 },124 template: `<div>125 <div class="poi-list">126 <p v-if="visits.length > 1">This cluster is composed of multiple adjacent places:<br><span v-for="poi in visits"><poi :text="poi.location.human_readable_name" :id="poi.location.id"></poi> </span><br>in <span v-for="country in countries"><country :id="country.code" :text="country.name"></country></span></p>127 <p v-if="poi.location.type != 'CLUSTER'"><poi :text="poi.location.human_readable_name" :id="poi.location.id"></poi> is {{humanReadableType}} in <region :name="regions[0].name" :country="regions[0].country"></region> in <country :id="countries[0].code" :text="countries[0].name"></country></p>128 <p v-if="poi.hasOwnProperty('cluster')">This is a part of <poi text="a cluster" :id="poi.cluster"></poi></p>129 <p><span v-for="region in regions"><region :name="region.name" :country="region.country"></region></span></p>130 </div>131 <p>Number of visits: {{poi.num_visits}}</p>132 <p>Total time visited: {{poi.days > 0 ? poi.days + " days": poi.hours + " hours"}}.</p>133 </div>`,134 computed: {135 countries: function() {136 var seenCountries = new Set();137 var results = [];138 for (let i in this.visits) {139 const visit = this.visits[i];140 if (seenCountries.has(visit.location.country)) continue;141 seenCountries.add(visit.location.country);142 results.push({143 name: visit.location.country, 144 code: visit.location.country_code145 });146 }147 return results;148 },149 regions: function() {150 // seenRegions will conflict if two regions have the same name but are in different countries.151 var seenRegions = new Set();152 var results = [];153 for (let i in this.visits) {154 const visit = this.visits[i];155 if (seenRegions.has(visit.location.region)) continue;156 seenRegions.add(visit.location.region);157 results.push({158 name: visit.location.region, 159 country: visit.location.country,160 });161 }162 return results;163 },164 humanReadableType: function() {165 switch(this.poi.location.type) {166 case "CLUSTER":167 return "a cluster";168 case "TOWN":169 case "TOWN_CLUSTER":170 return "a locality";171 case "AIRPORT":172 return "an airport";173 case "STATION":174 return "a station";175 default:176 return "a place";177 }178 }179 }180 });181 Vue.component('poi-collection-dashboard', {182 props: {183 visits: Array // A list of [human_readable_name, id] pairs of places184 },185 template:`<div>186 <div class="poi-list">187 <span v-for="poi in visits"><poi :text="poi[0]" :id="poi[1]"></poi></span>188 <p>Stayed in these places for {{hours}} hours ({{days}} days) total.</p>189 </div>190 </div>`,191 computed: {192 hours: function() {193 var hours = 0;194 for (let i in this.visits) {195 let visit = visits[this.visits[i][1]];196 hours += visit.hours;197 }198 return hours;199 },200 days: function() {201 return Math.ceil(this.hours / 24.0);202 }203 }204 });205 Vue.component('home-dashboard', {206 props: ['legs', 'visits'],207 template: `<div>208 Logged <span class="fact">{{statistics.num_legs}}</span> trips to <span class="fact">{{statistics.num_unique_pois}}</span> different places in <span class="fact">{{statistics.num_countries}}</span> countries.<br>209 Places I have spent the most time in since I started logging:210 <top-poi-table v-bind:pois="longestStayedPOIs" metric="days"></top-poi-table>211 <br>212 I have logged trips passing through the following countries: <span v-for="country in countries"><country :id="country.code" :text="country.name"></country></span>213 <br>214 See more info about: <collection v-for="collection in collections" :collection="collection"></collection>.215 </div>`,216 computed: {217 longestStayedPOIs() {218 const allPOIs = [];219 for (let i in visits) {220 if (visits[i].location.type == "CLUSTER") continue;221 allPOIs.push([visits[i].location.human_readable_name, visits[i].location.id, visits[i].days]);222 }223 allPOIs.sort(function(a, b) { return b[2]-a[2]; });224 console.log(allPOIs.slice(0, 10));225 return allPOIs.slice(0, 10);226 },227 statistics() {228 const POINames = new Set();229 for (let i in visits) {230 if (visits[i].type == 'CLUSTER') continue;231 POINames.add(visits[i].location.id);232 }233 const numUniquePOIs = POINames.size;234 var numLegs = 0;235 for (let i in legs) {236 numLegs += legs[i].count;237 }238 const countries = new Set();239 for (let i in visits) {240 if (visits[i].type == 'CLUSTER') continue;241 countries.add(visits[i].location.country);242 }243 const numCountries = countries.size;244 return {245 "num_unique_pois": numUniquePOIs,246 "num_legs": numLegs,247 "num_countries": numCountries,248 }249 },250 countries: function() {251 var seenCountries = new Set();252 var results = [];253 for (let i in visits) {254 const visit = visits[i];255 const countryCode = visit.location.country_code;256 const countryName = visit.location.country;257 if (seenCountries.has(countryName)) continue;258 seenCountries.add(countryName);259 results.push({260 name: countryName, 261 code: countryCode,262 });263 }264 results.sort((a, b) => {return a.name.localeCompare(b.name)});265 return results;266 },267 collections: function() {268 return collections;269 }270 }271 });272 function createComponentForPOI(point, locations) {273 return {274 data: () => {275 return {276 visits: locations,277 poi: point.visit,278 }279 },280 template: `<poi-visit-dashboard v-bind:visits="visits" v-bind:poi="poi"></poi-visit-dashboard>`,281 }282 }283 function getVisitsForCountry(country) {284 var locations = [];285 for (let i in visits) {286 if (visits[i].location.type == 'CLUSTER') continue;287 if (visits[i].location.country == country) {288 locations.push(visits[i]);289 }290 }291 locations.sort((a, b) => { return b.days - a.days });292 return locations;293 }294 function createComponentForVisits(visits) {295 var locations = [];296 for (let i in visits) {297 locations.push([visits[i].location.human_readable_name, visits[i].location.id]);298 }299 return {300 data: () => {301 return {302 visits: locations,303 }304 },305 template: `<poi-collection-dashboard v-bind:visits="visits"></poi-collection-dashboard>`,306 }307 }308 function createComponentForCollection(collection) {309 var locations = [];310 for (let location of getLocationsForCollection(collection)) {311 locations.push([location.location.human_readable_name, location.location.id]);312 }313 return {314 data: () => {315 return {316 collection,317 visits: locations,318 }319 },320 template: `<div>321 <p>Total distance travelled: <span class="fact">{{collection.meta.distance}}km</span></p>322 <div v-for="part in collection.parts" stlye="margin-top: 1rem">323 <div v-if="partType(part) == 'NOTE'">324 {{part.note}}325 </div>326 <div v-if="partType(part) == 'LEG'">327 <component :is="renderLeg(part)"></component>328 </div>329 <div v-if="partType(part) == 'IMAGE'">330 <img :src="part.image_url" style="max-width:100%;"></img>331 </div>332 </div>333 </div>`,334 methods: {335 partType: function(part) {336 if (part.note && part.note.length) {337 return 'NOTE';338 }339 if (part.image_url && part.image_url.length) {340 return 'IMAGE';341 }342 return 'LEG';343 },344 modeVerb: function(mode) {345 switch(mode) {346 case 'AEROPLANE':347 return 'Flew';348 case 'CAR':349 return 'Drove';350 case 'TRAIN':351 return 'Took a train';352 case 'BUS':353 return 'Took a bus';354 case 'TAXI':355 return 'Took a taxi';356 case 'BOAT':357 return 'Took a boat';358 default:359 console.log("No verb specified for mode", mode);360 return 'Travelled';361 }362 },363 formatDatetime: function(datetime) {364 const date = new Date();365 date.setTime(Date.parse(datetime));366 return date.toLocaleString("en-IE");367 },368 renderLeg(part) {369 return {370 data: function() {371 return {372 part,373 }374 },375 template: `<div class="leg-description">376 ${this.modeVerb(part.leg.mode)} ${part.distance}km from <poi :text="part.dep.human_readable_name" :id="part.dep.id"></poi> (${this.formatDatetime(part.leg.departure_datetime)}) to <poi :text="part.arr.human_readable_name" :id="part.arr.id"></poi> (${this.formatDatetime(part.leg.arrival_datetime)}).377 </div>`378 }379 },380 },381 }382 }383 var dashboard = new Vue({384 el: '#vue-dashboard',385 data: {386 activeDashboard: {387 template: '<div>Loading...</div>',388 },389 legs: [],390 visits: [],391 collections: [],392 title: "Loading",393 hideBackButton: true,394 },395 methods: {396 loadData: function(data) {397 console.log("Loading data in homeDashboard.");398 console.log(data);399 this.legs.push(...data.legs);400 this.visits.push(...data.visits);401 this.collections.push(...data.collections);402 this.renderHome();403 },404 renderHome: function() {405 this.activeDashboard = "home-dashboard";406 this.title = "Travel globe";407 this.hideBackButton = true;408 const allVisits = [];409 for (let i in this.visits) {410 allVisits.push(this.visits[i].location.id);411 }412 toggleRoutesForSelectedVisits(allVisits, true);413 },414 renderPOI: function(point, locations) {415 this.activeDashboard = createComponentForPOI(point, locations);416 this.title = point.visit.location.human_readable_name;417 this.hideBackButton = false;418 },419 renderCountry: function(country, visits) {420 this.activeDashboard = createComponentForVisits(visits);421 this.title = country;422 this.hideBackButton = false;423 },424 renderCollection: function(collection) {425 this.activeDashboard = createComponentForCollection(collection);426 this.title = collection.title;427 this.hideBackButton = false;428 }429 }430 });431 const GLOBE_RADIUS = 1;432 const GLOBE_TEXTURE_PATH = 'scaled_globe_10800.jpg'433 const canvas = document.querySelector('#globe-canvas');434 const canvasContainer = document.querySelector('#globe-container');435 const renderer = new THREE.WebGLRenderer({canvas, antialias: false});436 const labelRenderer = new CSS2DRenderer();437 labelRenderer.setSize(canvas.width, canvas.height);438 labelRenderer.domElement.style.position = 'absolute';439 labelRenderer.domElement.style.top = '0px';440 canvasContainer.appendChild(labelRenderer.domElement);441 const camera = new THREE.PerspectiveCamera(45, 2, 0.025, 12);442 camera.position.z = 2;443 const controls = new OrbitControls(camera, labelRenderer.domElement);444 const MIN_CAMERA_DISTANCE = GLOBE_RADIUS * 1.05;445 const MAX_CAMERA_DISTANCE = GLOBE_RADIUS * 5;446 controls.minDistance = MIN_CAMERA_DISTANCE;447 controls.maxDistance = MAX_CAMERA_DISTANCE;448 controls.enablePan = false;449 controls.enableDamping = true;450 // Increase this number to make the scrolling snappier.451 controls.dampingFactor = 0.075;452 controls.rotateSpeed = 0.85;453 controls.zoomSpeed = 0.7;454 const scene = new THREE.Scene();455 var raycaster = new THREE.Raycaster(); 456 var mouse = new THREE.Vector2();457 const topLayer = labelRenderer.domElement;458 topLayer.addEventListener('mousemove', onMouseMove, false);459 topLayer.addEventListener('touchmove', onMouseMove, false);460 topLayer.addEventListener('mousedown', onMouseDown, false);461 topLayer.addEventListener('touchstart', onMouseDown, false);462 {463 const MAX_STAR_DIST = GLOBE_RADIUS * 10;464 const MIN_DIST = GLOBE_RADIUS*5;465 function randomStarPosition() {466 while (true) { 467 const x = Math.random() * MAX_STAR_DIST - MAX_STAR_DIST/2.0;468 const y = Math.random() * MAX_STAR_DIST - MAX_STAR_DIST/2.0;469 const z = Math.random() * MAX_STAR_DIST - MAX_STAR_DIST/2.0;470 if (x*x + y*y + z*z > MIN_DIST*MIN_DIST) {471 return new THREE.Vector3(x, y, z);472 }473 }474 }475 const NUM_STARS = 100;476 const starGeom = new THREE.Geometry();477 for (let i = 0; i < NUM_STARS; i++) {478 let star = randomStarPosition();479 starGeom.vertices.push(star);480 }481 const material = new THREE.PointsMaterial({color: 0xFFFFFF, size: 0.1});482 const points = new THREE.Points(starGeom, material);483 scene.add(points);484 }485 { 486 const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);487 scene.add(ambientLight);488 const directionalLight = new THREE.DirectionalLight(0xF9D78C, 0.2);489 directionalLight.position.set(-1, 2, 4);490 scene.add(directionalLight);491 }492 const globeGroup = new THREE.Group();493 scene.add(globeGroup);494 const pointGroup = new THREE.Group();495 globeGroup.add(pointGroup);496 function createGlobe(cb) {497 // Create the sphere obj.498 const globeGeometry = new THREE.SphereGeometry(GLOBE_RADIUS*0.995, 64, 64);499 if (GLOBE_STYLE === GLOBE_STYLE_TEXTURE) {500 const textureLoader = new THREE.TextureLoader();501 textureLoader.load(GLOBE_TEXTURE_PATH, (texture) => {502 texture.offset.set(0.25, 0.0);503 texture.wrapS = THREE.RepeatWrapping;504 texture.anisotropy = renderer.getMaxAnisotropy();505 texture.magFilter = THREE.NearestFilter;506 const globeGeometry = new THREE.SphereGeometry(GLOBE_RADIUS, 128, 128);507 const globeMaterial = new THREE.MeshPhongMaterial({ map: texture });508 globeMaterial.map.minFilter = THREE.LinearFilter;509 const globe = new THREE.Mesh(globeGeometry, globeMaterial);510 cb(globeGeometry, globe);511 });512 } else if (GLOBE_STYLE === GLOBE_STYLE_POLYGON) {513 const waterMaterial = new THREE.MeshBasicMaterial({ color: 0x3D6F95});514 const globeObjGroup = new THREE.Group();515 const globe = new THREE.Mesh(globeGeometry, waterMaterial);516 globeObjGroup.add(globe);517 const landMaterial = new THREE.MeshBasicMaterial({518 color: 0xb2bf9d,519 side: THREE.FrontSide, shininess: 0520 });521 const fineness = 2; // The smaller this number, the worse the performance. However, if this number is big, the ConicPolygonGeometry will have parts in the middle where it sags below the globe size.522 loadJSON('/globe/countries.json', (data) => {523 const countryGroup = new THREE.Group();524 globeObjGroup.add(countryGroup);525 data.features.forEach(({properties, geometry}) => {526 const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates;527 polygons.forEach(coords => {528 const mesh = new THREE.Mesh(new THREE.ConicPolygonGeometry(coords, GLOBE_RADIUS*0.9, GLOBE_RADIUS, false, true, false, fineness), landMaterial);529 countryGroup.add(mesh);530 });531 });532 cb(globeGeometry, globeObjGroup);533 });534 } else {535 alert("Invalid globe style " + GLOBE_STYLE);536 }537 }538 createGlobe((globeGeometry, group) => {539 const atmosphereShader = {540 uniforms: {},541 vertexShader: `542 varying vec3 v_normal;543 void main() {544 v_normal = normalize(normalMatrix * normal);545 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);546 }547 `,548 fragmentShader: `549 varying vec3 v_normal;550 void main() {551 vec3 colour = vec3(0.6, 0.8, 1.0);552 float intensity = pow(0.5 - dot(v_normal, vec3(0.0, 0.0, 1.0)), 2.0);553 gl_FragColor = vec4(colour, 1.0) * intensity;554 }555 `,556 }557 const atmosphereMaterial = new THREE.ShaderMaterial({558 uniforms: atmosphereShader.uniforms,559 vertexShader: atmosphereShader.vertexShader,560 fragmentShader: atmosphereShader.fragmentShader,561 side: THREE.BackSide,562 blending: THREE.AdditiveBlending,563 transparent: true,564 });565 const atmosphereMesh = new THREE.Mesh(globeGeometry, atmosphereMaterial);566 atmosphereMesh.scale.set(1.3, 1.3, 1.3);567 globeGroup.add(atmosphereMesh);568 globeGroup.add(group);569 });570 const arcGroup = new THREE.Group();571 globeGroup.add(arcGroup);572 // Convert decimal LatLng to ECEF573 function latLngToVector(lat, lng, altitude = null) {574 // Y = 1 at north pole,575 // Y = -1 at south pole,576 const latRadians = lat * Math.PI / 180.0;577 const lngRadians = lng * Math.PI / 180.0;578 const vector = new THREE.Vector3();579 var N = GLOBE_RADIUS;580 if (altitude !== null) N = altitude;581 vector.x = N * Math.cos(latRadians) * Math.sin(lngRadians);582 vector.y = N * Math.sin(latRadians);583 vector.z = N * Math.cos(latRadians) * Math.cos(lngRadians);584 return vector;585 }586 function latLngMidpoint(lat1, lng1, lat2, lng2) {587 // Following https://stackoverflow.com/a/4656937588 var dLng = (lng2 - lng1) * Math.PI / 180.0;589 //convert to radians590 var lat1 = (lat1) * Math.PI / 180.0;591 var lat2 = (lat2) * Math.PI / 180.0;592 var lng1 = (lng1) * Math.PI / 180.0;593 var Bx = Math.cos(lat2) * Math.cos(dLng);594 var By = Math.cos(lat2) * Math.sin(dLng);595 var lat3 = Math.atan2(Math.sin(lat1) + Math.sin(lat2), Math.sqrt((Math.cos(lat1) + Bx) * (Math.cos(lat1) + Bx) + By * By));596 var lng3 = lng1 + Math.atan2(By, Math.cos(lat1) + Bx);597 return [(lat3) * 180.0 / Math.PI, (lng3) * 180.0 / Math.PI];598 }599 function mapToRange(inputLo, inputHi, outputLo, outputHi, input) {600 const slope = (outputHi - outputLo) / (inputHi - inputLo);601 return outputLo + slope * (input - inputLo);602 }603 // Returns distance in KM between given pair of points, as the crow flies.604 // Results are not exact, possibly because of assumption the earth is a sphere.605 // Examples: Munich -> Zurich is 242km.606 function latLngDistance(lat1, lng1, lat2, lng2) {607 // From https://stackoverflow.com/q/18883601608 const R = 6371; // Earth radius in km.609 const dLat = (lat2-lat1) * Math.PI / 180.0;610 const dLng = (lng2-lng1) * Math.PI / 180.0;611 const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos((lat1) * Math.PI / 180.0) * Math.cos((lat2) * Math.PI / 180.0) * Math.sin(dLng/2) * Math.sin(dLng/2); 612 const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));613 const d = R*c;614 return d;615 }616 function drawSurfaceArc(start, end, smoothness, width, colour) {617 // Following https://stackoverflow.com/a/42721392618 var cb = new THREE.Vector3();619 var ab = new THREE.Vector3();620 var normal = new THREE.Vector3();621 cb.subVectors(new THREE.Vector3(), end);622 ab.subVectors(start, end);623 cb.cross(ab);624 normal.copy(cb).normalize();625 var angle = start.angleTo(end);626 var angleDelta = angle/(smoothness-1);627 var geom = new THREE.Geometry();628 for (var i = 0; i < smoothness; i++) {629 geom.vertices.push(start.clone().applyAxisAngle(normal, angleDelta*i));630 }631 var arc = new THREE.Line(geom, new THREE.LineBasicMaterial({color: colour, linewidth: width}));632 globeGroup.add(arc);633 }634 // [start, controlPoint, end] should all be Vector3.635 function drawRaisedArc(start, controlPoint, end, smoothness, width, colour, leg) {636 const curve = new THREE.QuadraticBezierCurve3(start, controlPoint, end);637 const points = curve.getPoints(smoothness);638 const geom = new THREE.BufferGeometry().setFromPoints(points);639 const material = new THREE.LineBasicMaterial({ color: colour, linewidth: width, transparent: true, opacity: 0.35});640 const arc = new THREE.Line(geom, material);641 arc.material.visible = false;642 arc.userData.leg = leg;643 arcGroup.add(arc);644 }645 function drawPoint(pos, radius, height, colour, label, clusterOrNull, isCluster, isTownCluster, visitObj) {646 const pointObj = new THREE.Group();647 pointObj.position.copy(pos);648 pointObj.lookAt(0, 0, 0);649 // TODO(iandioch): these should be put in userData650 pointObj.locationName = label;651 pointObj.hasCluster = !!clusterOrNull;652 pointObj.cluster = clusterOrNull;653 pointObj.isCluster = isCluster;654 pointObj.isTownCluster = isTownCluster;655 pointObj.visit = visitObj;656 const margin = radius*0.25;657 const baseGeom = new THREE.CircleGeometry(radius + margin, 8);658 const baseMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, side: THREE.BackSide});659 const base = new THREE.Mesh(baseGeom, baseMaterial);660 base.origMaterial = baseMaterial;661 pointObj.add(base);662 const geom = new THREE.CylinderGeometry(radius, radius*0.8, height, 8, 1, true);663 geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));664 const sphereGeom = new THREE.SphereGeometry(radius, 8, 4, Math.PI, Math.PI, 0, Math.PI);665 const sphere = new THREE.Mesh(sphereGeom);666 sphere.position.z -= height/2;667 geom.mergeMesh(sphere);668 geom.mergeVertices();669 const material = new THREE.MeshBasicMaterial({color: colour});670 const point = new THREE.Mesh(geom, material);671 point.origMaterial = material;672 point.position.z = -height/2;673 pointObj.add(point);674 const div = document.createElement("div");675 div.textContent = label;676 div.classList.add("poi-tooltip");677 div.style.visibility = "hidden";678 const labelDiv = new CSS2DObject(div);679 labelDiv.position.set(0, margin, 0);680 pointObj.add(labelDiv);681 pointGroup.add(pointObj);682 }683 var visits = {};684 var legs = [];685 var collections = [];686 function loadTravelMap(url) {687 loadJSON(url, (data) => {688 legs = data.legs;689 collections = data.collections;690 var highestVisits = 0;691 var mostVisited = undefined;692 for (var i in data.visits) {693 // Do not consider clusters of points when calculating the most-visited places.694 // We want the height of clusters to be the height of the highest695 // component part, so this 696 if (data.visits[i].location.type === "CLUSTER") continue;697 var numVisits = data.visits[i].hours;698 if (numVisits > highestVisits) {699 highestVisits = numVisits;700 mostVisited = data.visits[i];701 }702 }703 if (mostVisited) {704 lookAt(mostVisited.location.lat, mostVisited.location.lng, 2);705 }706 const highestVisitsLog10 = Math.log10(highestVisits);707 var colourScale = chroma.scale(["navy", "purple", 0xDC6F3D, 0xe9c440]).mode('lch').gamma(0.5);708 for (var i in data.visits) {709 const visit = data.visits[i];710 visits[visit.location.id] = visit;711 var radius = 0.003;712 if (visit.location.type === "CLUSTER") {713 radius *= 1.5;714 }715 var visitHours = visit.hours;716 if (visit.location.type === "CLUSTER") {717 visitHours = Math.max(...data.visits.filter(subVisit => (subVisit.location.type !== "CLUSTER" && subVisit.cluster === visit.location.id)).map(v => v.hours));718 }719 const colour = colourScale(Math.log10(visitHours)/Math.log10(highestVisits)).hex();720 const MIN_HEIGHT = GLOBE_RADIUS/100;721 const MAX_HEIGHT = GLOBE_RADIUS/15;722 // Use a log-based height, because in a normal case, the place where723 // you live will have an order of magnitude more visit time than724 // other places you've visited, and will be 100s of times larger in725 // a linear scale.726 const MAX_LOG_HEIGHT = MAX_HEIGHT/2;727 let height = MIN_HEIGHT + (Math.log10(visitHours)/highestVisitsLog10)*MAX_LOG_HEIGHT;728 // However, also use a linear-scaled height in addition, because729 // we don't want somewhere you stayed for 1000 hours to be the same730 // height at a glance as somewhere you stayed for 120.731 height += (visitHours / highestVisits)*(MAX_HEIGHT - MAX_LOG_HEIGHT - MIN_HEIGHT);732 const label = visit.location.human_readable_name;733 const cluster = (visit.hasOwnProperty("cluster") ? visit.cluster : null);734 drawPoint(latLngToVector(visit.location.lat, visit.location.lng), radius, height, colour, label, cluster, (visit.location.type === "CLUSTER"), (visit.location.type === "TOWN_CLUSTER"), visit);735 }736 for (var i in data.legs) {737 const leg = data.legs[i];738 if (leg.mode === "FILL") {739 // These are auto-added to make all legs into one continuous route.740 continue;741 }742 const legDistance = latLngDistance(leg.dep.lat, leg.dep.lng, leg.arr.lat, leg.arr.lng);743 const globeCircumference = 40000;744 const controlPointHeight = mapToRange(0, globeCircumference, GLOBE_RADIUS, GLOBE_RADIUS * 3, legDistance);745 const smoothness = Math.ceil(mapToRange(0, globeCircumference, 4, 64, legDistance));746 const midpoint = latLngMidpoint(leg.dep.lat, leg.dep.lng, leg.arr.lat, leg.arr.lng);747 drawRaisedArc(latLngToVector(leg.dep.lat, leg.dep.lng), latLngToVector(midpoint[0], midpoint[1], controlPointHeight), latLngToVector(leg.arr.lat, leg.arr.lng), smoothness, 3, 0xFFFFFF, leg);748 }749 dashboard.loadData(data);750 if (urlParams.has("collection")) {751 for (const collection of collections) {752 if (collection.id == urlParams.get("collection")) {753 renderInfoForCollection(collection);754 }755 }756 }757 });758 }759 loadTravelMap('/taisteal/api/travel_map');760 // Make semitransparent most plcaes except the one the user just clicked on.761 // If specificLegs is set, only those legs will be rendered.762 function toggleRoutesForSelectedVisits(locationIDs, showLegs = true, showConnectedLocations = true, specificLegs = null) {763 showLegs = showLegs && (!specificLegs);764 const visitSet = new Set(locationIDs);765 // Build up a set of everywhere that shares a leg with these visitNames.766 const connectedVisitSet = new Set(locationIDs);767 for (let i in arcGroup.children) {768 const arc = arcGroup.children[i];769 const leg = arc.userData.leg;770 var visible = false;771 if (visitSet.has(leg.arr.id)) {772 if (showConnectedLocations) connectedVisitSet.add(leg.dep.id);773 visible = true;774 } else if (visitSet.has(leg.dep.id)) {775 if (showConnectedLocations) connectedVisitSet.add(leg.arr.id);776 visible = true;777 }778 visible = visible && showLegs;779 if (specificLegs) {780 for (const specificLeg of specificLegs) {781 if (leg.arr.id == specificLeg.arr.id && leg.dep.id == specificLeg.dep.id) {782 visible = true;783 }784 }785 }786 arc.material.visible = visible;787 }788 // Also add any relevant clusters to the set, so that if we zoom in/out789 // the clusters will be shown as needed in place of the specific locations.790 // TODO(iandioch): If a station, which is a member of a TOWN_CLUSTER, is clicked, the associated town's own cluster will not be rendered if you zoom out.791 for (let i in visits) {792 const visit = visits[i];793 if (!('cluster' in visit)) continue;794 if (connectedVisitSet.has(visit.location.id)) {795 connectedVisitSet.add(visit.cluster);796 }797 }798 // Make semitransparent all of the pins not in the connectedVisitSet.799 const inactiveBaseMaterial = new THREE.MeshPhongMaterial({800 color: 0xffffff,801 opacity: 0.5,802 transparent: true,803 side: THREE.DoubleSide,804 shininess: 0,805 });806 const inactivePointMaterial = new THREE.MeshPhongMaterial({807 color: 0xdddddd,808 opacity: 0.5,809 transparent: true,810 side: THREE.DoubleSide,811 shininess: 0812 });813 for (let i in pointGroup.children) {814 const pointParent = pointGroup.children[i];815 const visible = connectedVisitSet.has(pointParent.visit.location.id);816 var baseMaterial = pointParent.children[0].origMaterial;817 var pointMaterial = pointParent.children[1].origMaterial;818 if (!visible) {819 baseMaterial = inactiveBaseMaterial;820 pointMaterial = inactivePointMaterial;821 }822 pointParent.children[0].material = baseMaterial;823 pointParent.children[1].material = pointMaterial;824 }825 }826 // TODO: Rename, because it has nothing to do with the name of a location827 // anymore.828 function getPointForName(location_id) {829 // TODO: it'd be more useful to just return here visits[location_id].830 // Check if anything actually needs the point obj.831 for (let i in pointGroup.children) {832 const point = pointGroup.children[i];833 if (point.visit.location.id == location_id) return point;834 }835 return null;836 }837 function getLegsForCollection(collection) {838 const collectionLegs = [];839 for (const part of collection.parts) {840 if (part.leg_id) {841 for (const leg of legs) {842 if (part.dep.id == leg.dep.id && part.arr.id == leg.arr.id) {843 collectionLegs.push(leg);844 }845 }846 }847 }848 return collectionLegs;849 }850 function getLocationsForCollection(collection) {851 const legs = getLegsForCollection(collection);852 const locationIDs = new Set();853 for (const leg of getLegsForCollection(collection)) {854 locationIDs.add(leg.dep.id);855 locationIDs.add(leg.arr.id);856 }857 const locations = [];858 for (const id of locationIDs) {859 locations.push(visits[id]);860 }861 return locations;862 }863 function getClusterMembers(location_id) {864 const point = getPointForName(location_id);865 var locations = [];866 if (point.isCluster || point.isTownCluster) {867 const clusterName = point.visit.location.id;868 for (let i in visits) {869 if (visits[i].hasOwnProperty("cluster") && (visits[i].cluster == location_id)) {870 const members = getClusterMembers(visits[i].location.id);871 locations.push(...members);872 }873 }874 } else {875 locations.push(point.visit.location.id);876 }877 return locations;878 }879 function renderInfoForPOI(location_id) {880 console.log("Rendering info for clicked point: ", location_id);881 const point = getPointForName(location_id);882 const locations = getClusterMembers(location_id);883 const locationObjs = [];884 for (const loc of locations) {885 locationObjs.push(visits[loc]);886 }887 toggleRoutesForSelectedVisits(locations);888 dashboard.renderPOI(point, locationObjs);889 lookAt(point.visit.location.lat, point.visit.location.lng, getCameraDistance());890 }891 function renderInfoForCountry(countryName) {892 const visits = getVisitsForCountry(countryName);893 dashboard.renderCountry(countryName, visits);894 var locationNames = [];895 for (let i in visits) {896 locationNames.push(visits[i].location.id);897 }898 toggleRoutesForSelectedVisits(locationNames, true, false);899 }900 function renderInfoForRegion(countryName, regionName) {901 const visits = getVisitsForCountry(countryName);902 const regionVisits = [];903 const regionLocationIDs = [];904 for (let i in visits) {905 if (visits[i].location.region == regionName) {906 regionVisits.push(visits[i]);907 regionLocationIDs.push(visits[i].location.id);908 }909 }910 dashboard.renderCountry(regionName, regionVisits);911 toggleRoutesForSelectedVisits(regionLocationIDs, true, false);912 }913 function renderInfoForCollection(collection) {914 console.log("Rendering info for collection", collection);915 const locationIDs = new Set();916 for (const leg of getLegsForCollection(collection)) {917 locationIDs.add(leg.dep.id);918 locationIDs.add(leg.arr.id);919 }920 console.log("Location IDs:", locationIDs);921 dashboard.renderCollection(collection);922 toggleRoutesForSelectedVisits([...locationIDs], true, false, getLegsForCollection(collection));923 }924 // Returns true if we needed to resize.925 function resizeRendererToDisplaySize(renderer) {926 const canvas = renderer.domElement;927 const needResize = (canvas.width !== canvas.clientWidth ||928 canvas.height !== canvas.clientHeight);929 if (needResize) {930 renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);931 labelRenderer.setSize(canvas.width, canvas.height);932 }933 return needResize;934 }935 var highlightedPoint; 936 var colourBeforeHighlight;937 var tooltipDiv = document.createElement('div');938 tooltipDiv.textContent = "Ros na Rún";939 tooltipDiv.style.marginTop = '-1em';940 const tooltipLabel = new CSS2DObject(tooltipDiv);941 tooltipLabel.position.set(0, GLOBE_RADIUS, 0);942 function updateHighlightedPoint() {943 function revertHighlightedPoint() {944 if (!highlightedPoint) return;945 /*highlightedPoint.children[1].material.color.setHex(colourBeforeHighlight);*/946 highlightedPoint.children[2].element.style.visibility = "hidden";947 }948 raycaster.setFromCamera(mouse, camera);949 var intersectedPoints = raycaster.intersectObjects(pointGroup.children, true);950 if (intersectedPoints.length > 0) {951 for (var i in intersectedPoints) {952 if (!intersectedPoints[i].object.material.visible) continue;953 // First point is the one closest to camera.954 const pointParent = intersectedPoints[i].object.parent;955 if (pointParent != highlightedPoint) {956 revertHighlightedPoint();957 highlightedPoint = pointParent;958 /*colourBeforeHighlight = pointParent.children[1].material.color.getHex();959 pointParent.children[1].material.color.setHex(0x000000);960 */pointParent.children[2].element.style.visibility = "visible";961 }962 break;963 }964 } else {965 // No currently intersected points.966 revertHighlightedPoint();967 highlightedPoint = null; // Delete prev highlight, if it exists.968 }969 }970 function getCameraDistance() {971 return camera.position.distanceTo(controls.target);972 }973 function lookAt(lat, lng, distance) {974 console.log("Tweening camera to ", lat, ", ", lng, " at distance ", distance);975 TWEEN.removeAll();976 // TODO: Instead need to do latLngToVector(lat, lng) plus some other vector of distance*(some direction)977 const newCameraPos = latLngToVector(lat, lng, distance);978 //newCameraPos.add(new THREE.Vector3(0, 0, 0).lookAt(979 //newCameraPos.addScaledVector(new THREE.Vector3(1, 0, 0).lookAt(new THREE.Vector3(0, 0, 0), distance));980 new TWEEN.Tween(camera.position).to(newCameraPos, 500).easing(TWEEN.Easing.Cubic.Out).start();981 /*const newCameraTarget = latLngToVector(lat, lng);982 new TWEEN.Tween(controls.target).to(newCameraTarget, 500).easing(TWEEN.Easing.Cubic.Out).start();*/983 }984 // If we receive any touch event, set this value.985 var TOUCH_SCREEN = false; 986 function setMousePosition(x, y) {987 const canvasRect = renderer.domElement.getBoundingClientRect();988 x -= canvasRect.left;989 y -= canvasRect.top;990 mouse.x = (x / renderer.domElement.clientWidth) * 2 - 1;991 mouse.y = -(y / renderer.domElement.clientHeight) * 2 + 1;992 }993 function onMouseMove(event) {994 event.preventDefault();995 setMousePosition(event.clientX, event.clientY);996 }997 function onMouseDown(event) {998 console.log("onMouseDown: " + event);999 event.preventDefault();1000 if (("targetTouches" in event) && (event.targetTouches.length == 1)) {1001 // Update "mouse" position for touchscreens. Do not do so for pinch-zooms.1002 TOUCH_SCREEN = true;1003 setMousePosition(event.targetTouches[0].clientX, event.targetTouches[0].clientY);1004 }1005 updateHighlightedPoint();1006 if (highlightedPoint) {1007 renderInfoForPOI(highlightedPoint.visit.location.id);1008 }1009 }1010 var prevCameraDistance = 0;1011 function onZoomChange() {1012 // It seems that the iterations we're doing when zooming are extremely1013 // slow, so we should try to avoid doing them if possible.1014 const cameraDistance = getCameraDistance();1015 if (cameraDistance === prevCameraDistance) {1016 return;1017 }1018 prevCameraDistance = cameraDistance;1019 const scale = mapToRange(MIN_CAMERA_DISTANCE, MAX_CAMERA_DISTANCE, 0.2, 5, cameraDistance);1020 const showClusters = (cameraDistance > MAX_CAMERA_DISTANCE/2.0);1021 const showLocalClusters = (cameraDistance > MIN_CAMERA_DISTANCE*1.1);1022 for (var i in pointGroup.children) {1023 const point = pointGroup.children[i];1024 point.scale.set(scale, scale, scale);1025 if (point.isCluster) {1026 point.visible = showClusters;1027 }1028 if (point.hasCluster) {1029 const clusterPoint = getPointForName(point.visit.cluster);1030 if (clusterPoint.isTownCluster) {1031 point.visible = !showLocalClusters;1032 } else {1033 point.visible = !showClusters;1034 }1035 }1036 }1037 }1038 controls.addEventListener('end', onZoomChange);1039 var lastTime = 0;1040 var frameCount = 0;1041 function render(time) {1042 frameCount ++;1043 if (frameCount % 100 == 0) {1044 const elapsedSeconds = (time - lastTime) * 0.001;1045 console.info("Frame #", frameCount, ": ", 1/elapsedSeconds, "fps");1046 console.log("Scene polycount:", renderer.info.render.triangles)1047 console.log("Active Drawcalls:", renderer.info.render.calls)1048 console.log("Textures in Memory", renderer.info.memory.textures)1049 console.log("Geometries in Memory", renderer.info.memory.geometries)1050 }1051 lastTime = time;1052 const seconds = time * 0.001;1053 const cameraDistance = getCameraDistance();1054 // Only update the highlighted point if it is not a touchscreen. If it1055 // is a touchscreen, and we touch somewhere with a swipe, the globe will1056 // spin, and if any point happens to be under the place we touched as1057 // the globe spins, it will activate without this !TOUCH_SCREEN check.1058 if (!TOUCH_SCREEN) updateHighlightedPoint();1059 controls.rotateSpeed = mapToRange(MIN_CAMERA_DISTANCE, MAX_CAMERA_DISTANCE, 0.1, 1.0, cameraDistance);1060 TWEEN.update();1061 controls.update();1062 if (resizeRendererToDisplaySize(renderer)) {1063 const canvas = renderer.domElement;1064 camera.aspect = canvas.clientWidth / canvas.clientHeight;1065 camera.updateProjectionMatrix();1066 }1067 renderer.render(scene, camera);1068 labelRenderer.render(scene, camera);1069 requestAnimationFrame(render);1070 }1071 requestAnimationFrame(render);...
missingDocs.js
Source:missingDocs.js
...159 }160 /**161 * @param {!ts.Node} node162 */163 function visitNames(node) {164 if (ts.isExportSpecifier(node))165 apiClassNames.add(node.name.text);166 ts.forEachChild(node, visitNames);167 }168 visitNames(apiSource);169 visitMethods(apiSource);170 return apiMethods;...
AppliedFilters.js
Source:AppliedFilters.js
1import {StyleSheet, Text, View} from "react-native";2import React from 'react';3import Colors from "../primitives/Colors";4import AbstractComponent from "../../framework/view/AbstractComponent";5import General from "../../utility/General";6export default class AppliedFilters extends AbstractComponent {7 static styles = StyleSheet.create({8 container: {9 flexDirection: 'column',10 justifyContent: 'flex-start',11 },12 });13 renderContent(label, content, contentSeparator) {14 const separator = _.isNil(contentSeparator) ? '' : contentSeparator;15 return <Text key={label}>16 <Text style={{17 fontSize: 14,18 color: Colors.TextOnPrimaryColor,19 fontWeight: 'bold',20 }}>{label} - </Text>21 <Text style={{22 fontSize: 14,23 color: Colors.TextOnPrimaryColor,24 }}>{content}{separator}</Text>25 </Text>26 }27 renderFilteredLocations() {28 if (this.props.selectedLocations.length > 0) {29 const allUniqueTypes = _.uniqBy(_.map(this.props.selectedLocations, ({type}) => ({type})), 'type');30 return allUniqueTypes.map((l, index) => this.renderContent(this.I18n.t(l.type),31 _.get(_.groupBy(this.props.selectedLocations, 'type'), l.type, []).map((locations) => this.I18n.t(locations.name)).join(", "),32 index === this.props.selectedLocations.length - 1 ? ' ' : ' | '));33 }34 }35 renderFilteredPrograms() {36 if (this.props.programs.length > 1 && this.props.selectedPrograms.length > 0) {37 const programNames = this.props.selectedPrograms.map((prog) => this.I18n.t(prog.operationalProgramName || prog.name));38 return this.renderContent(this.I18n.t('Program'), programNames.join(', '))39 }40 }41 renderFilteredVisits() {42 if (this.props.selectedEncounterTypes.length > 0) {43 const visitNames = this.props.selectedEncounterTypes.map((encType) => this.I18n.t(encType.operationalEncounterTypeName));44 return this.renderContent(this.I18n.t('Visit'), visitNames.join(', '))45 }46 }47 renderFilteredGeneralVisits() {48 if (!_.isEmpty(this.props.selectedGeneralEncounterTypes)) {49 const visitNames = _.map(this.props.selectedGeneralEncounterTypes, 'operationalEncounterTypeName')50 .map(x => this.I18n.t(x))51 .join(', ');52 return this.renderContent(this.I18n.t('General Visit'), visitNames);53 }54 }55 renderCustomFilters() {56 const readableTime = (dateType, value) => dateType && General.toDisplayDate(value) || value;57 const filterValue = (value) => [58 this.I18n.t(value.name || value.value || readableTime(value.dateType, value.minValue) || ''),59 this.I18n.t(value.maxValue && readableTime(value.dateType, value.maxValue) || '')60 ].filter(Boolean).join(" to ");61 if (!_.isEmpty(this.props.selectedCustomFilters)) {62 const nonEmptyFilters = _.pickBy(this.props.selectedCustomFilters, (v, k) => !_.isEmpty(v));63 const filters = Object.keys(nonEmptyFilters);64 return _.map(filters, filter => {65 const answers = nonEmptyFilters[filter].map(filterValue).join(", ");66 return this.renderContent(this.I18n.t(filter), answers);67 })68 }69 }70 renderGenderFilters() {71 if (!_.isEmpty(this.props.selectedGenders)) {72 const genderNames = _.map(this.props.selectedGenders, gender => this.I18n.t(gender.name)).join(", ");73 return this.renderContent(this.I18n.t('gender'), genderNames);74 }75 }76 render() {77 const appliedFilters = [...this.props.filters.values()]78 .filter(f => f.isApplied())79 .map((f) => this.renderContent(f.label, f.selectedOptions.join(', ')));80 return (81 <View style={AppliedFilters.styles.container}>82 <Text>83 {this.renderFilteredLocations()}84 </Text>85 {this.renderFilteredPrograms()}86 {this.renderFilteredVisits()}87 {this.renderFilteredGeneralVisits()}88 {this.renderCustomFilters()}89 {this.renderGenderFilters()}90 {appliedFilters}91 </View>92 );93 }...
export-util.js
Source:export-util.js
1angular.module('os.biospecimen.participant')2 .factory('ExportUtil', function($translate) {3 function addForms(exportTypes, group, entityType, input, forms) {4 angular.forEach(forms,5 function(form) {6 exportTypes.push({7 group: group,8 type: 'extensions',9 title: form.caption,10 '$$input': input,11 params: { entityType: entityType, formName: form.name }12 });13 });14 return exportTypes;15 }16 function msg(key) {17 return $translate.instant(key);18 }19 function getParticipantTypes(entityForms, cpId) {20 var group = $translate.instant('participant.title');21 var input = {'var': 'ppids', varName: 'participant.ppids', varDesc: 'participant.ppids_csv'};22 var exportTypes = [23 { group: group, type: 'cpr', title: msg('participant.list'), '$$input': input },24 { group: group, type: 'consent', title: msg('participant.consents'), '$$input': input }25 ];26 addForms(exportTypes, group, 'CommonParticipant', input, entityForms['CommonParticipant']);27 return addForms(exportTypes, group, 'Participant', input, entityForms['Participant']);28 } 29 function getVisitTypes(entityForms) {30 var group = $translate.instant('visits.title');31 var input = {'var': 'visitNames', varName: 'visits.names', varDesc: 'visits.names_csv'};32 var exportTypes = [{ group: group, type: 'visit', title: msg('visits.list'), '$$input': input }];33 return addForms(exportTypes, group, 'SpecimenCollectionGroup', input, entityForms['SpecimenCollectionGroup']);34 }35 function getSpecimenTypes(cp, entityForms) {36 var group = $translate.instant('specimens.title');37 var input = {'var': 'specimenLabels', varName: 'specimens.labels', varDesc: 'specimens.labels_csv'};38 var exportTypes = [{ group: group, type: 'specimen', title: msg('specimens.list'), '$$input': input }]39 addForms(exportTypes, group, 'Specimen', input, entityForms['Specimen']);40 return addForms(exportTypes, group, 'SpecimenEvent', input, entityForms['SpecimenEvent']);41 }42 function getExportDetail(cp, allowedEntityTypes, forms) {43 var breadcrumbs, onSuccess;44 if (cp.id == -1) {45 breadcrumbs = [{state: 'cp-list', title: 'cp.list'}];46 onSuccess = {state: 'cp-list', params: {}};47 } else {48 breadcrumbs = [{state: 'cp-list-view', title: cp.shortTitle, params: '{cpId:' + cp.id + '}'}];49 onSuccess = {state: 'cp-list-view', params: {cpId: cp.id}};50 }51 var entityForms = {};52 angular.forEach(forms,53 function(form) {54 if (!entityForms[form.entityType]) {55 entityForms[form.entityType] = [];56 }57 entityForms[form.entityType].push(form);58 }59 );60 var exportTypes = [];61 if (!cp.specimenCentric && allowedEntityTypes.indexOf('Participant') >= 0) {62 exportTypes = exportTypes.concat(getParticipantTypes(entityForms, cp.id));63 }64 if (!cp.specimenCentric && allowedEntityTypes.indexOf('SpecimenCollectionGroup') >= 0) {65 exportTypes = exportTypes.concat(getVisitTypes(entityForms));66 }67 if (allowedEntityTypes.indexOf('Specimen') >= 0) {68 exportTypes = exportTypes.concat(getSpecimenTypes(cp, entityForms));69 }70 angular.forEach(exportTypes,71 function(exportType) {72 if (!exportType.params) {73 exportType.params = {};74 }75 exportType.params.cpId = cp.id;76 }77 );78 return {79 breadcrumbs: breadcrumbs,80 title: 'export.title',81 type: undefined,82 onSuccess: onSuccess,83 types: exportTypes,84 params: {85 cpId: cp.id86 }87 };88 }89 return {90 getExportDetail: function(cp, allowedEntityTypes, forms) {91 return $translate('common.none').then(92 function() {93 return getExportDetail(cp, allowedEntityTypes, forms);94 }95 );96 }97 }...
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('text=Docs');8 await page.click('text=API');9 await page.click('text=Class: Page');10 await page.click('text=page.visitName');11 await browser.close();12 }13})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 await page.click('text=Docs');6 const [response] = await Promise.all([7 page.click('text=Intro'),8 ]);9 const allLinks = await page.$$eval('a', (links) => links.map((link) => link.href));10 console.log(allLinks);11 await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch({ headless: false });16 const page = await browser.newPage();17 await page.click('text=Docs');18 const [response] = await Promise.all([19 page.click('text=Intro'),20 ]);21 const allLinks = await page.$$eval('a', (links) => links.map((link) => link.href));22 console.log(allLinks);23 await browser.close();24})();
Using AI Code Generation
1const { visitNames } = require('@playwright/test');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await browser.close();8})();
Using AI Code Generation
1const { visitNames } = require('playwright/lib/server/chromium/crNetworkManager');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const visited = await visitNames(page);8 console.log(visited);9 await browser.close();10})();11#### browserType.launch([options])
Using AI Code Generation
1const { visitNames } = require('playwright/lib/internal');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.screenshot({ path: `example.png` });8 const visitedPages = visitNames(page);9 console.log(visitedPages);10 await browser.close();11})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const links = await page.$$eval('a', (links) => {6 return links.map((link) => link.textContent);7 });8 for (const link of links) {9 await page.click(`text=${link}`);10 await page.goBack();11 }12 await browser.close();13})();
Using AI Code Generation
1const { visitNames } = require('playwright-internal');2(async () => {3 console.log(names);4})();5### visitNames(url, options)6[Apache-2.0](LICENSE)
Using AI Code Generation
1const { visitNames } = require('@playwright/test');2## Run the test in headless mode with verbose logging and test name filter (regex)3## Run the test in headless mode with verbose logging and test name filter (regex) and test file name filter (regex)4## Run the test in headless mode with verbose logging and test name filter (regex) and test file name filter (regex) and save the results to a file5## Run the test in headless mode with verbose logging and test name filter (regex) and test file name filter (regex) and save the results to a file and run in parallel6## Run the test in headless mode with verbose logging and test name filter (regex) and test file name filter (regex) and save the results to a file and run in parallel and set the timeout to 30 seconds7## Run the test in headless mode with verbose logging and test name filter (regex) and test file name filter (regex) and save the results
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Get 100 minutes of automation test minutes FREE!!