closes CCI-Tools/cate#408

src/renderer/containers/GlobeView.tsx

@@ -10,11 +10,12 @@ import {
 import {connect, DispatchProp} from "react-redux";
 import {
     findVariable, findResource, getTileUrl, getGeoJSONUrl, getGeoJSONCountriesUrl,
-    COUNTRIES_LAYER_ID, SELECTED_VARIABLE_LAYER_ID, findVariableIndexCoordinates
+    COUNTRIES_LAYER_ID, SELECTED_VARIABLE_LAYER_ID, findVariableIndexCoordinates, hasWebGL
 } from "../state-util";
 import {ViewState} from "../components/ViewState";
 import * as selectors from "../selectors";
 import * as actions from "../actions";
+import {NO_WEB_GL} from "../messages";
 
 const Cesium: any = require('cesium');
 
@@ -32,6 +33,8 @@ interface IGlobeViewProps extends IGlobeViewOwnProps {
     selectedPlacemarkId: string | null;
     isDialogOpen: boolean;
     showLayerTextOverlay: boolean;
+    debugWorldView: boolean;
+    hasWebGL: boolean;
 }
 
 function mapStateToProps(state: State, ownProps: IGlobeViewOwnProps): IGlobeViewProps {
@@ -46,6 +49,8 @@ function mapStateToProps(state: State, ownProps: IGlobeViewOwnProps): IGlobeView
         selectedPlacemarkId: selectors.selectedPlacemarkIdSelector(state),
         isDialogOpen: selectors.isDialogOpenSelector(state),
         showLayerTextOverlay: state.session.showLayerTextOverlay,
+        debugWorldView: state.session.debugWorldView,
+        hasWebGL: state.session.hasWebGL,
     };
 }
 
