Feature/property tree topic

public/locales/en/components.json

@@ -81,6 +81,10 @@
       "title": "Unavailable Map",
       "description": "No map found for '{{name}}'"
     },
+    "time-too-fast": {
+      "title": "Map View Unavailable",
+      "description": "The map is currently unavailable because the camera is moving too fast. Please slow down to view the map."
+    },
     "aria-labels": {
       "map": "Map of {{name}}",
       "view-direction": "Cone showing the view direction of the camera",

src/components/DynamicMap/DynamicMap.tsx

@@ -1,23 +1,13 @@
 import { PropsWithChildren, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Alert,
-  AspectRatio,
-  BackgroundImage,
-  Box,
-  Image,
-  LoadingOverlay,
-  MantineStyleProps,
-  Text
-} from '@mantine/core';
+import { Box, Image, MantineStyleProps } from '@mantine/core';
 
 import { MapMarker } from '@/components/DynamicMap/MapMarker';
 import { NightShadow } from '@/components/DynamicMap/NightShadow';
 import { useSubscribeToCamera } from '@/hooks/topicSubscriptions';
 import { useCameraLatLong } from '@/redux/camera/hooks';
-import { useAnchorNode } from '@/util/propertyTreeHooks';
 
-import { useMapPath } from './hooks';
+import { Map } from './Map';
 import { ViewCone } from './ViewCone';
 
 // The fewer decimals we can get away with, the less the component will rerender due to
@@ -66,20 +56,19 @@ export function DynamicMap({
 }: Props) {
   const { t } = useTranslation('components', { keyPrefix: 'map' });
 
+  const refSize = useRef<HTMLDivElement>(null);
+
   const {
     latitude: currentLat,
     longitude: currentLong,
     viewLatitude,
     viewLongitude
   } = useCameraLatLong(DecimalPrecision);
-  const refSize = useRef<HTMLDivElement>(null);
-  const width = refSize?.current?.clientWidth;
-  const height = refSize?.current?.clientHeight;
 
   useSubscribeToCamera();
-  const anchor = useAnchorNode();
 
-  const [mapPath, mapExists] = useMapPath(anchor);
+  const width = refSize?.current?.clientWidth;
+  const height = refSize?.current?.clientHeight;
 
   const hasViewDirection = viewLatitude !== undefined && viewLongitude !== undefined;
   const markerPosition = (() => {
@@ -97,77 +86,41 @@ export function DynamicMap({
   // Remove jumping between 0 and -180 degrees when looking straight at surface
   const cleanedAngle = Math.abs(angleDeg) === 180 ? 0 : angleDeg;
 
-  if (!anchor) {
-    return (
-      <AspectRatio ratio={2} {...styleProps} style={style}>
-        <BackgroundImage src={''} />
-        <LoadingOverlay visible={true} />
-      </AspectRatio>
-    );
-  }
-
-  if (!mapExists || !anchor) {
-    return (
-      <Alert variant={'light'} color={'orange'} title={t('no-map.title')}>
-        <Text>{t('no-map.description', { name: anchor?.name })}</Text>
-      </Alert>
-    );
-  }
-
   return (
-    <AspectRatio
-      ratio={2}
-      mx={'auto'}
-      miw={300}
-      {...styleProps}
-      ref={(el) => {
-        if (ref && el) {
-          ref.current = el;
-        }
-        if (refSize && el) {
-          refSize.current = el;
-        }
-      }}
-      style={style}
-    >
-      <BackgroundImage
-        src={mapPath}
-        style={{ position: 'relative' }}
-        aria-label={t('aria-labels.map', { name: anchor.name })}
-      >
-        {width && height && <NightShadow width={width} height={height} />}
-        {children}
-        <MapMarker left={`${markerPosition.x * 100}%`} top={`${markerPosition.y * 100}%`}>
-          <Box
+    <Map ref={ref} refSize={refSize} style={style} {...styleProps}>
+      {width && height && <NightShadow width={width} height={height} />}
+      {children}
+      <MapMarker left={`${markerPosition.x * 100}%`} top={`${markerPosition.y * 100}%`}>
+        <Box
+          style={{
+            width: 0,
+            height: 0,
+            transform: `rotate(${cleanedAngle}deg)`
+          }}
+        >
+          <Image
+            src={iconPath}
             style={{
-              width: 0,
-              height: 0,
-              transform: `rotate(${cleanedAngle}deg)`
+              width: iconSize,
+              height: iconSize,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              transform: 'translate(-50%, -50%)'
             }}
-          >
-            <Image
-              src={iconPath}
-              style={{
-                width: iconSize,
-                height: iconSize,
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                transform: 'translate(-50%, -50%)'
-              }}
-              aria-label={t('aria-labels.openspace-icon')}
-            />
-          </Box>
-        </MapMarker>
-        {width && height && showViewDirection && hasViewDirection && (
-          <ViewCone
-            width={width}
-            height={height}
-            coneWidth={coneWidth}
-            coneHeight={coneHeight}
+            aria-label={t('aria-labels.openspace-icon')}
           />
-        )}
-      </BackgroundImage>
-    </AspectRatio>
+        </Box>
+      </MapMarker>
+      {width && height && showViewDirection && hasViewDirection && (
+        <ViewCone
+          width={width}
+          height={height}
+          coneWidth={coneWidth}
+          coneHeight={coneHeight}
+          decimalPrecision={DecimalPrecision}
+        />
+      )}
+    </Map>
   );
 }

src/components/DynamicMap/Map.tsx

@@ -0,0 +1,87 @@
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Alert,
+  AspectRatio,
+  BackgroundImage,
+  LoadingOverlay,
+  MantineStyleProps,
+  Text
+} from '@mantine/core';
+
+import { useSubscribeToTime } from '@/hooks/topicSubscriptions';
+import { useAppSelector } from '@/redux/hooks';
+import { useAnchorNode } from '@/util/propertyTreeHooks';
+
+import { useMapPath } from './hooks';
+
+// Settings for the OpenSpace marker and view cone
+interface Props extends MantineStyleProps, PropsWithChildren {
+  ref?: React.RefObject<HTMLDivElement>;
+  refSize?: React.RefObject<HTMLDivElement | null>;
+  style?: React.CSSProperties;
+}
+
+export function Map({ ref, refSize, children, style, ...styleProps }: Props) {
+  const { t } = useTranslation('components', { keyPrefix: 'map' });
+  const oneDayPerSecond = 86400;
+
+  const isTimeTooFast = useAppSelector(
+    (state) => Math.abs(state.time.targetDeltaTime ?? 0) > oneDayPerSecond
+  );
+  const anchor = useAnchorNode();
+  const [mapPath, mapExists] = useMapPath(anchor);
+  useSubscribeToTime();
+
+  if (!anchor) {
+    return (
+      <AspectRatio ratio={2} {...styleProps} style={style}>
+        <BackgroundImage src={''} />
+        <LoadingOverlay visible={true} />
+      </AspectRatio>
+    );
+  }
+
+  if (!mapExists || !anchor) {
+    return (
+      <Alert variant={'light'} color={'orange'} title={t('no-map.title')}>
+        <Text>{t('no-map.description', { name: anchor?.name })}</Text>
+      </Alert>
+    );
+  }
+  return (
+    <AspectRatio
+      ratio={2}
+      mx={'auto'}
+      miw={300}
+      {...styleProps}
+      ref={(el) => {
+        if (ref && el) {
+          ref.current = el;
+        }
+        if (refSize && el) {
+          refSize.current = el;
+        }
+      }}
+      style={style}
+    >
+      <BackgroundImage
+        src={mapPath}
+        style={{ position: 'relative' }}
+        aria-label={t('aria-labels.map', { name: anchor.name })}
+      >
+        {!isTimeTooFast && children}
+        {isTimeTooFast && (
+          <Alert
+            variant={'filled'}
+            color={'orange'}
+            title={t('time-too-fast.title')}
+            style={{ position: 'absolute', top: 10, left: 10, right: 10 }}
+          >
+            {t('time-too-fast.description')}
+          </Alert>
+        )}
+      </BackgroundImage>
+    </AspectRatio>
+  );
+}

src/components/DynamicMap/ViewCone.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 
-import { useProperty } from '@/hooks/properties';
+import { usePropertyValue } from '@/hooks/properties';
 import { useSubscribeToCamera } from '@/hooks/topicSubscriptions';
 import { useCameraLatLong } from '@/redux/camera/hooks';
 import { useAppSelector } from '@/redux/hooks';
@@ -12,20 +12,30 @@ interface Props {
   height: number;
   coneWidth: number;
   coneHeight: number;
+  decimalPrecision: number;
 }
 
 // TODO: ylvse 2025-07-11 Rewrite this as a React component that uses hooks instead of D3 directly.
-export function ViewCone({ width, height, coneWidth, coneHeight }: Props) {
-  const ref = useRef(null);
-  const { latitude, longitude, viewLatitude, viewLongitude } = useCameraLatLong(7);
+export function ViewCone({
+  width,
+  height,
+  coneWidth,
+  coneHeight,
+  decimalPrecision
+}: Props) {
   const viewLength = useAppSelector((state) => state.camera.viewLength);
+  const { altitudeMeters } = useAppSelector((state) => state.camera);
+  const ref = useRef(null);
+
   const anchor = useAnchorNode();
-  const [interactionSphere] = useProperty(
+  const { latitude, longitude, viewLatitude, viewLongitude } =
+    useCameraLatLong(decimalPrecision);
+  const interactionSphere = usePropertyValue(
     'DoubleProperty',
     `Scene.${anchor?.identifier}.EvaluatedInteractionSphere`
   );
-  const { altitudeMeters } = useAppSelector((state) => state.camera);
   useSubscribeToCamera();
+
   const shouldShowCone =
     altitudeMeters && interactionSphere && altitudeMeters < interactionSphere * 3;
 

src/components/Property/Property.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react';
 import { Stack } from '@mantine/core';
 
 import { useAppSelector } from '@/redux/hooks';
+import { propertySelectors } from '@/redux/propertytree/propertySlice';
 import { Uri } from '@/types/types';
 
 import { BoolProperty } from './Types/BoolProperty';
@@ -79,8 +80,9 @@ interface Props {
 }
 
 export const Property = memo(({ uri }: Props) => {
-  const meta = useAppSelector((state) => state.properties.properties[uri]?.metaData);
-
+  const meta = useAppSelector(
+    (state) => propertySelectors.selectById(state, uri)?.metaData
+  );
   if (!meta) {
     return <></>;
   }

src/components/PropertyOwner/Custom/GlobeLayers/GlobeLayer.tsx

@@ -27,18 +27,24 @@ export function GlobeLayer({ uri }: Props) {
     throw Error(`${t('error.no-property-owner-for-uri')}: ${uri}`);
   }
 
-  const { isVisible } = usePropertyOwnerVisibility(uri);
+  const { visibility, setVisibility } = usePropertyOwnerVisibility(uri);
   const visibleProperties = useVisibleProperties(propertyOwner);
   const subowners = propertyOwner.subowners ?? [];
 
   // @TODO (emmbr, 2024-12-06): We want to avoid hardcoded colors, but since changing the
   // color of the text is a feature we wanted to keep I decided to do it this way for now.
-  const textColor = isVisible ? 'green' : undefined;
+  const textColor = visibility === 'Visible' ? 'green' : undefined;
 
   return (
     <Collapsable
       title={<Text c={textColor}>{displayName(propertyOwner)}</Text>}
-      leftSection={<PropertyOwnerVisibilityCheckbox uri={uri} />}
+      leftSection={
+        <PropertyOwnerVisibilityCheckbox
+          uri={uri}
+          visibility={visibility}
+          setVisibility={setVisibility}
+        />
+      }
       rightSection={
         <Group wrap={'nowrap'}>
           <InfoBox>

src/components/PropertyOwner/Custom/GlobeLayers/GlobeLayersGroup.tsx

@@ -4,8 +4,10 @@ import { Collapsable } from '@/components/Collapsable/Collapsable';
 import { Property } from '@/components/Property/Property';
 import { usePropertyOwner } from '@/hooks/propertyOwner';
 import { useAppSelector } from '@/redux/hooks';
+import { propertySelectors } from '@/redux/propertytree/propertySlice';
 import { Identifier, Uri } from '@/types/types';
-import { displayName, isPropertyOwnerActive } from '@/util/propertyTreeHelpers';
+import { checkVisibility, displayName } from '@/util/propertyTreeHelpers';
+import { enabledPropertyUri, fadePropertyUri } from '@/util/uris';
 
 import { LayerList } from './LayersList';
 
@@ -27,8 +29,15 @@ export function GlobeLayerGroup({ uri, globe, icon }: Props) {
 
   const nActiveLayers = useAppSelector(
     (state) =>
-      layers.filter((layer) => isPropertyOwnerActive(layer, state.properties.properties))
-        .length
+      layers.filter((layer) => {
+        const fade = propertySelectors.selectById(state, fadePropertyUri(layer))
+          ?.value as number | undefined;
+        const enabled = propertySelectors.selectById(state, enabledPropertyUri(layer))
+          ?.value as boolean | undefined;
+        const visibility = checkVisibility(enabled, fade);
+        // Count the layer as active if it is either Visible or Fading
+        return visibility === 'Visible' || visibility === 'Fading';
+      }).length
   );
 
   return (

src/components/PropertyOwner/Custom/GlobeLayers/GlobeLayersPropertyOwner.tsx

@@ -4,7 +4,8 @@ import { PropertyOwnerCollapsable } from '@/components/PropertyOwner/PropertyOwn
 import { layerGroups } from '@/data/GlobeLayers';
 import { usePropertyOwner } from '@/hooks/propertyOwner';
 import { Uri } from '@/types/types';
-import { displayName, sgnIdentifierFromSubownerUri } from '@/util/propertyTreeHelpers';
+import { displayName } from '@/util/propertyTreeHelpers';
+import { sgnIdentifierFromSubownerUri } from '@/util/uris';
 
 import { GlobeLayerGroup } from './GlobeLayersGroup';