From 6f5dce24487fbccfccded16dce11c09a52e8d2f5 Mon Sep 17 00:00:00 2001
From: AliceBalfanz <alicja.balfanz@brockmann-consult.de>
Date: Wed, 12 Aug 2020 19:53:28 +0200
Subject: [PATCH 1/4] fix tooltip flickering - related to issue #12

---
 src/renderer/components/ToolButton.tsx       |  31 +++--
 src/renderer/containers/DataSourcesPanel.tsx | 104 ++++++++++-------
 src/renderer/containers/LayersPanel.tsx      |  70 +++++++-----
 src/renderer/containers/OperationsPanel.tsx  |  37 +++---
 src/renderer/containers/PlacemarksPanel.tsx  | 113 +++++++++++--------
 src/renderer/containers/VariablesPanel.tsx   |   5 +
 src/renderer/containers/WorkspacePanel.tsx   |   6 +
 7 files changed, 220 insertions(+), 146 deletions(-)

diff --git a/src/renderer/components/ToolButton.tsx b/src/renderer/components/ToolButton.tsx
index 59f3930..0d2bc95 100644
--- a/src/renderer/components/ToolButton.tsx
+++ b/src/renderer/components/ToolButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CSSProperties } from 'react';
-import { AnchorButton, IconName, Intent, PopoverPosition, Tooltip } from '@blueprintjs/core';
+import {CSSProperties} from 'react';
+import {Button, IconName, Intent, Popover, PopoverPosition, Tooltip} from '@blueprintjs/core';
 
 export interface IToolButtonProps {
     onClick?: () => void;
@@ -25,20 +25,27 @@ export function ToolButton(props: IToolButtonProps) {
         className = `${className} ${props.className}`;
     }
     const button = (
-        <AnchorButton className={className}
-                      onClick={props.onClick}
-                      disabled={props.disabled}
-                      icon={props.icon}
-                      intent={props.intent}
-                      style={props.style}
-                      text={props.text}
-                      active={props.active}
+        <Button
+            className={className}
+            onClick={props.onClick}
+            disabled={props.disabled}
+            icon={props.icon}
+            intent={props.intent}
+            style={props.style}
+            text={props.text}
+            active={props.active}
         />
     );
     if (props.tooltipContent) {
         return (
-            <Tooltip content={props.tooltipContent}
-                     position={props.tooltipPosition || PopoverPosition.AUTO}>{button}</Tooltip>
+            <Popover>
+                <Tooltip
+                    content={props.tooltipContent}
+                    position={props.tooltipPosition || PopoverPosition.AUTO}
+                >
+                    {button}
+                </Tooltip>
+            </Popover>
         );
     } else {
         return button;
diff --git a/src/renderer/containers/DataSourcesPanel.tsx b/src/renderer/containers/DataSourcesPanel.tsx
index 1d572de..a30e047 100644
--- a/src/renderer/containers/DataSourcesPanel.tsx
+++ b/src/renderer/containers/DataSourcesPanel.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { CSSProperties } from 'react';
-import { connect } from 'react-redux';
-import { Cell, Column, Table, TruncatedFormat } from '@blueprintjs/table';
+import {CSSProperties} from 'react';
+import {connect} from 'react-redux';
+import {Cell, Column, Table, TruncatedFormat} from '@blueprintjs/table';
 import ReactMarkdown from 'react-markdown';
-import { EcvMeta } from '../ecv-meta';
-import { DataSourceState, DataStoreNotice, DataStoreState, State } from '../state';
+import {EcvMeta} from '../ecv-meta';
+import {DataSourceState, DataStoreNotice, DataStoreState, State} from '../state';
 import {
     AnchorButton,
     ButtonGroup,
@@ -22,19 +22,19 @@ import {
     Tabs,
     Tag
 } from '@blueprintjs/core';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
-import { Card } from '../components/Card';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
-import { ToolButton } from '../components/ToolButton';
-import { TextWithLinks } from '../components/TextWithLinks';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
+import {Card} from '../components/Card';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
+import {ToolButton} from '../components/ToolButton';
+import {TextWithLinks} from '../components/TextWithLinks';
 import DownloadDatasetDialog from './DownloadDataSourceDialog';
 import OpenDatasetDialog from './OpenDatasetDialog';
 import AddDatasetDialog from './AddDatasetDialog';
 import RemoveDatasetDialog from './RemoveDatasetDialog';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { NO_DATA_SOURCES_FOUND, NO_DATA_STORES_FOUND, NO_LOCAL_DATA_SOURCES } from '../messages';
+import {NO_DATA_SOURCES_FOUND, NO_DATA_STORES_FOUND, NO_LOCAL_DATA_SOURCES} from '../messages';
 
 import _ecvMeta from '../resources/ecv-meta.json';
 
@@ -206,32 +206,44 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
             let primaryAction;
             if (isLocalStore) {
                 primaryAction = (
-                    <ToolButton tooltipContent="Open file data source"
-                                intent={Intent.PRIMARY}
-                                onClick={this.handleShowOpenDatasetDialog}
-                                disabled={!canOpen}
-                                icon="folder-shared-open"/>
+                    <ToolButton
+                        tooltipContent="Open file data source"
+                        intent={Intent.PRIMARY}
+                        onClick={this.handleShowOpenDatasetDialog}
+                        disabled={!canOpen}
+                        icon="folder-shared-open"
+                        tooltipPosition={'top'}
+                    />
                 );
             } else {
                 primaryAction = (
-                    <ToolButton tooltipContent="Download and/or open remote data source"
-                                intent={Intent.PRIMARY}
-                                onClick={this.handleShowDownloadDataSourceDialog}
-                                disabled={!canDownload}
-                                icon="cloud-download"/>
+                    <ToolButton
+                        tooltipContent="Download and/or open remote data source"
+                        intent={Intent.PRIMARY}
+                        onClick={this.handleShowDownloadDataSourceDialog}
+                        disabled={!canDownload}
+                        icon="cloud-download"
+                        tooltipPosition={'top'}
+                    />
                 );
             }
             const actionComponent = (
                 <ButtonGroup>
-                    <ToolButton tooltipContent="Add file data source"
-                                intent={(isDynamicLocalStore && !hasDataSources) ? Intent.PRIMARY : Intent.NONE}
-                                onClick={this.handleAddDatasetDialog}
-                                disabled={!canAdd}
-                                icon="add"/>
-                    <ToolButton tooltipContent="Remove file data source"
-                                onClick={this.handleRemoveDatasetDialog}
-                                disabled={!canRemove}
-                                icon="trash"/>
+                    <ToolButton
+                        tooltipContent="Add file data source"
+                        intent={(isDynamicLocalStore && !hasDataSources) ? Intent.PRIMARY : Intent.NONE}
+                        onClick={this.handleAddDatasetDialog}
+                        disabled={!canAdd}
+                        icon="add"
+                        tooltipPosition={'top'}
+                    />
+                    <ToolButton
+                        tooltipContent="Remove file data source"
+                        onClick={this.handleRemoveDatasetDialog}
+                        disabled={!canRemove}
+                        icon="trash"
+                        tooltipPosition={'top'}
+                    />
                     {primaryAction}
                     <AddDatasetDialog/>
                     <RemoveDatasetDialog/>
@@ -363,16 +375,22 @@ class DataSourcesPanel extends React.Component<IDataSourcesPanelProps & IDataSou
                     </Label>
                     <span style={DataSourcesPanel.SPACER_STYLE}/>
                     <ButtonGroup>
-                        <ToolButton tooltipContent="Show/hide data store description"
-                                    onClick={this.handleShowDataStoreDescriptionChanged}
-                                    disabled={!hasDataStoreDescription}
-                                    active={showDataStoreDescription}
-                                    icon="help"/>
-                        <ToolButton tooltipContent="Show/hide data store notices"
-                                    onClick={this.handleShowDataStoreNoticesChanged}
-                                    disabled={!hasDataStoreNotices}
-                                    active={showDataStoreNotices}
-                                    icon="notifications"/>
+                        <ToolButton
+                            tooltipContent="Show/hide data store description"
+                            onClick={this.handleShowDataStoreDescriptionChanged}
+                            disabled={!hasDataStoreDescription}
+                            active={showDataStoreDescription}
+                            icon="help"
+                            tooltipPosition={'top'}
+                        />
+                        <ToolButton
+                            tooltipContent="Show/hide data store notices"
+                            onClick={this.handleShowDataStoreNoticesChanged}
+                            disabled={!hasDataStoreNotices}
+                            active={showDataStoreNotices}
+                            icon="notifications"
+                            tooltipPosition={'top'}
+                        />
                     </ButtonGroup>
                 </div>
 
@@ -538,8 +556,8 @@ class DataSourcesList extends React.PureComponent<IDataSourcesListProps, null> {
                         <div className="user-selectable" style={DataSourcesList.ID_DIV_STYLE}>{dataSource.id}</div>
                     </div>
                 ) : (
-                     <span className="user-selectable">{title}</span>
-                 )}
+                    <span className="user-selectable">{title}</span>
+                )}
             </div>
         );
     }