@@ -88,6 +93,11 @@ class GlobeView extends React.Component<IGlobeViewProps & IGlobeViewOwnProps & D
     }
 
     render() {
+
+        if (!this.props.hasWebGL) {
+            return NO_WEB_GL;
+        }
+
         const placemarks = this.props.placemarks;
         const layers = [];
         const dataSources = [];
@@ -150,7 +160,7 @@ class GlobeView extends React.Component<IGlobeViewProps & IGlobeViewOwnProps & D
 
         return (
             <CesiumGlobe id={'CesiumGlobe-' + this.props.view.id}
-                         debug={false}
+                         debug={this.props.debugWorldView}
                          selectedPlacemarkId={this.props.selectedPlacemarkId}
                          placemarks={placemarks}
                          layers={layers}

src/renderer/messages.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {NonIdealState} from "@blueprintjs/core";
 
-export const ICON_EMPTY = "pt-icon-circle";
+export const ICON_CIRCLE = "pt-icon-circle";
+export const ICON_DISABLE = "pt-icon-disable";
 
 export const CONFIG_ERROR_MESSAGE = (
     <span>This is very likely a configuration error, please check <code>.cate/webapi.log</code> file.</span>
@@ -11,7 +12,7 @@ export const NO_WORKSPACE = (
     <NonIdealState
         title="No workspace"
         description={<span>Try <strong>File / New</strong> or <strong>File / Open</strong> from the main menu.</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_WORKSPACE_RESOURCES = (
@@ -40,97 +41,104 @@ export const NO_DATA_STORES_FOUND = (
 export const NO_LOCAL_DATA_SOURCES = (
     <NonIdealState
         title="No local data sources"
-        visual={ICON_EMPTY}
+        visual={ICON_CIRCLE}
         description={<span>Add new local data sources using the <code>cate ds add <em>name</em> <em>files...</em></code> command-line</span>}/>
 );
 
 export const NO_DATA_SOURCES_FOUND = (
     <NonIdealState
         title="No data sources found"
-        visual={ICON_EMPTY}
+        visual={ICON_CIRCLE}
         description={CONFIG_ERROR_MESSAGE}/>
 );
 
 export const NO_OPERATIONS_FOUND = (
     <NonIdealState
         title="No operations found"
         description={CONFIG_ERROR_MESSAGE}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_VARIABLES = (
     <NonIdealState
         title="No variables"
-        visual={ICON_EMPTY}
+        visual={ICON_CIRCLE}
         description={`Select a resource in the WORKSPACE panel first.`}/>
 );
 
 export const NO_VARIABLES_EMPTY_RESOURCE = (resourceName) => (
     <NonIdealState
         title="No variables"
-        visual={ICON_EMPTY}
+        visual={ICON_CIRCLE}
         description={`Selected resource "${resourceName}" doesn't contain any variables.`}/>
 );
 
 export const NO_ACTIVE_VIEW = (
     <NonIdealState
         title="No active view"
         description="Add a new view first."
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
+);
+
+export const NO_WEB_GL = (
+    <NonIdealState
+        title="Can't open world view"
+        description="Cate's world view component requires WebGL, which doesn't seem to be supported by your environment. This is likely on virtualized HW with low graphics capabilities. Sorry!"
+        visual={ICON_DISABLE}/>
 );
 
 export const NO_PLACEMARKS = (
     <NonIdealState
         title="No placemarks"
         description={<span>Press the <span className="pt-icon-selection"/> or <span className="pt-icon-add"/> button to add a placemark.</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_PLACEMARK_SELECTED = (
     <NonIdealState
         title="No placemark selected"
         description="Select a placemark to browse and edit its details."
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_LAYERS_NO_VIEW = (
     <NonIdealState
         title="No layers"
         description="To show layers, activate a world view"
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_LAYERS_EMPTY_VIEW = (
     <NonIdealState
         title="No layers"
         description={<span>Press the <span className="pt-icon-add"/> button to add a layer.</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_LAYER_SELECTED = (
     <NonIdealState
         title="No layer selected"
         description="Select a layer to browse and edit its details."
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_CHARTS = (
     <NonIdealState
         title="No charts"
         description={<span>Press the <span className="pt-icon-add"/> button to add a new chart.</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const NO_TABLE_DATA = (
     <NonIdealState
         title="No table data"
         description={<span>The resource seems to be empty or an error occurred.</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );
 
 export const LOADING_TABLE_DATA_FAILED = (error: any) => (
     <NonIdealState
         title="Loading table data failed"
         description={<span>{`${error}`}</span>}
-        visual={ICON_EMPTY}/>
+        visual={ICON_CIRCLE}/>
 );

src/renderer/reducers.ts

@@ -8,15 +8,15 @@ import {combineReducers, Reducer} from 'redux';
 import {updateObject, updatePropertyObject} from "../common/objutil";
 import {
     SELECTED_VARIABLE_LAYER_ID, updateSelectedVariableLayer,
-    newWorldView, newTableView, newFigureView, getFigureViewTitle, genPlacemarkId
+    newWorldView, newTableView, newFigureView, getFigureViewTitle, genPlacemarkId,
+    hasWebGL,
 } from "./state-util";
 import {
     removeViewFromLayout, removeViewFromViewArray, ViewState, addViewToViewArray,
     addViewToLayout, selectViewInLayout, getViewPanel, findViewPanel, splitViewPanel, changeViewSplitPos,
     addViewToPanel, moveView, selectView
 } from "./components/ViewState";
 import {Action, SET_GLOBE_MOUSE_POSITION, SET_GLOBE_VIEW_POSITION} from "./actions";
-import {Point} from "geojson";
 
 // Note: reducers are unit-tested through actions.spec.ts
 
@@ -564,7 +564,11 @@ const initialSessionState: SessionState = {
         dataStoresPath: null,
         useWorkspaceImageryCache: false,
         resourceNamePattern: 'res_{index}',
-    }
+    },
+
+    //hasWebGL: hasWebGL(),
+    debugWorldView: false,
+    hasWebGL: false,
 };
 
 

src/renderer/state-util.ts

@@ -363,3 +363,23 @@ function newVariableLayerDisplayProperties(variable: VariableState) {
         gamma: 1.0,
     };
 }
+
+// from https://stackoverflow.com/questions/11871077/proper-way-to-detect-webgl-support
+export function hasWebGL(): boolean {
+    let canvas;
+    let context;
+    let extensions;
+
+    try {
+        canvas = document.createElement('canvas');
+        context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+        extensions = context.getSupportedExtensions();
+        console.log(extensions);
+    } catch (e) {
+        return false;
+    }
+
+    canvas = null;
+    context = null;
+    return true;
+}

src/renderer/state.ts

@@ -702,6 +702,9 @@ export interface SessionState {
      * backendConfig settings are applied on restart (of the WebAPI) only.
      */
     backendConfig: BackendConfigState;
+
+    debugWorldView: boolean;
+    hasWebGL: boolean;
 }
 
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////