diff --git a/app/components/Vis.js b/app/components/Vis.js
index f41e974b..0944cdc1 100644
--- a/app/components/Vis.js
+++ b/app/components/Vis.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { FixedSizeList as List } from 'react-window';
-import Spotlight from "rc-spotlight";
+import Spotlight from 'rc-spotlight';
import 'antd/dist/antd.css';
import { Tooltip } from 'antd';
import ReactTooltip from 'react-tooltip';
@@ -46,7 +46,7 @@ import {
removeRows,
restoreRows,
visSortBy,
- countObservations
+ countObservations,
} from '../filterfunctions';
import { setProjectFilters, getProjectFilters } from '../projects';
import handleExportButton from '../export';
@@ -64,7 +64,7 @@ import StackedBarsSVG from './StackedBarsSVG';
import FilterChart from './FilterChart';
import Summary from './Summary';
import Modal from './Modal';
-import Sankey from './Sankey/'
+import Sankey from './Sankey/';
import styles from './Vis.css';
import gstyle from './general.css';
import classNames from 'classnames';
@@ -108,7 +108,7 @@ export default class Vis extends Component {
sankeyColors: 'right',
helpCounter: 0,
helpButton: needHelp,
- overrideRightSidebar: null
+ overrideRightSidebar: null,
};
this._inputs = {};
@@ -131,8 +131,7 @@ export default class Vis extends Component {
id: 'filter',
name: 'Back',
action: () => {
- this.save(() => (
- this.setState({ redirect: '/Filter' })));
+ this.save(() => this.setState({ redirect: '/Filter' }));
},
icon:
,
},
@@ -143,7 +142,7 @@ export default class Vis extends Component {
this.setState({ renderSVG: true });
},
icon:
,
- }
+ },
];
this.filters = {};
@@ -154,24 +153,20 @@ export default class Vis extends Component {
};
// Move this to data
- const tagColors = [
- '#ff4a14',
- '#ffc400',
- '#00adff',
- '#2bfec3',
- ];
+ const tagColors = ['#ff4a14', '#ffc400', '#00adff', '#2bfec3'];
this.state.tags = [
{
id: 'none',
color: null,
name: 'No Tags',
selected: true,
- }, ...tagColors.map((c, i) => ({
+ },
+ ...tagColors.map((c, i) => ({
id: `tag-${i}`,
name: `Tag ${i}`,
color: c,
selected: true,
- }))
+ })),
];
this.readsBySequence = {};
@@ -203,9 +198,10 @@ export default class Vis extends Component {
debounce: 350,
};
- this.metrics.nonbarWidth = (this.metrics.padding * 3) + (this.metrics.barInfoWidth);
- this.metrics.chartWidth = this.state.width
- - (this.metrics.leftSidebar + this.metrics.nonbarWidth);
+ this.metrics.nonbarWidth =
+ this.metrics.padding * 3 + this.metrics.barInfoWidth;
+ this.metrics.chartWidth =
+ this.state.width - (this.metrics.leftSidebar + this.metrics.nonbarWidth);
this.metrics.chartHeight = this.state.height - this.metrics.heightOffset;
this.scales = {
@@ -220,27 +216,32 @@ export default class Vis extends Component {
} else {
// Break this whole chunk into a function or something
//
- this.init = getProjectFilters(this.state.summary.path, this.state.summary.dataKey, 'vis');
+ this.init = getProjectFilters(
+ this.state.summary.path,
+ this.state.summary.dataKey,
+ 'vis'
+ );
//
this.state.names = this.init.names;
// console.log('initial level', this.state.level)
- this.state.level = (this.init.level !== undefined) ? this.init.level : this.state.level;
+ this.state.level =
+ this.init.level !== undefined ? this.init.level : this.state.level;
// console.log(this.init, this.state.level)
this.filters = this.init.filters ? this.init.filters : {};
this.state.deleted = this.init.deleted ? this.init.deleted : [];
this.state.tags = this.init.tags ? this.init.tags : this.state.tags;
//
// Can probably lose this for release
- this.state.tags = this.state.tags.map(t => {
+ this.state.tags = this.state.tags.map((t) => {
if (t.id === 'none') {
t.name = 'No Tags';
}
return t;
});
//
- //this is to allow the programmer to track if all tags are unselected or or least one
- //is for styling purposes. Likely a better way to do this using data but the function of
- //all state variables need to be identified first which will take time.
+ // this is to allow the programmer to track if all tags are unselected or or least one
+ // is for styling purposes. Likely a better way to do this using data but the function of
+ // all state variables need to be identified first which will take time.
// this.state.tagTracker = this.state.tags.map(t => {
// if (t.selected === 'true') {
// return true;
@@ -249,33 +250,43 @@ export default class Vis extends Component {
// return false;
// });
//
- this.state.rowTags = this.init.rowTags ? this.init.rowTags : this.state.rowTags;
- this.state.selectedAttribute = this.init.selectedAttribute ? (
- this.init.selectedAttribute
- ) : this.state.selectedAttribute;
- this.state.showEmptyAttrs = this.init.showEmptyAttrs === undefined
- ? true : this.init.showEmptyAttrs;
+ this.state.rowTags = this.init.rowTags
+ ? this.init.rowTags
+ : this.state.rowTags;
+ this.state.selectedAttribute = this.init.selectedAttribute
+ ? this.init.selectedAttribute
+ : this.state.selectedAttribute;
+ this.state.showEmptyAttrs =
+ this.init.showEmptyAttrs === undefined
+ ? true
+ : this.init.showEmptyAttrs;
//
// Ugly...
- this.state.showLeftSidebar = (this.init.showLeftSidebar !== undefined) ? (
- this.init.showLeftSidebar
- ) : this.state.showLeftSidebar;
- this.metrics.leftSidebar = this.state.showLeftSidebar ?
- this.metrics.left.max : this.metrics.left.min;
+ this.state.showLeftSidebar =
+ this.init.showLeftSidebar !== undefined
+ ? this.init.showLeftSidebar
+ : this.state.showLeftSidebar;
+ this.metrics.leftSidebar = this.state.showLeftSidebar
+ ? this.metrics.left.max
+ : this.metrics.left.min;
//
if (this.init.sort) {
- this.state.mode = this.init.sort.mode === undefined
- ? this.state.mode
- : this.init.sort.mode;
- this.state.labelKey = this.init.sort.labelKey === undefined
- ? this.state.labelKey
- : this.init.sort.labelKey;
- this.state.sortReverse = this.init.sort.sortReverse === undefined
- ? this.state.sortReverse
- : this.init.sort.sortReverse;
- this.state.sortKey = this.init.sort.sortKey === undefined
- ? this.state.sortKey
- : this.init.sort.sortKey;
+ this.state.mode =
+ this.init.sort.mode === undefined
+ ? this.state.mode
+ : this.init.sort.mode;
+ this.state.labelKey =
+ this.init.sort.labelKey === undefined
+ ? this.state.labelKey
+ : this.init.sort.labelKey;
+ this.state.sortReverse =
+ this.init.sort.sortReverse === undefined
+ ? this.state.sortReverse
+ : this.init.sort.sortReverse;
+ this.state.sortKey =
+ this.init.sort.sortKey === undefined
+ ? this.state.sortKey
+ : this.init.sort.sortKey;
}
//
}
@@ -292,22 +303,24 @@ export default class Vis extends Component {
this.toggleRightMenu = this.toggleRightMenu.bind(this);
this.toggleLog = this.toggleLog.bind(this);
this.countUpHelp = this.countUpHelp.bind(this);
- this._isMounted = false
+ this._isMounted = false;
}
componentDidMount() {
- this._isMounted = true
+ this._isMounted = true;
window.addEventListener('resize', this.updateDimensions);
if (this.initdata) {
this.formatTaxonomyData(this.initdata, this.state.level, (data) => {
this.setState({ data, preData: data }, () => {
- this.updateAttributeValues(this.state.selectedAttribute, this.state.data);
+ this.updateAttributeValues(
+ this.state.selectedAttribute,
+ this.state.data
+ );
this.setLevel(this.state.level);
});
});
}
window.addEventListener('click', this.countUpHelp);
-
}
componentDidUpdate() {
@@ -315,79 +328,109 @@ export default class Vis extends Component {
this.setDialogVisible();
// console.log(this.state.summary.path)
// console.log(this._svg)
- handleExportButton(_cloneDeep(this.state.summary.path), this._svg, this.exportComplete, this._visType);
+ handleExportButton(
+ _cloneDeep(this.state.summary.path),
+ this._svg,
+ this.exportComplete,
+ this._visType
+ );
}
- if (this.state.helpCounter === 6 && this._visType === 'stackedbar' && Object.keys(this.state.filters).length === 0) {
+ if (
+ this.state.helpCounter === 6 &&
+ this._visType === 'stackedbar' &&
+ Object.keys(this.state.filters).length === 0
+ ) {
this._clickDatum(this.sequences[0]);
this.setState({ datumClickedViaHelp: this.sequences[0] });
}
- if (this.state.helpCounter !== 6 && this._visType === 'stackedbar' && this.state.datumClickedViaHelp) {
+ if (
+ this.state.helpCounter !== 6 &&
+ this._visType === 'stackedbar' &&
+ this.state.datumClickedViaHelp
+ ) {
this.removeFilter(this.state.datumClickedViaHelp.name);
this.setState({ datumClickedViaHelp: null });
-
}
- if (this.state.helpCounter === 7 && this._visType === 'stackedbar' && !this.state.highlightedDatum && !this.state.highlightedDatumFromHelp) {
+ if (
+ this.state.helpCounter === 7 &&
+ this._visType === 'stackedbar' &&
+ !this.state.highlightedDatum &&
+ !this.state.highlightedDatumFromHelp
+ ) {
this.setState({
highlightedDatum: {
datum: this.state.data[0].sequences[0],
sample: this.state.data[0],
position: {
- x: 400, y: 250
- }
+ x: 400,
+ y: 250,
+ },
},
showTooltip: true,
highlightedDatumFromHelp: true,
- })
- } else if (this.state.helpCounter !== 7 && this._visType === 'stackedbar' && this.state.highlightedDatum && this.state.highlightedDatumFromHelp) {
+ });
+ } else if (
+ this.state.helpCounter !== 7 &&
+ this._visType === 'stackedbar' &&
+ this.state.highlightedDatum &&
+ this.state.highlightedDatumFromHelp
+ ) {
this.setState({
highlightedDatum: null,
showTooltip: false,
highlightedDatumFromHelp: false,
- })
+ });
}
- if (this.state.helpCounter === 8 && this._visType === 'stackedbar' && !this.state.selectedAttributeFromHelp) {
+ if (
+ this.state.helpCounter === 8 &&
+ this._visType === 'stackedbar' &&
+ !this.state.selectedAttributeFromHelp
+ ) {
const selectedAttribute = Object.keys(this.attributes)[0];
this.updateAttributeValues(selectedAttribute, this.state.data);
this.setState({
selectedAttribute,
selectedAttributeFromHelp: true,
-
- })
- } else if (this.state.helpCounter !== 8 && this._visType === 'stackedbar' && this.state.selectedAttributeFromHelp) {
+ });
+ } else if (
+ this.state.helpCounter !== 8 &&
+ this._visType === 'stackedbar' &&
+ this.state.selectedAttributeFromHelp
+ ) {
this.setState({
selectedAttribute: '',
selectedAttributeFromHelp: false,
- })
+ });
}
}
componentWillUnmount() {
- this._isMounted = false
+ this._isMounted = false;
clearTimeout(this.tooltip.handle);
clearTimeout(this.timeout);
window.removeEventListener('resize', this.updateDimensions);
window.removeEventListener('click', this.countUpHelp);
-
}
countUpHelp() {
-
- if(this.state.helpCounter > 0) {
+ if (this.state.helpCounter > 0) {
const currCount = this.state.helpCounter;
const newCount = currCount + 1;
// 6 for sankey, 8 for bargraph
const maxCount = this._visType === 'sankey' ? 6 : 9;
- newCount > maxCount ? this.setState({ helpCounter: 2, }) : this.setState({ helpCounter: newCount, });
+ newCount > maxCount
+ ? this.setState({ helpCounter: 2 })
+ : this.setState({ helpCounter: newCount });
}
}
exportComplete = () => {
this.setState({ renderSVG: false, dialogVisible: false });
- }
+ };
setDialogVisible = () => {
this.setState({ dialogVisible: true });
- }
+ };
save = (callback) => {
const viewMetadata = {
@@ -414,7 +457,7 @@ export default class Vis extends Component {
viewMetadata,
(value) => {
callback(value);
- },
+ }
);
};
@@ -424,12 +467,12 @@ export default class Vis extends Component {
this.clearResult();
}, 3000);
this.setState({ result });
- }
+ };
clearResult = () => {
const result = null;
this.setState({ result });
- }
+ };
_toggleTag = (datum, tag, isRemoved) => {
if (datum.tags[tag.id]) {
@@ -461,12 +504,12 @@ export default class Vis extends Component {
this.save(this.setResult);
});
}
- }
+ };
_toggleTags = () => {
const showTags = !this.state.showTags;
this.setState({ showTags });
- }
+ };
_hoverDatum = (datum, sample, position) => {
if (datum == null) {
@@ -483,27 +526,32 @@ export default class Vis extends Component {
}
this.setState({ highlightedDatum: { datum, sample, position } });
}
- }
+ };
_clickDatum = (datum) => {
if (!Object.prototype.hasOwnProperty.call(this.filters, this.state.level)) {
this.filters[this.state.level] = {};
}
const filters = _cloneDeep(this.state.filters);
- if (!Object.prototype.hasOwnProperty.call(this.filters[this.state.level], datum.name)) {
+ if (
+ !Object.prototype.hasOwnProperty.call(
+ this.filters[this.state.level],
+ datum.name
+ )
+ ) {
const sequences = [];
- this.state.preData.forEach(d => {
- d.sequences.forEach(s => {
+ this.state.preData.forEach((d) => {
+ d.sequences.forEach((s) => {
if (datum.name === s.name && s.reads > 0) {
sequences.push(s);
}
});
});
- const totalReads = sequences.map(s => s.reads).reduce((s, v) => s + v);
+ const totalReads = sequences.map((s) => s.reads).reduce((s, v) => s + v);
const values = _sortBy(sequences, (s) => s.reads).map((s, i) => ({
index: i,
value: s.reads,
- count: (s.reads === 0) ? 1 : s.reads,
+ count: s.reads === 0 ? 1 : s.reads,
percent: s.reads / totalReads,
}));
this.filters[this.state.level][datum.name] = {
@@ -525,7 +573,7 @@ export default class Vis extends Component {
this.topSequences = this.renderTopSequences();
this.save(this.setResult);
});
- }
+ };
toggleLog(name) {
const filters = _cloneDeep(this.state.filters);
@@ -542,29 +590,46 @@ export default class Vis extends Component {
this.filters[this.state.level] = filters;
const showRightSidebar = Object.keys(filters).length > 0;
this.updateChartWidth(showRightSidebar);
- const data = this.filterData(filters, this.state.tags, this.state.preData, this.state.deleted);
+ const data = this.filterData(
+ filters,
+ this.state.tags,
+ this.state.preData,
+ this.state.deleted
+ );
const observations = countObservations(data);
this.updateAttributeValues(this.state.selectedAttribute, data);
- this.setState({
- data, observations, filters, showRightSidebar
- }, () => {
- this.topSequences = this.renderTopSequences();
- this.save(this.setResult);
- });
+ this.setState(
+ {
+ data,
+ observations,
+ filters,
+ showRightSidebar,
+ },
+ () => {
+ this.topSequences = this.renderTopSequences();
+ this.save(this.setResult);
+ }
+ );
}
updateChartWidth(_showRightSidebar) {
- const showRightSidebar = (_showRightSidebar || this.state.overrideRightSidebar === 'open') && !(_showRightSidebar && this.state.overrideRightSidebar === 'close')
+ const showRightSidebar =
+ (_showRightSidebar || this.state.overrideRightSidebar === 'open') &&
+ !(_showRightSidebar && this.state.overrideRightSidebar === 'close');
// console.log('update chart width', { _showRightSidebar, showRightSidebar, overrideRightSidebar: this.state.overrideRightSidebar })
if (showRightSidebar) {
- this.metrics.chartWidth = window.innerWidth
- - (this.metrics.leftSidebar + this.metrics.rightSidebar + this.metrics.nonbarWidth);
+ this.metrics.chartWidth =
+ window.innerWidth -
+ (this.metrics.leftSidebar +
+ this.metrics.rightSidebar +
+ this.metrics.nonbarWidth);
} else {
- this.metrics.chartWidth = window.innerWidth
- - (this.metrics.leftSidebar + this.metrics.nonbarWidth );
+ this.metrics.chartWidth =
+ window.innerWidth -
+ (this.metrics.leftSidebar + this.metrics.nonbarWidth);
}
if (this._isMounted) {
- this.setState({ chartWidth: this.metrics.chartWidth })
+ this.setState({ chartWidth: this.metrics.chartWidth });
}
}
@@ -586,15 +651,29 @@ export default class Vis extends Component {
this.updateChartWidth(showRightSidebar);
this.updateTaxonomyData(this.state.preData, level, true, (preData) => {
this.updateTaxonomyData(this.state.deleted, level, false, (deleted) => {
- const data = this.filterData(filters, this.state.tags, preData, deleted);
+ const data = this.filterData(
+ filters,
+ this.state.tags,
+ preData,
+ deleted
+ );
const observations = countObservations(data);
this.updateAttributeValues(this.state.selectedAttribute, data);
- this.setState({
- level, data, observations, preData, deleted, filters, showRightSidebar
- }, () => {
- this.topSequences = this.renderTopSequences();
- this.save(this.setResult);
- });
+ this.setState(
+ {
+ level,
+ data,
+ observations,
+ preData,
+ deleted,
+ filters,
+ showRightSidebar,
+ },
+ () => {
+ this.topSequences = this.renderTopSequences();
+ this.save(this.setResult);
+ }
+ );
});
});
}
@@ -603,15 +682,15 @@ export default class Vis extends Component {
// Move to data container?
formatTaxonomyData(data, level, callback) {
let totalDataReads = 0;
- const indata = data.columns.map(c => {
+ const indata = data.columns.map((c) => {
const matches = data.data
- .filter(d => d[1] === c.metadata.phinchID)
- .map(d => {
+ .filter((d) => d[1] === c.metadata.phinchID)
+ .map((d) => {
const row = data.rows[d[0]];
return {
id: row.id,
taxonomy: row.metadata.taxonomy,
- count: d[2]
+ count: d[2],
};
});
totalDataReads += c.reads;
@@ -619,19 +698,23 @@ export default class Vis extends Component {
if (this.state.names[c.sampleName]) {
phinchName = this.state.names[c.sampleName];
}
- const tags = this.state.rowTags[c.sampleName] ? this.state.rowTags[c.sampleName] : {};
- Object.keys(tags).forEach(k => {
- const [tag] = this.state.tags.filter(t => t.id === k);
+ const tags = this.state.rowTags[c.sampleName]
+ ? this.state.rowTags[c.sampleName]
+ : {};
+ Object.keys(tags).forEach((k) => {
+ const [tag] = this.state.tags.filter((t) => t.id === k);
tags[k] = tag;
});
const [dateAttribute] = Object.keys(this.attributes)
- .map(k => this.attributes[k])
- .filter(a => a.type === 'date');
+ .map((k) => this.attributes[k])
+ .filter((a) => a.type === 'date');
let collectionDate = '';
if (dateAttribute) {
- collectionDate = c.metadata[dateAttribute.key] ? (
- new Date(c.metadata[dateAttribute.key]).toLocaleString().split(', ')[0]
- ) : '';
+ collectionDate = c.metadata[dateAttribute.key]
+ ? new Date(c.metadata[dateAttribute.key])
+ .toLocaleString()
+ .split(', ')[0]
+ : '';
}
return {
id: c.id,
@@ -658,12 +741,12 @@ export default class Vis extends Component {
if (updateSequences) {
this.readsBySequence = {};
}
- const taxonomyData = data.map(d => {
+ const taxonomyData = data.map((d) => {
d.sequences = nest()
- .key(s => s.taxonomy.slice(0, level + 1))
+ .key((s) => s.taxonomy.slice(0, level + 1))
.entries(d.matches)
- .map(s => {
- const reads = s.values.map(v => v.count).reduce((a, v) => a + v);
+ .map((s) => {
+ const reads = s.values.map((v) => v.count).reduce((a, v) => a + v);
if (updateSequences) {
if (s.key in this.readsBySequence) {
this.readsBySequence[s.key] += reads;
@@ -686,27 +769,32 @@ export default class Vis extends Component {
}
filterData(filters, tags, preData, deleted) {
- const deletedSamples = deleted.map(d => d.sampleName);
- const samples = preData.filter(s => {
+ const deletedSamples = deleted.map((d) => d.sampleName);
+ const samples = preData.filter((s) => {
let include = true;
if (deletedSamples.includes(s.sampleName)) {
include = false;
}
Object.keys(filters).forEach((k) => {
- const [sequence] = s.sequences.filter(d => (d.name === k));
+ const [sequence] = s.sequences.filter((d) => d.name === k);
if (sequence) {
const value = sequence.reads;
- if (value < filters[k].range.min.value || value > filters[k].range.max.value) {
+ if (
+ value < filters[k].range.min.value ||
+ value > filters[k].range.max.value
+ ) {
include = false;
}
}
});
- const showNoneTags = (tags.filter(t => t.selected && t.id === 'none').length > 0);
+ const showNoneTags =
+ tags.filter((t) => t.selected && t.id === 'none').length > 0;
const countTags = Object.keys(s.tags).length;
- const countSelectedTags = Object.keys(s.tags).filter(t => !s.tags[t].selected).length;
+ const countSelectedTags = Object.keys(s.tags).filter(
+ (t) => !s.tags[t].selected
+ ).length;
if (
- (!showNoneTags && countTags === 0)
- ||
+ (!showNoneTags && countTags === 0) ||
(countTags > 0 && countTags === countSelectedTags)
) {
include = false;
@@ -717,52 +805,87 @@ export default class Vis extends Component {
}
applyFilters(filters) {
- const data = this.filterData(filters, this.state.tags, this.state.preData, this.state.deleted);
+ const data = this.filterData(
+ filters,
+ this.state.tags,
+ this.state.preData,
+ this.state.deleted
+ );
const observations = countObservations(data);
this.updateAttributeValues(this.state.selectedAttribute, data);
- this.setState({ filters, data, observations }, _debounce(() => {
- this.save(this.setResult);
- }), this.metrics.debounce, { leading: false, trailing: true });
+ this.setState(
+ { filters, data, observations },
+ _debounce(() => {
+ this.save(this.setResult);
+ }),
+ this.metrics.debounce,
+ { leading: false, trailing: true }
+ );
}
renderSearch() {
- return
+ return (
+
+ );
}
renderFilters() {
- let segments = null
- if (Object.keys(this.state.filters).length && this.state.overrideRightSidebar !== 'close') {
- segments = Object.keys(this.state.filters).map(k => (
+ let segments = null;
+ if (
+ Object.keys(this.state.filters).length &&
+ this.state.overrideRightSidebar !== 'close'
+ ) {
+ segments = Object.keys(this.state.filters).map((k) => (
- After clicking a search result, a side bar will appear that shows the distribution of observations for each chosen search result. A mini bar chart for that search result will also appear underneath each main graph.
-
- On the side bar, the circles and slider bar underneath each distribution graph can be used as a further filtering mechanisms for rows displayed in the taxonomy bar chart. Only samples meeting the sidebar filtering criteria will remain visible in the main visualization window.
- The graphs are visualized based on users’ setting on data filtering page, which means the actions taken previously will affect the visualisation shown here.
- The top sequences box below shows the most abundant observations in your TOTAL dataset, with numerical values calculated after filter page settings have been applied.
-
- To remove the graph on the sidebar, simply click the “X” button on the upper right hand side of the sidebar detail. This will also cause the corresponding mini-bar chart to be removed in the main window.
-
+ After clicking a search result, a side bar will appear that shows
+ the distribution of observations for each chosen search result. A
+ mini bar chart for that search result will also appear underneath
+ each main graph.
+
+
+ On the side bar, the circles and slider bar underneath each
+ distribution graph can be used as a further filtering mechanisms
+ for rows displayed in the taxonomy bar chart. Only samples meeting
+ the sidebar filtering criteria will remain visible in the main
+ visualization window. The graphs are visualized based on users’
+ setting on data filtering page, which means the actions taken
+ previously will affect the visualisation shown here. The top
+ sequences box below shows the most abundant observations in your
+ TOTAL dataset, with numerical values calculated after filter page
+ settings have been applied.
+
+
+ To remove the graph on the sidebar, simply click the “X” button on
+ the upper right hand side of the sidebar detail. This will also
+ cause the corresponding mini-bar chart to be removed in the main
+ window.
+
}
- style={{ boxShadow: 'rgba(255, 255, 255, 0.4) 0 0 10px 3px',
+ style={{
+ boxShadow: 'rgba(255, 255, 255, 0.4) 0 0 10px 3px',
pointerEvents: 'none',
padding: '0.25rem 0.5rem 0px',
margin: '0.25rem 0.5rem 0px',
}}
-
>