@cdc/dashboard 1.1.4 → 9.22.9

package/src/components/Row.jsx

@@ -0,0 +1,181 @@
+import React, { useContext, useState } from 'react'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import Modal from '@cdc/core/components/ui/Modal'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+import Icon from '@cdc/core/components/ui/Icon'
+
+import Column from './Column'
+
+import OneColIcon from '../images/icon-col-12.svg'
+import TwoColIcon from '../images/icon-col-6.svg'
+import ThreeColIcon from '../images/icon-col-4.svg'
+import FourEightColIcon from '../images/icon-col-4-8.svg'
+import EightFourColIcon from '../images/icon-col-8-4.svg'
+
+const RowMenu = ({ rowIdx, row }) => {
+  const { overlay } = useGlobalContext()
+  const { rows, config, updateConfig } = useContext(ConfigContext)
+
+  const getCurr = () => {
+    let res = []
+
+    for (let i = 0; i < row.length; i++) {
+      if (row[i].width) res.push(row[i].width)
+    }
+
+    return res.join('')
+  }
+
+  const [ curr, setCurr ] = useState(getCurr())
+  const [ equalHeight, setEqualHeight ] = useState(false)
+
+  const setRowLayout = (layout) => {
+    const newRows = [ ...rows ]
+    const r = newRows[rowIdx]
+
+    for (let i = 0; i < r.length; i++) {
+      r[i].width = layout[i] ?? null
+    }
+
+    updateConfig({ ...config, rows: newRows })
+    setCurr(layout.join(''))
+  }
+
+  const moveRow = (dir = 'down') => {
+    if (rowIdx === rows.length - 1 && dir === 'down') return
+
+    let newIdx = dir === 'down' ? rowIdx + 1 : rowIdx - 1
+
+    // Swap
+    const temp = rows[newIdx]
+
+    rows[newIdx] = row
+    rows[rowIdx] = temp
+
+    rows[newIdx].uuid = Date.now()
+    rows[rowIdx].uuid = Date.now()
+
+    updateConfig({ ...config, rows })
+
+    // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
+    let calcRowMove = dir === 'down' ? 202 : -202
+    let calcRowMove2 = dir === 'down' ? -202 : 202
+
+    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
+    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+
+    rowEle.style.pointerEvents = 'none'
+    rowNewEle.style.pointerEvents = 'none'
+    rowEle.style.top = calcRowMove + 'px'
+    rowNewEle.style.top = calcRowMove2 + 'px'
+
+    setTimeout(() => {
+      rowEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowNewEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowEle.style.top = '0'
+      rowNewEle.style.top = '0'
+    }, 0)
+
+    setTimeout(() => {
+      rowEle.style = null
+      rowNewEle.style = null
+    }, 500)
+  }
+
+  const deleteRow = () => {
+    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+
+    updateConfig({ ...config, rows })
+  }
+
+  const rowItemsHeight = () => {
+    setEqualHeight(!equalHeight)
+
+    row.equalHeight = !equalHeight
+  }
+
+  const layoutList = [
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+      <OneColIcon/>
+    </li>,
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+      <TwoColIcon/>
+    </li>,
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+      <ThreeColIcon/>
+    </li>,
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+      <FourEightColIcon/>
+    </li>,
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+      <EightFourColIcon/>
+    </li>
+  ]
+
+  const rowSettings = (
+    <Modal>
+      <Modal.Header>
+        Row Settings
+      </Modal.Header>
+      <Modal.Content>
+        <InputToggle
+          label="Visualizations in this row should be equal height"
+          fieldName={`toggleEqualHeight${rowIdx}`}
+          value={row.equalHeight ? row.equalHeight : false}
+          updateField={rowItemsHeight}
+        ></InputToggle>
+      </Modal.Content>
+    </Modal>
+  )
+
+  return (
+    <nav className="row-menu">
+      <div className="row-menu__btn">
+        <ul className="row-menu__flyout">
+          {layoutList}
+        </ul>
+      </div>
+      <div className="spacer"></div>
+      {/*<button className={'row-menu__btn'} title="Row Settings"*/}
+      {/*        onClick={() => overlay?.actions.openOverlay(rowSettings)}>*/}
+      {/*  <Icon display="edit" color="#fff" size={25}/>*/}
+      {/*</button>*/}
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up"
+              onClick={() => moveRow('up')}>
+        <Icon display="caretUp" color="#fff" size={25}/>
+      </button>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'}
+              title="Move Row Down" onClick={() => moveRow('down')}>
+        <Icon display="caretDown" color="#fff" size={25}/>
+      </button>
+      <button
+        className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'}
+        title="Delete Row" onClick={deleteRow}>
+        <Icon display="close" color="#fff" size={25}/>
+      </button>
+    </nav>
+  )
+}
+
+const Row = ({ row, idx: rowIdx, uuid }) => {
+  return (
+    <div className="builder-row" data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row}/>
+      <div className="column-container">
+        {row.filter(column => column.width).map((column, colIdx) => <Column data={column}
+                                                                            key={`row-${uuid}-col-${colIdx}`}
+                                                                            rowIdx={rowIdx} colIdx={colIdx}/>)}
+      </div>
+    </div>
+  )
+}
+
+export default Row

