WorkspaceTimings:Navigate To Start Stage

Build 17641 on bq/add-agent-timings
dark
Reviewing disabled
View latest build
Resources requested by the new story could not be loaded. Snapshots may be affected.
Build 17641 on bq/add-agent-timings
View Storybook
ErrorBuild 17641 on bq/add-agent-timings
View Storybook
  • Discussions
  • Interactions
Fail
WorkspaceTimings.stories.tsx
Unable to find an accessible element with the role "button" and name "View start details"

Here are the accessible roles:

  button:

  Name "Build timeline 47s":
  <button
    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-rqmmvu"
    tabindex="0"
    type="button"
  />

  Name "View plan details":
  <button
    aria-label="View plan details"
    class="css-1cwyj5r"
    type="button"
  />

  Name "View run startup scripts details":
  <button
    aria-label="View run startup scripts details"
    class="css-142eaaw"
    type="button"
  />

  --------------------------------------------------
  banner:

  Name "":
  <header
    class="css-ngonw4"
  />

  Name "":
  <header
    class="css-ngonw4"
  />

  --------------------------------------------------
  list:

  Name "":
  <ul
    class="css-gnnifq"
  />

  Name "":
  <ul
    class="css-gnnifq"
  />

  Name "":
  <ul
    class="css-o7l34z"
  />

  --------------------------------------------------
  listitem:

  Name "":
  <li
    class="css-q85mhj"
    id="init"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="plan"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="graph"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="apply"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="connect"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="start"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  --------------------------------------------------
  presentation:

  Name "":
  <div
    class="css-179ih90"
    role="presentation"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-18zts8w"
  >
    <button
      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-rqmmvu"
      tabindex="0"
      type="button"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vg4nxz"
        data-testid="KeyboardArrowUpIcon"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path
          d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"
        />
      </svg>
      <span>
        Build timeline
      </span>
      <span
        class="css-1epo01h"
      >
        47s
      </span>
    </button>
    <div
      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr"
      style="min-height: 0px;"
    >
      <div
        class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5"
      >
        <div
          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb"
        >
          <div
            class="css-tvm9ay"
          >
            <div
              class="css-3t0rl0"
            >
              <div
                class="css-1meu9je"
                style="--scroll-mask-opacity: 0;"
              >
                <div
                  class="css-1gmgvsx"
                >
                  <section
                    class="css-1plwc4"
                  >
                    <header
                      class="css-ngonw4"
                    >
                      provisioning
                    </header>
                    <ul
                      class="css-gnnifq"
                    >
                      <li
                        class="css-q85mhj"
                        id="init"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            init
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="plan"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            plan
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="graph"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            graph
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="apply"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            apply
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </section>
                  <section
                    class="css-1plwc4"
                  >
                    <header
                      class="css-ngonw4"
                    >
                      dev
                    </header>
                    <ul
                      class="css-gnnifq"
                    >
                      <li
                        class="css-q85mhj"
                        id="connect"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            connect
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="start"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            run startup scripts
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </section>
                </div>
                <div
                  class="css-1es7cog"
                  style="--x-axis-width: 130px;"
                >
                  <ul
                    class="css-o7l34z"
                  >
                    <li
                      class="css-t7cbn9"
                    >
                      5,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      10,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      15,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      20,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      25,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      30,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      35,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      40,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      45,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      50,000ms
                    </li>
                  </ul>
                  <section
                    class="css-10w67ta"
                  >
                    <div
                      aria-labelledby="init"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1c5mbwa"
                      />
                      9,125ms
                    </div>
                    <div
                      aria-labelledby="plan"
                      class="css-dvogs3"
                    >
                      <button
                        aria-label="View plan details"
                        class="css-1cwyj5r"
                        type="button"
                      >
                        <div
                          class="css-obqlig"
                        >
                          <div
                            class="css-1hzqgti"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv"
                              data-testid="MoreHorizOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                              />
                            </svg>
                          </div>
                        </div>
                      </button>
                      1,656ms
                    </div>
                    <div
                      aria-labelledby="graph"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1aa02yv"
                      />
                      533ms
                    </div>
                    <div
                      aria-labelledby="apply"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1umvmrg"
                      />
                      2,832ms
                    </div>
                  </section>
                  <section
                    class="css-10w67ta"
                  >
                    <div
                      aria-labelledby="connect"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-y3ne4s"
                      />
                      1,000ms
                    </div>
                    <div
                      aria-labelledby="start"
                      class="css-dvogs3"
                    >
                      <button
                        aria-label="View run startup scripts details"
                        class="css-142eaaw"
                        type="button"
                      >
                        <div
                          class="css-obqlig"
                        >
                          <div
                            class="css-1hzqgti"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv"
                              data-testid="MoreHorizOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                              />
                            </svg>
                          </div>
                        </div>
                      </button>
                      29,579ms
                    </div>
                  </section>
                  <div
                    class="css-179ih90"
                    role="presentation"
                  >
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
View in Storybook
Chrome 121
1168x479
Linux Linux Ubuntu 20.04.4
3e1170 on bq/add-agent-timings
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "View start details"

