Skip to content

Commit e5593d3

Browse files
malagsmalags
authored
Merge pull request #106 from LuCEresearchlab/command-view-positioning
Changed position of command view
2 parents dd87cc2 + 6b19fcf commit e5593d3

File tree

3 files changed

+82
-76
lines changed

3 files changed

+82
-76
lines changed

‎frontend/src/components/v2/TaggingUI.tsx

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -134,84 +134,86 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
134134
if (isLoading || isLoadingClusters) return (<>Loading...</>)
135135

136136
return (
137-
<Grid container direction={'row'} className={classes.root} spacing={10}>
138-
<Grid item xs={showQuestion ? 4 : 1}>
139-
<Button onClick={() => {
140-
setShowQuestion(!showQuestion)
141-
}}>Q</Button>
142-
<Collapse in={showQuestion}>
143-
<QuestionSelect
144-
questions={taggingSession.questions}
145-
selectedQuestion={taggingSession.currentQuestion}
146-
setQuestionSelect={selectedChange}/>
147-
</Collapse>
148-
</Grid>
149-
<Grid item xs={showQuestion ? 8 : 10}>
150-
<TabContext value={tab}>
151-
<TabList
152-
indicatorColor='primary'
153-
textColor='primary'
154-
centered={true}
155-
onChange={(_, e: string) => {
156-
setTab(e)
157-
}}
158-
>
159-
<Tab
160-
label={'Tagging'}
161-
value={'1'}
162-
/>
163-
<Tab
164-
label={'Clusters'}
165-
value={'2'}
166-
/>
167-
</TabList>
168-
<TabPanel value={'1'}>
169-
<Grid container direction={'row'} className={classes.taggingMiscBlock} spacing={2}
170-
component={Paper}
171-
style={{backgroundColor: LIGHT_GREY}}>
172-
<Grid item xs={8}>
173-
<ClusterView
174-
taggingClusterSession={taggingClusterSession}
175-
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
176-
/>
177-
</Grid>
178-
<Grid item xs={4}>
179-
<TagView
180-
misconceptionsAvailable={data}
181-
taggingClusterSession={taggingClusterSession}
182-
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
137+
<>
138+
<div style={{position: 'sticky', margin: '-0.5em', marginLeft: '77%', top: '6em', zIndex: 1}}>
139+
{
140+
keyHistory == '' ?
141+
'space: next cluster, c: cluster view / tagging view' :
142+
'command: ' + keyHistory
143+
}
144+
</div>
145+
<Grid container direction={'row'} className={classes.root} spacing={10}>
146+
<Grid item xs={showQuestion ? 4 : 1}>
147+
<Button onClick={() => {
148+
setShowQuestion(!showQuestion)
149+
}}>Q</Button>
150+
<Collapse in={showQuestion}>
151+
<QuestionSelect
152+
questions={taggingSession.questions}
153+
selectedQuestion={taggingSession.currentQuestion}
154+
setQuestionSelect={selectedChange}/>
155+
</Collapse>
156+
</Grid>
157+
<Grid item xs={showQuestion ? 8 : 10}>
158+
<TabContext value={tab}>
159+
<TabList
160+
indicatorColor='primary'
161+
textColor='primary'
162+
centered={true}
163+
onChange={(_, e: string) => {
164+
setTab(e)
165+
}}
166+
>
167+
<Tab
168+
label={'Tagging'}
169+
value={'1'}
170+
/>
171+
<Tab
172+
label={'Clusters'}
173+
value={'2'}
174+
/>
175+
</TabList>
176+
<TabPanel value={'1'}>
177+
<Grid container direction={'row'} className={classes.taggingMiscBlock} spacing={2}
178+
component={Paper}
179+
style={{backgroundColor: LIGHT_GREY}}>
180+
<Grid item xs={8}>
181+
<ClusterView
182+
taggingClusterSession={taggingClusterSession}
183+
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
184+
/>
185+
</Grid>
186+
<Grid item xs={4}>
187+
<TagView
188+
misconceptionsAvailable={data}
189+
taggingClusterSession={taggingClusterSession}
190+
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
191+
/>
192+
</Grid>
193+
<StyledPagination
194+
count={total_clusters}
195+
page={page}
196+
onChange={paginationChange}
197+
siblingCount={5}
183198
/>
184199
</Grid>
185-
<StyledPagination
186-
count={total_clusters}
187-
page={page}
188-
onChange={paginationChange}
189-
siblingCount={5}
200+
</TabPanel>
201+
<TabPanel value={'2'}>
202+
<ClusterHandler
203+
taggingSession={taggingSession}
204+
taggingClusterSession={taggingClusterSession}
205+
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
206+
setCluster={(value: number) => {
207+
setTab('1')
208+
paginationChange(null, value)
209+
}}
190210
/>
191-
</Grid>
192-
</TabPanel>
193-
<TabPanel value={'2'}>
194-
<ClusterHandler
195-
taggingSession={taggingSession}
196-
taggingClusterSession={taggingClusterSession}
197-
dispatchTaggingClusterSession={dispatchTaggingClusterSession}
198-
setCluster={(value: number) => {
199-
setTab('1')
200-
paginationChange(null, value)
201-
}}
202-
/>
203-
</TabPanel>
204-
</TabContext>
205-
<div>
206-
{
207-
keyHistory == '' ?
208-
'space: next cluster, c: cluster view / tagging view' :
209-
'command: ' + keyHistory
210-
}
211-
</div>
211+
</TabPanel>
212+
</TabContext>
213+
</Grid>
214+
<Grid item xs={showQuestion ? undefined : 1}/>
212215
</Grid>
213-
<Grid item xs={showQuestion ? undefined : 1}/>
214-
</Grid>
216+
</>
215217
)
216218

217219
}

‎frontend/src/components/v2/tagger_component/TagView.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ function TagView({misconceptionsAvailable, taggingClusterSession, dispatchTaggin
2626
)
2727

2828
return (
29-
<Paper style={{padding: '1em', backgroundColor: GREY, marginTop: '2em', paddingTop: 0}}>
29+
<Paper style={{
30+
padding: '1em', backgroundColor: GREY, marginTop: '2em', paddingTop: 0, position: 'sticky',
31+
top: '10em'
32+
}}>
3033
<Table>
3134
<TableBody>
3235
<TableRow>

‎frontend/src/hooks/withKeyboard.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ function withKeyboard(action: (command: string) => void) {
2323
return
2424
} // some element is selected (typing)
2525

26-
event.preventDefault() // prevent scroll on space in case of scrollable page
2726
const key = event.key
27+
if (key == ' ') event.preventDefault() // prevent scroll on space in case of scrollable page
28+
2829
if (key == 'Escape') {
2930
setCommand('')
3031
} else if (key == 'Enter' || key == ' ') {

0 commit comments

Comments
 (0)