package/src/components/Row.jsx~HEAD

@@ -0,0 +1,212 @@
+import React, { useContext, useState } from 'react'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import Modal from '@cdc/core/components/ui/Modal'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+import Icon from '@cdc/core/components/ui/Icon'
+
+import Column from './Column'
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+
+=======
+import Context from '../context'
+import CloseIcon from '../images/icon-close.svg'
+import RowUp from '../images/icon-up.svg'
+import RowDown from '../images/icon-down.svg'
+>>>>>>> test:packages/dashboard/src/components/Row.js
+import OneColIcon from '../images/icon-col-12.svg'
+import TwoColIcon from '../images/icon-col-6.svg'
+import ThreeColIcon from '../images/icon-col-4.svg'
+import FourEightColIcon from '../images/icon-col-4-8.svg'
+import EightFourColIcon from '../images/icon-col-8-4.svg'
+
+const RowMenu = ({ rowIdx, row }) => {
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const { overlay } = useGlobalContext()
+  const { rows, config, updateConfig } = useContext(ConfigContext)
+=======
+  const { rows, config, updateConfig } = useContext(Context)
+>>>>>>> test:packages/dashboard/src/components/Row.js
+
+  const getCurr = () => {
+    let res = []
+
+    for (let i = 0; i < row.length; i++) {
+      if (row[i].width) res.push(row[i].width)
+    }
+
+    return res.join('')
+  }
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const [ curr, setCurr ] = useState(getCurr())
+  const [ equalHeight, setEqualHeight ] = useState(false)
+=======
+  const [curr, setCurr] = useState(getCurr())
+>>>>>>> test:packages/dashboard/src/components/Row.js
+
+  const setRowLayout = (layout) => {
+    const newRows = [ ...rows ]
+    const r = newRows[rowIdx]
+
+    for (let i = 0; i < r.length; i++) {
+      r[i].width = layout[i] ?? null
+    }
+
+    updateConfig({ ...config, rows: newRows })
+    setCurr(layout.join(''))
+  }
+
+  const moveRow = (dir = 'down') => {
+    if (rowIdx === rows.length - 1 && dir === 'down') return
+
+    let newIdx = dir === 'down' ? rowIdx + 1 : rowIdx - 1
+
+    // Swap
+    const temp = rows[newIdx]
+
+    rows[newIdx] = row
+    rows[rowIdx] = temp
+
+    rows[newIdx].uuid = Date.now()
+    rows[rowIdx].uuid = Date.now()
+
+    updateConfig({ ...config, rows })
+
+    // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
+    let calcRowMove = dir === 'down' ? 202 : -202
+    let calcRowMove2 = dir === 'down' ? -202 : 202
+
+    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
+    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+
+    rowEle.style.pointerEvents = 'none'
+    rowNewEle.style.pointerEvents = 'none'
+    rowEle.style.top = calcRowMove + 'px'
+    rowNewEle.style.top = calcRowMove2 + 'px'
+
+    setTimeout(() => {
+      rowEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowNewEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowEle.style.top = '0'
+      rowNewEle.style.top = '0'
+    }, 0)
+
+    setTimeout(() => {
+      rowEle.style = null
+      rowNewEle.style = null
+    }, 500)
+  }
+
+  const deleteRow = () => {
+    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+
+    updateConfig({ ...config, rows })
+  }
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const rowItemsHeight = () => {
+    console.log('hit')
+    setEqualHeight(!equalHeight)
+
+    row.equalHeight = !equalHeight
+
+    console.log('equalHeight var', equalHeight)
+    console.log('equalHeight', row.equalHeight)
+  }
+  console.log('equal height var', row.equalHeight)
+
+=======
+>>>>>>> test:packages/dashboard/src/components/Row.js
+  const layoutList = [
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+      <OneColIcon/>
+    </li>,
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+      <TwoColIcon/>
+    </li>,
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+      <ThreeColIcon/>
+    </li>,
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+      <FourEightColIcon/>
+    </li>,
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+      <EightFourColIcon/>
+    </li>
+  ]
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const rowSettings = (
+    <Modal>
+      <Modal.Header>
+        Row Settings
+      </Modal.Header>
+      <Modal.Content>
+        <InputToggle
+          label="Visualizations in this row should be equal height"
+          fieldName={`toggleEqualHeight${rowIdx}`}
+          value={row.equalHeight ? row.equalHeight : false}
+          updateField={rowItemsHeight}
+        ></InputToggle>
+      </Modal.Content>
+    </Modal>
+  )
+
+=======
+>>>>>>> test:packages/dashboard/src/components/Row.js
+  return (
+    <nav className="row-menu">
+      <div className="row-menu__btn">
+        <ul className="row-menu__flyout">
+          {layoutList}
+        </ul>
+      </div>
+      <div className="spacer"></div>
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+      <button className={'row-menu__btn'} title="Row Settings"
+              onClick={() => overlay?.actions.openOverlay(rowSettings)}>
+        <Icon display="edit" color="#fff" size={25}/>
+      </button>
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up"
+              onClick={() => moveRow('up')}>
+        <Icon display="caretUp" color="#fff" size={25}/>
+=======
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up" onClick={() => moveRow('up')}>
+        <RowUp />
+>>>>>>> test:packages/dashboard/src/components/Row.js
+      </button>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'}
+              title="Move Row Down" onClick={() => moveRow('down')}>
+        <Icon display="caretDown" color="#fff" size={25}/>
+      </button>
+      <button
+        className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'}
+        title="Delete Row" onClick={deleteRow}>
+        <Icon display="close" color="#fff" size={25}/>
+      </button>
+    </nav>
+  )
+}
+
+const Row = ({ row, idx: rowIdx, uuid }) => {
+  return (
+    <div className="builder-row" data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row}/>
+      <div className="column-container">
+        {row.filter(column => column.width).map((column, colIdx) => <Column data={column}
+                                                                            key={`row-${uuid}-col-${colIdx}`}
+                                                                            rowIdx={rowIdx} colIdx={colIdx}/>)}
+      </div>
+    </div>
+  )
+}
+
+export default Row

