synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
233 lines • 13.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react")); // importing FunctionComponent
var ElementWithTooltip_1 = require("../ElementWithTooltip");
var unCamelCase_1 = require("../../../utils/functions/unCamelCase");
var utils_1 = require("../../../utils");
var SynapseClient_1 = require("../../../utils/SynapseClient");
var sqlFunctions_1 = require("../../../utils/functions/sqlFunctions");
var lodash_es_1 = (0, tslib_1.__importDefault)(require("lodash-es"));
var DotPlot_1 = (0, tslib_1.__importDefault)(require("./DotPlot"));
var BarPlot_1 = (0, tslib_1.__importDefault)(require("./BarPlot"));
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../../LoadingScreen"));
var SynapseContext_1 = require("../../../utils/SynapseContext");
var optionsConfig = {
displayModeBar: false,
responsive: true,
scrollZoom: false,
editable: false,
autosizable: true,
};
var tooltipVisualProps = {
delayShow: 0,
place: 'right',
type: 'light',
effect: 'solid',
border: true,
};
var dotPlotLayoutConfig = {
showlegend: true,
dragmode: false,
legend: {
font: {
size: 11,
},
y: 1.1,
xanchor: 'right',
x: 1,
orientation: 'h',
},
xaxis: {
visible: true,
fixedrange: true,
zeroline: false,
showgrid: false,
showline: true,
linecolor: '#ddd',
autotick: true,
ticks: 'outside',
tickcolor: '#ddd',
},
yaxis: {
fixedrange: true,
zeroline: false,
gridcolor: '#ddd',
automargin: true,
},
margin: {
pad: 20,
},
hovermode: 'closest',
};
var barLayoutConfig = {
barmode: 'stack',
showlegend: false,
dragmode: false,
hovermode: 'closest',
yaxis: { visible: false, fixedrange: true },
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0,
},
};
function fetchData(token, _a) {
var xField = _a.xField, yField = _a.yField, groupField = _a.groupField, entityId = _a.entityId, whereClause = _a.whereClause, infoField = _a.infoField;
var sql = "SELECT " + xField + " as \"x\", " + yField + " as \"y\", " + (infoField ? infoField + ' as "info", ' : '') + " " + groupField + " as \"group\" FROM " + entityId + " " + (whereClause ? ' WHERE ' + whereClause : '');
var queryRequest = {
concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
partMask: utils_1.SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,
entityId: entityId,
query: {
sql: sql,
},
};
return (0, SynapseClient_1.getFullQueryTableResults)(queryRequest, token).then(function (data) {
return data.queryResult.queryResults;
});
}
function getTotalsByProp(data, prop) {
var _a;
var resultObject = data.reduce(function (res, obj) {
res[obj[prop]] =
(obj[prop] in res ? Number(res[obj[prop]]) : 0) + Number(obj.x);
return res;
}, {});
var result = [];
for (var property in resultObject) {
result.push((_a = {},
_a[prop] = property,
_a.count = resultObject[property],
_a));
}
return result;
}
var getClickTargetData = function (e, swap) {
var _a;
var pointData = e.points[0].data;
var facetValue = pointData.y[0];
var type = pointData.name;
if (swap) {
// @ts-ignore
;
_a = [type, facetValue], facetValue = _a[0], type = _a[1];
}
return { facetValue: facetValue, type: type, event: e.event };
};
var renderTopBarLegend = function (colors, xLabels) { return (react_1.default.createElement("div", { className: "ThemesPlot__barPlotLegend" }, xLabels.map(function (item, i) { return (react_1.default.createElement("div", { style: { float: 'left' }, key: "topBar_" + i },
react_1.default.createElement("div", { className: "ThemesPlot__barPlotLegend__label", key: "topBar_label", style: {
backgroundColor: "" + (colors ? colors[item] : 'transparent'),
} }),
react_1.default.createElement("div", { className: "ThemesPlot__barPlotLegend__graph", key: "topBar_graph" }, item),
' ')); }))); };
var fadeColors = function (colors, opacity) {
for (var key in colors) {
colors[key] = colors[key]
.replace(',1)', ", " + opacity + ")")
.replace(',1.0)', ", " + opacity + ")");
}
return colors;
};
var getTooltip = function (data, filter) {
return lodash_es_1.default.first(data.filter(function (item) { return item.y === filter; }).map(function (item) { return item.info; }));
};
var ThemesPlot = function (_a) {
var dotPlot = _a.dotPlot, topBarPlot = _a.topBarPlot, sideBarPlot = _a.sideBarPlot, _b = _a.tooltipProps, tooltipProps = _b === void 0 ? tooltipVisualProps : _b, onPointClick = _a.onPointClick, _c = _a.dotPlotYAxisLabel, dotPlotYAxisLabel = _c === void 0 ? 'Research Themes' : _c;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _d = (0, react_1.useState)(false), isLoaded = _d[0], setIsLoaded = _d[1];
var _e = (0, react_1.useState)([]), dotPlotQueryData = _e[0], setDotPlotQueryData = _e[1];
var _f = (0, react_1.useState)([]), topBarPlotData = _f[0], setTopBarQueryData = _f[1];
var _g = (0, react_1.useState)([]), sideBarPlotData = _g[0], setSideBarQueryData = _g[1];
(0, react_1.useEffect)(function () {
var dotPlotData = fetchData(accessToken, dotPlot);
var topBarPlotData = fetchData(accessToken, topBarPlot);
var sideBarPlotData = fetchData(accessToken, sideBarPlot);
Promise.all([dotPlotData, topBarPlotData, sideBarPlotData])
.then(function (result) {
setDotPlotQueryData((0, sqlFunctions_1.resultToJson)(result[0].headers, result[0].rows));
setTopBarQueryData((0, sqlFunctions_1.resultToJson)(result[1].headers, result[1].rows));
setSideBarQueryData((0, sqlFunctions_1.resultToJson)(result[2].headers, result[2].rows));
setIsLoaded(true);
})
.catch(function (err) {
throw err;
});
return function () { };
}, [accessToken, dotPlot, topBarPlot, sideBarPlot]);
var yLabelsForDotPlot = [];
var xLabelsForTopBarPlot = [];
var xMaxForDotPlot = 0;
var xMaxForSideBarPlot = 0;
var topBarPlotDataSorted = [];
var totalsByDotPlotY = [];
if (isLoaded) {
totalsByDotPlotY = getTotalsByProp(sideBarPlotData, 'y');
yLabelsForDotPlot = totalsByDotPlotY
.sort(function (a, b) { return b.count - a.count; })
.map(function (item) { return item.y; });
xMaxForSideBarPlot = Math.max.apply(Math, totalsByDotPlotY.map(function (item) { return item.count; }));
xMaxForDotPlot = Math.max.apply(Math, dotPlotQueryData.map(function (item) { return Number(item.x); }));
topBarPlotDataSorted = lodash_es_1.default.orderBy(getTotalsByProp(topBarPlotData, 'y'), [
'y',
]);
xLabelsForTopBarPlot = lodash_es_1.default.orderBy(getTotalsByProp(topBarPlotData, 'group'), ['group']).map(function (item) { return item.group; });
}
return (react_1.default.createElement(react_1.default.Fragment, null,
!isLoaded && LoadingScreen_1.default,
isLoaded && (react_1.default.createElement("div", { className: "ThemesPlot" },
react_1.default.createElement("div", { className: "ThemesPlot__dotPlotLegend" },
react_1.default.createElement(DotPlot_1.default, { id: "head", plotData: dotPlotQueryData, isLegend: true, markerSymbols: dotPlot.markerSymbols, style: { width: '100%', height: '100%' }, layoutConfig: dotPlotLayoutConfig, optionsConfig: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, optionsConfig), { responsive: true, staticPlot: true }), plotStyle: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, dotPlot.plotStyle), { backgroundColor: 'transparent' }) })),
topBarPlot.colors &&
renderTopBarLegend(topBarPlot.colors, xLabelsForTopBarPlot),
topBarPlotDataSorted.map(function (item, i) { return (react_1.default.createElement("div", { className: "ThemesPlot__topBarPlot", key: "topBarDiv_" + i },
react_1.default.createElement("div", { className: "ThemesPlot__topBarPlot__label" },
item.count,
"\u00A0",
(0, unCamelCase_1.unCamelCase)(item.y)),
react_1.default.createElement("div", { className: "ThemesPlot__topBarPlot__plot" },
react_1.default.createElement(BarPlot_1.default, { style: { width: '100%', height: '100%' }, layoutConfig: lodash_es_1.default.cloneDeep(barLayoutConfig), optionsConfig: (0, tslib_1.__assign)({}, optionsConfig), plotData: topBarPlotData, isTop: true, label: item.y, xMax: item.count, onClick: function (e) {
return onPointClick(getClickTargetData(e, true));
}, colors:
// we are not actually fading colors for now. But keeping implemenation in case it changes
i % 2 === 0
? topBarPlot.colors
: fadeColors((0, tslib_1.__assign)({}, topBarPlot.colors), '1') })))); }),
react_1.default.createElement("div", { style: { display: 'flex', position: 'relative' } },
react_1.default.createElement("div", { className: "ThemesPlot__dotPlotYLabel" }, dotPlotYAxisLabel),
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot" },
yLabelsForDotPlot.map(function (label, i) {
var _a, _b;
return (react_1.default.createElement("div", { key: "plotDiv_" + +i, className: "ThemesPlot__dotPlot__row", style: {
backgroundColor: (_a = dotPlot.plotStyle) === null || _a === void 0 ? void 0 : _a.backgroundColor,
} },
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot__barColumn" },
react_1.default.createElement(ElementWithTooltip_1.ElementWithTooltip, { idForToolTip: "plotDiv1_" + +i, tooltipText: getTooltip(dotPlotQueryData, label) + " ", tooltipVisualProps: tooltipProps, callbackFn: function () { return lodash_es_1.default.noop; } },
react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: "ThemesPlot__dotPlot__themeLabel" }, label),
react_1.default.createElement("br", null),
react_1.default.createElement("span", { className: "ThemesPlot__dotPlot__countLabel" },
totalsByDotPlotY[i].count,
" ",
sideBarPlot.countLabel),
react_1.default.createElement("br", null),
react_1.default.createElement(BarPlot_1.default, { style: { width: '100%' }, layoutConfig: barLayoutConfig, optionsConfig: optionsConfig, plotData: sideBarPlotData, isTop: false, xMax: xMaxForSideBarPlot, label: label, colors: fadeColors((0, tslib_1.__assign)({}, topBarPlot.colors), '1') })))),
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot__dotPlotColumn" },
react_1.default.createElement("div", { style: {
width: '100%',
backgroundColor: (_b = dotPlot.plotStyle) === null || _b === void 0 ? void 0 : _b.backgroundColor,
} },
react_1.default.createElement(DotPlot_1.default, { id: i + '', onClick: function (e) {
return onPointClick(getClickTargetData(e, false));
}, plotData: dotPlotQueryData, plotStyle: dotPlot.plotStyle, markerSymbols: dotPlot.markerSymbols, xMax: xMaxForDotPlot, label: label, layoutConfig: dotPlotLayoutConfig, optionsConfig: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, optionsConfig), { responsive: false }) })))));
}),
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot__row" },
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot__barColumn", style: { textAlign: 'right' } }, "VOLUME:"),
react_1.default.createElement("div", { className: "ThemesPlot__dotPlot__dotPlotColumn", style: { marginTop: '0px' } },
react_1.default.createElement(DotPlot_1.default, { id: 'footer', plotData: dotPlotQueryData, isXAxis: true, xMax: xMaxForDotPlot, layoutConfig: dotPlotLayoutConfig, optionsConfig: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, optionsConfig), { responsive: false }) }))))),
react_1.default.createElement("div", null)))));
};
exports.default = ThemesPlot;
//# sourceMappingURL=ThemesPlot.js.map