shauryachats commented on code in PR #17511:
URL: https://github.com/apache/pinot/pull/17511#discussion_r2696710849


##########
pinot-controller/src/main/resources/app/components/Query/TimeseriesQueryPage.tsx:
##########
@@ -448,25 +560,61 @@ const TimeseriesQueryPage = () => {
       )}
 
       <Grid item xs={12} className={classes.rightPanel}>
-        <Resizable
-          defaultSize={{ width: '100%', height: 148 }}
-          minHeight={148}
-          maxWidth={'100%'}
-          maxHeight={'50vh'}
-          enable={{bottom: true}}>
-          <div className={classes.sqlDiv}>
+        <div className={classes.editorRow} ref={editorContainerRef}>
+          <Resizable
+            size={{ width: `${editorWidthPercent}%`, height: editorHeight }}
+            minHeight={EDITOR_MIN_HEIGHT}
+            minWidth={`${EDITOR_MIN_WIDTH_PERCENT}%`}
+            maxWidth={`${EDITOR_MAX_WIDTH_PERCENT}%`}
+            maxHeight={'50vh'}
+            enable={{ bottom: true, right: true, bottomRight: true }}
+            onResize={(event, direction, ref) => {
+              setEditorHeight(ref.offsetHeight);
+              if (editorContainerRef.current && (direction === 'right' || 
direction === 'bottomRight')) {
+                const containerWidth = editorContainerRef.current.offsetWidth;
+                const newPercent = Math.min(EDITOR_MAX_WIDTH_PERCENT, 
Math.max(EDITOR_MIN_WIDTH_PERCENT, (ref.offsetWidth / containerWidth) * 100));
+                setEditorWidthPercent(newPercent);
+              }
+            }}
+          >
+            <div className={classes.sqlDiv}>
+              <TableToolbar
+                name="Timeseries Query Editor"
+                showSearchBox={false}
+                showTooltip={true}
+                tooltipText="This editor supports timeseries queries. Enter 
your M3QL query here."
+              />
+              <CodeMirror
+                value={config.query}
+                onChange={handleQueryChange}
+                options={{
+                  lineNumbers: true,
+                  mode: 'text/plain',
+                  theme: 'default',
+                  lineWrapping: true,
+                  indentWithTabs: true,
+                  smartIndent: true,
+                  readOnly: supportedLanguages.length === 0,
+                }}
+                className={classes.codeMirror}
+                autoCursor={false}
+                onKeyDown={(editor, event) => 
handleQueryInterfaceKeyDownRef.current(editor, event)}
+              />
+            </div>
+          </Resizable>
+          <div className={`${classes.sqlDiv} ${classes.queryOptionsPanel}`} 
style={{ height: editorHeight }}>
             <TableToolbar
-              name="Timeseries Query Editor"
+              name="Query Options (JSON)"
               showSearchBox={false}
               showTooltip={true}
-              tooltipText="This editor supports timeseries queries. Enter your 
M3QL query here."
+              tooltipText={`Enter query options as a JSON map of strings, e.g. 
{"enableNullHandling": "true"}`}
             />

Review Comment:
   Addressed.
   <img width="313" height="254" alt="Screenshot 2026-01-15 at 7 15 37 PM" 
src="https://github.com/user-attachments/assets/9837abf0-a9db-4bf2-8c89-1bd95faf80aa";
 />
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to