Skip to content

Commit d16c815

Browse files
author
Stefano Malagò
committed
Changed position of command view
Added support for more than 5 answers within cluster in UI
1 parent dd87cc2 commit d16c815

File tree

2 files changed

+80
-75
lines changed

2 files changed

+80
-75
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>

0 commit comments

Comments
 (0)