async settings

frontend/package.json

@@ -43,6 +43,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react": "^7.33.2",
+    "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react-docgen": "^5.4.3",
     "react-lineto": "^3.3.0",

frontend/src/lib/LazyLoader.js

@@ -1,2 +1,3 @@
 import React from 'react';
-export const IconWrapper = React.lazy(() => import(/* webpackChunkName: "IconWrapper" */ './fragments/IconWrapper.react'));
+export const IconWrapper = React.lazy(() => import(/* webpackChunkName: "IconWrapper" */ './fragments/IconWrapper.react'));
+export const Settings = React.lazy(() => import(/* webpackChunkName: "Settings" */ './fragments/Settings.react'));

frontend/src/lib/components/Detail.react.js

@@ -92,7 +92,7 @@ export function Detail(props) {
         return () => mounted = false;
     }, [shows])
 
-    return <div id="detailSidebar" style={{ backgroundColor: colorPalette.info, color: colorPalette.thirty.dark}}
+    return <div id="detailSidebar" style={{ backgroundColor: colorPalette.info, color: colorPalette.dark}}
                 className={shows === null ? `detail`:`detail detail-open`}>
         <h3><CloseButton onClick={clearDetail}/>{type}</h3>
         {data===null ? 

frontend/src/lib/fragments/Settings.react.js

@@ -0,0 +1,52 @@
+import React, {useState} from "react";
+import {useColorPalette} from "../contexts/ColorPalette";
+import {useHighlightedSymbol} from "../contexts/HighlightedSymbol";
+import './settings.css'
+import { darken } from 'polished';
+
+
+function makeClassNameFromMarkedSymbol(highlightedSymbol) {
+    let className = `noselect toggle_part unselected ${highlightedSymbol.length === 0 ? "fadeOut" : "fadeIn"}`;
+    return className;
+}
+
+function ClearMarked() {
+    const [highlightedSymbol,, setHighlightedSymbol] = useHighlightedSymbol()
+    const colorPalette = useColorPalette();
+    const className = makeClassNameFromMarkedSymbol(highlightedSymbol)
+    const [isHovered, setIsHovered] = useState(false);
+    const [isClicked, setIsClicked] = useState(false);
+
+    let style1 = { 
+                background: colorPalette.success, 
+                color: colorPalette.dark,
+                border: `1px solid ${colorPalette.dark}`};
+
+    if (isHovered) {
+        style1.background = darken(0.08, style1.background);
+    }
+    if (isClicked) {
+        style1.background= colorPalette.info;
+    }
+
+    const handleMouseEnter = () => setIsHovered(true);
+    const handleMouseLeave = () => setIsHovered(false);
+    const handleMouseDown = () => setIsClicked(true);
+    const handleMouseUp = () => setIsClicked(false);
+
+    return <span onClick={() => setHighlightedSymbol([])}
+                className={className}
+                style={style1}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}>
+            clear marked symbols</span>
+}
+
+export default function Settings() {
+
+    return <div className="settings noselect" >
+                <ClearMarked/>
+            </div>
+}

frontend/src/lib/components/settings.css → frontend/src/lib/fragments/settings.css

@@ -4,7 +4,6 @@
     float: right;
     display: flex;
     position: absolute;
-    color: #444;
     z-index: 10;
     right: 0;
     top: 0;
@@ -47,38 +46,10 @@
     border-radius: 0 0 0 5px;
 }
 
-
 .toggle_part {
     font-family: monospace;
     border-radius: 3px 3px 3px 3px;
     cursor: pointer;
-}
-
-.toggle_part.selected {
-    border: 1px solid #2196F3;
-    opacity: .8;
-    padding-right: 47px;
-    padding-left: 47px;
-}
-
-.toggle_part.unselected {
-    border: 1px solid #444;
     padding-right: 20px;
     padding-left: 20px;
 }
-
-.toggle_part.unselected:hover {
-    transition: opacity .8s ease-in-out;
-    -moz-transition: opacity .8s ease-in-out;
-    -webkit-transition: opacity .8s ease-in-out;
-}
-
-.toggle_part.selected:hover {
-    opacity: 1;
-    transition: opacity .8s ease-in-out;
-    -moz-transition: opacity .8s ease-in-out;
-    -webkit-transition: opacity .8s ease-in-out;
-
-}
-
-

frontend/src/lib/main/ViaspDash.react.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Suspense} from 'react';
 import PropTypes from 'prop-types';
 import {Row, Boxrow} from "../components/Row.react";
 import "../components/main.css";
@@ -12,7 +12,7 @@ import {TransformationProvider, useTransformations} from "../contexts/transforma
 import { ColorPaletteProvider, useColorPalette } from "../contexts/ColorPalette"; 
 import {HighlightedNodeProvider} from "../contexts/HighlightedNode";
 import {showError, useMessages, UserMessagesProvider} from "../contexts/UserMessages";
-import {Settings} from "../components/settings";
+import { Settings } from '../LazyLoader';
 import {UserMessages} from "../components/messages";
 import {DEFAULT_BACKEND_URL, SettingsProvider, useSettings} from "../contexts/Settings";
 import {FilterProvider} from "../contexts/Filters";
@@ -45,7 +45,7 @@ function GraphContainer(props) {
             notifyDash(clickedOn)
             setDetail(clickedOn.uuid)
             }}
-        /><Settings/>
+        /><Suspense fallback={<div>Loading...</div>}><Settings /></Suspense>
         {transformations.map(({transformation}, i) => {
             if (i === lastNodeInGraph && usingClingraph) {
                 return <div>

frontend/viasp_dash/__init__.py

@@ -28,7 +28,7 @@
 
 _this_module = _sys.modules[__name__]
 
-async_resources = ["IconWrapper",]
+async_resources = ["IconWrapper", "Settings"]
 
 _js_dist = []