Skip to content

Commit b864a06

Browse files
author
Thinh Nguyen
authored
Merge pull request #16 from mahos/master
fix unit plot/table feature issue for adjusted list
2 parents 77f6920 + 8dd0fdc commit b864a06

File tree

4 files changed

+52
-57
lines changed

4 files changed

+52
-57
lines changed

‎map-frontend/frontend-content/src/app/cell-list/cell-list.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,20 @@ <h3><span class="oi oi-arrow-circle-bottom" (click)="navigate_cell_plots($event,
4444
</div>
4545
</div>
4646
<div class="unit-plots-area">
47-
<p *ngIf="!unitBehaviorLoading">Selected Unit Id: {{ targetUnitId }}</p>
47+
<p *ngIf="!unitBehaviorLoading">Selected Unit Id: {{ clickedUnitId }}</p>
4848
<div class="unit-plots-subarea" *ngIf="cellsByProbeIns">
4949
<div class="unit-plot unit-behavior-plot">
5050
<p *ngIf="unitBehaviorLoading">Unit Behavior Plot Loading...</p>
51-
<img *ngIf="!unitBehaviorLoading && cellsByProbeIns[targetUnitId - 1] && cellsByProbeIns[targetUnitId - 1]['unit_behavior']" [src]="cellsByProbeIns[targetUnitId - 1]['unit_behavior']">
52-
<img *ngIf="(!unitBehaviorLoading && !cellsByProbeIns[targetUnitId - 1]) || (!unitBehaviorLoading && !cellsByProbeIns[targetUnitId - 1]['unit_behavior'])" class="empty-plot empty-behavior-plot" src="assets/images/unit_behavior_empty.png">
53-
<!-- <div *ngIf="!cellsByProbeIns[targetUnitId - 1] || !cellsByProbeIns[targetUnitId - 1]['unit_behavior']" class="empty-plot empty-behavior-plot"><img class="dummy-behavior-plot"></div> -->
51+
<img *ngIf="!unitBehaviorLoading && cellsByProbeIns[clickedUnitIndex] && cellsByProbeIns[clickedUnitIndex]['unit_behavior']" [src]="cellsByProbeIns[clickedUnitIndex]['unit_behavior']">
52+
<img *ngIf="(!unitBehaviorLoading && !cellsByProbeIns[clickedUnitIndex]) || (!unitBehaviorLoading && !cellsByProbeIns[clickedUnitIndex]['unit_behavior'])" class="empty-plot empty-behavior-plot" src="assets/images/unit_behavior_empty.png">
53+
<!-- <div *ngIf="!cellsByProbeIns[clickedUnitIndex] || !cellsByProbeIns[clickedUnitIndex]['unit_behavior']" class="empty-plot empty-behavior-plot"><img class="dummy-behavior-plot"></div> -->
5454

5555
</div>
5656
<div class="unit-plot unit-psth-plot">
5757
<p *ngIf="unitPsthLoading">Unit PSTH Plot Loading...</p>
58-
<img *ngIf="!unitPsthLoading && cellsByProbeIns[targetUnitId - 1] && cellsByProbeIns[targetUnitId - 1]['unit_psth']" [src]="cellsByProbeIns[targetUnitId - 1]['unit_psth']">
59-
<img *ngIf="(!unitPsthLoading && !cellsByProbeIns[targetUnitId - 1]) || (!unitPsthLoading && !cellsByProbeIns[targetUnitId - 1]['unit_psth'])" class="empty-plot empty-psth-plot" src="assets/images/unit_psth_empty.png">
60-
<!-- <div *ngIf="!cellsByProbeIns[targetUnitId - 1] || !cellsByProbeIns[targetUnitId - 1]['unit_psth']" class="empty-plot empty-psth-plot"><img class="dummy-psth-plot"></div> -->
58+
<img *ngIf="!unitPsthLoading && cellsByProbeIns[clickedUnitIndex] && cellsByProbeIns[clickedUnitIndex]['unit_psth']" [src]="cellsByProbeIns[clickedUnitIndex]['unit_psth']">
59+
<img *ngIf="(!unitPsthLoading && !cellsByProbeIns[clickedUnitIndex]) || (!unitPsthLoading && !cellsByProbeIns[clickedUnitIndex]['unit_psth'])" class="empty-plot empty-psth-plot" src="assets/images/unit_psth_empty.png">
60+
<!-- <div *ngIf="!cellsByProbeIns[clickedUnitIndex] || !cellsByProbeIns[clickedUnitIndex]['unit_psth']" class="empty-plot empty-psth-plot"><img class="dummy-psth-plot"></div> -->
6161
</div>
6262
</div>
6363
</div>

