fixed border mission marker; changed type of mapStore for State management in marker

This commit is contained in:
PxlLoewe
2025-04-16 21:31:08 -07:00
parent 9cbb5fcec9
commit 6a827b4127
11 changed files with 140 additions and 117 deletions

View File

@@ -21,8 +21,8 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
// get markers and check if they are overlapping // get markers and check if they are overlapping
const ownMarker = const ownMarker =
mode === "popup" mode === "popup"
? document.querySelector(`#popup-${id}`) ? document.querySelector(`#popup-domain-${id}`)
: document.querySelector(`#marker-${id}`); : document.querySelector(`#marker-domain-${id}`);
if (!otherMarkers || !ownMarker) return "topleft"; if (!otherMarkers || !ownMarker) return "topleft";
@@ -55,18 +55,16 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
}; };
const centerOfOverlappingMarkers = markersPosition.reduce( const centerOfOverlappingMarkers = markersPosition.reduce(
(acc, pos) => { (acc, pos) => ({
if (acc.x === 0 && acc.y === 0) return pos; x: acc.x + pos.x,
return { y: acc.y + pos.y,
x: (acc.x + pos.x) / 2, }),
y: (acc.y + pos.y) / 2, { x: 0, y: 0 },
};
},
{
x: 0,
y: 0,
},
); );
centerOfOverlappingMarkers.x /= markersPosition.length;
centerOfOverlappingMarkers.y /= markersPosition.length;
if (marksersInCluster.length > 1) { if (marksersInCluster.length > 1) {
if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) { if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) { if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -137,7 +135,7 @@ export const SmartPopup = (
> >
<div <div
data-id={id} data-id={id}
id={`popup-${id}`} id={`popup-domain-${id}`}
className={cn( className={cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none", "map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2", anchor.includes("left") && "-translate-x-1/2",

View File

@@ -10,9 +10,15 @@ interface MapStore {
center: L.LatLngExpression; center: L.LatLngExpression;
zoom: number; zoom: number;
}; };
openMissionMarker: string[]; openMissionMarker: {
id: string;
tab: "home" | "";
}[];
setOpenMissionMarker: (mission: { open: string[]; close: string[] }) => void; setOpenMissionMarker: (mission: { open: string[]; close: string[] }) => void;
openAircraftMarker: string[]; openAircraftMarker: {
id: string;
tab: "home" | "fms" | "aircraft" | "mission" | "chat";
}[];
setOpenAircraftMarker: (mission: { open: string[]; close: string[] }) => void; setOpenAircraftMarker: (mission: { open: string[]; close: string[] }) => void;
searchElements: { searchElements: {
id: number; id: number;

View File

@@ -18,9 +18,9 @@ export const useMissionsStore = create<MissionStore>((set) => ({
addressZip: "10178", addressZip: "10178",
missionAdditionalInfo: "Additional info", missionAdditionalInfo: "Additional info",
missionCategory: "AB_Atmung", missionCategory: "AB_Atmung",
missionKeyword: "Zunehmende Atemnot", missionKeyword: "Zunehmende Beschwerden",
missionSummary: "AB1_0",
missionPatientInfo: "M/10", missionPatientInfo: "M/10",
missionSummary: "Summary",
}, },
], ],
setMissions: (missions) => set({ missions }), setMissions: (missions) => set({ missions }),

View File

@@ -61,7 +61,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
<div <div
className={cn( className={cn(
"absolute w-full h-4 z-99", // Adjust width to full "absolute w-[calc(100%+2px)] h-4 z-99", // As offset is 2px, we need to add 2px to the width
anchor.includes("left") ? "-left-[2px]" : "-right-[2px]", anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]", anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)} )}
@@ -213,6 +213,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright", anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => { ) => {
return `<div return `<div
id="marker-${aircraft.id}"
class="${cn( class="${cn(
"relative w-[140px] transform flex items-center gap-2 px-2 z-100", "relative w-[140px] transform flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full", anchor.includes("right") && "-translate-x-full",
@@ -245,7 +246,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
</span> </span>
<div <div
data-id="${aircraft.id}" data-id="${aircraft.id}"
id="marker-${aircraft.id}" id="marker-domain-${aircraft.id}"
class="${cn( class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none", "map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2", anchor.includes("left") && "-translate-x-1/2",

View File

@@ -6,16 +6,18 @@ import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import { cn } from "helpers/cn"; import { cn } from "helpers/cn";
import { Cross, House, Minimize2, Route } from "lucide-react"; import { Cross, House, Minimize2, Route } from "lucide-react";
import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup"; import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
import { Mission } from "@repo/db"; import { Mission, MissionState } from "@repo/db";
export const MISSION_STATUS_COLORS: { [key: string]: string } = { export const MISSION_STATUS_COLORS: Record<MissionState, string> = {
draft: "0092b8", draft: "#0092b8",
running: "#155dfc", running: "#155dfc",
finished: "#155dfc",
}; };
export const MISSION_STATUS_TEXT_COLORS: { [key: string]: string } = { export const MISSION_STATUS_TEXT_COLORS: Record<MissionState, string> = {
draft: "00d3f2", draft: "#00d3f2",
running: "#50a2ff", running: "#50a2ff",
finished: "#50a2ff",
}; };
const MissionPopupContent = ({ mission }: { mission: Mission }) => { const MissionPopupContent = ({ mission }: { mission: Mission }) => {
@@ -166,8 +168,9 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright", anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => { ) => {
return `<div return `<div
id="marker-${mission.id}"
class="${cn( class="${cn(
"relative w-[140px] transform flex items-center gap-2 px-2 z-100", "relative w-[100px] transform flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full", anchor.includes("right") && "-translate-x-full",
anchor.includes("bottom") && "-translate-y-full", anchor.includes("bottom") && "-translate-y-full",
)}" )}"
@@ -187,18 +190,12 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
${anchor.includes("top") ? `border-top: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};` : `border-bottom: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};`} ${anchor.includes("top") ? `border-top: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};` : `border-bottom: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};`}
" "
></div> ></div>
<span
class="font-semibold text-xl"
style="color: ${MISSION_STATUS_TEXT_COLORS[mission.state]};"
>
${mission.state}
</span>
<span class="text-white text-[15px]"> <span class="text-white text-[15px]">
${mission.missionSummary} ${mission.missionSummary}
</span> </span>
<div <div
data-id="${mission.id}" data-id="${mission.id}"
id="marker-${mission.id}" id="marker-domain-${mission.id}"
class="${cn( class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none", "map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2", anchor.includes("left") && "-translate-x-1/2",
@@ -229,7 +226,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
closeOnClick={false} closeOnClick={false}
autoPan={false} autoPan={false}
wrapperClassName="relative" wrapperClassName="relative"
className="w-[200px] h-[150px]" className="w-[300px] h-[150px]"
> >
<MissionPopupContent mission={mission} /> <MissionPopupContent mission={mission} />
</SmartPopup> </SmartPopup>

Binary file not shown.

View File

@@ -1,3 +1,19 @@
# [1.3.0](https://github.com/grafana/explore-profiles/compare/v1.2.3...v1.3.0) (2025-04-16)
### Bug Fixes
* Cascader options break when services have multiple levels with matching prefix ([#484](https://github.com/grafana/explore-profiles/issues/484)) ([2bb6034](https://github.com/grafana/explore-profiles/commit/2bb603464a329bec9b6da2c26ca0c30a2ef6f45e))
* **Settings:** Reload settings when data source changes ([#474](https://github.com/grafana/explore-profiles/issues/474)) ([23d814b](https://github.com/grafana/explore-profiles/commit/23d814be30fc8cf050024e556c132785d24a196c))
### Features
* **CI:** Append SHA to version number when releasing from main ([#455](https://github.com/grafana/explore-profiles/issues/455)) ([03e6158](https://github.com/grafana/explore-profiles/commit/03e6158377a87b6494ac39a9764296dd2de19a01))
* **Metrics:** Basic UI for experimental metrics from profiles ([#462](https://github.com/grafana/explore-profiles/issues/462)) ([1500a59](https://github.com/grafana/explore-profiles/commit/1500a59e6daeb097576449273e2dc3da47f8f311))
## [1.2.3](https://github.com/grafana/explore-profiles/compare/v1.2.2...v1.2.3) (2025-04-03) ## [1.2.3](https://github.com/grafana/explore-profiles/compare/v1.2.2...v1.2.3) (2025-04-03)

View File

@@ -8,13 +8,13 @@ Hash: SHA512
"signedByOrg": "grafana", "signedByOrg": "grafana",
"signedByOrgName": "Grafana Labs", "signedByOrgName": "Grafana Labs",
"plugin": "grafana-pyroscope-app", "plugin": "grafana-pyroscope-app",
"version": "1.2.3", "version": "1.3.0",
"time": 1743715995969, "time": 1744790362190,
"keyId": "7e4d0c6a708866e7", "keyId": "7e4d0c6a708866e7",
"files": { "files": {
"module.js.LICENSE.txt": "84798babe5a84ee41efdf41174af68e377c212b027183ecdd830747793156ded", "module.js.LICENSE.txt": "84798babe5a84ee41efdf41174af68e377c212b027183ecdd830747793156ded",
"LICENSE": "8486a10c4393cee1c25392769ddd3b2d6c242d6ec7928e1414efff7dfb2f07ef", "LICENSE": "8486a10c4393cee1c25392769ddd3b2d6c242d6ec7928e1414efff7dfb2f07ef",
"CHANGELOG.md": "f9447ad55912a8192ba0ab54e2e2a167057ff9724edbc15ef316ffdc62e34ed4", "CHANGELOG.md": "196cf272cc550487bf13bdc66c800220d0477583d5a8ca0e9d683452a7075e9d",
"img/bafee50693eb02088442.png": "66d5311c4ca898cdae2d0a23a414f04a7c49052f0035c1a2906b9e9bb15d628d", "img/bafee50693eb02088442.png": "66d5311c4ca898cdae2d0a23a414f04a7c49052f0035c1a2906b9e9bb15d628d",
"img/9c9cdd5175734d579007.png": "ab65c374d22c5faad274f6b8b2ab00bf404bb988803f09d375326cd692fce821", "img/9c9cdd5175734d579007.png": "ab65c374d22c5faad274f6b8b2ab00bf404bb988803f09d375326cd692fce821",
"img/58f0b0e1cfa063e4b662.png": "87598baf93192a8dc7ee923e0af6a0c5e4b3359b00b7391fc9530108feb7aac0", "img/58f0b0e1cfa063e4b662.png": "87598baf93192a8dc7ee923e0af6a0c5e4b3359b00b7391fc9530108feb7aac0",
@@ -27,25 +27,25 @@ Hash: SHA512
"img/hero-image.png": "87598baf93192a8dc7ee923e0af6a0c5e4b3359b00b7391fc9530108feb7aac0", "img/hero-image.png": "87598baf93192a8dc7ee923e0af6a0c5e4b3359b00b7391fc9530108feb7aac0",
"img/8cdf4d2e2df8326311ab.gif": "72afdd2fcad33e13db33af765a3fae9528315d78391684190dd23e40bd688852", "img/8cdf4d2e2df8326311ab.gif": "72afdd2fcad33e13db33af765a3fae9528315d78391684190dd23e40bd688852",
"README.md": "da879e54a2da3e7134c14016f0e5b59c9255da5b81d03a02e3e8d47356e15638", "README.md": "da879e54a2da3e7134c14016f0e5b59c9255da5b81d03a02e3e8d47356e15638",
"module.js.map": "9404b5b8c0c79c5582b356309ffa9b6548f1801195bd2ecb3600d5144d5260d5", "module.js.map": "148d0a70d1c8bf76daa71107e7eaad43b69db051cacff5a09a649255d0009840",
"e6c722427cfa8715e19d.svg": "559341996765c2d5639a2818d76bcd88ffe252212193a573f2f9f77dae5064dd", "e6c722427cfa8715e19d.svg": "559341996765c2d5639a2818d76bcd88ffe252212193a573f2f9f77dae5064dd",
"shared/infrastructure/profile-metrics/profile-metrics.json": "0a3a345a365e72f4278d3a76d5739600483bed8f374ddc1c2af85029057b8d07", "shared/infrastructure/profile-metrics/profile-metrics.json": "0a3a345a365e72f4278d3a76d5739600483bed8f374ddc1c2af85029057b8d07",
"pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneEmptyState/ui/img/grot-404-light.svg": "89ea40b6dcf2dc8dfe146f8acac42b604e4d3c3dad03e539551d58a21f80654d", "pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneEmptyState/ui/img/grot-404-light.svg": "89ea40b6dcf2dc8dfe146f8acac42b604e4d3c3dad03e539551d58a21f80654d",
"pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneEmptyState/ui/img/grot-404-dark.svg": "a0c8acbcf5685a8950ce1c67722579dc745585fb0d668ce965327955e5e829ff", "pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneEmptyState/ui/img/grot-404-dark.svg": "a0c8acbcf5685a8950ce1c67722579dc745585fb0d668ce965327955e5e829ff",
"e79edcfbe2068fae2364.svg": "89ea40b6dcf2dc8dfe146f8acac42b604e4d3c3dad03e539551d58a21f80654d", "e79edcfbe2068fae2364.svg": "89ea40b6dcf2dc8dfe146f8acac42b604e4d3c3dad03e539551d58a21f80654d",
"plugin.json": "ace999534674d0864a104665afc9143c039e6c86b90aaa6e4a205be765f2cfa0", "plugin.json": "5c6a1c691e238e51599e4fcdb92a9be1ccdeabf340aad6faecab7faf15473078",
"944c737f589d02ecf603.svg": "a0c8acbcf5685a8950ce1c67722579dc745585fb0d668ce965327955e5e829ff", "944c737f589d02ecf603.svg": "a0c8acbcf5685a8950ce1c67722579dc745585fb0d668ce965327955e5e829ff",
"module.js": "a7cc2a0b7e676fddfa69f94b46f67c73b5abb81133620b70e731736fbd6f7f95" "module.js": "9f2c0361bb11aeb56c2c8abdbfa2f6a54b985c7f22c8f51427af2973df81b4e7"
} }
} }
-----BEGIN PGP SIGNATURE----- -----BEGIN PGP SIGNATURE-----
Version: OpenPGP.js v4.10.11 Version: OpenPGP.js v4.10.11
Comment: https://openpgpjs.org Comment: https://openpgpjs.org
wrkEARMKAAYFAmfu/pwAIQkQfk0ManCIZucWIQTzOyW2kQdOhGNlcPN+TQxq wrkEARMKAAYFAmf/Y1oAIQkQfk0ManCIZucWIQTzOyW2kQdOhGNlcPN+TQxq
cIhm50GOAgkAMYEWBTEBliMidQSc9CsoD+h1V3hM4mdQSDrYjPXVO/aPvZ8z cIhm5+hKAgkA2MEgGa5HxlYzxQ9tJdQy2vUJjZYH630QBRfx11WSCh8l6Ths
zm8s9ZVIuSggnEYranWKRSAOtOp00864RRe8HqwCCQEYMOfD9Icg03GlEWcv qk6f2HzwsZSWh4kDkzfwFqSvMF3l33FUHGpH5z4CCQGwhcUQScay0D+FIjtN
XvRG/A1/WJXQSVOQaGbc8pgb2FG7OIF/yWreBzsfObtEaMbfv2wx+8IE7QyZ BaAv7DIPpcG5fNYcaxdEGj8mt4UfNcE5zvs3yJ5bf88arZafNskJq/HpxDbn
eMk0sVCg8w== N5W9l+XEAg==
=eeMe =DXtv
-----END PGP SIGNATURE----- -----END PGP SIGNATURE-----

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -34,8 +34,8 @@
"path": "img/hero-image.png" "path": "img/hero-image.png"
} }
], ],
"version": "1.2.3", "version": "1.3.0",
"updated": "2025-04-03", "updated": "2025-04-16",
"links": [ "links": [
{ {
"name": "GitHub", "name": "GitHub",