Layers.tsx

import React, {FC, useEffect, useState} from 'react';
import {Divider, Paper} from "@material-ui/core";
import styled from "styled-components";
import {VisorLayersEnum} from "../../../State/Reducers/visor";
import {VoronoiLayer} from "./VoronoiLayer";

const StyledLayersSelectContainer = styled(Paper)`
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    margin: 10px;
    width: 205px;
    height: 92px;
    padding: 8px;
    justify-content: space-around;
`;

export const Layers: FC = () => {
    const [isRFMTooltipOpen, setIsRFMTooltipOpen] = useState(false);
    const [isFeatureTooltipOpen, setIsFeatureTooltipOpen] = useState(false);

    const clearTooltips = () => {
        if (isRFMTooltipOpen) {
            setIsFeatureTooltipOpen(false);
        }

        if (isFeatureTooltipOpen) {
            setIsRFMTooltipOpen(false);
        }
    };


    useEffect(clearTooltips, [isRFMTooltipOpen, isFeatureTooltipOpen]);

    return <StyledLayersSelectContainer elevation={3}>
        <VoronoiLayer
            title={VisorLayersEnum.RFM}
            subTitle='clusters'
            tooltipTitle='Explore RFM clusters'
            tooltipParagraph='Shopper clustering based on the point of sale transactions (RFM) data.'
            isTooltipOpen={isRFMTooltipOpen}
            setIsTooltipOpen={setIsRFMTooltipOpen}/>

        <Divider/>

        <VoronoiLayer
            title={VisorLayersEnum.FEATURE}
            subTitle='clusters'
            tooltipTitle='Explore feature clusters'
            tooltipParagraph='Shopper clustering based on the basket and behavioral similarities.'
            isTooltipOpen={isFeatureTooltipOpen}
            setIsTooltipOpen={setIsFeatureTooltipOpen}/>
    </StyledLayersSelectContainer>
}