diff --git a/src/renderer/containers/LayersPanel.tsx b/src/renderer/containers/LayersPanel.tsx
index 15170c0..af83d08 100644
--- a/src/renderer/containers/LayersPanel.tsx
+++ b/src/renderer/containers/LayersPanel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { connect, DispatchProp } from 'react-redux';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ColorMapCategoryState,
     ImageLayerState,
@@ -11,18 +11,18 @@ import {
     VariableImageLayerState,
     VariableState
 } from '../state';
-import { ButtonGroup, Checkbox, Icon, Intent, Label, Radio, RadioGroup, Slider } from '@blueprintjs/core';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
+import {ButtonGroup, Checkbox, Icon, Intent, Label, Radio, RadioGroup, Slider} from '@blueprintjs/core';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
 import LayerSourcesDialog from './LayerSourcesDialog';
-import { AUTO_LAYER_ID, getLayerDisplayName, getLayerTypeIconName } from '../state-util';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { ViewState } from '../components/ViewState';
-import { NO_LAYER_SELECTED, NO_LAYERS_EMPTY_VIEW, NO_LAYERS_NO_VIEW } from '../messages';
-import { SubPanelHeader } from '../components/SubPanelHeader';
-import { ToolButton } from '../components/ToolButton';
+import {AUTO_LAYER_ID, getLayerDisplayName, getLayerTypeIconName} from '../state-util';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {ViewState} from '../components/ViewState';
+import {NO_LAYER_SELECTED, NO_LAYERS_EMPTY_VIEW, NO_LAYERS_NO_VIEW} from '../messages';
+import {SubPanelHeader} from '../components/SubPanelHeader';
+import {ToolButton} from '../components/ToolButton';
 
 interface ILayersPanelProps {
     selectedVariable: VariableState | null,
@@ -154,8 +154,8 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
 
     private handleChangedLayerSplitMode(event) {
         this.props.dispatch(actions.setLayerSplitMode(this.props.activeView.id,
-                                                      this.props.selectedLayerId,
-                                                      event.target.value));
+            this.props.selectedLayerId,
+            event.target.value));
     }
 
     private handleChangedLayerSelection(newSelection: string[]) {
@@ -187,22 +187,36 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
         const canMoveLayerDown = selectedLayerIndex >= 0 && selectedLayerIndex < layerCount - 1;
         return (
             <ButtonGroup>
-                <ToolButton tooltipContent="Add a new layer"
-                            intent={Intent.PRIMARY}
-                            onClick={this.handleAddLayerButtonClicked}
-                            icon="add"/>
-                <ToolButton tooltipContent="Remove selected layer"
-                            disabled={!canRemoveLayer}
-                            onClick={this.handleRemoveLayerButtonClicked}
-                            icon="remove"/>
-                <ToolButton tooltipContent="Move layer up"
-                            disabled={!canMoveLayerUp}
-                            onClick={this.handleMoveLayerUpButtonClicked}
-                            icon="arrow-up"/>
-                <ToolButton tooltipContent="Move layer down"
-                            disabled={!canMoveLayerDown}
-                            onClick={this.handleMoveLayerDownButtonClicked}
-                            icon="arrow-down"/>
+                <ToolButton
+                    tooltipContent="Add a new layer"
+                    intent={Intent.PRIMARY}
+                    onClick={this.handleAddLayerButtonClicked}
+                    icon="add"
+                    tooltipPosition={'top'}
+                />
+                <ToolButton
+                    tooltipContent="Remove selected layer"
+                    disabled={!canRemoveLayer}
+                    onClick={this.handleRemoveLayerButtonClicked}
+                    icon="remove"
+                    tooltipPosition={'top'}
+                />
+                <ToolButton
+                    tooltipContent="Move layer up"
+                    disabled={!canMoveLayerUp}
+                    onClick={this.handleMoveLayerUpButtonClicked}
+                    icon="arrow-up"
+                    tooltipPosition={'top'}
+
+                />
+                <ToolButton
+                    tooltipContent="Move layer down"
+                    disabled={!canMoveLayerDown}
+                    onClick={this.handleMoveLayerDownButtonClicked}
+                    icon="arrow-down"
+                    tooltipPosition={'top'}
+
+                />
                 <LayerSourcesDialog/>
             </ButtonGroup>
         );
diff --git a/src/renderer/containers/OperationsPanel.tsx b/src/renderer/containers/OperationsPanel.tsx
index 54a47b6..d62cf0e 100644
--- a/src/renderer/containers/OperationsPanel.tsx
+++ b/src/renderer/containers/OperationsPanel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { connect, DispatchProp } from 'react-redux';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ButtonGroup,
     Classes,
@@ -11,19 +11,19 @@ import {
     PopoverInteractionKind,
     Tag
 } from '@blueprintjs/core';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
-import { LabelWithType } from '../components/LabelWithType';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
-import { Card } from '../components/Card';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
+import {LabelWithType} from '../components/LabelWithType';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
+import {Card} from '../components/Card';
 import OperationStepDialog from './OperationStepDialog';
-import { OperationInputState, OperationOutputState, OperationState, State, WorkspaceState } from '../state';
+import {OperationInputState, OperationOutputState, OperationState, State, WorkspaceState} from '../state';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { NO_OPERATIONS_FOUND } from '../messages';
-import { ToolButton } from '../components/ToolButton';
-import { NEW_OPERATION_STEP_DIALOG_ID } from './operation-step-dialog-ids';
-import { TextWithLinks } from '../components/TextWithLinks';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {NO_OPERATIONS_FOUND} from '../messages';
+import {ToolButton} from '../components/ToolButton';
+import {NEW_OPERATION_STEP_DIALOG_ID} from './operation-step-dialog-ids';
+import {TextWithLinks} from '../components/TextWithLinks';
 
 
 interface IOperationsPanelProps {
@@ -147,12 +147,15 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
             const canAddStepOperation = this.props.selectedOperation && this.props.workspace;
             const actionComponent = (
                 <ButtonGroup>
-                    <ToolButton tooltipContent="Add a new operation step to the workspace's workflow"
-                                intent={Intent.PRIMARY}
-                                onClick={this.handleAddOperationStepButtonClicked}
-                                disabled={!canAddStepOperation}
-                                text="Add Step..."
-                                icon="play"/>
+                    <ToolButton
+                        tooltipContent="Add a new operation step to the workspace's workflow"
+                        intent={Intent.PRIMARY}
+                        onClick={this.handleAddOperationStepButtonClicked}
+                        disabled={!canAddStepOperation}
+                        text="Add Step..."
+                        icon="play"
+                        tooltipPosition={'top'}
+                    />
                     {canAddStepOperation ? <OperationStepDialog id={NEW_OPERATION_STEP_DIALOG_ID}/> : null}
                 </ButtonGroup>
             );
diff --git a/src/renderer/containers/PlacemarksPanel.tsx b/src/renderer/containers/PlacemarksPanel.tsx
index 14e52bb..9d3c072 100644
--- a/src/renderer/containers/PlacemarksPanel.tsx
+++ b/src/renderer/containers/PlacemarksPanel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRef, CSSProperties } from 'react';
+import {createRef, CSSProperties} from 'react';
 import {
     ButtonGroup,
     Checkbox,
@@ -12,23 +12,23 @@ import {
     Popover,
     Position
 } from '@blueprintjs/core';
-import { connect, Dispatch } from 'react-redux';
-import { Placemark, PlacemarkCollection, State } from '../state';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
+import {connect, Dispatch} from 'react-redux';
+import {Placemark, PlacemarkCollection, State} from '../state';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
 import LayerSourcesDialog from './LayerSourcesDialog';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { ViewState } from '../components/ViewState';
-import { NO_PLACE_SELECTED, NO_PLACES } from '../messages';
-import { FieldValue } from '../components/field/Field';
-import { TextField } from '../components/field/TextField';
-import { geoJsonToText, geometryGeoJsonToCsv, geometryGeoJsonToGeometryWkt, isBox } from '../../common/geometry-util';
-import { GeometryToolType } from '../components/cesium/geometry-tool';
-import { isBoolean } from '../../common/types';
-import { NumericField, NumericFieldValue } from '../components/field/NumericField';
-import { ToolButton } from '../components/ToolButton';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {ViewState} from '../components/ViewState';
+import {NO_PLACE_SELECTED, NO_PLACES} from '../messages';
+import {FieldValue} from '../components/field/Field';
+import {TextField} from '../components/field/TextField';
+import {geoJsonToText, geometryGeoJsonToCsv, geometryGeoJsonToGeometryWkt, isBox} from '../../common/geometry-util';
+import {GeometryToolType} from '../components/cesium/geometry-tool';
+import {isBoolean} from '../../common/types';
+import {NumericField, NumericFieldValue} from '../components/field/NumericField';
+import {ToolButton} from '../components/ToolButton';
 
 
 interface IPlacemarksPanelDispatch {
@@ -203,38 +203,59 @@ class PlacemarksPanel extends React.Component<IPlacemarksPanelProps & IPlacemark
         const isBoxToolActive = this.props.geometryToolType === 'BoxTool';
         return (
             <ButtonGroup>
-                <ToolButton tooltipContent="New marker"
-                            onClick={this.handleNewPointToolButtonClicked}
-                            icon="dot"
-                            active={isPointToolActive}
-                            disabled={false}/>
-                <ToolButton tooltipContent="New polyline"
-                            onClick={this.handleNewPolylineToolButtonClicked}
-                            icon="slash"
-                            active={isPolylineToolActive}
-                            disabled={false}/>
-                <ToolButton tooltipContent="New polygon"
-                            onClick={this.handleNewPolygonToolButtonClicked}
-                            icon="polygon-filter"
-                            active={isPolygonToolActive}
-                            disabled={false}/>
-                <ToolButton tooltipContent="New box"
-                            onClick={this.handleNewBoxToolButtonClicked}
-                            icon="widget"
-                            active={isBoxToolActive}
-                            disabled={false}/>
-                <ToolButton tooltipContent="Remove selected place"
-                            disabled={!this.props.selectedPlacemarkId}
-                            onClick={this.handleRemovePlacemarkButtonClicked}
-                            icon="remove"/>
-                <ToolButton tooltipContent="Locate selected place in view"
-                            disabled={!this.props.selectedPlacemarkId}
-                            onClick={this.handleLocatePlacemarkButtonClicked}
-                            icon="locate"/>
+                <ToolButton
+                    tooltipContent="New marker"
+                    onClick={this.handleNewPointToolButtonClicked}
+                    icon="dot"
+                    tooltipPosition={'top'}
+                    active={isPointToolActive}
+                    disabled={false}
+                />
+                <ToolButton
+                    tooltipContent="New polyline"
+                    onClick={this.handleNewPolylineToolButtonClicked}
+                    icon="slash"
+                    tooltipPosition={'top'}
+                    active={isPolylineToolActive}
+                    disabled={false}
+                />
+                <ToolButton
+                    tooltipContent="New polygon"
+                    onClick={this.handleNewPolygonToolButtonClicked}
+                    icon="polygon-filter"
+                    tooltipPosition={'top'}
+                    active={isPolygonToolActive}
+                    disabled={false}
+                />
+                <ToolButton
+                    tooltipContent="New box"
+                    onClick={this.handleNewBoxToolButtonClicked}
+                    icon="widget"
+                    tooltipPosition={'top'}
+                    active={isBoxToolActive}
+                    disabled={false}
+                />
+                <ToolButton
+                    tooltipContent="Remove selected place"
+                    disabled={!this.props.selectedPlacemarkId}
+                    onClick={this.handleRemovePlacemarkButtonClicked}
+                    icon="remove"
+                    tooltipPosition={'top'}
+                />
+                <ToolButton
+                    tooltipContent="Locate selected place in view"
+                    disabled={!this.props.selectedPlacemarkId}
+                    onClick={this.handleLocatePlacemarkButtonClicked}
+                    icon="locate"
+                    tooltipPosition={'top'}
+                />
                 <Popover position={Position.LEFT}>
-                    <ToolButton tooltipContent="Copy selected place"
-                                disabled={!this.props.selectedPlacemarkId}
-                                icon="clipboard"/>
+                    <ToolButton
+                        tooltipContent="Copy selected place"
+                        disabled={!this.props.selectedPlacemarkId}
+                        icon="clipboard"
+                        tooltipPosition={'top'}
+                    />
                     <Menu>
                         <MenuItem onClick={this.handleCopySelectedPlacemarkAsCsv} text="Copy as CSV"/>
                         <MenuItem onClick={this.handleCopySelectedPlacemarkAsWkt} text="Copy as WKT"/>
diff --git a/src/renderer/containers/VariablesPanel.tsx b/src/renderer/containers/VariablesPanel.tsx
index b5ed262..d758a8b 100644
--- a/src/renderer/containers/VariablesPanel.tsx
+++ b/src/renderer/containers/VariablesPanel.tsx
@@ -198,21 +198,26 @@ class VariablesPanel extends React.Component<IVariablesPanelProps & DispatchProp
             <ButtonGroup>
                 <ToolButton tooltipContent="Toggle image layer visibility"
                             icon={this.props.showSelectedVariableLayer ? 'eye-open' : 'eye-off'}
+                            tooltipPosition={'top'}
                             onClick={this.handleShowSelectedVariableLayer}/>
                 <ToolButton tooltipContent="Add a new image layer"
                             disabled={!canAddLayer}
                             icon="layer"
+                            tooltipPosition={'top'}
                             onClick={this.handleAddVariableLayer}/>
                 <ToolButton tooltipContent="Create a time series plot from selected placemark"
                             disabled={!canAddTimeSeriesPlot}
                             icon="timeline-line-chart"
+                            tooltipPosition={'top'}
                             onClick={this.handleAddVariableTimeSeriesPlot}/>
                 <ToolButton tooltipContent="Create a histogram plot"
                             disabled={!canAddHistogramPlot}
                             icon="timeline-bar-chart"
+                            tooltipPosition={'top'}
                             onClick={this.handleAddVariableHistogramPlot}/>
                 <ToolButton tooltipContent={`Show data in table (only first ${maxSize} values)`}
                             icon="th"
+                            tooltipPosition={'top'}
                             onClick={this.handleShowVariableTableView}/>
             </ButtonGroup>
         );
diff --git a/src/renderer/containers/WorkspacePanel.tsx b/src/renderer/containers/WorkspacePanel.tsx
index 39f569a..83f7c59 100644
--- a/src/renderer/containers/WorkspacePanel.tsx
+++ b/src/renderer/containers/WorkspacePanel.tsx
@@ -323,28 +323,34 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
                 <ToolButton tooltipContent="Show figure"
                             disabled={!canShowFigure}
                             icon="eye-open"
+                            tooltipPosition={'top'}
                             onClick={this.handleShowFigureButtonClicked}/>
                 <ToolButton tooltipContent="Show data in table"
                             disabled={!canShowTableView}
                             icon="th"
+                            tooltipPosition={'top'}
                             onClick={this.handleShowResourceTableView}
                 />
                 <ToolButton tooltipContent="Resource/step properties"
                             disabled={!resource}
                             icon="label"
+                            tooltipPosition={'top'}
                             onClick={this.handleWorkflowStepPropertiesButtonClicked}/>
                 <ToolButton tooltipContent="Edit workflow step"
                             intent={Intent.PRIMARY}
                             disabled={!workflowStep}
                             icon="edit"
+                            tooltipPosition={'top'}
                             onClick={this.handleEditOperationStepButtonClicked}/>
                 <ToolButton tooltipContent="Remove workflow step and its resource"
                             disabled={!workflowStep}
                             icon="remove"
+                            tooltipPosition={'top'}
                             onClick={this.handleRemoveOperationStepButtonClicked}/>
                 <ToolButton tooltipContent="Clean workspace, remove all steps and resources"
                             disabled={!hasSteps}
                             icon="delete"
+                            tooltipPosition={'top'}
                             onClick={this.handleCleanWorkflowButtonClicked}/>
                 {workflowStep ? <WorkflowStepPropertiesDialog selectedWorkflowStep={workflowStep}/> : null}
                 {isOperationStepSelected

From f3d76dedf994772aac79a1064a106b7b2da9ad0a Mon Sep 17 00:00:00 2001
From: AliceBalfanz <alicja.balfanz@brockmann-consult.de>
Date: Thu, 13 Aug 2020 09:24:00 +0200
Subject: [PATCH 2/4] fix tooltip of AddStep #12

---
 src/renderer/components/ToolButton.tsx      | 4 ++--
 src/renderer/containers/OperationsPanel.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ToolButton.tsx b/src/renderer/components/ToolButton.tsx
index 0d2bc95..180a95a 100644
--- a/src/renderer/components/ToolButton.tsx
+++ b/src/renderer/components/ToolButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {CSSProperties} from 'react';
-import {Button, IconName, Intent, Popover, PopoverPosition, Tooltip} from '@blueprintjs/core';
+import {AnchorButton, IconName, Intent, Popover, PopoverPosition, Tooltip} from '@blueprintjs/core';
 
 export interface IToolButtonProps {
     onClick?: () => void;
@@ -25,7 +25,7 @@ export function ToolButton(props: IToolButtonProps) {
         className = `${className} ${props.className}`;
     }
     const button = (
-        <Button
+        <AnchorButton
             className={className}
             onClick={props.onClick}
             disabled={props.disabled}
diff --git a/src/renderer/containers/OperationsPanel.tsx b/src/renderer/containers/OperationsPanel.tsx
index d62cf0e..e1ddaf8 100644
--- a/src/renderer/containers/OperationsPanel.tsx
+++ b/src/renderer/containers/OperationsPanel.tsx
@@ -148,7 +148,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
             const actionComponent = (
                 <ButtonGroup>
                     <ToolButton
-                        tooltipContent="Add a new operation step to the workspace's workflow"
+                        tooltipContent={<span>Add a new operation step to<br />the workspace's workflow</span>}
                         intent={Intent.PRIMARY}
                         onClick={this.handleAddOperationStepButtonClicked}
                         disabled={!canAddStepOperation}

From f268a399499a6c703e0a92ded7c54700949d76f8 Mon Sep 17 00:00:00 2001
From: AliceBalfanz <alicja.balfanz@brockmann-consult.de>
Date: Thu, 13 Aug 2020 09:27:17 +0200
Subject: [PATCH 3/4] added changes

---
 CHANGES.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGES.md b/CHANGES.md
index 109caa0..8124420 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@
 * The UI uses now web versions of native (electron) file and directory choosers. (#64)   
 * The UI uses now web versions of native (electron) message boxes. (#47)
 * Fixed storing of preferences
+* Fixed flickering tooltips
 
 ### Changes in v2.0.0-dev.4
 

From 97b30b1a6508dfd8442909a9fdb204b413ae38e9 Mon Sep 17 00:00:00 2001
From: AliceBalfanz <alicja.balfanz@brockmann-consult.de>
Date: Thu, 13 Aug 2020 10:32:31 +0200
Subject: [PATCH 4/4] some styling

---
 src/renderer/containers/LayersPanel.tsx     |   2 -
 src/renderer/containers/OperationsPanel.tsx |   2 +-
 src/renderer/containers/StylesPanel.tsx     |  63 +++++-----
 src/renderer/containers/WorkspacePanel.tsx  | 128 +++++++++++---------
 4 files changed, 106 insertions(+), 89 deletions(-)

diff --git a/src/renderer/containers/LayersPanel.tsx b/src/renderer/containers/LayersPanel.tsx
index af83d08..6acdf80 100644
--- a/src/renderer/containers/LayersPanel.tsx
+++ b/src/renderer/containers/LayersPanel.tsx
@@ -207,7 +207,6 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
                     onClick={this.handleMoveLayerUpButtonClicked}
                     icon="arrow-up"
                     tooltipPosition={'top'}
-
                 />
                 <ToolButton
                     tooltipContent="Move layer down"
@@ -215,7 +214,6 @@ class LayersPanel extends React.Component<ILayersPanelProps & DispatchProp<State
                     onClick={this.handleMoveLayerDownButtonClicked}
                     icon="arrow-down"
                     tooltipPosition={'top'}
-
                 />
                 <LayerSourcesDialog/>
             </ButtonGroup>
diff --git a/src/renderer/containers/OperationsPanel.tsx b/src/renderer/containers/OperationsPanel.tsx
index e1ddaf8..767cd36 100644
--- a/src/renderer/containers/OperationsPanel.tsx
+++ b/src/renderer/containers/OperationsPanel.tsx
@@ -148,7 +148,7 @@ class OperationsPanel extends React.Component<IOperationsPanelProps & DispatchPr
             const actionComponent = (
                 <ButtonGroup>
                     <ToolButton
-                        tooltipContent={<span>Add a new operation step to<br />the workspace's workflow</span>}
+                        tooltipContent={<span>Add a new operation step to<br/>the workspace's workflow</span>}
                         intent={Intent.PRIMARY}
                         onClick={this.handleAddOperationStepButtonClicked}
                         disabled={!canAddStepOperation}
diff --git a/src/renderer/containers/StylesPanel.tsx b/src/renderer/containers/StylesPanel.tsx
index 6fa7e11..251f23c 100644
--- a/src/renderer/containers/StylesPanel.tsx
+++ b/src/renderer/containers/StylesPanel.tsx
@@ -1,4 +1,4 @@
-import { connect, DispatchProp } from 'react-redux';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ColorMapCategoryState,
     ColorMapState,
@@ -15,8 +15,8 @@ import {
     VectorLayerState
 } from '../state';
 import * as React from 'react';
-import { NO_ENTITY_FOR_STYLE, NO_LAYER_FOR_STYLE } from '../messages';
-import { SubPanelHeader } from '../components/SubPanelHeader';
+import {NO_ENTITY_FOR_STYLE, NO_LAYER_FOR_STYLE} from '../messages';
+import {SubPanelHeader} from '../components/SubPanelHeader';
 import {
     AnchorButton,
     Button,
@@ -38,18 +38,18 @@ import {
 } from '@blueprintjs/core';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
-import { NumericRangeField } from '../components/field/NumericRangeField';
-import { FieldValue } from '../components/field/Field';
-import { ListBox, ListBoxSelectionMode } from '../components/ListBox';
-import { TextField } from '../components/field/TextField';
+import {NumericRangeField} from '../components/field/NumericRangeField';
+import {FieldValue} from '../components/field/Field';
+import {ListBox, ListBoxSelectionMode} from '../components/ListBox';
+import {TextField} from '../components/field/TextField';
 import SketchPicker from 'react-color/lib/components/sketch/Sketch';
-import { ColorState } from 'react-color';
-import { SimpleStyle } from '../../common/geojson-simple-style';
-import { NumericField } from '../components/field/NumericField';
-import { ViewState } from '../components/ViewState';
+import {ColorState} from 'react-color';
+import {SimpleStyle} from '../../common/geojson-simple-style';
+import {NumericField} from '../components/field/NumericField';
+import {ViewState} from '../components/ViewState';
 import * as Cesium from 'cesium';
-import { getLayerDisplayName } from '../state-util';
-import { ToolButton } from '../components/ToolButton';
+import {getLayerDisplayName} from '../state-util';
+import {ToolButton} from '../components/ToolButton';
 
 function getDisplayFractionDigits(min: number, max: number) {
     const n = Math.round(Math.log10(max - min));
@@ -230,12 +230,15 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
                                            onChange={this.handleChangedDisplayMinMax}
                                            uncontrolled={true}
                         />
-                        <ToolButton tooltipContent="Compute valid min/max"
-                                    intent={Intent.PRIMARY}
-                                    icon="arrows-horizontal"
-                                    style={{flex: 'none', marginTop: '5px'}}
-                                    disabled={this.props.isComputingVariableStatistics}
-                                    onClick={this.handleUpdateDisplayStatistics}/>
+                        <ToolButton
+                            tooltipContent="Compute valid min/max"
+                            intent={Intent.PRIMARY}
+                            icon="arrows-horizontal"
+                            tooltipPosition={'top'}
+                            style={{flex: 'none', marginTop: '5px'}}
+                            disabled={this.props.isComputingVariableStatistics}
+                            onClick={this.handleUpdateDisplayStatistics}
+                        />
                     </div>
                 </Label>
                 <div style={StylesPanel.SLIDER_DIV_STYLE_15}>
@@ -632,13 +635,13 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
             return;
         }
         this.props.dispatch(actions.getWorkspaceVariableStatistics(resource.name, variable.name, imageLayer.varIndex,
-                                                                   (statistics) => {
-                                                                       return actions.updateLayer(this.props.activeView.id, imageLayer, {
-                                                                           displayMin: statistics.min,
-                                                                           displayMax: statistics.max,
-                                                                           statistics
-                                                                       });
-                                                                   }
+            (statistics) => {
+                return actions.updateLayer(this.props.activeView.id, imageLayer, {
+                    displayMin: statistics.min,
+                    displayMax: statistics.max,
+                    statistics
+                });
+            }
         ) as any);
     }
 
@@ -710,12 +713,12 @@ class StylesPanel extends React.Component<IStylesPanelProps & DispatchProp<State
         //style = {...this.props.vectorStyle, ...style};
         if (this.props.styleContext === STYLE_CONTEXT_ENTITY) {
             this.props.dispatch(actions.updateEntityStyle(this.props.activeView,
-                                                          this.props.selectedEntity,
-                                                          style) as any);
+                this.props.selectedEntity,
+                style) as any);
         } else {
             this.props.dispatch(actions.updateLayerStyle(this.props.activeView.id,
-                                                         this.props.selectedVectorLayer.id,
-                                                         style));
+                this.props.selectedVectorLayer.id,
+                style));
         }
     }
 }
diff --git a/src/renderer/containers/WorkspacePanel.tsx b/src/renderer/containers/WorkspacePanel.tsx
index 83f7c59..1329739 100644
--- a/src/renderer/containers/WorkspacePanel.tsx
+++ b/src/renderer/containers/WorkspacePanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CSSProperties } from 'react';
-import { connect, DispatchProp } from 'react-redux';
+import {CSSProperties} from 'react';
+import {connect, DispatchProp} from 'react-redux';
 import {
     ButtonGroup,
     Icon,
@@ -13,12 +13,12 @@ import {
     Tabs,
     Tooltip
 } from '@blueprintjs/core';
-import { Cell, Column, Table, TruncatedFormat, TruncatedPopoverMode } from '@blueprintjs/table';
-import { ListBox } from '../components/ListBox';
-import { LabelWithType } from '../components/LabelWithType';
+import {Cell, Column, Table, TruncatedFormat, TruncatedPopoverMode} from '@blueprintjs/table';
+import {ListBox} from '../components/ListBox';
+import {LabelWithType} from '../components/LabelWithType';
 import WorkflowStepPropertiesDialog from './WorkflowStepPropertiesDialog';
 import OperationStepDialog from './OperationStepDialog';
-import { ContentWithDetailsPanel } from '../components/ContentWithDetailsPanel';
+import {ContentWithDetailsPanel} from '../components/ContentWithDetailsPanel';
 import * as assert from '../../common/assert';
 import * as actions from '../actions'
 import * as selectors from '../selectors'
@@ -29,15 +29,16 @@ import {
     ResourceState,
     State,
     WorkflowPortState,
-    WorkflowStepState, WorkspacePanelMode,
+    WorkflowStepState,
+    WorkspacePanelMode,
     WorkspaceState
 } from '../state';
-import { ScrollablePanelContent } from '../components/ScrollableContent';
-import { NO_WORKFLOW_STEPS, NO_WORKSPACE, NO_WORKSPACE_RESOURCES } from '../messages';
-import { findOperation, isDataFrameResource, isFigureResource } from '../state-util';
-import { isBoolean, isDefined, isString, isUndefined, isUndefinedOrNull } from '../../common/types';
-import { ToolButton } from '../components/ToolButton';
-import { EDIT_OPERATION_STEP_DIALOG_ID } from './operation-step-dialog-ids';
+import {ScrollablePanelContent} from '../components/ScrollableContent';
+import {NO_WORKFLOW_STEPS, NO_WORKSPACE, NO_WORKSPACE_RESOURCES} from '../messages';
+import {findOperation, isDataFrameResource, isFigureResource} from '../state-util';
+import {isBoolean, isDefined, isString, isUndefined, isUndefinedOrNull} from '../../common/types';
+import {ToolButton} from '../components/ToolButton';
+import {EDIT_OPERATION_STEP_DIALOG_ID} from './operation-step-dialog-ids';
 
 interface IWorkspacePanelProps {
     workspace: WorkspaceState;
@@ -205,12 +206,12 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
 
     private getEffectiveWorkflowStep() {
         return this.props.workspacePanelMode === 'steps'
-               ? this.props.selectedWorkflowStep : this.props.selectedResourceWorkflowStep;
+            ? this.props.selectedWorkflowStep : this.props.selectedResourceWorkflowStep;
     }
 
     private getEffectiveResource() {
         return this.props.workspacePanelMode === 'resources'
-               ? this.props.selectedResource : this.props.selectedWorkflowStepResource;
+            ? this.props.selectedResource : this.props.selectedWorkflowStepResource;
     }
 
     private getEffectiveResourceName() {
@@ -249,8 +250,8 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
         assert.ok(resources);
 
         const workspaceName = (workspace.isScratch || !workspace.baseDir)
-                              ? '<unnamed>'
-                              : workspace.baseDir.split(/[\\/]/).pop();
+            ? '<unnamed>'
+            : workspace.baseDir.split(/[\\/]/).pop();
         const workspaceLabel = (
             <Tooltip content={workspace.baseDir} position={PopoverPosition.AUTO_START}>
                 <strong>{workspaceName}</strong>
@@ -269,16 +270,21 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
             );
         }
         const openItemButton = (
-            <ToolButton tooltipContent="Show workspace directory in file system"
-                        onClick={this.handleOpenWorkspaceDirectoryClicked}
-                        icon="folder-open"
+            <ToolButton
+                tooltipContent="Show workspace directory in file system"
+                onClick={this.handleOpenWorkspaceDirectoryClicked}
+                icon="folder-open"
+                tooltipPosition={'top'}
             />
         );
         const copyItemButton = (
             <Popover position={PopoverPosition.LEFT}>
-                <ToolButton tooltipContent="Copy workflow"
-                            disabled={!steps.length}
-                            icon="clipboard"/>
+                <ToolButton
+                    tooltipContent="Copy workflow"
+                    disabled={!steps.length}
+                    icon="clipboard"
+                    tooltipPosition={'top'}
+                />
                 <Menu>
                     <MenuItem onClick={this.handleCopyWorkflowAsPythonScript} text="Copy workflow as Python Script"/>
                     <MenuItem onClick={this.handleCopyWorkflowAsShellScript} text="Copy workflow as Shell Script"/>
@@ -320,42 +326,52 @@ class WorkspacePanel extends React.PureComponent<IWorkspacePanelProps & Dispatch
         const canShowTableView = isDataFrameResource(resource);
         return (
             <ButtonGroup>
-                <ToolButton tooltipContent="Show figure"
-                            disabled={!canShowFigure}
-                            icon="eye-open"
-                            tooltipPosition={'top'}
-                            onClick={this.handleShowFigureButtonClicked}/>
-                <ToolButton tooltipContent="Show data in table"
-                            disabled={!canShowTableView}
-                            icon="th"
-                            tooltipPosition={'top'}
-                            onClick={this.handleShowResourceTableView}
+                <ToolButton
+                    tooltipContent="Show figure"
+                    disabled={!canShowFigure}
+                    icon="eye-open"
+                    tooltipPosition={'top'}
+                    onClick={this.handleShowFigureButtonClicked}/>
+                <ToolButton
+                    tooltipContent="Show data in table"
+                    disabled={!canShowTableView}
+                    icon="th"
+                    tooltipPosition={'top'}
+                    onClick={this.handleShowResourceTableView}
+                />
+                <ToolButton
+                    tooltipContent="Resource/step properties"
+                    disabled={!resource}
+                    icon="label"
+                    tooltipPosition={'top'}
+                    onClick={this.handleWorkflowStepPropertiesButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Edit workflow step"
+                    intent={Intent.PRIMARY}
+                    disabled={!workflowStep}
+                    icon="edit"
+                    tooltipPosition={'top'}
+                    onClick={this.handleEditOperationStepButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Remove workflow step and its resource"
+                    disabled={!workflowStep}
+                    icon="remove"
+                    tooltipPosition={'top'}
+                    onClick={this.handleRemoveOperationStepButtonClicked}
+                />
+                <ToolButton
+                    tooltipContent="Clean workspace, remove all steps and resources"
+                    disabled={!hasSteps}
+                    icon="delete"
+                    tooltipPosition={'top'}
+                    onClick={this.handleCleanWorkflowButtonClicked}
                 />
-                <ToolButton tooltipContent="Resource/step properties"
-                            disabled={!resource}
-                            icon="label"
-                            tooltipPosition={'top'}
-                            onClick={this.handleWorkflowStepPropertiesButtonClicked}/>
-                <ToolButton tooltipContent="Edit workflow step"
-                            intent={Intent.PRIMARY}
-                            disabled={!workflowStep}
-                            icon="edit"
-                            tooltipPosition={'top'}
-                            onClick={this.handleEditOperationStepButtonClicked}/>
-                <ToolButton tooltipContent="Remove workflow step and its resource"
-                            disabled={!workflowStep}
-                            icon="remove"
-                            tooltipPosition={'top'}
-                            onClick={this.handleRemoveOperationStepButtonClicked}/>
-                <ToolButton tooltipContent="Clean workspace, remove all steps and resources"
-                            disabled={!hasSteps}
-                            icon="delete"
-                            tooltipPosition={'top'}
-                            onClick={this.handleCleanWorkflowButtonClicked}/>
                 {workflowStep ? <WorkflowStepPropertiesDialog selectedWorkflowStep={workflowStep}/> : null}
                 {isOperationStepSelected
-                 ? <OperationStepDialog id={EDIT_OPERATION_STEP_DIALOG_ID} operationStep={workflowStep}/>
-                 : null}
+                    ? <OperationStepDialog id={EDIT_OPERATION_STEP_DIALOG_ID} operationStep={workflowStep}/>
+                    : null}
             </ButtonGroup>
         );
     }