‎map-frontend/frontend-content/src/app/cell-list/cell-list.component.ts‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
1717
cells: any;
1818
session: any;
1919
clickedUnitId: number;
20+
clickedUnitIndex: number;
2021
cellsByProbeIns = [];
2122
sortedCellsByProbeIns = [];
2223
plot_data;
2324
plot_layout;
2425
plot_config;
2526

2627
targetClusterRowInfo = [];
27-
targetUnitId;
2828
targetClusterDepth;
2929
targetClusterAmp;
3030
targetProbeIndex;
@@ -59,6 +59,7 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
5959

6060
ngOnInit() {
6161
this.session = this.sessionInfo;
62+
this.clickedUnitIndex = 0;
6263
let probeCount = 0
6364
while (probeCount < this.sessionInfo['probe_count']) {
6465
this.probeInsertions.push(probeCount + 1);
@@ -72,7 +73,7 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
7273
.subscribe((cellListData) => {
7374
this.unitBehaviorLoading = false;
7475
this.unitPsthLoading = false;
75-
console.log('logging retrieved cell list data: ', cellListData);
76+
// console.log('logging retrieved cell list data: ', cellListData);
7677
if (Object.entries(cellListData).length > 0) {
7778
this.cells = cellListData;
7879
const x_data = [];
@@ -117,7 +118,6 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
117118
this.color_data_adjusted = color_data.map(function(elem) {
118119
return `rgba(0, 125, ${255 * (elem - Math.min(...color_data)) / (Math.max(...color_data) - Math.min(...color_data))}, 0.33)`
119120
});
120-
this.targetUnitId = 1;
121121
this.clickedUnitId = 1;
122122
// console.log('adjusted color data:', this.color_data_adjusted);
123123
this.plot_data = [{
@@ -180,9 +180,9 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
180180
ngDoCheck() {
181181
const markerColors = [];
182182
if (this.plot_data) {
183-
if (this.plot_data[0]['x'] && this.clickedUnitId > -1) {
183+
if (this.plot_data[0]['x'] && this.clickedUnitIndex > -1) {
184184
for (let i = 0; i < this.plot_data[0]['x'].length; i++) {
185-
if (this.clickedUnitId - 1 === i) {
185+
if (this.clickedUnitIndex === i) {
186186
markerColors.push('rgba(0, 0, 0, 1)'); // black
187187
} else {
188188
markerColors.push(this.color_data_adjusted[i]);
@@ -199,9 +199,7 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
199199
// console.log('markerColors: ', markerColors);
200200
}
201201

202-
if (this.targetUnitId) {
203-
this.cells
204-
}
202+
205203

206204
}
207205
ngOnDestroy() {
@@ -267,7 +265,6 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
267265
}];
268266
this.unitBehaviorLoading = false;
269267
this.unitPsthLoading = false;
270-
this.targetUnitId = 1;
271268
this.clickedUnitId = 1;
272269
// console.log('plot data for probe (' + probeInsNum + ') is - ', this.plot_data);
273270
}
@@ -280,64 +277,62 @@ export class CellListComponent implements OnInit, OnDestroy, DoCheck {
280277
const rows = element.querySelectorAll('tr');
281278
// console.log('printing rows');
282279
// console.log(rows);
283-
// this.targetUnitId = this.clickedUnitId;
284280
// console.log('clicked unitId is: ', this.clickedUnitId);
285281
if (data['points'] && data['points'][0]['customdata']) {
286282
// console.log('data[points][0] is: ', data['points'][0]);
287283
this.clickedUnitId = data['points'][0]['customdata'];
288-
this.targetUnitId = this.clickedUnitId;
289-
// console.log('clicked unitId according to data is: ', data['points'][0]['customdata']);
290-
rows[this.clickedUnitId].scrollIntoView({
291-
behavior: 'smooth',
292-
block: 'center'});
284+
for (const [ind, row] of Object.entries(rows)) {
285+
286+
287+
// console.log('row inner text is - ', row['innerText']);
288+
if (this.clickedUnitId == row['innerText'].split(' ')[0]) {
289+
// console.log('row unit id is - ', row['innerText'].split(' ')[0]);
290+
const unitId = row['innerText'].split(' ')[0];
291+
this.clickedUnitIndex = parseInt(ind, 10);
292+
row.scrollIntoView({
293+
behavior: 'smooth',
294+
block: 'center'
295+
});
296+
}
297+
298+
}
299+
300+
// rows[this.clickedUnitId].scrollIntoView({
301+
// behavior: 'smooth',
302+
// block: 'center'});
293303
}
294304

295305
}
296306

297307
clusterSelectedTable(unit_id) {
298-
// console.log('table row selected!')
299-
const element = this.el_nav.nativeElement.children[1];
300-
const rows = element.querySelectorAll('tr');
301-
this.clickedUnitId = unit_id;
302-
this.targetUnitId = this.clickedUnitId;
308+
309+
for (const [index, unit] of Object.entries(this.cellsByProbeIns)) {
310+
if (unit['unit'] === unit_id) {
311+
312+
this.clickedUnitIndex = parseInt(index, 10);
313+
this.clickedUnitId = unit_id;
314+
}
315+
}
316+
// const element = this.el_nav.nativeElement.children[1];
317+
// const rows = element.querySelectorAll('tr');
318+
// this.clickedUnitId = unit_id;
303319

304320
}
305321

306322
navigate_cell_plots(event, direction) {
307-
// console.log('navigation activated')
308-
// let element = this.el_nav.nativeElement.children[1];
309-
// let rows = element.querySelectorAll('tr');
310-
// let HLrowID = element.querySelectorAll('#highlighted-row');
311-
// console.log('element: ', element)
312-
// console.log('rows: ', rows)
313-
// console.log('highlighted id: ', HLrowID)
314-
// console.log('highlighted id[0]: ', HLrowID[0])
315-
// console.log('highlighted id[0] type: ', typeof HLrowID[0])
316-
// console.log('highlighted id[0][outerText]: ', HLrowID[0]['outerText'])
317-
// console.log('=============================')
318-
// rows.forEach((row, index) => {
319-
// if (row.id == 'highlighted-row') {
320-
// console.log('highlighted row at index - ', index)
321-
// console.log('highlighted row at rowindex - ', row['rowIndex'])
322-
// console.log('unit - ', row['outerText'].split('')[2])
323-
// }
324-
// })
325-
326-
// console.log('clickedUnitId before - ', this.clickedUnitId);
327323
if (direction === 'up') {
328-
if (this.clickedUnitId - 1 > -1) {
329-
this.clickedUnitId -= 1;
330-
this.targetUnitId = this.clickedUnitId;
324+
if (this.clickedUnitIndex - 1 > -1) {
325+
this.clickedUnitIndex -= 1;
326+
331327
}
332-
// console.log('clickedUnitId after - ', this.clickedUnitId);
333328
}
334329
if (direction === 'down') {
335-
if (this.clickedUnitId + 1 < this.plot_data[0]['x'].length + 1) {
336-
this.clickedUnitId += 1;
337-
this.targetUnitId = this.clickedUnitId;
330+
if (this.clickedUnitIndex + 1 < this.plot_data[0]['x'].length + 1) {
331+
this.clickedUnitIndex += 1;
338332
}
339-
// console.log('clickedUnitId after - ', this.clickedUnitId);
340333
}
334+
// console.log('this.cellsByProbeIns[this.clickedUnitId][unit]: ', this.cellsByProbeIns[this.clickedUnitIndex]['unit'])
335+
this.clickedUnitId = this.cellsByProbeIns[this.clickedUnitIndex]['unit'];
341336
}
342337

343338
// sortData(sort: Sort) {

‎map-frontend/frontend-content/src/app/probe-insertion-list/probe-insertion-list.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class ProbeInsertionListComponent implements OnInit {
2424
this.probeInsertionListSubscription = this.probeInsertionListService.getProbeInsertionListLoadedListener()
2525
.subscribe((probeInsData) => {
2626
this.probeInsertions = probeInsData;
27-
console.log('printing probe insertion data: ', probeInsData);
27+
// console.log('printing probe insertion data: ', probeInsData);
2828
})
2929

3030
}

‎map-frontend/frontend-content/src/app/probe-insertion-list/probe-insertion-list.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class ProbeInsertionListService {
2525
})
2626
.subscribe(
2727
(probeInsertionData) => {
28-
console.log('fetched probeInsertionData!: ', probeInsertionData);
28+
// console.log('fetched probeInsertionData!: ', probeInsertionData);
2929
this.probeInsertionList = probeInsertionData;
3030
this.probeInsertionListLoaded.next(this.probeInsertionList);
3131
},

0 commit comments

Comments
 (0)