Skip to content

Commit 5322441

Browse files
davidkmldavidkml
committed
Merge branch 'temp' of minor fixes/improvements
2 parents 02cd64f + 8ff425a commit 5322441

File tree

1 file changed

+105
-70
lines changed

1 file changed

+105
-70
lines changed

‎InterSpec_resources/D3TimeChart.js‎

Lines changed: 105 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,6 @@ D3TimeChart = function (elem, options) {
338338
.attr("x", this.margin.left + 20)
339339
.attr("y", this.margin.top + this.mouseInfoOptions.padding.top);
340340

341-
342341
/** MISC MEMBERS */
343342
this.cancelSelectionSignalEmitted = false;
344343
this.shiftKeyHeld = false;
@@ -647,9 +646,10 @@ D3TimeChart.prototype.reinitializeChart = function (options) {
647646
brush.setStart(coords[0]);
648647
d3.select("body").style("cursor", "move");
649648

650-
// TODO: add analogous touch gestures to add additional touch functionality
649+
// add analogous touch gestures (based on ui-selected interaction mode) to add additional touch functionality
651650
var TOUCH_ANALOGOUS_SHIFT = this.usingAddSelectionMode === true;
652651
var TOUCH_ANALOGOUS_CTRL = this.usingRemoveSelectionMode === true;
652+
653653
var TOUCH_ANALOGOUS_RIGHTCLICK =
654654
this.userInteractionMode === this.UserInteractionModeEnum.ZOOM;
655655
var TOUCH_ANALOGOUS_ALTKEYCLICK =
@@ -777,41 +777,43 @@ D3TimeChart.prototype.reinitializeChart = function (options) {
777777
// unnecessary check, but added to make it clear that if you wanted to add extra functionality to "simple gesture" mode, then you should handle things differently.
778778
// handle foreground or background selection
779779

780-
// Defined from docs on Wt::KeyboardModifier
781-
var keyModifierMap = {
782-
altKey: 0x4,
783-
ctrlKey: 0x2,
784-
metaKey: 0x8,
785-
shiftKey: 0x1,
786-
none: 0x0,
787-
};
788-
789-
if (this.shiftKeyHeld) {
790-
this.WtEmit(
791-
this.chart.id,
792-
{ name: "timedragged" },
793-
this.state.data.formatted[0].sampleNumbers[lIdx],
794-
this.state.data.formatted[0].sampleNumbers[rIdx],
795-
keyModifierMap[this.highlightModifier] |
796-
keyModifierMap["shiftKey"]
797-
);
798-
} else if (this.ctrlKeyHeld) {
799-
this.WtEmit(
800-
this.chart.id,
801-
{ name: "timedragged" },
802-
this.state.data.formatted[0].sampleNumbers[lIdx],
803-
this.state.data.formatted[0].sampleNumbers[rIdx],
804-
keyModifierMap[this.highlightModifier] |
805-
keyModifierMap["ctrlKey"]
806-
);
807-
} else {
808-
this.WtEmit(
809-
this.chart.id,
810-
{ name: "timedragged" },
811-
this.state.data.formatted[0].sampleNumbers[lIdx],
812-
this.state.data.formatted[0].sampleNumbers[rIdx],
813-
keyModifierMap[this.highlightModifier]
814-
);
780+
if (lIdx < rIdx) {
781+
// Defined from docs on Wt::KeyboardModifier
782+
var keyModifierMap = {
783+
altKey: 0x4,
784+
ctrlKey: 0x2,
785+
metaKey: 0x8,
786+
shiftKey: 0x1,
787+
none: 0x0,
788+
};
789+
790+
if (this.shiftKeyHeld) {
791+
this.WtEmit(
792+
this.chart.id,
793+
{ name: "timedragged" },
794+
this.state.data.formatted[0].sampleNumbers[lIdx],
795+
this.state.data.formatted[0].sampleNumbers[rIdx],
796+
keyModifierMap[this.highlightModifier] |
797+
keyModifierMap["shiftKey"]
798+
);
799+
} else if (this.ctrlKeyHeld) {
800+
this.WtEmit(
801+
this.chart.id,
802+
{ name: "timedragged" },
803+
this.state.data.formatted[0].sampleNumbers[lIdx],
804+
this.state.data.formatted[0].sampleNumbers[rIdx],
805+
keyModifierMap[this.highlightModifier] |
806+
keyModifierMap["ctrlKey"]
807+
);
808+
} else {
809+
this.WtEmit(
810+
this.chart.id,
811+
{ name: "timedragged" },
812+
this.state.data.formatted[0].sampleNumbers[lIdx],
813+
this.state.data.formatted[0].sampleNumbers[rIdx],
814+
keyModifierMap[this.highlightModifier]
815+
);
816+
}
815817
}
816818
}
817819
}
@@ -1010,12 +1012,12 @@ D3TimeChart.prototype.updateChart = function (
10101012
this.hideToolTip();
10111013
});
10121014

1013-
// plot data
1015+
/** PLOT DATA */
10141016
for (var detName in this.state.data.formatted[compressionIndex].detectors) {
10151017
var counts =
10161018
this.state.data.formatted[compressionIndex].detectors[detName].counts;
10171019

1018-
// only use visible range if zoomed in, otherwise use full range.
1020+
// only use visible range if zoomed in, otherwise use full range. This is an optimization which is helpful for avoiding wasteful out-of-view data rendering.
10191021
var lIdx = this.findDataIndex(chartDomain[0], compressionIndex);
10201022
var rIdx = this.findDataIndex(chartDomain[1], compressionIndex);
10211023
counts = counts.slice(lIdx * 2, (rIdx + 1) * 2);
@@ -1077,7 +1079,7 @@ D3TimeChart.prototype.updateChart = function (
10771079
}
10781080
}
10791081

1080-
// update highlight region rendering
1082+
/** UPDATE HIGHLIGHT REGIONS RENDERING */
10811083
if (this.state.regions && this.state.data.sampleNumberToIndexMap) {
10821084
// console.log(this.state.regions);
10831085
var chart = this;
@@ -1114,8 +1116,8 @@ D3TimeChart.prototype.updateChart = function (
11141116
});
11151117
}
11161118

