Customize roadmap view

[samreid]

Today we discussed Jira a bit, and one of the shortcomings of GitHub roadmaps that was discussed was the inability to colorize, particularly around flexibility. I wanted to take a quick look at a customization strategy that may help until GitHub has better native support for that. So I opened this page:

https://github.com/orgs/phetsims/projects/66/views/2

And ran this code:

function searchText( element, text ) {
  var parent = element.parentElement.parentElement;
  // search recursively over the descendants to see if any child has textContent
  let matched = false;
  const search = node => {
    if ( node.textContent.includes( text ) ) {
      matched = true;
    }
    else {
      node.childNodes.forEach( search );
    }
  }
  search( parent );
  return matched;
};

setInterval( () => {
  Array.from( document.getElementsByTagName( 'span' ) ).forEach( element => {
    if ( element.classList.contains( 'Label-sc-1dgcne-0' ) && element.classList.contains( 'prxXS' ) ) {

      if ( searchText( element, 'PhET-iO' ) ) {
        element.style[ 'background-color' ] = 'pink';
      }
      else if ( searchText( element, 'Publish' ) ) {
        element.style[ 'background-color' ] = 'yellow';
      }
    }
  } );
}, 10 );

The logic is in this part:

      if ( searchText( element, 'PhET-iO' ) ) {
        element.style[ 'background-color' ] = 'pink';
      }
      else if ( searchText( element, 'Publish' ) ) {
        element.style[ 'background-color' ] = 'yellow';
      }

This says cells with PhET-iO should be pink, and cells with "Publish" should be yellow, as a demo. (We could write whatever rules we want). It renders like this:

This is something we could run automatically via a bookmarklet or tampermonkey. It would be somewhat fragile--if GitHub updated some implementation details in the CSS or DOM, we would have to update this code. Other features like time tracking or nested issues would not be supportable. But I just wanted to write it down as an idea.