@@ -134,84 +134,86 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
134
134
if ( isLoading || isLoadingClusters ) return ( < > Loading...</ > )
135
135
136
136
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 }
183
198
/>
184
199
</ 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
+ } }
190
210
/>
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 } />
212
215
</ Grid >
213
- < Grid item xs = { showQuestion ? undefined : 1 } />
214
- </ Grid >
216
+ </ >
215
217
)
216
218
217
219
}
0 commit comments