\n );\n });\n\n let descriptionJsx = null;\n if (label && description) {\n descriptionJsx = (\n
\n
\n {label}\n
\n
\n {description}\n
\n
\n );\n }\n else {\n descriptionJsx = (\n
\n
\n Boxes\n
\n
\n Click on a box label to see details here.\n
\n
\n )\n }\n\n return (\n
\n
\n
\n
Diagram:
\n \n
\n
\n
\n Layers\n
\n
\n Check boxes to show relationships:\n
\n {checkboxesJsx}\n
\n {descriptionJsx}\n
\n
\n )\n }\n}","import React from 'react';\r\n\r\n/**\r\n * Base class for various diagrams, containing the key helper methods\r\n * and the G component, enabling the specific diagram classes to be\r\n * almost entirely the diagram JSX code generated by parse.mjs.\r\n */\r\nexport class Diagram extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n // Relationship data, read from file\r\n allConnections: {},\r\n\r\n // Current selected label (null = none)\r\n currentSelection: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.parseConnectionData();\r\n }\r\n\r\n /** \r\n * Checks a layermember attribute string to see if any of the layers is \r\n * active.\r\n */\r\n isAnyLayerActive = (layermemberStr) => {\r\n if (layermemberStr) {\r\n // Parse the semicolon-separated string\r\n const layerIds = layermemberStr.split(';');\r\n\r\n // For each layer\r\n for (const layerId of layerIds) {\r\n // Get the layer number\r\n const layerNum = parseInt(layerId);\r\n\r\n if (this.props.activeLayers.has(layerNum)) {\r\n // It's explicitly designated as active\r\n return true;\r\n }\r\n\r\n const checkboxLayer = this.props.layers.find((layer) => layer.number === layerNum);\r\n if (!checkboxLayer) {\r\n // It's not associated with a checkbox, so it's always on\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n };\r\n\r\n /** Sets the description key and value.\r\n * \r\n * @param event Mouse event\r\n * @param label The description key, which is the box label.\r\n * @param description The description value, which is the detailed definition.\r\n */\r\n setDescription = (event, label, description) => {\r\n // Don't propagate since tags are nested\r\n event.stopPropagation();\r\n \r\n if (label === undefined || description === undefined) {\r\n label = undefined;\r\n description = undefined;\r\n }\r\n this.props.setDescription(label, description);\r\n }\r\n\r\n /** Gets the current connections for a box. */\r\n getConnections = (label) => {\r\n let current = [];\r\n \r\n if (label) {\r\n label = label.trim().toLowerCase();\r\n const connections = this.state.allConnections[label];\r\n if (connections) {\r\n // All layers\r\n let layers = Object.keys(connections);\r\n \r\n // Intersection with active layers\r\n layers = layers.filter((layer) => this.props.activeLayers.has(parseInt(layer, 10))); \r\n \r\n layers.forEach((layer) => {\r\n current = current.concat(connections[layer].to);\r\n current = current.concat(connections[layer].from)\r\n });\r\n }\r\n \r\n current = [ ...new Set(current) ];\r\n }\r\n\r\n return current;\r\n }\r\n\r\n /** Sets the current selection. */\r\n setCurrentSelection = (label) => {\r\n if (label) {\r\n label = label.trim().toLowerCase();\r\n }\r\n this.setState({ currentSelection: label });\r\n };\r\n\r\n /** Tests whether a label matches the current selection. */\r\n isCurrentSelection = (label) => {\r\n if (label) {\r\n label = label.trim().toLowerCase();\r\n }\r\n return (label === this.state.currentSelection);\r\n };\r\n\r\n handleClick = (event, label, description) => {\r\n if (label) {\r\n // Clicked on box\r\n\r\n if (this.isCurrentSelection(label)) {\r\n // Already selected, so de-select\r\n this.setDescription(event, null, null);\r\n this.setCurrentSelection(null);\r\n }\r\n else {\r\n // Select the box\r\n this.setDescription(event, label, description);\r\n this.setCurrentSelection(label);\r\n }\r\n }\r\n };\r\n\r\n /** \r\n * Functional component that either gives the original tag and \r\n * its children, or nothing if all the component's layers are inactive.\r\n */\r\n G = (props) => {\r\n // Determine the current connections, based on selection and active layers\r\n let currentConnections = this.getConnections(this.state.currentSelection);\r\n\r\n let layermemberStr = props.layermember;\r\n if (layermemberStr === undefined || this.isAnyLayerActive(layermemberStr)) {\r\n // In an active layer\r\n \r\n // Set up any style embellishments\r\n\r\n let style = {};\r\n\r\n let label = '';\r\n if (props.hasOwnProperty('label')) {\r\n label = props.label;\r\n\r\n if (label) {\r\n label = label.trim().toLowerCase();\r\n if (this.state.currentSelection === label) {\r\n style.fill = 'LightBlue';\r\n }\r\n else if (currentConnections.includes(label)) {\r\n style.fill = 'Yellow';\r\n }\r\n }\r\n }\r\n\r\n // Give the original tag, with style and click embellishments\r\n return (\r\n this.handleClick(event, props.label, props.description)}>\r\n {props.children}\r\n \r\n );\r\n }\r\n else {\r\n // In an inactive layer \r\n return null;\r\n }\r\n }\r\n}","import React from 'react';\r\nimport { Diagram } from '../diagram';\r\nimport './ercotDiagram.scss';\r\nimport connections from './ERCOTconnections';\r\n\r\nexport class ErcotDiagram extends Diagram {\r\n\tparseConnectionData() {\r\n\t\tconsole.log(connections);\r\n\t\tthis.setState({ allConnections: connections });\r\n\t}\r\n\r\n render() {\r\n const G = this.G;\r\n const style1 = { strokeLinecap:\"round\", strokeLinejoin:\"round\", fill:\"none\" };\r\n\r\n return (\r\n
\r\n\r\n\r\n\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport { Diagram } from '../diagram';\r\nimport './nwDiagram.scss';\r\nimport connections from \"./NWconnections\";\r\n\r\nexport class NWDiagram extends Diagram {\r\n\tparseConnectionData() {\r\n\t\tthis.setState({ allConnections: connections });\r\n\t}\r\n\r\n render() {\r\n const G = this.G;\r\n const style1 = { strokeLinecap:\"round\", strokeLinejoin:\"round\", fill:\"none\" };\r\n\r\n return (\r\n
\r\n\r\n\r\n\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\nimport { getLocalFile } from './util/fileUtil';\nimport Papa from 'papaparse';\nimport { Control } from './sample/control';\nimport { ErcotDiagram } from './sample/ercot/ercotDiagram';\nimport { NWDiagram } from './sample/nw/nwDiagram';\n\nimport './App.scss';\n\n\n/** Main component of our application. */\nclass App extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n diagramName: 'ERCOT',\n layers: [], // Each layer is { number, label }\n activeLayers: new Set([]), // This is of the form [ numbers ]\n label: undefined,\n description: undefined\n };\n }\n \n /** Parses the content from layers.csv to set up layer information. */\n parseLayerData = (csv) => {\n // Parse the content: results.data is an array of arrays of cell values\n let results = Papa.parse(csv);\n \n const layers = [];\n\n // For each row of the CSV\n for (const cellArray of results.data) {\n const layerNum = parseInt(cellArray[0]);\n if (!isNaN(layerNum)) {\n // Numeric, so this row contains a mapping\n const layerColor = cellArray[1].trim();\n const layerLabel = cellArray[3].trim();\n const layer = {\n number: layerNum,\n color: layerColor,\n label: layerLabel\n };\n layers.push(layer);\n }\n }\n\n this.setState({ layers });\n };\n\n componentDidMount() {\n // Read the layers information\n getLocalFile('layers.csv')\n .then(this.parseLayerData);\n }\n\n /** Sets a layer active/inactive. */\n setLayer = (layer, isChecked) => {\n let activeLayers = this.state.activeLayers;\n if (isChecked) {\n activeLayers.add(layer);\n }\n else {\n activeLayers.delete(layer);\n }\n\n this.setState({ activeLayers });\n }\n\n /** Sets the description to use. */\n setDescription = (label, description) => {\n this.setState({ label, description });\n };\n\n /** Gets a component by name string. */\n getDiagramComponent = (name) => {\n name = name || 'ERCOT';\n name = name.toLowerCase();\n\n const lookup = {\n ercot: ErcotDiagram,\n nw: NWDiagram\n }\n return lookup[name];\n }\n\n /** Sets the diagram to display. */\n setDiagramName = (diagramName) => {\n if (diagramName !== this.state.diagramName) {\n this.setState({ \n diagramName, \n activeLayers: new Set([]),\n label: undefined, \n description: undefined\n });\n }\n }\n\n render() {\n // Set the title and component to use\n document.title = this.state.diagramName + ' Diagram';\n const DiagramComponent = this.getDiagramComponent(this.state.diagramName);\n\n return (\n
\n );\n }\n}\n\nexport default App;\n","\r\n/** \r\n * Gets a local file, using fetch. Adapted from fetch drivers from other projects\r\n */\r\nexport const getLocalFile = (url) => {\r\n return fetch(url, {\r\n method: 'GET',\r\n credentials: 'same-origin'\r\n }).then(response => {\r\n const contentType = response.headers.get('content-type');\r\n if (contentType.indexOf('json') > -1) {\r\n return response.json();\r\n } else {\r\n return response.text();\r\n }\r\n }).catch(error => {\r\n const contentType = error.headers.get('content-type');\r\n if (contentType.indexOf('json') > -1) {\r\n return error.json().then(err => ({\r\n status: 'error',\r\n code: error.status,\r\n message: err.message || 'An error occurred',\r\n }));\r\n } else {\r\n return error\r\n .text()\r\n .then(err => ({ status: 'error', code: error.status, message: err }));\r\n }\r\n });\r\n};","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}