1117-
// plot axes and labels
1118-
1119+
/** PLOT AXES AND LABELS */
1120+
// Below is a way to create major and minor axis ticks on the x-axis. Somewhat experimental, but seems to work. Still may need some refinement for more dynamic behavior.
11191121
var tickCount = 20;
11201122

11211123
do {
@@ -1153,13 +1155,9 @@ D3TimeChart.prototype.updateChart = function (
11531155
)
11541156
.attr("id", "th_x-axis")
11551157
.call(xAxis);
1156-
1157-
// update interactable area
1158-
this.bottomAxisRect
1159-
.attr("height", this.axisBottomG.node().getBBox().height)
11601158

1161-
// check whether there is any possibility for axis text overlap
1162-
// if yes, then re-define axes with reduced (half) the current tick count
1159+
// check whether there is any possibility for axis text overlap. (Checks using only the final two tick labels because those would generally signal the potential for overlap)
1160+
// if yes, then re-define axes with **reduced** (half) the current tick count
11631161
var NUMBER_OF_TICKS_BETWEEN_MAJOR_TICKS = 5; // set this to the number of ticks between major ticks. Helps you get the next visible tick.
11641162

11651163
var renderedTickCount = this.axisBottomG.selectAll("g.tick").size();
@@ -1184,6 +1182,10 @@ D3TimeChart.prototype.updateChart = function (
11841182
.getBoundingClientRect();
11851183
} while (secondToLastVisibleTickBound.right > lastVisibleTickBound.left);
11861184

1185+
// update interactable x-axis area
1186+
this.bottomAxisRect.attr("height", this.axisBottomG.node().getBBox().height);
1187+
1188+
/** DEFINE AND ADD ZOOM INDICATOR TO X-AXIS */
11871189
var xAxisArrowDefs = this.axisBottomG.select("#arrow_defs");
11881190

11891191
if (xAxisArrowDefs.empty()) {
@@ -1233,6 +1235,7 @@ D3TimeChart.prototype.updateChart = function (
12331235
axisBottomPath.attr("marker-start", null);
12341236
}
12351237

1238+
/** ADD X-AXIS TITLES */
12361239
var axisLabelX = this.svg.select("#th_label_x");
12371240

12381241
if (axisLabelX.empty()) {
@@ -1245,7 +1248,7 @@ D3TimeChart.prototype.updateChart = function (
12451248
.text(this.options.xtitle);
12461249
} // if (!axisLabelX.empty())
12471250

1248-
// compute axis label translation to use
1251+
// compute axis label translation to use depending on if compact option used or not
12491252
var axisLabelXTranslation = this.options.compactXAxis
12501253
? "translate(" +
12511254
(this.margin.left +
@@ -1269,6 +1272,7 @@ D3TimeChart.prototype.updateChart = function (
12691272

12701273
axisLabelX.attr("transform", axisLabelXTranslation);
12711274

1275+
/** FORMAT X-AXIS TICK LABELS */
12721276
var xLabelBoundingRect = axisLabelX.node().getBoundingClientRect();
12731277

12741278
var USE_COMPACT_X_AXIS = this.options.compactXAxis;
@@ -1290,6 +1294,18 @@ D3TimeChart.prototype.updateChart = function (
12901294
}
12911295
});
12921296

1297+
// format minor axis labels x-axis
1298+
axisBottomTicks.each(function (d, i) {
1299+
var tickText = d3.select(this).select("text");
1300+
var tickLine = d3.select(this).select("line");
1301+
if (!xTicksGenerated[i].isMajor) {
1302+
tickText.attr("visibility", "hidden");
1303+
tickLine.attr("y2", 4);
1304+
}
1305+
});
1306+
1307+
// account for chart displacement due to background/lead-in, and hide any ticks related to it
1308+
12931309
var dataBackgroundDuration = this.state.data.backgroundDuration;
12941310
var firstTick = this.axisBottomG.select("g.tick:first-child");
12951311

@@ -1312,6 +1328,7 @@ D3TimeChart.prototype.updateChart = function (
13121328
}); // axisBottomTicks.each()
13131329
} // if (dataBackgroundDuration != null)
13141330

1331+
/** ADD OCCUPANCY STATUS LINES */
13151332
if (this.state.data.raw.occupancies) {
13161333
var occupancies = this.state.data.raw.occupancies;
13171334
if (
@@ -1415,17 +1432,7 @@ D3TimeChart.prototype.updateChart = function (
14151432
this.occupancyLinesG.selectAll(".occupancy_line_group").remove();
14161433
} // if (this.state.data.raw.occupancies)
14171434

1418-
// format minor axis labels x-axis
1419-
axisBottomTicks.each(function (d, i) {
1420-
var tickText = d3.select(this).select("text");
1421-
var tickLine = d3.select(this).select("line");
1422-
if (!xTicksGenerated[i].isMajor) {
1423-
tickText.attr("visibility", "hidden");
1424-
tickLine.attr("y2", 4);
1425-
}
1426-
});
1427-
1428-
// add grid lines
1435+
/** ADD X-AXIS GRID */
14291436
if (this.options.gridx) {
14301437
this.verticalGridG
14311438
.attr(
@@ -1448,6 +1455,7 @@ D3TimeChart.prototype.updateChart = function (
14481455
this.verticalGridG.selectAll("*").remove();
14491456
}
14501457

1458+
/** ADD Y-AXIS COMPONENTS */
14511459
if (HAS_GAMMA) {
14521460
var yAxisLeft = d3.svg
14531461
.axis()
@@ -1487,7 +1495,7 @@ D3TimeChart.prototype.updateChart = function (
14871495
Math.pow(2, compressionIndex) +
14881496
" Samples";
14891497

1490-
// if already drawn, just update
1498+
// if title already drawn, just update
14911499
if (!axisLabelY1.empty()) {
14921500
// reposition
14931501
axisLabelY1
@@ -1565,7 +1573,7 @@ D3TimeChart.prototype.updateChart = function (
15651573
Math.pow(2, compressionIndex) +
15661574
" Samples";
15671575

1568-
// if already drawn, just update
1576+
// if title already drawn, just update
15691577
if (!axisLabelY2.empty()) {
15701578
// reposition
15711579
axisLabelY2
@@ -1608,6 +1616,9 @@ D3TimeChart.prototype.updateChart = function (
16081616
} // if (HAS_NEUTRON)
16091617
};
16101618

1619+
/**
1620+
* Handles updating the text and positioning of the applied energy filter display
1621+
*/
16111622
D3TimeChart.prototype.updateFilterInfo = function () {
16121623
/* If there is a gamma energy range sum applied, make some text to notify user of this */
16131624
if (this.state.data && this.state.data.raw) {
@@ -1704,6 +1715,9 @@ D3TimeChart.prototype.updateFilterInfo = function () {
17041715
* ],
17051716
*
17061717
* occupancies: [{...}, {...}]
1718+
*
1719+
* ... any additional fields. See D3TimeChart.cpp for updated object schema.
1720+
*
17071721
* }
17081722
*
17091723
* @param {Object} rawData: data Object passed from Wt
@@ -2784,14 +2798,14 @@ D3TimeChart.prototype.handleBrushPanSelection = function () {
27842798
};
27852799

27862800
/**
2787-
* Handles showing tooltip.
2801+
* Handles showing mouse-hover tooltip.
27882802
*/
27892803
D3TimeChart.prototype.showToolTip = function () {
27902804
this.mouseInfoG.style("visibility", "visible");
27912805
};
27922806

27932807
/**
2794-
* Handler to update tooltip display.
2808+
* Handler to update mouse-hover tooltip display.
27952809
* @param {Number} time : real time of measurement (x-axis)
27962810
* @param {Object[]} data : Array of data objects, where each object at minimum has fields: {detName, gammaCPS}. Optional fields: neutronCPS
27972811
* @param {Object} optargs : Object of optional keyword arguments. Accepted properties include: startTimeStamp, sourceType
@@ -2801,14 +2815,14 @@ D3TimeChart.prototype.updateToolTip = function (time, data, optargs) {
28012815
};
28022816

28032817
/**
2804-
* Handler to hide tooltip.
2818+
* Handler to hide mouse-hover tooltip.
28052819
*/
28062820
D3TimeChart.prototype.hideToolTip = function () {
28072821
this.mouseInfoG.style("visibility", "hidden");
28082822
};
28092823

28102824
/**
2811-
* Handler to create tooltip string from data.
2825+
* Handler to create mouse-hover tooltip string from data.
28122826
* @param {Number} time : real time of measurement (x-axis)
28132827
* @param {Object[]} data : Array of data objects, where each object at minimum has fields: {detName, gammaCPS}. Optional fields: neutronCPS
28142828
* @param {Object} optargs : Object of optional keyword arguments. Accepted properties include: startTimeStamp, sourceType
@@ -3338,7 +3352,10 @@ D3TimeChart.prototype.generateTicks = function (
33383352
return tickArray;
33393353
};
33403354

3341-
// Unimplemented
3355+
/**
3356+
* Handles setting x-axis title
3357+
* @param {*} title : string for the new title
3358+
*/
33423359
D3TimeChart.prototype.setXAxisTitle = function (title) {
33433360
this.options.xtitle = title;
33443361

@@ -3352,15 +3369,21 @@ D3TimeChart.prototype.setXAxisTitle = function (title) {
33523369
}
33533370
};
33543371

3355-
// Unimplemented
3372+
/**
3373+
* Handles setting left-side y-axis title
3374+
* @param {*} title : string for the new title
3375+
*/
33563376
D3TimeChart.prototype.setY1AxisTitle = function (title) {
33573377
this.options.y1title = title;
33583378
if (this.state.data.formatted) this.reinitializeChart();
33593379
//redraw y1-title (e.g., gamma CPS axis title)
33603380
};
33613381

3362-
// Unimplemented
3363-
D3TimeChart.prototype.setY2AxisTitle = function () {
3382+
/**
3383+
* Handles setting right-side y-axis title
3384+
* @param {*} title : string for the new title
3385+
*/
3386+
D3TimeChart.prototype.setY2AxisTitle = function (title) {
33643387
this.options.y2title = title;
33653388
if (this.state.data.formatted) this.reinitializeChart();
33663389
//redraw y2-title (e.g., neutron CPS axis title)
@@ -3376,12 +3399,20 @@ D3TimeChart.prototype.setCompactXAxis = function (compact) {
33763399
if (this.state.data.formatted) this.reinitializeChart();
33773400
};
33783401

3402+
/**
3403+
* Handles display of x-grid
3404+
* @param {*} show : boolean denoting whether or not the grid is displayed
3405+
*/
33793406
D3TimeChart.prototype.setGridX = function (show) {
33803407
this.options.gridx = show;
33813408
if (this.state.data.formatted) this.reinitializeChart();
33823409
//add/remove horizantal grid lines
33833410
};
33843411

3412+
/**
3413+
* Handles display of y-grid
3414+
* @param {*} show : boolean denoting whether or not the grid is displayed
3415+
*/
33853416
D3TimeChart.prototype.setGridY = function (show) {
33863417
this.options.gridy = show;
33873418
if (this.state.data.formatted) this.reinitializeChart();
@@ -3403,6 +3434,10 @@ D3TimeChart.prototype.setXAxisZoomSamples = function (firstsample, lastsample) {
34033434
);
34043435
};
34053436

3437+
/**
3438+
* Handles setting/enabling specific interaction modes for the time chart, disabling others.
3439+
* @param {*} mode : string denoting the mode to set
3440+
*/
34063441
D3TimeChart.prototype.setUserInteractionMode = function (mode) {
34073442
// This is just a stub function at the moment.
34083443
console.log("Will set user interaction mode to " + mode);

0 commit comments

Comments
 (0)