feat: view indicator

.stylelintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extends: ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
   ignoreFiles: ["theme/styles/base/_resets.scss"],
   defaultSeverity: "error",
   rules: {
@@ -31,33 +30,76 @@ module.exports = {
     "color-function-notation": null,
     "value-keyword-case": [
       "lower",
+      { ignoreProperties: ["composes"], camelCaseSvgKeywords: true },
+    ],
+    "selector-attribute-quotes": "always",
+    "selector-pseudo-class-no-unknown": [
+      true,
       {
-        ignoreKeywords: [],
+        ignorePseudoClasses: ["global"],
       },
     ],
-    "selector-attribute-quotes": "always",
     "selector-pseudo-element-colon-notation": "double",
     "selector-type-case": "lower",
+
     "rule-empty-line-before": [
       "always",
       {
         except: ["first-nested"],
         ignore: ["after-comment"],
       },
     ],
-    // SCSS rules
-    "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
-    "scss/at-function-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
-    "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
-    "scss/at-mixin-argumentless-call-parentheses": "never",
-    "scss/at-mixin-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
-    "scss/dollar-variable-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
-    "scss/dollar-variable-colon-space-after": "always",
-    "scss/dollar-variable-colon-space-before": "never",
-    "scss/percent-placeholder-pattern": "[a-z][a-z0-9-]*",
-    // Arbitrary media values can be used, but explicitly
-    "scss/media-feature-value-dollar-variable": "always",
-    "scss/selector-no-redundant-nesting-selector": true,
-    "order/properties-order": null,
   },
+  overrides: [
+    {
+      files: "**/styles.{js,ts}",
+      extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
+      customSyntax: "postcss-styled-syntax",
+      rules: {
+        "media-query-no-invalid": null,
+        "no-descending-specificity": null,
+      },
+    },
+    {
+      files: "**/*.module.{scss}",
+      extends: [
+        "stylelint-config-standard-scss",
+        "stylelint-config-css-modules",
+        "stylelint-config-recess-order",
+      ],
+    },
+    {
+      files: "**/*.module.{css}",
+      extends: [
+        "stylelint-config-standard",
+        "stylelint-config-css-modules",
+        "stylelint-config-recess-order",
+      ],
+    },
+    {
+      files: "**/*.scss",
+      extends: [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recess-order",
+      ],
+      rules: {
+        "media-feature-name-no-unknown": [
+          true,
+          { ignoreMediaFeatureNames: ["functions"] },
+        ],
+        // SCSS rules
+        "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
+        "scss/at-function-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
+        "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
+        "scss/at-mixin-argumentless-call-parentheses": "never",
+        "scss/at-mixin-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
+        "scss/dollar-variable-pattern": "([a-z]+[0-9]*)([a-z0-9-]+)?",
+        "scss/dollar-variable-colon-space-after": "always",
+        "scss/dollar-variable-colon-space-before": "never",
+        "scss/percent-placeholder-pattern": "[a-z][a-z0-9-]*",
+        // Arbitrary media values can be used, but explicitly
+        "scss/media-feature-value-dollar-variable": "always",
+      },
+    },
+  ],
 };

components/molecules/ExplorerControls/Filters/index.tsx

@@ -7,7 +7,6 @@ import defaultFilters, {
   CharacteristicParams,
 } from "@/fixtures/defaultExplorerFilters";
 import { useAladin } from "@/contexts/Aladin";
-import { AladinSource } from "@/types/aladin";
 
 const Filters: FunctionComponent = () => {
   const menuLabelId = "filters-menu-label";

components/molecules/ExplorerControls/Orientation/index.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { FC, useCallback, useState } from "react";
+import ViewIndicator from "@rubin-epo/epo-widget-lib/ViewIndicator";
+import { useAladin } from "@/contexts/Aladin";
+
+const Orientation: FC<{ className?: string }> = ({ className }) => {
+  const [fov, setFov] = useState<[number, number] | undefined>();
+  const [position, setPosition] = useState<[number, number] | undefined>();
+
+  const onPositionChanged: AladinGenericCallback = useCallback(
+    ({ ra, dec }) => {
+      setPosition([ra, dec]);
+    },
+    []
+  );
+
+  const onZoomChanged: AladinGenericCallback = useCallback((newFov: number) => {
+    const fov = (aladin?.getFov() || [newFov, newFov]).map((fov) =>
+      Math.max(1, fov)
+    );
+    setFov(fov as [number, number]);
+  }, []);
+
+  const { aladin } = useAladin({
+    callbacks: {
+      onPositionChanged,
+      onZoomChanged,
+      onLoaded: (aladin) => {
+        const position = aladin.getRaDec();
+        const fov = aladin.getFov();
+
+        setPosition(position);
+        setFov(fov);
+      },
+    },
+  });
+
+  return (
+    <ViewIndicator
+      className={className}
+      ra={position ? position[0] : undefined}
+      dec={position ? position[1] : undefined}
+      fov={fov}
+      size="var(--size-spacing-l)"
+    />
+  );
+};
+
+Orientation.displayName = "Molecule.Orientation";
+
+export default Orientation;

components/molecules/ExplorerControls/_styles.scss

@@ -1,5 +1,4 @@
 /* stylelint-disable no-descending-specificity */
-@forward "./Orientation/styles";
 @forward "./Pan/styles";
 @forward "./Search/styles";
 @use "abstracts/mixins/typography";
@@ -69,25 +68,4 @@
     bottom: calc(50% - #{$controlDim} - (#{$controlSpacing}));
     left: 0;
   }
-
-  .overlays {
-    top: 0;
-    right: 0;
-    display: flex;
-    flex-wrap: wrap;
-    width: (2 * $controlDim) + $controlSpacing;
-
-    li {
-      margin-left: $controlSpacing;
-    }
-
-    li:first-child {
-      margin-left: $controlDim + $controlSpacing;
-    }
-
-    li:last-child {
-      margin-top: $controlSpacing;
-      margin-left: $controlDim + $controlSpacing;
-    }
-  }
 }