Here are the accessible roles:

  button:

  Name "Build timeline 47s":
  <button
    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-rqmmvu"
    tabindex="0"
    type="button"
  />

  Name "View plan details":
  <button
    aria-label="View plan details"
    class="css-1cwyj5r"
    type="button"
  />

  Name "View run startup scripts details":
  <button
    aria-label="View run startup scripts details"
    class="css-142eaaw"
    type="button"
  />

  --------------------------------------------------
  banner:

  Name "":
  <header
    class="css-ngonw4"
  />

  Name "":
  <header
    class="css-ngonw4"
  />

  --------------------------------------------------
  list:

  Name "":
  <ul
    class="css-gnnifq"
  />

  Name "":
  <ul
    class="css-gnnifq"
  />

  Name "":
  <ul
    class="css-o7l34z"
  />

  --------------------------------------------------
  listitem:

  Name "":
  <li
    class="css-q85mhj"
    id="init"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="plan"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="graph"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="apply"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="connect"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-q85mhj"
    id="start"
    style="height: 32px;"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  Name "":
  <li
    class="css-t7cbn9"
  />

  --------------------------------------------------
  presentation:

  Name "":
  <div
    class="css-179ih90"
    role="presentation"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-18zts8w"
  >
    <button
      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-rqmmvu"
      tabindex="0"
      type="button"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vg4nxz"
        data-testid="KeyboardArrowUpIcon"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path
          d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"
        />
      </svg>
      <span>
        Build timeline
      </span>
      <span
        class="css-1epo01h"
      >
        47s
      </span>
    </button>
    <div
      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr"
      style="min-height: 0px;"
    >
      <div
        class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5"
      >
        <div
          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb"
        >
          <div
            class="css-tvm9ay"
          >
            <div
              class="css-3t0rl0"
            >
              <div
                class="css-1meu9je"
                style="--scroll-mask-opacity: 0;"
              >
                <div
                  class="css-1gmgvsx"
                >
                  <section
                    class="css-1plwc4"
                  >
                    <header
                      class="css-ngonw4"
                    >
                      provisioning
                    </header>
                    <ul
                      class="css-gnnifq"
                    >
                      <li
                        class="css-q85mhj"
                        id="init"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            init
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="plan"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            plan
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="graph"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            graph
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="apply"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            apply
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </section>
                  <section
                    class="css-1plwc4"
                  >
                    <header
                      class="css-ngonw4"
                    >
                      dev
                    </header>
                    <ul
                      class="css-gnnifq"
                    >
                      <li
                        class="css-q85mhj"
                        id="connect"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            connect
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                      <li
                        class="css-q85mhj"
                        id="start"
                        style="height: 32px;"
                      >
                        <span>
                          <span
                            class="css-yi2y4o"
                          >
                            run startup scripts
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-fujg4b"
                              data-testid="InfoOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                              />
                            </svg>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </section>
                </div>
                <div
                  class="css-1es7cog"
                  style="--x-axis-width: 130px;"
                >
                  <ul
                    class="css-o7l34z"
                  >
                    <li
                      class="css-t7cbn9"
                    >
                      5,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      10,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      15,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      20,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      25,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      30,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      35,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      40,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      45,000ms
                    </li>
                    <li
                      class="css-t7cbn9"
                    >
                      50,000ms
                    </li>
                  </ul>
                  <section
                    class="css-10w67ta"
                  >
                    <div
                      aria-labelledby="init"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1c5mbwa"
                      />
                      9,125ms
                    </div>
                    <div
                      aria-labelledby="plan"
                      class="css-dvogs3"
                    >
                      <button
                        aria-label="View plan details"
                        class="css-1cwyj5r"
                        type="button"
                      >
                        <div
                          class="css-obqlig"
                        >
                          <div
                            class="css-1hzqgti"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv"
                              data-testid="MoreHorizOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                              />
                            </svg>
                          </div>
                        </div>
                      </button>
                      1,656ms
                    </div>
                    <div
                      aria-labelledby="graph"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1aa02yv"
                      />
                      533ms
                    </div>
                    <div
                      aria-labelledby="apply"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-1umvmrg"
                      />
                      2,832ms
                    </div>
                  </section>
                  <section
                    class="css-10w67ta"
                  >
                    <div
                      aria-labelledby="connect"
                      class="css-dvogs3"
                    >
                      <div
                        class="css-y3ne4s"
                      />
                      1,000ms
                    </div>
                    <div
                      aria-labelledby="start"
                      class="css-dvogs3"
                    >
                      <button
                        aria-label="View run startup scripts details"
                        class="css-142eaaw"
                        type="button"
                      >
                        <div
                          class="css-obqlig"
                        >
                          <div
                            class="css-1hzqgti"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv"
                              data-testid="MoreHorizOutlinedIcon"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                              />
                            </svg>
                          </div>
                        </div>
                      </button>
                      29,579ms
                    </div>
                  </section>
                  <div
                    class="css-179ih90"
                    role="presentation"
                  >
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                    <div
                      class="css-k2ifvv"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    at Object.getElementError (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:116:284)
    at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:138:164
    at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:130:4148
    at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:138:387
    at cn.invoke (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:8806)
    at cn.track (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:6144)
    at Object.getByRole (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:5517)
    at play (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/WorkspaceTimings.stories-BsLf8Bne.js:1:14107)
    at playFunction (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/sb-preview/runtime.js:113:6184)
    at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3903