Skip to content

Commit ea8d057

Browse files
rchiodorchiodo
authored
Make the interactive window wrap like the native editor does (microsoft#9966)
* Partially working of text output * Make interactive window wrap as much as native editor * Fix text output * Apply black formatting * Add news entry * Fix scrollbar for df.head * Remove unnecessary logging
1 parent fd24243 commit ea8d057

9 files changed

Lines changed: 106 additions & 11 deletions

File tree

‎news/1 Enhancements/4466.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Make interactive window wrap like the notebook editor does.

‎pythonFiles/datascience/getJupyterVariableDataFrameInfo.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@
4949
# If any rows, use pandas json to convert a single row to json. Extract
5050
# the column names and types from the json so we match what we'll fetch when
5151
# we ask for all of the rows
52-
if _VSCODE_targetVariable["rowCount"]:
52+
if (
53+
hasattr(_VSCODE_targetVariable, "rowCount")
54+
and _VSCODE_targetVariable["rowCount"]
55+
):
5356
try:
5457
_VSCODE_row = _VSCODE_df.iloc[0:1]
5558
_VSCODE_json_row = _VSCODE_pd_json.to_json(

‎src/datascience-ui/history-react/interactiveCell.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,15 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
147147
<div className="content-div">
148148
<div className="cell-result-container">
149149
{this.renderInput()}
150-
<CellOutput
151-
cellVM={this.props.cellVM}
152-
baseTheme={this.props.baseTheme}
153-
expandImage={this.props.showPlot}
154-
maxTextSize={this.props.maxTextSize}
155-
themeMatplotlibPlots={themeMatplotlibPlots}
156-
/>
150+
<div>
151+
<CellOutput
152+
cellVM={this.props.cellVM}
153+
baseTheme={this.props.baseTheme}
154+
expandImage={this.props.showPlot}
155+
maxTextSize={this.props.maxTextSize}
156+
themeMatplotlibPlots={themeMatplotlibPlots}
157+
/>
158+
</div>
157159
</div>
158160
</div>
159161
</div>

‎src/datascience-ui/history-react/interactivePanel.less‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,79 @@
11
/* Import common styles and then override them below */
22
@import "../interactive-common/common.css";
33

4+
:root {
5+
--messages-offset-px: 20px;
6+
--output-offset-px: 45px;
7+
}
8+
49
.toolbar-menu-bar-child {
510
background: var(--override-background, var(--vscode-editor-background));
611
z-index: 10;
712
}
813

14+
#main-panel-content {
15+
grid-area: content;
16+
max-height: 100%;
17+
overflow-x: hidden;
18+
overflow-y: auto;
19+
}
20+
21+
.messages-result-container {
22+
width: calc(100vw - var(--messages-offset-px));
23+
}
24+
25+
.messages-result-container pre {
26+
white-space: pre-wrap;
27+
font-family: monospace;
28+
margin: 0px;
29+
word-break: break-all;
30+
}
31+
32+
.cell-wrapper {
33+
margin: 0px;
34+
padding: 0px;
35+
display: block;
36+
}
37+
38+
.cell-result-container {
39+
margin: 0px;
40+
display: grid;
41+
}
42+
43+
.cell-outer {
44+
display:grid;
45+
grid-template-columns: auto 1fr 8px;
46+
grid-column-gap: 3px;
47+
width: 100%;
48+
}
49+
50+
51+
.cell-output {
52+
margin: 0px;
53+
width: calc(100vw - var(--output-offset-px));
54+
overflow-x: scroll;
55+
background: transparent;
56+
}
57+
58+
.cell-output>div {
59+
background: var(--override-widget-background, var(--vscode-notifications-background));
60+
}
61+
62+
xmp {
63+
margin: 0px;
64+
}
65+
66+
.cell-input {
67+
margin: 0;
68+
}
69+
70+
.markdown-cell-output {
71+
width: calc(100vw - var(--output-offset-px));
72+
overflow-x: scroll;
73+
}
74+
75+
.cell-output-text {
76+
white-space: pre-wrap;
77+
word-break: break-all;
78+
overflow-x: hidden;
79+
}

‎src/datascience-ui/interactive-common/cellOutput.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,7 @@ export class CellOutput extends React.Component<ICellOutputProps> {
276276
} else if (copy.data) {
277277
// Compute the mime type
278278
mimeType = getRichestMimetype(copy.data);
279+
isText = mimeType === 'text/plain';
279280
}
280281

281282
// Then parse the mime type

‎src/datascience-ui/interactive-common/common.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,20 @@ body, html {
146146

147147
.cell-output-text {
148148
white-space: pre-wrap;
149+
font-family: var(--vscode-editor-font-family);
150+
font-weight: var(--vscode-editor-font-weight);
149151
}
152+
150153
.cell-output-text pre {
151154
white-space: pre-wrap;
155+
font-family: var(--vscode-editor-font-family);
156+
font-weight: var(--vscode-editor-font-weight);
157+
}
158+
159+
.cell-output-text xmp {
160+
white-space: pre-wrap;
161+
font-family: var(--vscode-editor-font-family);
162+
font-weight: var(--vscode-editor-font-weight);
152163
}
153164

154165
.cell-output-html {

‎src/datascience-ui/interactive-common/mainState.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export function generateTestState(filePath: string = '', editable: boolean = fal
127127
knownDark: false,
128128
baseTheme: 'vscode-light',
129129
debugging: false,
130-
isAtBottom: true,
130+
isAtBottom: false,
131131
font: {
132132
size: 14,
133133
family: "Consolas, 'Courier New', monospace"

‎src/datascience-ui/native-editor/nativeEditor.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@
5454
grid-column: 3;
5555
}
5656

57+
.cell-output-text {
58+
white-space: pre-wrap;
59+
word-break: break-all;
60+
overflow-x: hidden;
61+
}
62+
5763
.markdown-cell-output-container {
5864
grid-row: 1;
5965
grid-column: 3;

‎src/datascience-ui/react-common/postOffice.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ export class PostOffice implements IDisposable {
6969
if (!this.vscodeApi && typeof acquireVsCodeApi !== 'undefined') {
7070
this.vscodeApi = acquireVsCodeApi(); // NOSONAR
7171
}
72-
let rewireConsole = false;
72+
const rewireConsole = false;
7373
if (!this.registered) {
74-
rewireConsole = true;
74+
//rewireConsole = true;
7575
this.registered = true;
7676
window.addEventListener('message', this.baseHandler);
7777
}

0 commit comments

Comments
 (0)