Merge pull request #439 from deneb-viz/bugfix/editor-collapse-button

Re-introduce collapse editor button to new status bar. Resolves (#348)
deneb-viz · May 13, 2024 · 69c4e12 · 69c4e12
2 parents 8d1fab2 + bd69548
commit 69c4e12
Show file tree

Hide file tree

Showing 8 changed files with 2,029 additions and 1,499 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,8 +40,8 @@
         "@deneb-viz/integration-powerbi": "*",
         "@deneb-viz/json-processing": "*",
         "@deneb-viz/template-usermeta-schema": "*",
-        "@fluentui/react-components": "^9.26.2",
-        "@fluentui/react-icons": "^2.0.206",
+        "@fluentui/react-components": "^9.50.0",
+        "@fluentui/react-icons": "^2.0.239",
         "@types/ace": "^0.0.44",
         "@types/d3": "^7.1.0",
         "@types/jsoneditor": "^8.6.0",
@@ -97,4 +97,4 @@
     "overrides": {
         "vscode-uri": "3.0.7"
     }
-}
+}
diff --git a/src/features/json-editor/components/editor-pane-collapsed.tsx b/src/features/json-editor/components/editor-pane-collapsed.tsx
@@ -36,7 +36,7 @@ export const EditorPaneCollapsed: React.FC = () => {
     const [ref, setRef] = useState<HTMLElement | null>();
     return (
         <div id='editorPane' className={classes.paneContainerCollapsed}>
-            <>
+            <div className={classes.paneContainerSurround}>
                 <Tooltip
                     content={getI18nValue('Tooltip_Expand_Editor_Pane')}
                     relationship='label'
@@ -51,7 +51,7 @@ export const EditorPaneCollapsed: React.FC = () => {
                     />
                 </Tooltip>
                 <TooltipCustomMount setRef={setRef} />
-            </>
+            </div>
         </div>
     );
 };
diff --git a/src/features/json-editor/components/index.tsx b/src/features/json-editor/components/index.tsx
@@ -3,7 +3,6 @@ import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
 
 import { TEditorPosition } from '../../../core/ui';
-import { POPOVER_Z_INDEX } from '../../../constants';
 
 export const useEditorPaneStyles = makeStyles({
     buttonCollapsedLeft: {
@@ -13,11 +12,20 @@ export const useEditorPaneStyles = makeStyles({
         marginRight: '2px'
     },
     paneContainerCollapsed: {
+        width: '100%',
         height: '100%',
         backgroundColor: tokens.colorNeutralBackground1,
-        zindex: POPOVER_Z_INDEX,
+        position: 'absolute',
         ...shorthands.overflow('hidden')
     },
+    paneContainerSurround: {
+        alignItems: 'end',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        position: 'relative',
+        zIndex: 999
+    },
     paneContainerExpanded: {
         backgroundColor: tokens.colorNeutralBackground1,
         display: 'flex',

diff --git a/src/features/json-editor/components/json-editor-status-bar.tsx b/src/features/json-editor/components/json-editor-status-bar.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import * as ace from 'ace-builds';
 import Ace = ace.Ace;
-import { Caption1, makeStyles } from '@fluentui/react-components';
+import { Caption1, makeStyles, tokens } from '@fluentui/react-components';
 
 import { logRender } from '../../logging';
 import { StatusBarContainer } from '../../interface';
 import { getI18nValue } from '../../i18n';
+import { ToolbarButtonStandard } from '../../toolbar/components/toolbar-button-standard';
+import { PREVIEW_PANE_TOOLBAR_MIN_SIZE } from '../../../constants';
 
 interface IStatusBarProps {
     position: Ace.Point;
@@ -15,10 +17,29 @@ interface IStatusBarProps {
 }
 
 const useStatusStyles = makeStyles({
-    statusBarContainer: {
+    surround: {
+        height: `${PREVIEW_PANE_TOOLBAR_MIN_SIZE}px}`,
+        width: '100%',
+        position: 'absolute',
+        zIndex: 5
+    },
+    container: {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'space-between',
+        columnGap: '5px',
+        height: '100%',
+        width: '100%'
+    },
+    collapse: {
+        paddingLeft: tokens.spacingHorizontalXS
+    },
+    status: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        alignItems: 'center',
         justifyContent: 'flex-end',
         columnGap: '20px',
         height: '100%'
@@ -40,28 +61,41 @@ export const JsonEditorStatusBar: React.FC<IStatusBarProps> = ({
     logRender('JsonEditorStatusBar');
     return (
         <StatusBarContainer>
-            <div
-                className={classes.statusBarContainer}
-                onMouseEnter={clearTokenTooltip}
-                onMouseMove={clearTokenTooltip}
-            >
-                <div className='status-cursor'>
-                    <Caption1>
-                        {getI18nValue('Text_Editor_Status_Bar_Line')} {row}{' '}
-                        {getI18nValue('Text_Editor_Status_Bar_Column')} {column}{' '}
-                        {getSelectedTextMessage(selectedText)}
-                    </Caption1>
-                </div>
-                <div className='status-tabbing'>
-                    <Caption1>
-                        {escapeHatch
-                            ? getI18nValue('Text_Editor_Status_Bar_Tab_Focus')
-                            : getI18nValue(
-                                  'Text_Editor_Status_Bar_Tab_Edit'
-                              )}{' '}
-                    </Caption1>
+            <div className={classes.surround}>
+                <div
+                    className={classes.container}
+                    onMouseEnter={clearTokenTooltip}
+                    onMouseMove={clearTokenTooltip}
+                >
+                    <div className={classes.collapse}>
+                        <ToolbarButtonStandard
+                            command='editorPaneToggle'
+                            role='debug'
+                        />
+                    </div>
+                    <div className={classes.status}>
+                        <div className='status-cursor'>
+                            <Caption1>
+                                {getI18nValue('Text_Editor_Status_Bar_Line')}{' '}
+                                {row}{' '}
+                                {getI18nValue('Text_Editor_Status_Bar_Column')}{' '}
+                                {column} {getSelectedTextMessage(selectedText)}
+                            </Caption1>
+                        </div>
+                        <div className='status-tabbing'>
+                            <Caption1>
+                                {escapeHatch
+                                    ? getI18nValue(
+                                          'Text_Editor_Status_Bar_Tab_Focus'
+                                      )
+                                    : getI18nValue(
+                                          'Text_Editor_Status_Bar_Tab_Edit'
+                                      )}{' '}
+                            </Caption1>
+                        </div>
+                        <div className='status-settings'></div>
+                    </div>
                 </div>
-                <div className='status-settings'></div>
             </div>
         </StatusBarContainer>
     );

diff --git a/src/features/json-editor/components/json-editor.tsx b/src/features/json-editor/components/json-editor.tsx
@@ -54,7 +54,7 @@ interface IJsonEditorStatusState {
     selectedText: string;
 }
 
-const MOUSEMOVE_DEBOUNCE = 400;
+const MOUSEMOVE_DEBOUNCE = 200;
 
 /**
  * Represents an instance of Ace editor, responsible for maintaining either

diff --git a/src/features/toolbar/components/toolbar-button-standard.tsx b/src/features/toolbar/components/toolbar-button-standard.tsx
@@ -7,6 +7,7 @@ import {
 import {
     ArrowShuffleRegular,
     ChevronDownRegular,
+    ChevronLeftRegular,
     ChevronUpRegular,
     DocumentRegular,
     PlayRegular,
@@ -35,6 +36,7 @@ import {
     handleOpenRemapDialog,
     handleOpenWebsite,
     handleToggleDebugPane,
+    handleToggleEditorPane,
     handleToggleEditorTheme,
     handleZoomFit,
     handleZoomIn,
@@ -111,6 +113,8 @@ const resolveClick = (command: Command) => {
             return handleAutoApplyChanges;
         case 'debugPaneToggle':
             return handleToggleDebugPane;
+        case 'editorPaneToggle':
+            return handleToggleEditorPane;
         case 'exportSpecification':
             return handleExportSpecification;
         case 'fieldMappings':
@@ -157,6 +161,8 @@ const resolveI18nKey = (command: Command) => {
             return editorPreviewDebugIsExpanded
                 ? 'Tooltip_Collapse_Debug_Pane'
                 : 'Tooltip_Expand_Debug_Pane';
+        case 'editorPaneToggle':
+            return 'Tooltip_Collapse_Editor_Pane';
         case 'exportSpecification':
             return 'Button_Export';
         case 'fieldMappings':
@@ -206,6 +212,8 @@ const resolveIcon = (command: Command) => {
             ) : (
                 <ChevronUpRegular />
             );
+        case 'editorPaneToggle':
+            return <ChevronLeftRegular />;
         case 'exportSpecification':
             return <ShareRegular />;
         case 'fieldMappings':

diff --git a/src/features/vega-output/components/vega-container.tsx b/src/features/vega-output/components/vega-container.tsx
@@ -12,7 +12,7 @@ import { clearSelection, hidePowerBiTooltip } from '../../interactivity';
 import { VEGA_CONTAINER_ID } from '../../../constants';
 import { SpecProvider, SpecRenderMode } from '@deneb-viz/core-dependencies';
 import { VegaViewServices } from '../../vega-extensibility';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { getPowerBiSignalContainer } from '@deneb-viz/integration-powerbi';
 
 /**