sqlui 0.1.13 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.version +1 -1
- data/app/server.rb +12 -12
- data/app/views/databases.erb +65 -0
- data/resources/sqlui.css +242 -0
- data/resources/sqlui.html +60 -0
- data/resources/sqlui.js +24458 -0
- metadata +5 -1
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: 6ba63da1ed30cfdea9173f2a36da69e8fc15dad031758462b155207b20a8fd80
         | 
| 4 | 
            +
              data.tar.gz: 5c3b9d24c298b0d2fe959a7335768c3f42486e4997f1b9b3bc9277ecf50da43c
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: 98690da6f44fd10cc3a10c8425da463d5db944ef8015836e74666ec4a64950940f5ae039da64f72c0f58b51ca3a375dcb18816c49a2c71fbae3cc86d4adba814
         | 
| 7 | 
            +
              data.tar.gz: 4c26360082f3417e70e46b7436888e068c6897cebdd09b2019b2a9a4db3dc92bf5b0f27371e01b4dee2a153abaf21a09e931da395c7b72aa3d309ce7453c2528
         | 
    
        data/.version
    CHANGED
    
    | @@ -1 +1 @@ | |
| 1 | 
            -
            0.1. | 
| 1 | 
            +
            0.1.15
         | 
    
        data/app/server.rb
    CHANGED
    
    | @@ -34,26 +34,26 @@ class Server < Sinatra::Base | |
| 34 34 | 
             
              end
         | 
| 35 35 |  | 
| 36 36 | 
             
              config = YAML.load(ERB.new(File.read(ARGV[0])).result)
         | 
| 37 | 
            -
               | 
| 38 | 
            -
              client_map = config['databases'].values.map do | | 
| 37 | 
            +
              saved_path_root = config['saved_path']
         | 
| 38 | 
            +
              client_map = config['databases'].values.map do |database_config|
         | 
| 39 39 | 
             
                client_params = {
         | 
| 40 | 
            -
                  host:             | 
| 41 | 
            -
                  port:             | 
| 42 | 
            -
                  username:         | 
| 43 | 
            -
                  password:         | 
| 44 | 
            -
                  database:         | 
| 40 | 
            +
                  host:            database_config['db_host'],
         | 
| 41 | 
            +
                  port:            database_config['db_port'] || 3306,
         | 
| 42 | 
            +
                  username:        database_config['db_username'],
         | 
| 43 | 
            +
                  password:        database_config['db_password'],
         | 
| 44 | 
            +
                  database:        database_config['db_database'],
         | 
| 45 45 | 
             
                  read_timeout:    10, # seconds
         | 
| 46 46 | 
             
                  write_timeout:   0,  # seconds
         | 
| 47 47 | 
             
                  connect_timeout: 5   # seconds
         | 
| 48 48 | 
             
                }
         | 
| 49 49 | 
             
                client = Client.new(client_params)
         | 
