fix(graphiql): solve vertical scrolling issue (#1188)

graphile · Nov 18, 2019 · b811b9f · b811b9f
1 parent 39ae8b5
commit b811b9f
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 43 deletions.
diff --git a/postgraphiql/src/components/PostGraphiQL.js b/postgraphiql/src/components/PostGraphiQL.js
@@ -642,7 +642,13 @@ class PostGraphiQL extends React.PureComponent {
       return <GraphiQL {...sharedProps} />;
     } else {
       return (
-        <div className="postgraphiql-container graphiql-container">
+        <div
+          className={`postgraphiql-container graphiql-container ${
+            this.state.explain && this.state.explainResult && this.state.explainResult.length
+              ? 'explain-mode'
+              : ''
+          }`}
+        >
           <GraphiQLExplorer
             schema={schema}
             query={this.state.query}
@@ -704,16 +710,23 @@ class PostGraphiQL extends React.PureComponent {
             <GraphiQL.Footer>
               <div className="postgraphile-footer">
                 {this.state.explainResult && this.state.explainResult.length ? (
-                  <div>
-                    <h4>Explain: analysis of executed queries</h4>
+                  <div className="postgraphile-plan-footer">
                     {this.state.explainResult.map(res => (
                       <div>
-                        <pre>
-                          <code>{formatSQL(res.query)}</code>
-                        </pre>
-                        <pre>
+                        <h4>
+                          Result from SQL{' '}
+                          <a href="https://www.postgresql.org/docs/current/sql-explain.html">
+                            EXPLAIN
+                          </a>{' '}
+                          on executed query:
+                        </h4>
+                        <pre className="explain-plan">
                           <code>{res.plan}</code>
                         </pre>
+                        <h4>Executed SQL query:</h4>
+                        <pre className="explain-sql">
+                          <code>{formatSQL(res.query)}</code>
+                        </pre>
                       </div>
                     ))}
                     <p>
@@ -723,38 +736,40 @@ class PostGraphiQL extends React.PureComponent {
                     <hr />
                   </div>
                 ) : null}
-                PostGraphile:{' '}
-                <a
-                  title="Open PostGraphile documentation"
-                  href="https://graphile.org/postgraphile/introduction/"
-                  target="new"
-                >
-                  Documentation
-                </a>{' '}
-                |{' '}
-                <a
-                  title="Open PostGraphile documentation"
-                  href="https://graphile.org/postgraphile/examples/"
-                  target="new"
-                >
-                  Examples
-                </a>{' '}
-                |{' '}
-                <a
-                  title="PostGraphile is supported by the community, please sponsor ongoing development"
-                  href="https://graphile.org/sponsor/"
-                  target="new"
-                >
-                  Sponsor
-                </a>{' '}
-                |{' '}
-                <a
-                  title="Get support from the team behind PostGraphile"
-                  href="https://graphile.org/support/"
-                  target="new"
-                >
-                  Support
-                </a>
+                <div className="postgraphile-regular-footer">
+                  PostGraphile:{' '}
+                  <a
+                    title="Open PostGraphile documentation"
+                    href="https://graphile.org/postgraphile/introduction/"
+                    target="new"
+                  >
+                    Documentation
+                  </a>{' '}
+                  |{' '}
+                  <a
+                    title="Open PostGraphile documentation"
+                    href="https://graphile.org/postgraphile/examples/"
+                    target="new"
+                  >
+                    Examples
+                  </a>{' '}
+                  |{' '}
+                  <a
+                    title="PostGraphile is supported by the community, please sponsor ongoing development"
+                    href="https://graphile.org/sponsor/"
+                    target="new"
+                  >
+                    Sponsor
+                  </a>{' '}
+                  |{' '}
+                  <a
+                    title="Get support from the team behind PostGraphile"
+                    href="https://graphile.org/support/"
+                    target="new"
+                  >
+                    Support
+                  </a>
+                </div>
               </div>
             </GraphiQL.Footer>
           </GraphiQL>

diff --git a/postgraphiql/src/components/postgraphiql.css b/postgraphiql/src/components/postgraphiql.css
@@ -37,19 +37,36 @@
   margin: 0;
 }
 
-.resultWrap .footer {
-  max-height: 50%;
+.resultWrap .result-window {
+  flex: 1 1 100%;
+}
+
+.explain-mode .resultWrap .footer {
+  flex: 1 1 100%;
+  position: relative;
+}
+
+.explain-mode .postgraphile-footer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overflow: auto;
+  overflow-x: hidden;
 }
 
 .postgraphile-footer {
   line-height: 30px;
-  overflow: hidden;
-  display: block;
   align-items: center;
   padding: 0 0 0 1rem;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-between;
 }
 .postgraphile-footer a {
   text-decoration: none;
@@ -61,6 +78,16 @@
   line-height: 1.1em;
   background-color: rgba(0, 0, 0, 0.1);
 }
+
+.explain-plan,
+.explain-sql {
+  max-height: 8.8em; /* line-height is 1.1em */
+  overflow: auto;
+}
+.explain-plan {
+  max-height: 13.2em; /* line-height is 1.1em */
+}
+
 .resultWrap {
   width: 5rem;
 }