package/src/components/Widget.js

@@ -12,6 +12,7 @@ import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
 import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
 import WorldIcon from '@cdc/core/assets/world-graphic.svg';
 import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg';
+import FilteredText from '@cdc/core/assets/filtered-text.svg';
 
 import Context from '../context';
 
@@ -26,7 +27,8 @@ const iconHash = {
   'us' : <UsaIcon />,
   'us-county': <UsaIcon />,
   'world' : <WorldIcon />,
-  'single-state': <AlabamaIcon />
+  'single-state': <AlabamaIcon />,
+  'filtered-text' :  <FilteredText />,
 }
 
 const labelHash = {
@@ -40,7 +42,9 @@ const labelHash = {
   'us': 'United States (State- or County-Level)',
   'us-county': 'United States (State- or County-Level)',
   'world' : 'World',
-  'single-state': 'U.S. State'
+  'single-state': 'U.S. State',
+  'filtered-text':'Filtered Text'
+
 }
 
 const Widget = ({ data = {}, addVisualization, type }) => {

package/src/components/Widget.jsx

@@ -0,0 +1,191 @@
+import React, { useContext, useRef, useEffect } from 'react'
+import { useDrag } from 'react-dnd'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+
+import DataDesigner from '@cdc/core/components/managers/DataDesigner'
+import Icon from '@cdc/core/components/ui/Icon'
+import Modal from '@cdc/core/components/ui/Modal'
+
+const iconHash = {
+  'data-bite': <Icon display="databite" base/>,
+  'Bar': <Icon display="chartBar" base/>,
+  'waffle-chart': <Icon display="grid" base/>,
+  'markup-include': <Icon display="code" base/>,
+  'Line': <Icon display="chartLine" base/>,
+  'Pie': <Icon display="chartPie" base/>,
+  'us': <Icon display="mapUsa" base/>,
+  'us-county': <Icon display="mapUsa" base/>,
+  'world': <Icon display="mapWorld" base/>,
+  'single-state': <Icon display="mapAl" base/>,
+  'gear': <Icon display="gear" base/>,
+  'tools': <Icon display="tools" base/>
+}
+
+const labelHash = {
+  'data-bite': 'Data Bite',
+  'waffle-chart': 'Waffle Chart',
+  'markup-include': 'Markup Include',
+  'Bar': 'Bar',
+  'Line': 'Line',
+  'Pie': 'Pie',
+  'us': 'United States (State- or County-Level)',
+  'us-county': 'United States (State- or County-Level)',
+  'world': 'World',
+  'single-state': 'U.S. State'
+}
+
+const Widget = ({ data = {}, addVisualization, type }) => {
+  const { overlay } = useGlobalContext()
+  const { rows, visualizations, config, updateConfig } = useContext(ConfigContext)
+
+  const dataRef = useRef();
+  dataRef.current = data;
+
+  const transform = new DataTransform()
+
+  const handleWidgetMove = (item, monitor) => {
+    let result = monitor.getDropResult()
+
+    if (!result) return null
+
+    const { rowIdx, colIdx } = result
+
+    if (undefined !== data.rowIdx) {
+      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+
+      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+    } else {
+      // Item does not exist, instantiate a new one
+      const newViz = addVisualization()
+      visualizations[newViz.uid] = newViz // Add to widgets collection
+      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+    }
+
+    updateConfig({ ...config, rows, visualizations })
+  }
+
+  const [ { isDragging, ...collected }, drag ] = useDrag({
+    type: 'vis-widget',
+    end: handleWidgetMove,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  })
+
+  const deleteWidget = () => {
+    rows[data.rowIdx][data.colIdx].widget = null
+
+    delete visualizations[data.uid]
+
+    updateConfig({ ...config, rows, visualizations })
+  }
+
+  const editWidget = () => {
+    visualizations[data.uid].editing = true
+
+    updateConfig({ ...config, visualizations })
+  }
+
+  const changeDataset = (uid, value) => {
+    delete visualizations[uid].dataDescription
+    delete visualizations[uid].formattedData
+
+    visualizations[uid].dataKey = value
+
+    updateConfig({ ...config, visualizations })
+  }
+
+  const updateDescriptionProp = async (visualizationKey, datasetKey, key, value) => {
+    let dataDescription = { ...dataRef.current.dataDescription, [key]: value }
+
+    let newData
+    if (!config.datasets[datasetKey].data && config.datasets[datasetKey].dataUrl) {
+      newData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
+      newData = transform.autoStandardize(newData)
+    } else {
+      newData = config.datasets[datasetKey].data
+    }
+
+    let formattedData = transform.developerStandardize(newData, dataDescription)
+
+    let newVisualizations = { ...config.visualizations }
+    newVisualizations[visualizationKey] = { ...newVisualizations[visualizationKey], data: newData, dataDescription, formattedData }
+
+    updateConfig({ ...config, visualizations: newVisualizations })
+
+    overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
+  }
+ 
+  const dataDesignerModal = (configureData, dataKeyOverride) => {
+    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? (data.dataKey || dataRef.current.dataKey) : dataKeyOverride;
+
+    return (
+      <Modal>
+        <Modal.Content>
+          <div className="dataset-selector-container">
+            Select a dataset:&nbsp;
+            <select className="dataset-selector" defaultValue={dataKey} onChange={(e) => {
+              changeDataset(data.uid, e.target.value)
+              overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
+            }}>
+              <option value="">Select a dataset</option>
+              {config.datasets && Object.keys(config.datasets).map(datasetKey => (
+                <option key={datasetKey}>{datasetKey}</option>
+              ))}
+            </select>
+          </div>
+          {dataKey && <DataDesigner {...{
+            configureData, 
+            visualizationKey: data.uid,
+            dataKey: dataKey,
+            updateDescriptionProp
+          }}/>}
+          {configureData.formattedData && <button style={{margin: '1em'}} className="cove-button" onClick={() => overlay?.actions.toggleOverlay()}>Continue</button>}
+        </Modal.Content>
+      </Modal>
+    )
+  }
+
+  useEffect(() => {
+    if(data.openModal){
+      overlay?.actions.openOverlay(dataDesignerModal(dataRef.current))
+
+      visualizations[data.uid].openModal = false
+
+      updateConfig({ ...config, visualizations })
+    }
+  }, [data.openModal])
+
+  return (
+    <>
+      <div className="widget" ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
+        <Icon display="move" className="drag-icon"/>
+        <div className="widget__content">
+          {data.rowIdx !== undefined && (
+            <div className="widget-menu">
+              {data.dataKey && data.dataDescription && data.formattedData &&
+                <button title="Configure Visualization" className="btn btn-configure" onClick={editWidget}>{iconHash['tools']}</button>
+              }
+              <button title="Configure Data" className="btn btn-configure" onClick={() => {
+                overlay?.actions.openOverlay(dataDesignerModal(data))
+              }}>{iconHash['gear']}</button>
+              <div className="widget-menu-item" onClick={deleteWidget}>
+                <Icon display="close" base/>
+              </div>
+            </div>
+          )}
+          {iconHash[type]}
+          <span>{labelHash[type]}</span>
+          {data.newViz && <span onClick={editWidget} className="config-needed">Configuration needed</span>}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Widget

package/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -20,8 +20,9 @@
     </style>
   </head>
   <body>
-    <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
-    <div class="react-container" data-config="/examples/test-example.json"></div>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!--<div class="react-container" data-config="/examples/default.json"></div>-->
+    <!--<div class="react-container" data-config="/examples/default-multi-dataset.json"></div>-->
+    <div class="react-container" data-config="/examples/default-filter-control.json"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>	
   </body>
 </html>

package/src/scss/editor-panel.scss

@@ -183,7 +183,6 @@
         display: block;
         text-align: left;
         cursor: pointer;
-        color: rgba(0,0,0,.5);
         text-decoration: underline;
         span {
           text-decoration: none;