Skip to content

Commit

Permalink
Merge pull request #103 from fac30/feature/tooltips
Browse files Browse the repository at this point in the history
Feature/tooltips
  • Loading branch information
jackcasstlesjones authored Dec 17, 2024
2 parents e4ea238 + 1825654 commit 18f34be
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 0 deletions.
52 changes: 52 additions & 0 deletions src/app/moods/components/Cube.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
import { useMemo, useState } from "react";
import { PlotData } from "plotly.js";
import { NeurochemState } from "./MoodsDisplay";
import Modal from "@/ui/shared/Modal";
import Toggle from "@/ui/shared/Toggle";
import PlotlyChart from "@/ui/shared/PlotlyChart";
import quadrants from "./data/quadrants.json";
import labelsMood from "./data/labels_mood.json";
import labelsPriority from "./data/labels_priority.json";
import moodTooltips from "./data/mood_tooltips.json";

// Cube quadrants and labels order (in quadrants.json/labels.json):
// Bottom-front-left
Expand Down Expand Up @@ -50,6 +52,8 @@ interface CubeProps {
export default function Cube({ neuroState }: CubeProps) {
const [isPriorityMatrix, setIsPriorityMatrix] = useState(false);
const [hasRendered, setHasRendered] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [tooltip, setTooltip] = useState("");

const labels = useMemo(() => {
return [
Expand All @@ -70,6 +74,11 @@ export default function Cube({ neuroState }: CubeProps) {
];
}, [isPriorityMatrix, hasRendered]);

function handleTooltip(mood: string) {
setTooltip(moodTooltips[mood as keyof typeof moodTooltips]);
setModalOpen(true);
}

return (
<>
<Toggle
Expand All @@ -79,6 +88,41 @@ export default function Cube({ neuroState }: CubeProps) {
toggledOn={"Priority"}
showLabels={true}
/>

<button
className="absolute left-1/2 top-[122px] transform -translate-x-28 z-20 w-20 h-6"
onClick={() => handleTooltip("fight/flight")}
></button>
<button
className="absolute left-1/2 top-[122px] transform translate-x-14 z-20 w-14 h-6"
onClick={() => handleTooltip("interest")}
></button>
<button
className="absolute left-1/2 top-[327px] transform -translate-x-28 z-20 w-16 h-6"
onClick={() => handleTooltip("distress")}
></button>
<button
className="absolute left-1/2 top-[327px] transform translate-x-16 z-20 w-12 h-6"
onClick={() => handleTooltip("relief")}
></button>

<button
className="absolute left-1/2 top-[180px] transform -translate-x-20 z-20 w-16 h-6"
onClick={() => handleTooltip("freeze")}
></button>
<button
className="absolute left-1/2 top-[180px] transform translate-x-6 z-20 w-10 h-6"
onClick={() => handleTooltip("joy")}
></button>
<button
className="absolute left-1/2 top-[267px] transform -translate-x-16 z-20 w-10 h-6"
onClick={() => handleTooltip("guilt")}
></button>
<button
className="absolute left-1/2 top-[267px] transform translate-x-3 z-20 w-16 h-6"
onClick={() => handleTooltip("content")}
></button>

<div className="flex flex-col items-center justify-center w-full">
<div className="relative flex justify-center w-full">
{/* Left side labels */}
Expand Down Expand Up @@ -167,6 +211,14 @@ export default function Cube({ neuroState }: CubeProps) {
<span className="text-white text-sm">Important</span>
</div>
</div>
<Modal
modalOpen={modalOpen}
title={tooltip}
forwardButton={{
label: "Close",
action: () => setModalOpen(false),
}}
/>
</>
);
}
10 changes: 10 additions & 0 deletions src/app/moods/components/data/mood_tooltips.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"fight/flight": "Fight/flight: perceiving an injustice, threat or danger, whether physical or psychological",
"freeze": "Freeze: feeling overwhelmed and on edge, from too many demands and not enough resources",
"guilt": "Guilt: feeling responsible and a lower sense of self-worth as a result of what you did",
"distress": "Distress: feeling extremely unhappy and dispirited",
"joy": "Joy: feeling pleasure and in high spirits",
"interest": "Interest: feeling motivated by an idea or an activity",
"content": "Content: feeling complete and like you have enough",
"relief": "Relief: feeling appreciative after an unpleasant feeling goes away"
}

0 comments on commit 18f34be

Please sign in to comment.