31:Tcda,function risMap(props) { const g = d3.select("react-map-group") const svgRef = useRef(null) const [matrix, setMatrix] = useState([1, 0, 0, 1, 0, 0]) const [startPos, setStartPos] = useState({x: 0, y: 0}) const [dragging, setDragging] = useState(false) const [countryDetails, setCountryDetails] = useState({name: null, collectors: [], peers: []}) const [showModal, setShowModal] = useState(null) const pan = (dx, dy) => { const m = matrix m[4] += dx m[5] += dy setMatrix([...m]) } const zoom = scale => { const m = matrix const len = m.length; for (let i = 0; i < len; i++) { m[i] *= scale; } m[4] += (1 - scale) * w / 2 m[5] += (1 - scale) * h / 2 setMatrix([...m]) resizeElementsOnZoom(m[0]) } const onDragStart = e => { setStartPos({ x: e.clientX, y: e.clientY }) setDragging(true) } const onDragMove = e => { if (!dragging) return; pan(e.clientX - startPos.x, e.clientY - startPos.y) setStartPos({ x: e.clientX, y: e.clientY }) } const onDragEnd = e => setDragging(false) const setSelected = (country, index, collectors, peers) => { const prevActive = d3.select(".selected-country") const active = d3.select(`#country-path-${index}`) if (prevActive.node() !== null) { prevActive.classed("selected-country", false) setCountryDetails({name: null, collectors: [], peers: []}) } if (active.node() !== prevActive.node()) { active.classed("selected-country", true) setCountryDetails({ name: country.name, collectors, peers }) } } const showRrcModal = rrc => { console.log('showRrcModal!', rrc) setShowModal(rrc) } const hideRrcModal = () => setShowModal(null) return jsx` ${ZoomControls({zoom})}

${Sidepanel({ countryDetails, showRrcModal })}

${Modal({ rrc: showModal ? rrc_loc.find(c => c.name === showModal) : '', closeModal: hideRrcModal, })}

` }32:T4b2,function Country(props) { const { c, i, setSelected } = props const country = matchingCountry(c) const collectors = rrcsInCountry(country) const peers = peersInCountry(country) const hasCollector = collectors.length > 0 const hasPeer = peers.length > 0 const getFillColor = () => { if (!country) return '#fafafa' if (hasCollector) return '#6f6f6f' if (hasPeer) return '#bfbfbf' return '#fafafa' } const selectable = hasCollector || hasPeer return jsx` { if (selectable) { e.target.style.opacity = 1 e.target.style.stroke="rgb(32, 44, 79)" } }} onMouseLeave=${e => { if (selectable) { e.target.style.opacity = 0.7 e.target.style.stroke="#bbb" } }} onClick=${() => selectable ? setSelected(country, i, collectors, peers) : null} /> ` }33:T541,function Sidepanel(props) { const { countryDetails, showRrcModal } = props const [activeTab, setActiveTab] = useState('coll') const {headers, tableData} = sidebarTableData(countryDetails, activeTab) const numColls = countryDetails.collectors.length const numPeers = () => { const peerNum = countryDetails.peers.length const collPeers = countryDetails.collectors.map(c => c.peers.length).reduce((a,b) => {return a+b}, 0) return peerNum + collPeers } const boxContent = jsx`

RRCs in country: ${numColls}

Peers in country: ${numPeers()}

` return jsx`

${ExpandingBox({ title: countryDetails.name, open: false, children: boxContent})}

setActiveTab('coll')} >

Collectors

setActiveTab('peer')} >

Peers

${Table({headers, tableData, showRrcModal})}

` }34:T533,function ExpandingBox(props) { const [expanded, setExpanded] = useState(true) const { title, open, children } = props useEffect(() => { if (open) setExpanded(true) }, []) return jsx`

setExpanded(!expanded)} >

${title}

${expanded && jsx`

${ children }

` }35:T913,function Modal(props) { const { rrc, closeModal } = props const headers = ['IP', 'ASN', 'prefix# v4', 'full_feed_v4', 'prefix# v6', 'full_feed_v6'] const tableData = rrc.hasOwnProperty('peers') ? rrc.peers.map(p => ({ ip: p.ip, asn: p.asn, v4prefix: p.v4_prefix_count, full_feed_v4: p.is_full_feed_v4 ? 'true' : 'false', v6prefix: p.v6_prefix_count, full_feed_v6: p.is_full_feed_v6 ? 'true' : 'false', })) : [] const boxContent = jsx` ` return jsx` ` }36:T7f8,function ZoomControls(props) { const { zoom } = props return jsx`

` }37:T568,function sidebarTableData(countryDetails, activeTab) { if (activeTab === 'coll') { const headers = ['Name', 'Location', 'Peers'] const tableData = countryDetails.collectors.map(c => ({ name: c.name, location: c.geographical_location.split(',')[0], peers: c.peers.length })) return {headers: headers, tableData: tableData} } else if (activeTab === 'peer') { const headers = ['IP', 'RRC', 'prefix# v4', 'prefix# v6'] const extrapeers = countryDetails.collectors.map(c => { const peersOfInCountryCollectors = c.peers.map(p => ({ ip: p.ip, rrc: c.name, v4prefix: p.v4_prefix_count, v6prefix: p.v6_prefix_count, })) return peersOfInCountryCollectors }) const tableData = [ ...countryDetails.peers.map(p => { const currPeerDetails = rrc_loc .filter(x => x.deactivated_on === "") .find(r => r.name === p.rrc) .peers.find(x => x.ip === p.ip) const peerExists = !!currPeerDetails return { ip: p.ip, rrc: p.rrc, v4prefix: peerExists ? currPeerDetails.v4_prefix_count : 0, v6prefix: peerExists ? currPeerDetails.v6_prefix_count : 0, } }), ...extrapeers.flat(), ] return {headers: headers, tableData: tableData} } }38:[] 2f:{"title":"RIS connections","cells":[{"id":1541,"value":"md`# RIS connections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"render(() => jsx`<${risMap} />`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"{\n if (!!selectedCollector.rrc) return\n return html`\n

Details of selected collector

Selected node: ${selectedCollector.name}

Multihop: ${selectedCollector.multihop}

Number of peers: ${selectedCollector.peers.length}

Full feed peers v4: ${selectedCollector.peers.filter(p => p.is_full_feed_v4 === true).length}

Full feed peers v6: ${selectedCollector.peers.filter(p => p.is_full_feed_v6 === true).length}

Geographical location: ${selectedCollector.geographical_location}

\n\n\n\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`***\n#### // components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"function Collector(props) {\n const { c, i } = props\n return jsx`\n { mutable selectedCollector = c }}\n />\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function Peer(props) {\n const { p, i } = props\n return jsx`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"function Connection(props) {\n const { l, i } = props\n \n return jsx`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"html`\n

[Sidepanel related styles]

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"html`\n

[ExpandingBox related styles]

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"function Table(props) {\n const { headers, tableData, showRrcModal } = props\n return jsx`\n

\n \n \n ${headers.map((h,i) => jsx`\n \n `)}\n \n \n \n ${tableData.map((d,i) => jsx`\n \n ${Object.keys(d).map((k,j) => jsx`\n ${\n k === 'name'\n ? jsx`\n showRrcModal(d[k])}\n >\n ${d[k]}\n \n `\n : jsx``\n }\n `)}\n \n `)}\n \n

${h}
${d[k]}

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"html`\n

[Table related styles]

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"html`\n

[rrcModal related styles]

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"md`***\n#### // helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"matchingCountry = function(d) {\n return countryListAllIsoData.find(x => x.number==d.id)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"rrcsInCountry = function (country) {\n if (!country) return []\n return rrc_loc.filter(x => {\n const rrcLocStrArr = x.geographical_location.split(', ')\n const rrcLocCountry = rrcLocStrArr[rrcLocStrArr.length - 1]\n return ( country.name.match(rrcLocCountry) || rrcLocCountry.match(country.name))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"peersInCountry = function (country) {\n if (!country) return []\n return peer_loc.filter(x => {\n const locStrArr = x.location.split(',')\n const countryCode = locStrArr[locStrArr.length-1] \n return countryCode === country.code\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"function resizeElementsOnZoom(zoomLevel) {\n d3.selectAll('.peer')\n .attr('r', d3.max([3/zoomLevel, 0.3]))\n d3.selectAll('.collector')\n .attr('r', d3.max([5/zoomLevel, 0.5]))\n .attr('stroke-width', d3.max([2/zoomLevel, 0.1]))\n d3.selectAll('.conn-line')\n .attr('stroke-width', `${0.5/zoomLevel}px`)\n d3.selectAll('.country-path')\n .attr('stroke-width', `${0.75/zoomLevel}px`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`***\n#### // global constants & D3 projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"h = w * 2/ 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"projection = d3.geoEqualEarth().fitExtent([[0, 0], [w, h]], earth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"earth = topojson.feature(worldMapTopoJSON, worldMapTopoJSON.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"worldMapTopoJSON = (await fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"mutable selectedCollector = {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"html` \n\n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`***\n#### // imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { \n htm, jsx, render, component, useState, useEffect, useRef, Fragment, React, ReactDOM, createElement \n} from \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"import {button, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"import { countries, countryListAllIsoData, rrc_loc, peer_loc, rrcLines } from \"@zofejes/ris-connections-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`***\n#### // global CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"defaultCSS = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}