orgads/mongosh-profile.html

## mongosh-profile.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .tree ul {
      list-style-type: none;
      padding-left: 20px;
    }
    .tree li {
      margin: 5px 0;
    }
    .node-content {
      display: inline-block;
      padding: 2px 5px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div id="tree" class="tree"></div>

  <script>
    function getColor(loadTime) {
      const minTime = 30;
      const maxTime = 400;
      const ratio = Math.min(Math.max((loadTime - minTime) / (maxTime - minTime), 0), 1);

      // Generate a color from green to red
      const r = Math.floor(255 * ratio);
      const g = Math.floor(255 * (1 - ratio));
      return `rgb(${r}, ${g}, 0)`;
    }

    function createTree(node) {
      const color = getColor(node.loadTime);
      let html = `<li>
        <span class="node-content" style="background-color: ${color}; color: ${node.loadTime > 500 ? 'white' : 'black'}">
          ${node.name} (${node.loadTime}ms)
        </span>`;

      if (node.includes && node.includes.length > 0) {
        html += '<ul>';
        node.includes.forEach(child => {
          html += createTree(child);
        });
        html += '</ul>';
      }
      html += '</li>';
      return html;
    }

    fetch('https://gist.githubusercontent.com/orgads/3e783df00df3e1c9bf193a5f181267a4/raw/3902fa81e796a08845138232e7d0cf81b414ba85/profile.json')
      .then(response => response.json())
      .then(data => {
        let treeHtml = '<ul>';
        data.includes.forEach(node => {
          treeHtml += createTree(node);
        });
        treeHtml += '</ul>';
        document.getElementById('tree').innerHTML = treeHtml;
      });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.tree ul {
	list-style-type: none;
	padding-left: 20px;
	}
	.tree li {
	margin: 5px 0;
	}
	.node-content {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 3px;
	}
	</style>
	</head>
	<body>
	<div id="tree" class="tree"></div>

	<script>
	function getColor(loadTime) {
	const minTime = 30;
	const maxTime = 400;
	const ratio = Math.min(Math.max((loadTime - minTime) / (maxTime - minTime), 0), 1);

	// Generate a color from green to red
	const r = Math.floor(255 * ratio);
	const g = Math.floor(255 * (1 - ratio));
	return `rgb(${r}, ${g}, 0)`;
	}

	function createTree(node) {
	const color = getColor(node.loadTime);
	let html = `<li>
	<span class="node-content" style="background-color: ${color}; color: ${node.loadTime > 500 ? 'white' : 'black'}">
	${node.name} (${node.loadTime}ms)
	</span>`;

	if (node.includes && node.includes.length > 0) {
	html += '<ul>';
	node.includes.forEach(child => {
	html += createTree(child);
	});
	html += '</ul>';
	}
	html += '</li>';
	return html;
	}

	fetch('https://gist.githubusercontent.com/orgads/3e783df00df3e1c9bf193a5f181267a4/raw/3902fa81e796a08845138232e7d0cf81b414ba85/profile.json')
	.then(response => response.json())
	.then(data => {
	let treeHtml = '<ul>';
	data.includes.forEach(node => {
	treeHtml += createTree(node);
	});
	treeHtml += '</ul>';
	document.getElementById('tree').innerHTML = treeHtml;
	});
	</script>
	</body>
	</html>