You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ja...@apache.org on 2021/09/02 22:09:03 UTC
[pinot] branch master updated: Make the SQL Editor box expandable
(#7381)
This is an automated email from the ASF dual-hosted git repository.
jackie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 8fab3be Make the SQL Editor box expandable (#7381)
8fab3be is described below
commit 8fab3be547d346deb2872cac96e7c52db2c98f1c
Author: hristo-stripe <89...@users.noreply.github.com>
AuthorDate: Thu Sep 2 15:08:41 2021 -0700
Make the SQL Editor box expandable (#7381)
The default size of the SQL Editor box is such that it only shows
about 5 lines of text. The SQL Editor uses [react-codemirror2](https://github.com/scniro/react-codemirror2) which recommends
using [re-resizable](https://github.com/bokuweb/re-resizable) to make the editor field resizable.
This patch adds a new NPM library dependency on `re-resizable` and adds
a react component to make the field expandable. As a way to make the change minimal,
the patch only allows the field to be vertically expandable and keeps the default
size the same (height is 100px).
---
.../src/main/resources/app/pages/Query.tsx | 46 ++++++++++++++--------
.../src/main/resources/package-lock.json | 13 ++++++
pinot-controller/src/main/resources/package.json | 1 +
3 files changed, 44 insertions(+), 16 deletions(-)
diff --git a/pinot-controller/src/main/resources/app/pages/Query.tsx b/pinot-controller/src/main/resources/app/pages/Query.tsx
index 12dd8a1..77f658e 100644
--- a/pinot-controller/src/main/resources/app/pages/Query.tsx
+++ b/pinot-controller/src/main/resources/app/pages/Query.tsx
@@ -45,6 +45,7 @@ import TableToolbar from '../components/TableToolbar';
import SimpleAccordion from '../components/SimpleAccordion';
import PinotMethodUtils from '../utils/PinotMethodUtils';
import '../styles/styles.css';
+import {Resizable} from "re-resizable";
const useStyles = makeStyles((theme) => ({
title: {
@@ -53,8 +54,9 @@ const useStyles = makeStyles((theme) => ({
},
rightPanel: {},
codeMirror: {
+ height: '100%',
'& .CodeMirror': {
- height: 100,
+ height: '100%',
border: '1px solid #BDCCD9',
fontSize: '13px',
},
@@ -78,9 +80,11 @@ const useStyles = makeStyles((theme) => ({
paddingLeft: '74px',
},
sqlDiv: {
+ height: '100%',
border: '1px #BDCCD9 solid',
borderRadius: 4,
marginBottom: '20px',
+ paddingBottom: '48px',
},
sqlError: {
whiteSpace: 'pre-wrap',
@@ -345,22 +349,32 @@ const QueryPage = () => {
>
<Grid container>
<Grid item xs={12} className={classes.rightPanel}>
- <div className={classes.sqlDiv}>
- <TableToolbar name="SQL Editor" showSearchBox={false} showTooltip={true} tooltipText={sqlEditorTooltip} />
- <CodeMirror
- options={{
- ...sqloptions,
- hintOptions: {
- hint: handleSqlHints,
- },
+ <Resizable
+ defaultSize={{
+ width: '100%',
+ height: 148,
}}
- value={inputQuery}
- onChange={handleOutputDataChange}
- onKeyDown={handleQueryInterfaceKeyDown}
- className={classes.codeMirror}
- autoCursor={false}
- />
- </div>
+ minHeight={148}
+ maxWidth={'100%'}
+ maxHeight={'50vh'}
+ enable={{bottom: true}}>
+ <div className={classes.sqlDiv}>
+ <TableToolbar name="SQL Editor" showSearchBox={false} showTooltip={true} tooltipText={sqlEditorTooltip} />
+ <CodeMirror
+ options={{
+ ...sqloptions,
+ hintOptions: {
+ hint: handleSqlHints,
+ },
+ }}
+ value={inputQuery}
+ onChange={handleOutputDataChange}
+ onKeyDown={handleQueryInterfaceKeyDown}
+ className={classes.codeMirror}
+ autoCursor={false}
+ />
+ </div>
+ </Resizable>
<Grid container className={classes.checkBox}>
<Grid item xs={2}>
diff --git a/pinot-controller/src/main/resources/package-lock.json b/pinot-controller/src/main/resources/package-lock.json
index b3771ef..12ce1da 100644
--- a/pinot-controller/src/main/resources/package-lock.json
+++ b/pinot-controller/src/main/resources/package-lock.json
@@ -3373,6 +3373,11 @@
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
"dev": true
},
+ "fast-memoize": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+ "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+ },
"fastparse": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -7560,6 +7565,14 @@
}
}
},
+ "re-resizable": {
+ "version": "6.9.0",
+ "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+ "integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+ "requires": {
+ "fast-memoize": "^2.5.1"
+ }
+ },
"react": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
diff --git a/pinot-controller/src/main/resources/package.json b/pinot-controller/src/main/resources/package.json
index bf81269..6118d17 100644
--- a/pinot-controller/src/main/resources/package.json
+++ b/pinot-controller/src/main/resources/package.json
@@ -76,6 +76,7 @@
"lodash": "^4.17.17",
"moment": "^2.27.0",
"prop-types": "^15.7.2",
+ "re-resizable": "^6.9.0",
"react": "16.13.1",
"react-codemirror2": "^7.2.1",
"react-dom": "16.13.1",
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org