phetsims / phet-info

Collection of information shared by PhET team members for the purpose of using github effectively and for other process-related topics.
http://scenerystack.org/
MIT License
64 stars 27 forks source link

Customize roadmap view #205

Open samreid opened 1 year ago

samreid commented 1 year ago

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:

```js 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:

image

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.