components/molecules/ExplorerControls/index.tsx

@@ -8,7 +8,8 @@ import Zoom from "../Controls/Zoom";
 import IconToggle from "@/components/primitives/IconToggle";
 import { useAladin } from "@/contexts/Aladin";
 import AladinOverlay from "@/components/primitives/AladinOverlay";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
+import Orientation from "./Orientation";
 
 export default function Controls() {
   const { aladin } = useAladin();
@@ -75,16 +76,19 @@ export default function Controls() {
       <ul
         role="menu"
         aria-label="Toggle overlays"
-        className="overlays controls-submenu"
+        className={styles.viewControls}
       >
-        <li role="menuitem">
+        <li role="menuitem" className={styles.marker}>
           <IconToggle
             icon="Globe"
             isChecked={markersEnabled}
             onToggleCallback={handleMarkerToggle}
           />
         </li>
-        <li role="menuitem">
+        <li role="menuitem" className={styles.orientation}>
+          <Orientation />
+        </li>
+        <li role="menuitem" className={styles.grid}>
           <IconToggle
             icon="Grid"
             isChecked={gridEnabled}

components/molecules/ExplorerControls/styles.module.scss

@@ -0,0 +1,36 @@
+@use "abstracts/_functions";
+
+.controlsSubmenu {
+  position: absolute;
+  z-index: functions.z-stack(controls);
+}
+
+.viewControls {
+  composes: controlsSubmenu;
+  top: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas:
+    "markers orientation"
+    ". grid";
+  gap: var(--size-spacing-2xs);
+  list-style: none;
+}
+
+.markers {
+  grid-area: markers;
+}
+.orientation {
+  grid-area: orientation;
+}
+.grid {
+  grid-area: grid;
+}
+
+.zoomContainer {
+  composes: controlsSubmenu;
+  top: calc(50% - 50px);
+  right: 0;
+}

components/molecules/FOVScale/index.tsx

@@ -25,10 +25,10 @@ const FOVScale: FunctionComponent<{
   fov?: number;
   className?: string;
 }> = ({ fov, className }) => {
-  const { ref } = useAladin();
-  const svgRef = useRef(null);
-  const windowWidth = ref.current?.clientWidth;
-  const legendWidth = ref.current?.clientWidth;
+  const { aladin } = useAladin();
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [windowWidth] = aladin?.getSize() || [];
+  const legendWidth = svgRef.current?.clientWidth;
   const legendViewBoxWidth = 1000;
   const tickHeight = 10;
 

components/molecules/FOVSize/index.tsx

@@ -9,9 +9,9 @@ const FOVSize: FunctionComponent<{ fov?: number; className?: string }> = ({
   fov,
   className,
 }) => {
-  const { ref } = useAladin();
+  const { aladin } = useAladin();
   const frameSize = 200;
-  const windowSize = ref.current?.clientWidth;
+  const [windowSize] = aladin?.getSize() || [];
   const focalPlaneWidth = 200;
   const focalPlaneFov = 3.5;
   const moonFov = 0.5;

components/organisms/AladinTourGuide/index.tsx

@@ -7,11 +7,10 @@ import {
   useState,
 } from "react";
 import { useAladin } from "@/contexts/Aladin";
-import { useSearchParams } from "next/navigation";
-import AladinCanvas from "@/components/primitives/AladinCanvas";
 import AladinOverlay from "@/components/primitives/AladinOverlay";
 import PoiDescription from "@/components/molecules/PoiDescription";
 import styles from "./styles.module.css";
+import Orientation from "@/components/molecules/ExplorerControls/Orientation";
 
 interface AstroObject {
   astroObjectId: string;
@@ -82,18 +81,18 @@ const AladinTourGuide: FunctionComponent<AladinTourGuideProps> = ({
   }, [isLoading, poiIndex]);
 
   return (
-    <>
-      <AladinCanvas showLogo={false} />
-      <AladinOverlay className={styles.tourOverlay}>
-        <PoiDescription
-          isOpen={currentIndex === poiIndex}
-          tourTitle={title}
-          title={poi?.astroObject[0]?.title}
-          description={poi?.description}
-        />
-        {controls}
-      </AladinOverlay>
-    </>
+    <AladinOverlay className={styles.tourOverlay}>
+      <PoiDescription
+        isOpen={currentIndex === poiIndex}
+        tourTitle={title}
+        title={poi?.astroObject[0]?.title}
+        description={poi?.description}
+      />
+      <div className={styles.orientation}>
+        <Orientation />
+      </div>
+      {controls}
+    </AladinOverlay>
   );
 };
 

components/organisms/AladinTourGuide/styles.module.css

@@ -2,3 +2,9 @@
   gap: var(--size-spacing-s);
   justify-content: flex-end;
 }
+
+.orientation {
+  position: absolute;
+  top: 0;
+  right: 0;
+}