github.com/aclements/go-misc@v0.0.0-20240129233631-2f6ede80790c/rtcheck/static/tmpl-order.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3      <head>
     4          <title>Lock order</title>
     5          <style type="text/css">
     6           html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden }
     7           body {
     8               font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     9               font-size: 14px;
    10               line-height: 1.42857143;
    11               color: #333;
    12           }
    13           #info {
    14               position: fixed;
    15               left: 0px;
    16               top: 0px;
    17               height: 100vh;
    18               width: 25em;
    19               box-sizing: border-box;
    20               padding-left: 1em;
    21               padding-right: 1em;
    22               background: white;
    23               box-shadow: 3px 0px 15px #888;
    24               overflow: auto;
    25           }
    26           #mainView {
    27               padding: 3em;
    28               padding-left: 28em; /* info.width + padding */
    29               box-sizing: border-box;
    30               width: 100%;
    31               height: 100%;
    32           }
    33           #graphWrap {
    34               /* In order to center #graph, we need a wrapper without padding */
    35               position: relative;
    36               width: 100%;
    37               height: 100%;
    38           }
    39           #graph {
    40               position: absolute;
    41               left: 50%;
    42               top: 50%;
    43               overflow: visible;
    44           }
    45          </style>
    46      </head>
    47      <body>
    48          <div id="mainView"><div id="graphWrap"><svg id="graph" style="visibility:hidden">{{.graph}}</svg></div></div>
    49          <div id="info">
    50              <p>
    51                  The graph to the right shows the lock order. Cycles
    52                  are highlighed in red and represent potential
    53                  deadlocks.
    54              </p>
    55              <p>
    56                  Click an edge in the lock graph to show code paths
    57                  demonstrating that edge. Drag or wheel on the graph to
    58                  pan or zoom.
    59              </p>
    60              <p>
    61                  Cycle edges are annotated with the number of code
    62                  paths demonstating that edge. Typically the "buggy"
    63                  edge will have fewer code paths.
    64              </p>
    65              <p>
    66                  For details and limitations of this analysis, see
    67                  <a href="https://godoc.org/github.com/aclements/go-misc/rtcheck">go doc rtcheck</a>.
    68              </p>
    69          </div>
    70          <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    71          <!-- <script src="main.js"></script> -->
    72          <script>{{.mainJS}}</script>
    73          <script>initOrder({{.strings}}, {{.edges}});</script>
    74      </body>
    75  </html>