| 50 50 | 
             
                [
         | 
| 51 | 
            -
                   | 
| 51 | 
            +
                  database_config['url_path'], 
         | 
| 52 52 | 
             
                  ::SQLUI.new(
         | 
| 53 53 | 
             
                    client:       client,
         | 
| 54 | 
            -
                    table_schema:  | 
| 55 | 
            -
                    name:          | 
| 56 | 
            -
                    saved_path:   File.join( | 
| 54 | 
            +
                    table_schema: database_config['db_database'],
         | 
| 55 | 
            +
                    name:         database_config['name'],
         | 
| 56 | 
            +
                    saved_path:   File.join(saved_path_root, database_config['saved_path'])
         | 
| 57 57 | 
             
                  )
         | 
| 58 58 | 
             
                ]
         | 
| 59 59 | 
             
              end.to_h
         | 
| @@ -64,7 +64,7 @@ class Server < Sinatra::Base | |
| 64 64 | 
             
              end
         | 
| 65 65 |  | 
| 66 66 | 
             
              get '/db/?' do
         | 
| 67 | 
            -
                erb :databases, :locals => {:databases => databases}
         | 
| 67 | 
            +
                erb :databases, :locals => {:databases => config['databases']}
         | 
| 68 68 | 
             
              end
         | 
| 69 69 |  | 
| 70 70 | 
             
              get '/db/:database' do
         | 
| @@ -0,0 +1,65 @@ | |
| 1 | 
            +
            <html>
         | 
| 2 | 
            +
              <head>
         | 
| 3 | 
            +
                <title>Payments Databases</title>
         | 
| 4 | 
            +
             | 
| 5 | 
            +
                <style>
         | 
| 6 | 
            +
                  body {
         | 
| 7 | 
            +
                    font-family: Helvetica;
         | 
| 8 | 
            +
                  }
         | 
| 9 | 
            +
             | 
| 10 | 
            +
                  h1 {
         | 
| 11 | 
            +
                    font-size: 30px;
         | 
| 12 | 
            +
                    margin-bottom: 30px;
         | 
| 13 | 
            +
                  }
         | 
| 14 | 
            +
             | 
| 15 | 
            +
                  .database a {
         | 
| 16 | 
            +
                    margin-right: 10px;
         | 
| 17 | 
            +
                    color: darkblue;
         | 
| 18 | 
            +
                    font-size: 16px;
         | 
| 19 | 
            +
                  }
         | 
| 20 | 
            +
             | 
| 21 | 
            +
                  .database h2 {
         | 
| 22 | 
            +
                    margin: 0px;
         | 
| 23 | 
            +
                    margin-top: 10px;
         | 
| 24 | 
            +
                    margin-bottom: 0px;
         | 
| 25 | 
            +
                    font-size: 20px;
         | 
| 26 | 
            +
                    font-weight: bold;
         | 
| 27 | 
            +
                  }
         | 
| 28 | 
            +
             | 
| 29 | 
            +
                  .database p {
         | 
| 30 | 
            +
                    margin: 0px;
         | 
| 31 | 
            +
                    margin-top: 10px;
         | 
| 32 | 
            +
                    padding-bottom: 20px;
         | 
| 33 | 
            +
                    font-size: 16px;
         | 
| 34 | 
            +
                  }
         | 
| 35 | 
            +
             | 
| 36 | 
            +
                  .database {
         | 
| 37 | 
            +
                    cursor: pointer;
         | 
| 38 | 
            +
                    border-bottom: 1px solid #eeeeee;
         | 
| 39 | 
            +
                  }
         | 
| 40 | 
            +
             | 
| 41 | 
            +
                  .database:last-child {
         | 
| 42 | 
            +
                    border-bottom: none;
         | 
| 43 | 
            +
                  }
         | 
| 44 | 
            +
             | 
| 45 | 
            +
                  .database:hover {
         | 
| 46 | 
            +
                    background: #eee;
         | 
| 47 | 
            +
                  }
         | 
| 48 | 
            +
                </style>
         | 
| 49 | 
            +
              </head>
         | 
| 50 | 
            +
             | 
| 51 | 
            +
              <body>
         | 
| 52 | 
            +
                <h1>Payments Databases</h1>
         | 
| 53 | 
            +
                <% databases.values.each do |database| %>
         | 
| 54 | 
            +
                  <div class="database" onclick="window.location='<%= "/db/#{database['url_path']}/app" %>'">
         | 
| 55 | 
            +
                  <h2><%= database['name'] %></h2>
         | 
| 56 | 
            +
                  <a href="/db/<%= database['url_path'] %>/app">query</a>
         | 
| 57 | 
            +
                  <a href="/db/<%= database['url_path'] %>/app?tab=saved">saved</a>
         | 
| 58 | 
            +
                  <a href="/db/<%= database['url_path'] %>/app?tab=structure">structure</a>
         | 
| 59 | 
            +
                  <p>
         | 
| 60 | 
            +
                    <%= database['description'] %>
         | 
| 61 | 
            +
                  </p>
         | 
| 62 | 
            +
                </div>
         | 
| 63 | 
            +
                <% end %>
         | 
| 64 | 
            +
              </body>
         | 
| 65 | 
            +
            </html>
         | 
    
        data/resources/sqlui.css
    ADDED
    
    | @@ -0,0 +1,242 @@ | |
| 1 | 
            +
                body {
         | 
| 2 | 
            +
                  font-size: 16px;
         | 
| 3 | 
            +
                  margin: 0;
         | 
| 4 | 
            +
                }
         | 
| 5 | 
            +
             | 
| 6 | 
            +
                .main-box {
         | 
| 7 | 
            +
                  display: flex;
         | 
| 8 | 
            +
                  flex-direction: column;
         | 
| 9 | 
            +
                  flex: 1;
         | 
| 10 | 
            +
                  margin: 0;
         | 
| 11 | 
            +
                  height: 100%;
         | 
| 12 | 
            +
                  min-height: 100%;
         | 
| 13 | 
            +
                }
         | 
| 14 | 
            +
             | 
| 15 | 
            +
                .header {
         | 
| 16 | 
            +
                  display: flex;
         | 
| 17 | 
            +
                  flex: 1;
         | 
| 18 | 
            +
                  align-items: center;
         | 
| 19 | 
            +
                  justify-content: start;
         | 
| 20 | 
            +
                  padding-left: 5px;
         | 
| 21 | 
            +
                  color: #333;
         | 
| 22 | 
            +
                  font-weight: bold;
         | 
| 23 | 
            +
                }
         | 
| 24 | 
            +
             | 
| 25 | 
            +
                .tabs-box {
         | 
| 26 | 
            +
                  display: flex;
         | 
| 27 | 
            +
                  flex-direction: row;
         | 
| 28 | 
            +
                  border-bottom: 1px solid #ddd;
         | 
| 29 | 
            +
                  height: 36px;
         | 
| 30 | 
            +
                  font-size: 16px;
         | 
| 31 | 
            +
                  font-family: Helvetica;
         | 
| 32 | 
            +
                }
         | 
| 33 | 
            +
             | 
| 34 | 
            +
                .tab-button, .selected-tab-button {
         | 
| 35 | 
            +
                  border: none;
         | 
| 36 | 
            +
                  outline: none;
         | 
| 37 | 
            +
                  cursor: pointer;
         | 
| 38 | 
            +
                  width: 150px;
         | 
| 39 | 
            +
                  padding: 2px;
         | 
| 40 | 
            +
                  margin: 0px;
         | 
| 41 | 
            +
                  display: flex;
         | 
| 42 | 
            +
                  justify-content: center;
         | 
| 43 | 
            +
                  background-color: #fff;
         | 
| 44 | 
            +
                }
         | 
| 45 | 
            +
             | 
| 46 | 
            +
                .tab-button {
         | 
| 47 | 
            +
                  color: #888;
         | 
| 48 | 
            +
                }
         | 
| 49 | 
            +
             | 
| 50 | 
            +
                .tab-button:hover {
         | 
| 51 | 
            +
                  color: #333;
         | 
| 52 | 
            +
                }
         | 
| 53 | 
            +
             | 
| 54 | 
            +
                .selected-tab-button {
         | 
| 55 | 
            +
                  color: #333;
         | 
| 56 | 
            +
                  font-weight: bold;
         | 
| 57 | 
            +
                }
         | 
| 58 | 
            +
             | 
| 59 | 
            +
                .tab-content-element {
         | 
| 60 | 
            +
                  display: none;
         | 
| 61 | 
            +
                }
         | 
| 62 | 
            +
             | 
| 63 | 
            +
                .query-box {
         | 
| 64 | 
            +
                  display: flex;
         | 
| 65 | 
            +
                  flex-direction: column;
         | 
| 66 | 
            +
                }
         | 
| 67 | 
            +
             | 
| 68 | 
            +
                .query {
         | 
| 69 | 
            +
                  display: flex;
         | 
| 70 | 
            +
                  flex: 1;
         | 
| 71 | 
            +
                }
         | 
| 72 | 
            +
             | 
| 73 | 
            +
                .submit-box {
         | 
| 74 | 
            +
                  display: flex;
         | 
| 75 | 
            +
                  border-top: 1px solid #ddd;
         | 
| 76 | 
            +
                  height: 36px;
         | 
| 77 | 
            +
                  justify-content: right;
         | 
| 78 | 
            +
                }
         | 
| 79 | 
            +
             | 
| 80 | 
            +
                .status {
         | 
| 81 | 
            +
                  display: flex;
         | 
| 82 | 
            +
                  justify-content: center;
         | 
| 83 | 
            +
                  align-content: center;
         | 
| 84 | 
            +
                  flex-direction: column;
         | 
| 85 | 
            +
                  font-family: Helvetica;
         | 
| 86 | 
            +
                }
         | 
| 87 | 
            +
             | 
| 88 | 
            +
                .result-box, .saved-box, .graph-box, .structure-box {
         | 
| 89 | 
            +
                  flex: 1;
         | 
| 90 | 
            +
                  overflow: auto;
         | 
| 91 | 
            +
                  display: flex;
         | 
| 92 | 
            +
                  flex-direction: column;
         | 
| 93 | 
            +
                }
         | 
| 94 | 
            +
             | 
| 95 | 
            +
                .graph-box, .result-box {
         | 
| 96 | 
            +
                  border-top: 1px solid #ddd;
         | 
| 97 | 
            +
                }
         | 
| 98 | 
            +
             | 
| 99 | 
            +
                .graph-box {
         | 
| 100 | 
            +
                  padding: 20px;
         | 
| 101 | 
            +
                }
         | 
| 102 | 
            +
             | 
| 103 | 
            +
                table {
         | 
| 104 | 
            +
                  font-family: monospace;
         | 
| 105 | 
            +
                  flex: 1;
         | 
| 106 | 
            +
                  border-spacing: 0px;
         | 
| 107 | 
            +
                  display: flex;
         | 
| 108 | 
            +
                  width: 100%;
         | 
| 109 | 
            +
                }
         | 
| 110 | 
            +
             | 
| 111 | 
            +
                table td:last-child, table th:last-child {
         | 
| 112 | 
            +
                  width: 100%;
         | 
| 113 | 
            +
                  border-right: none !important;
         | 
| 114 | 
            +
                }
         | 
| 115 | 
            +
             | 
| 116 | 
            +
                td, th {
         | 
| 117 | 
            +
                  padding: 5px 20px 5px 5px;
         | 
| 118 | 
            +
                  font-weight: normal;
         | 
| 119 | 
            +
                  white-space: nowrap;
         | 
| 120 | 
            +
                  max-width: 500px;
         | 
| 121 | 
            +
                  overflow: hidden;
         | 
| 122 | 
            +
                  text-overflow: ellipsis;
         | 
| 123 | 
            +
                }
         | 
| 124 | 
            +
             | 
| 125 | 
            +
                td {
         | 
| 126 | 
            +
                  text-align: right;
         | 
| 127 | 
            +
                }
         | 
| 128 | 
            +
             | 
| 129 | 
            +
                th {
         | 
| 130 | 
            +
                  text-align: left;
         | 
| 131 | 
            +
                  font-weight: bold;
         | 
| 132 | 
            +
                  border-bottom: 1px solid #ddd;
         | 
| 133 | 
            +
                  border-right: 1px solid #ddd;
         | 
| 134 | 
            +
                }
         | 
| 135 | 
            +
             | 
| 136 | 
            +
                table {
         | 
| 137 | 
            +
                  display: block;
         | 
| 138 | 
            +
                }
         | 
| 139 | 
            +
             | 
| 140 | 
            +
                thead {
         | 
| 141 | 
            +
                  padding: 0px;
         | 
| 142 | 
            +
                  background-color: #fff;
         | 
| 143 | 
            +
                  position: -webkit-sticky;
         | 
| 144 | 
            +
                  position: sticky;
         | 
| 145 | 
            +
                  top: 0px;
         | 
| 146 | 
            +
                  z-index: 100;
         | 
| 147 | 
            +
                  table-layout:fixed;
         | 
| 148 | 
            +
                }
         | 
| 149 | 
            +
             | 
| 150 | 
            +
                .highlighted-row {
         | 
| 151 | 
            +
                  background: #eee;
         | 
| 152 | 
            +
                }
         | 
| 153 | 
            +
             | 
| 154 | 
            +
                .status-box {
         | 
| 155 | 
            +
                  padding: 5px;
         | 
| 156 | 
            +
                  display: flex;
         | 
| 157 | 
            +
                  flex-direction: rows;
         | 
| 158 | 
            +
                  justify-content: space-between;
         | 
| 159 | 
            +
                  border-top: 1px solid #ddd;
         | 
| 160 | 
            +
                  height: 30px;
         | 
| 161 | 
            +
                }
         | 
| 162 | 
            +
             | 
| 163 | 
            +
                .CodeMirror pre.CodeMirror-placeholder {
         | 
| 164 | 
            +
                  color: #999;
         | 
| 165 | 
            +
                }
         | 
| 166 | 
            +
             | 
| 167 | 
            +
                .tabs-box {
         | 
| 168 | 
            +
                  display: flex;
         | 
| 169 | 
            +
                }
         | 
| 170 | 
            +
             | 
| 171 | 
            +
                .saved-box {
         | 
| 172 | 
            +
                  font-family: Helvetica;
         | 
| 173 | 
            +
                }
         | 
| 174 | 
            +
             | 
| 175 | 
            +
                .saved-box h1 {
         | 
| 176 | 
            +
                  margin: 0px;
         | 
| 177 | 
            +
                  padding-left: 10px;
         | 
| 178 | 
            +
                  padding-right: 10px;
         | 
| 179 | 
            +
                  padding-top: 10px;
         | 
| 180 | 
            +
                  padding-bottom: 10px;
         | 
| 181 | 
            +
                  font-size: 16px;
         | 
| 182 | 
            +
                  font-weight: bold;
         | 
| 183 | 
            +
                }
         | 
| 184 | 
            +
             | 
| 185 | 
            +
                .saved-box div:first-child {
         | 
| 186 | 
            +
                  border-top: none !important;
         | 
| 187 | 
            +
                }
         | 
| 188 | 
            +
             | 
| 189 | 
            +
                .saved-box p {
         | 
| 190 | 
            +
                  margin: 0px;
         | 
| 191 | 
            +
                  padding-left: 20px;
         | 
| 192 | 
            +
                  padding-bottom: 20px;
         | 
| 193 | 
            +
                }
         | 
| 194 | 
            +
             | 
| 195 | 
            +
                .saved-box div {
         | 
| 196 | 
            +
                  cursor: pointer;
         | 
| 197 | 
            +
                  border-top: 1px solid #eeeeee;
         | 
| 198 | 
            +
                }
         | 
| 199 | 
            +
             | 
| 200 | 
            +
                .saved-box div:hover {
         | 
| 201 | 
            +
                  background: #eee;
         | 
| 202 | 
            +
                }
         | 
| 203 | 
            +
             | 
| 204 | 
            +
                .submit-button {
         | 
| 205 | 
            +
                  cursor: pointer;
         | 
| 206 | 
            +
                  margin-right: 10px;
         | 
| 207 | 
            +
                }
         | 
| 208 | 
            +
             | 
| 209 | 
            +
                .cm-editor.cm-focused {
         | 
| 210 | 
            +
                  outline: none !important;
         | 
| 211 | 
            +
                }
         | 
| 212 | 
            +
             | 
| 213 | 
            +
                .schemas, .tables {
         | 
| 214 | 
            +
                  border: none;
         | 
| 215 | 
            +
                  display: flex;
         | 
| 216 | 
            +
                  min-width: 200px;
         | 
| 217 | 
            +
                }
         | 
| 218 | 
            +
             | 
| 219 | 
            +
                .table-info {
         | 
| 220 | 
            +
                  display: grid;
         | 
| 221 | 
            +
                  grid-template-columns: 1;
         | 
| 222 | 
            +
                  grid-template-rows: 0.5fr 0.5fr;
         | 
| 223 | 
            +
                  justify-items: stretch;
         | 
| 224 | 
            +
                  flex: 1;
         | 
| 225 | 
            +
                }
         | 
| 226 | 
            +
             | 
| 227 | 
            +
                .columns {
         | 
| 228 | 
            +
                  border-bottom: 1px solid #ddd;
         | 
| 229 | 
            +
                  overflow: auto;
         | 
| 230 | 
            +
                  grid-column: 1;
         | 
| 231 | 
            +
                  grid-row: 1;
         | 
| 232 | 
            +
                }
         | 
| 233 | 
            +
             | 
| 234 | 
            +
                .indexes {
         | 
| 235 | 
            +
                  overflow: auto;
         | 
| 236 | 
            +
                  grid-column: 1;
         | 
| 237 | 
            +
                  grid-row: 2;
         | 
| 238 | 
            +
                }
         | 
| 239 | 
            +
             | 
| 240 | 
            +
                select {
         | 
| 241 | 
            +
                  outline: none;
         | 
| 242 | 
            +
                }
         | 
| @@ -0,0 +1,60 @@ | |
| 1 | 
            +
            <head>
         | 
| 2 | 
            +
             | 
| 3 | 
            +
              <title>SQLUI</title>
         | 
| 4 | 
            +
             | 
| 5 | 
            +
              <script src="sqlui.js"></script>
         | 
| 6 | 
            +
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
         | 
| 7 | 
            +
              <link rel="stylesheet" href="sqlui.css">
         | 
| 8 | 
            +
            </head>
         | 
| 9 | 
            +
             | 
| 10 | 
            +
            <body>
         | 
| 11 | 
            +
              <div class="main-box">
         | 
| 12 | 
            +
                <div class="tabs-box">
         | 
| 13 | 
            +
                  <div id="header" class="header">SQLUI</div>
         | 
| 14 | 
            +
                  <input id="query-tab-button" class="tab-button" type="button" value="Query" onclick="sqlui.selectTab('query')"></input>
         | 
| 15 | 
            +
                  <input id="graph-tab-button" class="tab-button" type="button" value="Graph" onclick="sqlui.selectTab('graph')"></input>
         | 
| 16 | 
            +
                  <input id="saved-tab-button" class="tab-button" type="button" value="Saved" onclick="sqlui.selectTab('saved')"></input>
         | 
| 17 | 
            +
                  <input id="structure-tab-button" class="tab-button" type="button" value="Structure" onclick="sqlui.selectTab('structure')"></input>
         | 
| 18 | 
            +
                </div>
         | 
| 19 | 
            +
             | 
| 20 | 
            +
                <div id="query-box" class="query-box tab-content-element graph-element query-element" style="display: none;">
         | 
| 21 | 
            +
                  <div id="query"></div>
         | 
| 22 | 
            +
                </div>
         | 
| 23 | 
            +
             | 
| 24 | 
            +
                <!--
         | 
| 25 | 
            +
                <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
         | 
| 26 | 
            +
                  <input id="submit-button" class="submit-button" type="button" value="submit" onclick="submit();"></input>
         | 
| 27 | 
            +
                </div>
         | 
| 28 | 
            +
                -->
         | 
| 29 | 
            +
             | 
| 30 | 
            +
                <div id="result-box" class="result-box tab-content-element query-element" style="display: none;">
         | 
| 31 | 
            +
                </div>
         | 
| 32 | 
            +
             | 
| 33 | 
            +
                <div id="graph-box" class="graph-box tab-content-element graph-element" style="display: none;">
         | 
| 34 | 
            +
                </div>
         | 
| 35 | 
            +
             | 
| 36 | 
            +
                <div id="saved-box" class="saved-box tab-content-element saved-element" style="display: none;">
         | 
| 37 | 
            +
                </div>
         | 
| 38 | 
            +
             | 
| 39 | 
            +
                <div id="structure-box" class="structure-box tab-content-element structure-element" style="display: none;">
         | 
| 40 | 
            +
                  <div style="display: flex; flex: 1; flex-direction: row; align-items: stretch;">
         | 
| 41 | 
            +
                    <select id="schemas" class="schemas" size="4">
         | 
| 42 | 
            +
                    </select>
         | 
| 43 | 
            +
                    <select id="tables" class="tables" size="4">
         | 
| 44 | 
            +
                    </select>
         | 
| 45 | 
            +
                    <div id="table-info" class="table-info">
         | 
| 46 | 
            +
                      <div id="columns" class="columns">
         | 
| 47 | 
            +
                      </div>
         | 
| 48 | 
            +
                      <div id="indexes" class="indexes">
         | 
| 49 | 
            +
                      </div>
         | 
| 50 | 
            +
                    </div>
         | 
| 51 | 
            +
                  </div>
         | 
| 52 | 
            +
                </div>
         | 
| 53 | 
            +
             | 
| 54 | 
            +
                <div id="status-box" class="status-box">
         | 
| 55 | 
            +
                  <div id="query-status" class="status tab-content-element query-element"></div>
         | 
| 56 | 
            +
                  <div id="graph-status" class="status tab-content-element graph-element"></div>
         | 
| 57 | 
            +
                  <div id="saved-status" class="status tab-content-element saved-element"></div>
         | 
| 58 | 
            +
                </div>
         | 
| 59 | 
            +
              </div>
         | 
| 60 | 
            +
            </body>
         |