Skip to content

Commit d61aa83

Browse files
marthacryanmarthacryan
authored
Merge pull request #1257 from mito-ds/shortcut-graph-tabs
Update keyboard shortcut for navigating between tabs to include graph tabs
2 parents d63d5b6 + ba4bfea commit d61aa83

File tree

2 files changed

+109
-12
lines changed

2 files changed

+109
-12
lines changed

‎mitosheet/src/mito/utils/actions.tsx

+74-12
Original file line numberDiff line numberDiff line change
@@ -2155,13 +2155,44 @@ export const getActions = (
21552155
actionFunction: () => {
21562156
// We turn off editing mode, if it is on
21572157
setEditorState(undefined);
2158-
setUIState(prevUIState => {
2159-
const sheetIndex = prevUIState.selectedSheetIndex;
2160-
return {
2161-
...prevUIState,
2162-
selectedSheetIndex: sheetIndex < sheetDataArray.length - 1 ? sheetIndex + 1 : 0
2158+
2159+
const selectedSheetIndex = uiState.selectedSheetIndex;
2160+
const selectedGraphID = uiState.currOpenTaskpane.type === TaskpaneType.GRAPH ? uiState.currOpenTaskpane.openGraph.graphID : undefined;
2161+
2162+
if (selectedGraphID !== undefined) {
2163+
const graphIndex = analysisData.graphDataArray.findIndex(graphData => graphData.graph_id === selectedGraphID);
2164+
if (graphIndex === -1 || graphIndex === analysisData.graphDataArray.length - 1) {
2165+
setUIState(prevUIState => {
2166+
return {
2167+
...prevUIState,
2168+
currOpenTaskpane: {type: TaskpaneType.NONE},
2169+
selectedTabType: 'data',
2170+
selectedSheetIndex: 0
2171+
}
2172+
});
2173+
} else {
2174+
void openGraphSidebar(setUIState, uiState, setEditorState, sheetDataArray, mitoAPI, {
2175+
type: 'existing_graph',
2176+
graphID: analysisData.graphDataArray[graphIndex + 1].graph_id
2177+
})
2178+
return;
21632179
}
2164-
})
2180+
} else {
2181+
if (selectedSheetIndex === sheetDataArray.length - 1 && analysisData.graphDataArray.length > 0) {
2182+
void openGraphSidebar(setUIState, uiState, setEditorState, sheetDataArray, mitoAPI, {
2183+
type: 'existing_graph',
2184+
graphID: analysisData.graphDataArray[0].graph_id
2185+
})
2186+
return;
2187+
} else {
2188+
setUIState(prevUIState => {
2189+
return {
2190+
...prevUIState,
2191+
selectedSheetIndex: selectedSheetIndex === sheetDataArray.length - 1 ? 0 : selectedSheetIndex + 1
2192+
}
2193+
});
2194+
}
2195+
}
21652196
},
21662197
isDisabled: () => {return defaultActionDisabledMessage},
21672198
searchTerms: ['sheet', 'index', 'next', 'forward'],
@@ -2174,13 +2205,44 @@ export const getActions = (
21742205
actionFunction: () => {
21752206
// We turn off editing mode, if it is on
21762207
setEditorState(undefined);
2177-
setUIState(prevUIState => {
2178-
const sheetIndex = prevUIState.selectedSheetIndex;
2179-
return {
2180-
...prevUIState,
2181-
selectedSheetIndex: sheetIndex > 0 ? sheetIndex - 1 : sheetDataArray.length - 1
2208+
2209+
const selectedSheetIndex = uiState.selectedSheetIndex;
2210+
const selectedGraphID = uiState.currOpenTaskpane.type === TaskpaneType.GRAPH ? uiState.currOpenTaskpane.openGraph.graphID : undefined;
2211+
2212+
if (selectedGraphID !== undefined) {
2213+
const graphIndex = analysisData.graphDataArray.findIndex(graphData => graphData.graph_id === selectedGraphID);
2214+
if (graphIndex === -1 || graphIndex === 0) {
2215+
setUIState(prevUIState => {
2216+
return {
2217+
...prevUIState,
2218+
currOpenTaskpane: {type: TaskpaneType.NONE},
2219+
selectedTabType: 'data',
2220+
selectedSheetIndex: sheetDataArray.length - 1
2221+
}
2222+
});
2223+
} else {
2224+
void openGraphSidebar(setUIState, uiState, setEditorState, sheetDataArray, mitoAPI, {
2225+
type: 'existing_graph',
2226+
graphID: analysisData.graphDataArray[graphIndex - 1].graph_id
2227+
})
2228+
return;
21822229
}
2183-
})
2230+
} else {
2231+
if (selectedSheetIndex === 0 && analysisData.graphDataArray.length > 0) {
2232+
void openGraphSidebar(setUIState, uiState, setEditorState, sheetDataArray, mitoAPI, {
2233+
type: 'existing_graph',
2234+
graphID: analysisData.graphDataArray[analysisData.graphDataArray.length - 1].graph_id
2235+
})
2236+
return;
2237+
} else {
2238+
setUIState(prevUIState => {
2239+
return {
2240+
...prevUIState,
2241+
selectedSheetIndex: selectedSheetIndex === 0 ? sheetDataArray.length - 1 : selectedSheetIndex - 1
2242+
}
2243+
});
2244+
}
2245+
}
21842246
},
21852247
isDisabled: () => {return defaultActionDisabledMessage},
21862248
searchTerms: ['sheet', 'index', 'previous', 'last'],

‎tests/streamlit_ui_tests/grid/keyboard_shortcuts.spec.ts

+35
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,41 @@ test.describe('Keyboard Shortcuts', () => {
5151
// with the text test
5252
await expect(mito.locator('.tab-selected').locator('div').filter({ hasText: "test" }).first()).toBeVisible();
5353
});
54+
55+
test('Next/prev sheet with graphs', async ({ page }) => {
56+
const mito = await getMitoFrameWithTestCSV(page);
57+
58+
/* Import another csv and create 2 graphs so that we have enough tabs to navigate between */
59+
await importCSV(page, mito, 'test.csv');
60+
61+
// Create a graph
62+
await mito.getByText('Graph').click();
63+
await expect(mito.getByText('Column1 bar chart')).toBeVisible();
64+
65+
// Create another graph off of test_1
66+
await mito.locator('.tab', { hasText: 'test_1' }).click();
67+
await mito.getByText('Graph', { exact: true }).click();
68+
await expect(mito.getByText('Column1 bar chart')).toBeVisible();
69+
70+
/* Test navigation */
71+
await mito.locator('.mito-container').press('Alt+ArrowRight');
72+
await expect(mito.locator('.tab-selected')).toHaveText('test');
73+
74+
await mito.locator('.mito-container').press('Alt+ArrowRight');
75+
await expect(mito.locator('.tab-selected')).toHaveText('test_1');
76+
77+
await mito.locator('.mito-container').press('Alt+ArrowRight');
78+
await expect(mito.locator('.tab-selected')).toHaveText('graph0');
79+
80+
await mito.locator('.mito-container').press('Alt+ArrowLeft');
81+
await expect(mito.locator('.tab-selected')).toHaveText('test_1');
82+
83+
await mito.locator('.mito-container').press('Alt+ArrowLeft');
84+
await expect(mito.locator('.tab-selected')).toHaveText('test');
85+
86+
await mito.locator('.mito-container').press('Alt+ArrowLeft');
87+
await expect(mito.locator('.tab-selected')).toHaveText('graph1');
88+
});
5489

5590
test('Previous Sheet', async ({ page }) => {
5691
const mito = await getMitoFrameWithTestCSV(page);

0 commit comments

Comments
 (0)