\n {categories.map((category, index) => {\n const tip = (categoryDefinitions.filter(c => c.category === category))[0];\n return (\n
\n }\n \n );\n}\n\nNavigationTabs.propTypes = {\n handleCategorySelect: PropTypes.func,\n plugins: PropTypes.array,\n categories: PropTypes.any,\n categorySelected: PropTypes.string,\n}\n","export function getCategories(plugins) {\n let categoryArray = [];\n \n plugins.forEach(plugin => {\n if (plugin.visible && plugin.visible !== \"false\"){\n plugin.categories.forEach(category => {\n if (!categoryArray.includes(category)) {\n categoryArray.push(category)\n }\n })\n }\n })\n return categoryArray;\n}\n\nexport function isDevMode() {\n let queryParam = window.location.search.substr(1);\n return queryParam.includes(\"dev\")\n}\n","import React from 'react';\n\nimport \"./dropdown-select.css\";\n\nexport class DropdownSelect extends React.Component {\n constructor(props) {\n super(props);\n this.handleChange = this.props.handleBranchSelect.bind(this);\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from 'react';\n\nimport \"./search-panel.css\";\nimport PropTypes from \"prop-types\";\n\nexport class SearchPanel extends React.Component {\n constructor() {\n super();\n this.state = {value: ''};\n }\n\n handleClear(/*ev*/) {\n this.props.onSearch('');\n }\n\n handleChange(ev) {\n let searchString = ev.target.value;\n this.props.onSearch(searchString);\n }\n\n render() {\n let placeholder='search for...';\n let value = /*this.state.value*/this.props.searchString;\n\n return (\n props.handleCategorySelect(category)} title={tip? tip.tooltip : \"\" }>\n {category}\n
\n )\n }\n )}\n \n this.handleChange(ev)} value={value} />\n \n
\n )\n }\n}\n\nSearchPanel.propTypes = {\n onSearch: PropTypes.func,\n searchString: PropTypes.string,\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { NavigationTabs } from \"./navigation\";\nimport { DropdownSelect } from \"./dropdown-select\";\nimport { SearchPanel } from \"./search-panel\";\n\nimport \"./header.css\"\n\nexport class Header extends React.Component {\n render() {\n return (\n \n {this.renderHeaderTitle()}\n
\n );\n }\n\n renderHeaderTitle() {\n return (\n \n\n )\n }\n}\nHeader.propTypes = {\n plugins: PropTypes.array,\n categories: PropTypes.any,\n categorySelected: PropTypes.string,\n onCategorySelect: PropTypes.func,\n onSearch: PropTypes.func,\n searchString: PropTypes.string,\n branchSelected: PropTypes.string,\n onBranchSelect: PropTypes.func\n}\n","import React from \"react\";\nimport DOMPurify from \"dompurify\";\nimport parse from \"html-react-parser\";\nimport logo from \"./codap.ico\";\n\nimport \"./card.css\"\nimport PropTypes from \"prop-types\";\n\nfunction getURLRoot() {\n let urlRoot = window.location.origin+window.location.pathname;\n return urlRoot.replace(/index.html$/, '').replace(/\\/build\\//, '');\n}\n\nexport class Card extends React.PureComponent{\n copyToClipboard() {\n navigator.clipboard.writeText(this.cleanPath());\n }\n\n render(){\n let cardClassNames = `card`\n return (\n ![\"Common](\"https://codap.concord.org/wp-content/themes/cc/img/codap-logo.png\"){kind=logo}
\n \n {this.renderPluginTitleAndDescription()}\n
\n );\n }\n\n renderPluginTitleAndDescription() {\n let { plugin, url } = this.props;\n let pluginPath = \"\";\n if (plugin.path.match(/^http/i)) {\n pluginPath = plugin.path;\n }\n else {\n pluginPath = getURLRoot()+plugin.path;\n }\n if (url.match(/^https/i) && !pluginPath.match(/^https/i)) {\n pluginPath=pluginPath.replace(/http/i,'https');\n }\n\n if (pluginPath.match(/^https/i) && !url.match(/^https/i)) {\n url=url.replace(/http/i,'https');\n }\n\n return (\n this.copyToClipboard()}>\n copy link to clipboard\n 📋\n
\n \n
\n );\n }\n\n renderHTML(description) {\n return parse(DOMPurify.sanitize(description || \"\"));\n }\n\n cleanPath() {\n const { plugin } = this.props;\n let path = '';\n let url=\"https://codap.concord.org/app/\"\n\n if (plugin.path.match(/^http/i)) {\n path = plugin.path;\n }\n else {\n path = getURLRoot() + plugin.path;\n }\n\n if (url.match(/^https/i) && !path.match(/^https/i)) {\n path = path.replace(/http/i, 'https');\n }\n\n if (path.match(/^https/i) && !url.match(/^https/i)) {\n url = url.replace(/http/i, 'https');\n }\n return path;\n }\n}\n\nCard.propTypes = {\n plugin: PropTypes.object,\n project: PropTypes.object,\n url: PropTypes.string\n}\n","import React from \"react\";\nimport PropTypes from 'prop-types';\nimport { Card } from \"../card/card\";\n\nimport \"./card-list.css\";\n\nexport const CardList = props => {\n let { plugins, categorySelected, url, tabIndex } = props;\n let cardListWrapperClassNames = `card-list-wrapper theme${(tabIndex % 4) + 1}`\n let pluginsToShow = plugins.filter(plugin =>\n plugin.visible &&\n plugin.visible!=='false' &&\n (plugin.categories.find(cat => cat.replace(/\\..*/, '') === categorySelected))\n ).sort(function (a, b) {\n let aLow = a.title.toLowerCase();\n let bLow = b.title.toLowerCase();\n if (aLow < bLow) return -1;\n if (aLow > bLow) return 1;\n return 0;\n });\n return (\n \n \n 
\n {plugin.title}\n \n
\n {this.renderHTML(plugin.description)}
\n\n\n
\n )\n}\n\nCardList.propTypes = {\n plugins: PropTypes.array,\n categorySelected: PropTypes.string,\n url: PropTypes.string,\n tabIndex: PropTypes.number\n}\n","import React from 'react';\nimport \"./footer.css\"\n\nexport class Footer extends React.Component {\n\n render() {\n return (\n \n {pluginsToShow.map((plugin, index) =>\n \n )}\n
\n \n
\n );\n }\n\n renderCCLogo() {\n return (\n \n {this.renderInfoLinks()}\n
\n \n {this.renderCCLogo()}\n
\n \n a product of\n
\n )\n }\n\n renderInfoLinks() {\n return (\n <>\n \n ![\"The](\"https://codap.concord.org/_assets/img/cc-logo.png\")
\n \n
\n \n \n CODAP plugin repository: github.com/concord-consortium/codap-data-interactives
\nCODAP project repository: github.com/concord-consortium/codap
\nTo find out more about the CODAP project: About CODAP
\n© Copyright 2021 The Concord Consortium. All rights reserved.
\n \n )\n }\n}\n","import React from 'react';\nimport dataInteractiveList from \"./data_interactive_map.json\";\nimport { Header } from \"./components/header/header\";\nimport { CardList } from \"./components/card-list/card-list\";\nimport { Footer } from \"./components/footer/footer\";\nimport { isDevMode } from \"./utils/util\";\n\n/**\n *\n * @param plugin {\n * {description: string},\n * {title: string},\n * {aegis: string}\n * }\n * @param searchString {string}\n * @return {boolean}\n */\nfunction pluginSearch(plugin, searchString) {\n searchString = searchString.toLowerCase();\n return (plugin.description && plugin.description.toLowerCase().includes(searchString)) ||\n (plugin.title && plugin.title.toLowerCase().includes(searchString)) ||\n (plugin.aegis && plugin.aegis.toLowerCase().includes(searchString));\n}\n\nexport default class App extends React.PureComponent {\n constructor() {\n super();\n this.handleCategorySelect = this.handleCategorySelect.bind(this);\n this.handleBranchSelect = this.handleBranchSelect.bind(this);\n this.handleSearch = this.handleSearch.bind(this);\n this.state = {\n dataInteractives: dataInteractiveList.data_interactives,\n categories: dataInteractiveList.categories,\n categorySelected: \"Partners\",\n branchSelected: isDevMode() ? \"staging\" : \"latest\",\n searchString: ''\n };\n }\n\n render() {\n const codapBaseUrl = \"https://codap.concord.org\";\n const plugins = this.state.dataInteractives;\n const categories = this.state.categories;\n const categorySelected = this.state.categorySelected;\n const branchSelected = this.state.branchSelected;\n const searchString = this.state.searchString;\n let path;\n switch (branchSelected) {\n case \"latest\":\n path = \"/releases/latest/\"\n break;\n case \"staging\":\n path = \"/releases/staging/\"\n break;\n case \"stable\":\n path = \"/app/\"\n break;\n case \"branch\":\n path = \"/~jsandoe/build/\"\n break;\n }\n const url = codapBaseUrl+path;\n let tabIndex = categories.findIndex(entry => entry.category === categorySelected);\n\n return (\n\n \n \n
\n );\n }\n\n handleCategorySelect(category) {\n this.setState({ categorySelected: category });\n }\n\n handleBranchSelect(event) {\n this.setState({ branchSelected: event.target.value});\n }\n\n handleSearch (searchString) {\n let found = false;\n this.setState({searchString: searchString});\n this.state.dataInteractives.forEach(plugin => {\n let ix = plugin.categories.indexOf('Search');\n if (ix >= 0) {\n plugin.categories.splice(ix, 1);\n }\n });\n if (searchString.length >= 3) {\n this.state.dataInteractives.forEach(plugin => {\n if (pluginSearch(plugin, searchString)) {\n plugin.categories.push('Search');\n found = true;\n }\n });\n }\n if (found && this.state.categorySelected !== 'Search') {\n this.priorSelected = this.state.categorySelected;\n this.setState({categorySelected: 'Search'})\n } else if (!found && this.state.categorySelected === 'Search') {\n this.setState({categorySelected: this.priorSelected});\n this.priorSelected = null;\n }\n }\n}\n\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.0/8 are 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 headers: { 'Service-Worker': 'script' },\n })\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\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\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(\n