tools/wave/www/comparison.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Compare Results - Web Platform Test</title>
    <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
    <link rel="stylesheet" href="css/fontawesome-5.7.2.min.css" />
    <script src="lib/utils.js"></script>
    <script src="lib/wave-service.js"></script>
    <script src="lib/ui.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        font-family: "Noto Sans", sans-serif;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: white;
        color: #000;
      }

      .site-logo {
        max-width: 300px;
        margin-left: -15px;
      }

      .content {
        width: 1000px;
      }

      .header {
        display: flex;
        margin: 50px 0 30px 0;
      }

      .header :first-child {
        flex: 1;
      }

      .session-header {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .session-header div {
        padding: 5px;
        font-weight: bold;
      }

      .session-header:hover div {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <script>
      window.onload = () => {
        let { tokens, reftokens } = utils.parseQuery(location.search);
        tokens = tokens ? tokens.split(",") : [];
        const refTokens = reftokens ? reftokens.split(",") : [];
        if (tokens) {
          WaveService.readStatus(function(config) {
            comparisonUi.state.reportsEnabled = config.reportsEnabled;
            comparisonUi.render();
          });
          WaveService.addRecentSessions(tokens);
          WaveService.addRecentSessions(refTokens);
          comparisonUi.state.tokens = tokens;
          comparisonUi.state.refTokens = refTokens;
          comparisonUi.render();
          comparisonUi.refreshData();
        }
      };

      const comparisonUi = {
        state: {
          tokens: [],
          refTokens: [],
          sessions: {}
        },
        refreshData: () => {
          const { tokens, refTokens } = comparisonUi.state;
          const allTokens = tokens.slice();
          refTokens
            .filter(token => allTokens.indexOf(token) === -1)
            .forEach(token => allTokens.push(token));

          WaveService.readMultipleSessions(allTokens, configurations => {
            const sessions = {};
            configurations.forEach(
              details => (sessions[details.token] = details)
            );
            comparisonUi.state.sessions = sessions;

            WaveService.readResultComparison(tokens, results => {
              comparisonUi.state.results = results;
              comparisonUi.renderApiResults();
            });

            const sessionsReferenceTokens = [];
            configurations.forEach(({ referenceTokens }) =>
              referenceTokens
                .filter(token => refTokens.indexOf(token) === -1)
                .filter(token => sessionsReferenceTokens.indexOf(token) === -1)
                .forEach(token => sessionsReferenceTokens.push(token))
            );

            sessionsReferenceTokens.forEach(token =>
              comparisonUi.state.refTokens.push(token)
            );

            WaveService.readMultipleSessions(
              sessionsReferenceTokens,
              configurations => {
                const { sessions } = comparisonUi.state;
                configurations.forEach(
                  details => (sessions[details.token] = details)
                );
                comparisonUi.renderDetails();
              }
            );
          });
        },
        openResultsOverview() {
          location.href = WEB_ROOT + "overview.html";
        },
        render() {
          const comparisonView = UI.createElement({
            className: "content",
            style: "margin-bottom: 40px;",
            children: [
              {
                className: "header",
                children: [
                  {
                    children: [
                      {
                        element: "img",
                        src: "res/wavelogo_2016.jpg",
                        className: "site-logo"
                      }
                    ]
                  },
                  {
                    className: "button is-dark is-outlined",
                    onClick: comparisonUi.openResultsOverview,
                    children: [
                      {
                        element: "span",
                        className: "icon",
                        children: [
                          {
                            element: "i",
                            className: "fas fa-arrow-left"
                          }
                        ]
                      },
                      {
                        text: "Results Overview",
                        element: "span"
                      }
                    ]
                  }
                ]
              },
              {
                id: "header",
                children: [
                  { className: "title", text: "Comparison" },
                  { id: "controls" }
                ]
              },
              { id: "details" },
              { id: "api-results" }
            ]
          });

          const root = UI.getRoot();
          root.innerHTML = "";
          root.appendChild(comparisonView);
          comparisonUi.renderDetails();
          comparisonUi.renderApiResults();
        },
        renderDetails() {
          const detailsView = UI.createElement({
            style: "margin-bottom: 20px"
          });

          const { refTokens } = comparisonUi.state;
          const detailsTable = UI.createElement({
            element: "table",
            children: {
              element: "tbody",
              children: [
                {
                  element: "tr",
                  id: "reference-sessions"
                }
              ]
            }
          });
          detailsView.appendChild(detailsTable);

          const details = UI.getElement("details");
          details.innerHTML = "";
          details.appendChild(detailsView);
          comparisonUi.renderReferenceSessions();
        },
        renderReferenceSessions() {
          const { sessions, refTokens } = comparisonUi.state;
          if (!refTokens || refTokens.length === 0) return;
          if (!Object.keys(sessions) || Object.keys(sessions).length === 0)
            return;
          const referenceSessions = refTokens.map(token => sessions[token]);
          const referenceSessionsTarget = UI.getElement("reference-sessions");
          referenceSessionsTarget.innerHTML = "";

          const referenceSessionsLabel = UI.createElement({
            element: "td",
            text: "Reference Sessions:",
            style: "width: 175px"
          });
          referenceSessionsTarget.appendChild(referenceSessionsLabel);

          const referenceSessionsList = UI.createElement({ element: "td" });
          referenceSessions.forEach(session => {
            const { token, browser } = session;
            const referenceSessionItem = UI.createElement({
              style: "margin-right: 10px",
              className: "button is-dark is-small is-rounded is-outlined",
              onClick: () => WaveService.openSession(token),
              children: [
                {
                  element: "span",
                  className: "icon",
                  children: {
                    element: "i",
                    className: utils.getBrowserIcon(browser.name)
                  }
                },
                {
                  element: "span",
                  className: "is-family-monospace",
                  text: token.split("-").shift()
                }
              ]
            });
            referenceSessionsList.appendChild(referenceSessionItem);
          });
          referenceSessionsTarget.appendChild(referenceSessionsList);
        },
        renderApiResults() {
          const apiResultsView = UI.createElement({
            style: "margin-bottom: 20px"
          });

          const heading = UI.createElement({
            className: "title is-4",
            text: "Results"
          });
          apiResultsView.appendChild(heading);

          const { results, tokens, sessions } = comparisonUi.state;

          if (!results) {
            const loadingIndicator = UI.createElement({
              className: "level",
              children: {
                element: "span",
                className: "level-item icon",
                children: [
                  {
                    element: "i",
                    className: "fas fa-spinner fa-pulse"
                  },
                  {
                    style: "margin-left: 0.4em;",
                    text: "Loading comparison ..."
                  }
                ]
              }
            });
            apiResultsView.appendChild(loadingIndicator);

            const apiResults = UI.getElement("api-results");
            apiResults.innerHTML = "";
            apiResults.appendChild(apiResultsView);
            return;
          }

          const resultsTable = UI.createElement({
            element: "table"
          });
          apiResultsView.appendChild(resultsTable);

          const getColor = percent => {
            const tRed = 28;
            const tGreen = 166;
            const tBlue = 76;
            const mRed = 204;
            const mGreen = 163;
            const mBlue = 0;
            const bRed = 255;
            const bGreen = 56;
            const bBlue = 96;
            if (percent > 50) {
              const red = mRed + ((percent - 50) / 50) * (tRed - mRed);
              const green = mGreen + ((percent - 50) / 50) * (tGreen - mGreen);
              const blue = mBlue + ((percent - 50) / 50) * (tBlue - mBlue);
              return `rgb(${red}, ${green}, ${blue})`;
            } else {
              const red = bRed + (percent / 50) * (mRed - bRed);
              const green = bGreen + (percent / 50) * (mGreen - bGreen);
              const blue = bBlue + (percent / 50) * (mBlue - bBlue);
              return `rgb(${red}, ${green}, ${blue})`;
            }
          };

          const resultsTableHeader = UI.createElement({
            element: "thead",
            children: {
              element: "tr",
              children: [
                {
                  element: "td",
                  text: "API",
                  style: "vertical-align: bottom; width: 200px"
                }
              ]
                .concat(
                  tokens.map(token => ({
                    element: "td",
                    children: {
                      onClick: () => WaveService.openSession(token),
                      className: "session-header",
                      children: [
                        {
                          element: "i",
                          style: "font-size: 1.5em; margin-right: 0.1em",
                          className: utils.getBrowserIcon(
                            sessions[token].browser.name
                          )
                        },
                        {
                          children: [
                            {
                              style: "margin: 0; padding: 0;",
                              className: "is-family-monospace",
                              text: `${token.split("-").shift()}`
                            },
                            {
                              style: "margin: 0; padding: 0;",
                              text: `${sessions[token].browser.name} ${
                                sessions[token].browser.version
                              }`
                            }
                          ]
                        }
                      ]
                    }
                  }))
                )
                .concat([{ element: "td", style: "width: 80px" }])
            }
          });
          resultsTable.appendChild(resultsTableHeader);

          let apis = [];
          tokens.forEach(token =>
            Object.keys(results[token])
              .filter(api => apis.indexOf(api) === -1)
              .forEach(api => apis.push(api))
          );
          apis = apis.sort((apiA, apiB) =>
            apiA.toLowerCase() > apiB.toLowerCase() ? 1 : -1
          );

          const resultsTableBody = UI.createElement({
            element: "tbody",
            children: apis.map(api => ({
              element: "tr",
              children: [{ element: "td", text: api }]
                .concat(
                  tokens.map(token =>
                    results[token][api]
                      ? {
                          element: "td",
                          style:
                            "text-align: center; font-weight: bold;" +
                            `color: ${getColor(
                              utils.percent(
                                results[token][api],
                                results["total"][api]
                              )
                            )}`,
                          text: `${utils.percent(
                            results[token][api],
                            results["total"][api]
                          )}%`
                        }
                      : {
                          element: "td",
                          text: "Not Tested",
                          style: "text-align: center;"
                        }
                  )
                )
                .concat([
                  comparisonUi.state.reportsEnabled ?
                  {
                    element: "td",
                    children: {
                      className:
                        "html-report button is-dark is-outlined is-small",
                      onclick: () =>
                        WaveService.readMultiReportUri(
                          comparisonUi.state.tokens,
                          api,
                          function(uri) {
                            window.open(uri, "_blank");
                          }
                        ),
                      text: "report"
                    }
                  } : null
                ])
            }))
          });
          resultsTable.appendChild(resultsTableBody);

          const apiResults = UI.getElement("api-results");
          apiResults.innerHTML = "";
          apiResults.appendChild(apiResultsView);
        }
      };
    </script>
  </body>
</html>