Merge pull request #654 from amelioro/landing-touchups

Landing touchups
amelioro · Feb 13, 2025 · 90fb2d3 · 90fb2d3
2 parents 93c8be0 + c5f7359
commit 90fb2d3
Show file tree

Hide file tree

Showing 31 changed files with 241 additions and 147 deletions.
diff --git a/e2e/tests/regression.spec.ts b/e2e/tests/regression.spec.ts
@@ -20,7 +20,7 @@ test("can play around", async ({ page }) => {
       // pixels, creating a significant diff... not sure how to fix this (probably need to file an issue?),
       // but masking the images is a workaround for now.
       page.getByRole("img", { name: "problem solving diagram" }),
-      page.getByRole("img", { name: "criteria tables of cars-going" }),
+      page.getByRole("img", { name: "clicking between views in cars-going-too-fast topic" }),
     ],
   });
 

diff --git a/e2e/tests/regression.spec.ts-snapshots/homepage-chromium-linux.png b/e2e/tests/regression.spec.ts-snapshots/homepage-chromium-linux.png
diff --git a/e2e/tests/regression.spec.ts-snapshots/playground-with-solution-chromium-linux.png b/e2e/tests/regression.spec.ts-snapshots/playground-with-solution-chromium-linux.png
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
@@ -37,12 +37,6 @@ const Home: NextPage = () => {
           </div>
         </section>
 
-        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
-          <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
-            <UseCasesSection />
-          </div>
-        </section>
-
         <section
           id="features"
           className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main"
@@ -52,6 +46,12 @@ const Home: NextPage = () => {
           </div>
         </section>
 
+        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+          <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
+            <UseCasesSection />
+          </div>
+        </section>
+
         <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <ImprovingSection />

diff --git a/src/web/comment/store/commentStore.ts b/src/web/comment/store/commentStore.ts
@@ -10,8 +10,8 @@ import { apiSyncer } from "@/web/comment/store/apiSyncerMiddleware";
 import { emitter } from "@/web/common/event";
 import { storageWithDates } from "@/web/common/store/utils";
 import { StoreTopic } from "@/web/topic/store/store";
-import { setSelected } from "@/web/view/currentViewStore/store";
 import { toggleShowResolvedComments } from "@/web/view/miscTopicConfigStore";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 export type StoreComment = Omit<Comment, "topicId">;
 

diff --git a/src/web/common/components/ContextMenu/ViewDetailsMenuItem.tsx b/src/web/common/components/ContextMenu/ViewDetailsMenuItem.tsx
@@ -1,7 +1,7 @@
 import { ContextMenuItem } from "@/web/common/components/ContextMenu/CloseOnClickMenuItem";
 import { emitter } from "@/web/common/event";
 import { GraphPart } from "@/web/topic/utils/graph";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 export const ViewDetailsMenuItem = ({ graphPart }: { graphPart: GraphPart }) => {
   return (

diff --git a/src/web/home/FeaturesSection.tsx b/src/web/home/FeaturesSection.tsx
@@ -3,49 +3,45 @@ import { Link, Tab, Typography } from "@mui/material";
 import Image from "next/image";
 import { useState } from "react";
 
-type Tab = "tradeoffs" | "views" | "flashlight" | "disagree";
+type Tab = "views" | "disagree" | "tradeoffs" | "flashlight";
 
 const copy = {
-  tradeoffs: {
-    title: "Summarize tradeoffs between solutions",
-    description:
-      "Show how important you think each tradeoff is, and how well each solution fulfills that tradeoff.",
+  views: {
+    title: "Focus on different aspects",
+    description: "Create views to highlight specific parts of the diagram.",
     content: (
       <div>
         <Image
-          src="https://github.com/user-attachments/assets/60ac157d-03f7-4fa5-907b-b8e3abab0e7a"
-          alt="criteria tables of cars-going-too-fast"
-          width={727}
-          height={455}
-          unoptimized
+          src="https://github.com/user-attachments/assets/87055acd-debb-45f2-981f-ef511e770222"
+          alt="clicking between views in cars-going-too-fast topic"
+          width={1096}
+          height={847}
+          unoptimized // warning without this - gifs aren't optimized by nextjs apparently
           // extra padding & bg because spacing seems to look better
-          className="rounded-xl border bg-paperPlain-main p-3 shadow"
+          className="rounded-xl border bg-paperPlain-main p-2 shadow"
         />
         <Typography variant="caption">
           Topic:{" "}
-          <Link
-            href="https://ameliorate.app/examples/detailed-cars-going-too-fast?view=Tradeoff+table"
-            target="_blank"
-          >
+          <Link href="https://ameliorate.app/examples/detailed-cars-going-too-fast" target="_blank">
             cars-going-too-fast
           </Link>
         </Typography>
       </div>
     ),
   },
-  views: {
-    title: "Focus on different aspects",
-    description: "Create views to highlight specific parts of the diagram.",
+  disagree: {
+    title: "Quickly identify where you disagree",
+    description:
+      "Compare scores to efficiently understand where your opinions lie in relation to others.",
     content: (
       <div>
         <Image
-          src="https://github.com/user-attachments/assets/87055acd-debb-45f2-981f-ef511e770222"
-          alt="clicking between views in cars-going-too-fast topic"
-          width={1096}
-          height={847}
+          src="https://github.com/user-attachments/assets/c1c9043a-4a0f-4af6-a309-ab3574301054"
+          alt="comparing scores in cars-going-too-fast topic"
+          width={756}
+          height={703}
           unoptimized // warning without this - gifs aren't optimized by nextjs apparently
-          // extra padding & bg because spacing seems to look better
-          className="rounded-xl border bg-paperPlain-main p-2 shadow"
+          className="rounded-xl border shadow"
         />
         <Typography variant="caption">
           Topic:{" "}
@@ -56,46 +52,50 @@ const copy = {
       </div>
     ),
   },
-  flashlight: {
-    title: "Move through complex diagrams",
-    description: "Use flashlight mode to easily explore large diagrams.",
+  tradeoffs: {
+    title: "Summarize tradeoffs between solutions",
+    description:
+      "Show how important you think each tradeoff is, and how well each solution fulfills that tradeoff.",
     content: (
       <div>
         <Image
-          src="https://github.com/user-attachments/assets/98d75b2b-6ca4-41cd-9322-314c75126232"
-          alt="using flashlight mode in brutality-sugar topic"
-          width={1022}
-          height={728}
-          unoptimized // warning without this - gifs aren't optimized by nextjs apparently
-          className="rounded-xl border shadow"
+          src="https://github.com/user-attachments/assets/60ac157d-03f7-4fa5-907b-b8e3abab0e7a"
+          alt="criteria tables of cars-going-too-fast"
+          width={727}
+          height={455}
+          unoptimized
+          // extra padding & bg because spacing seems to look better
+          className="rounded-xl border bg-paperPlain-main p-3 shadow"
         />
         <Typography variant="caption">
           Topic:{" "}
-          <Link href="https://ameliorate.app/keyserj/brutality-sugar-article" target="_blank">
-            brutality-sugar-article
+          <Link
+            href="https://ameliorate.app/examples/detailed-cars-going-too-fast?view=Tradeoff+table"
+            target="_blank"
+          >
+            cars-going-too-fast
           </Link>
         </Typography>
       </div>
     ),
   },
-  disagree: {
-    title: "Quickly identify where you disagree",
-    description:
-      "Compare scores to efficiently understand where your opinions lie in relation to others.",
+  flashlight: {
+    title: "Move through complex diagrams",
+    description: "Use flashlight mode to easily explore large diagrams.",
     content: (
       <div>
         <Image
-          src="https://github.com/user-attachments/assets/c1c9043a-4a0f-4af6-a309-ab3574301054"
-          alt="comparing scores in cars-going-too-fast topic"
-          width={756}
-          height={703}
+          src="https://github.com/user-attachments/assets/98d75b2b-6ca4-41cd-9322-314c75126232"
+          alt="using flashlight mode in brutality-sugar topic"
+          width={1022}
+          height={728}
           unoptimized // warning without this - gifs aren't optimized by nextjs apparently
           className="rounded-xl border shadow"
         />
         <Typography variant="caption">
           Topic:{" "}
-          <Link href="https://ameliorate.app/examples/detailed-cars-going-too-fast" target="_blank">
-            cars-going-too-fast
+          <Link href="https://ameliorate.app/keyserj/brutality-sugar-article" target="_blank">
+            brutality-sugar-article
           </Link>
         </Typography>
       </div>
@@ -104,20 +104,34 @@ const copy = {
 };
 
 export const FeaturesSection = () => {
-  const [selectedCard, setSelectedCard] = useState<Tab>("tradeoffs");
+  const [selectedCard, setSelectedCard] = useState<Tab>("views");
 
   return (
     <div className="flex flex-col text-center">
       <Typography variant="h4">Some cool features</Typography>
 
       <TabContext value={selectedCard}>
         <TabList onChange={(_, value: Tab) => setSelectedCard(value)} variant="fullWidth">
-          <Tab label={copy.tradeoffs.title} value="tradeoffs" wrapped />
           <Tab label={copy.views.title} value="views" wrapped />
-          <Tab label={copy.flashlight.title} value="flashlight" wrapped />
           <Tab label={copy.disagree.title} value="disagree" wrapped />
+          <Tab label={copy.tradeoffs.title} value="tradeoffs" wrapped />
+          <Tab label={copy.flashlight.title} value="flashlight" wrapped />
         </TabList>
 
+        <TabPanel key="views" value="views" className="flex flex-col items-center gap-2 p-0">
+          <Typography variant="body1" className="pt-3">
+            {copy.views.description}
+          </Typography>
+          {copy.views.content}
+        </TabPanel>
+
+        <TabPanel key="disagree" value="disagree" className="flex flex-col items-center gap-2 p-0">
+          <Typography variant="body1" className="pt-3">
+            {copy.disagree.description}
+          </Typography>
+          {copy.disagree.content}
+        </TabPanel>
+
         <TabPanel
           key="tradeoffs"
           value="tradeoffs"
@@ -129,13 +143,6 @@ export const FeaturesSection = () => {
           {copy.tradeoffs.content}
         </TabPanel>
 
-        <TabPanel key="views" value="views" className="flex flex-col items-center gap-2 p-0">
-          <Typography variant="body1" className="pt-3">
-            {copy.views.description}
-          </Typography>
-          {copy.views.content}
-        </TabPanel>
-
         <TabPanel
           key="flashlight"
           value="flashlight"
@@ -146,13 +153,6 @@ export const FeaturesSection = () => {
           </Typography>
           {copy.flashlight.content}
         </TabPanel>
-
-        <TabPanel key="disagree" value="disagree" className="flex flex-col items-center gap-2 p-0">
-          <Typography variant="body1" className="pt-3">
-            {copy.disagree.description}
-          </Typography>
-          {copy.disagree.content}
-        </TabPanel>
       </TabContext>
     </div>
   );

diff --git a/src/web/topic/components/CriteriaTable/EdgeCell.tsx b/src/web/topic/components/CriteriaTable/EdgeCell.tsx
@@ -3,7 +3,7 @@ import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicat
 import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndicators";
 import { StatusIndicators } from "@/web/topic/components/Indicator/StatusIndicators";
 import { Edge } from "@/web/topic/utils/graph";
-import { setSelected, useIsGraphPartSelected } from "@/web/view/currentViewStore/store";
+import { setSelected, useIsGraphPartSelected } from "@/web/view/selectedPartStore";
 
 export const EdgeCell = ({ edge }: { edge: Edge }) => {
   const selected = useIsGraphPartSelected(edge.id);

diff --git a/src/web/topic/components/Diagram/Diagram.tsx b/src/web/topic/components/Diagram/Diagram.tsx
@@ -28,7 +28,7 @@ import { hotkeys } from "@/web/topic/utils/hotkeys";
 import { FlowNodeType } from "@/web/topic/utils/node";
 import { tutorialIsOpen } from "@/web/tutorial/tutorial";
 import { useFlashlightMode } from "@/web/view/actionConfigStore";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 const buildNodeComponent = (type: FlowNodeType) => {
   // eslint-disable-next-line react/display-name -- react flow dynamically creates these components without name anyway

diff --git a/src/web/topic/components/Edge/ScoreEdge.tsx b/src/web/topic/components/Edge/ScoreEdge.tsx
@@ -25,7 +25,7 @@ import { useUserCanEditTopicData } from "@/web/topic/store/userHooks";
 import { Edge } from "@/web/topic/utils/graph";
 import { useUnrestrictedEditing } from "@/web/view/actionConfigStore";
 import { useAvoidEdgeLabelOverlap } from "@/web/view/currentViewStore/layout";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 const flowMarkerId = "flowMarker";
 const nonFlowMarkerId = "nonFlowMarker";

diff --git a/src/web/topic/components/Edge/StandaloneEdge.tsx b/src/web/topic/components/Edge/StandaloneEdge.tsx
@@ -7,7 +7,7 @@ import { EditableNode } from "@/web/topic/components/Node/EditableNode";
 import { nodeWidthPx } from "@/web/topic/components/Node/EditableNode.styles";
 import { useNode } from "@/web/topic/store/nodeHooks";
 import { Edge } from "@/web/topic/utils/graph";
-import { useIsGraphPartSelected } from "@/web/view/currentViewStore/store";
+import { useIsGraphPartSelected } from "@/web/view/selectedPartStore";
 
 const convertToStandaloneFlowEdge = (edge: Edge, selected: boolean): EdgeProps => {
   return {

diff --git a/src/web/topic/components/Indicator/CommentIndicator.tsx b/src/web/topic/components/Indicator/CommentIndicator.tsx
@@ -6,8 +6,8 @@ import { useCommentCount } from "@/web/comment/store/commentStore";
 import { emitter } from "@/web/common/event";
 import { Indicator } from "@/web/topic/components/Indicator/Indicator";
 import { GraphPartType } from "@/web/topic/utils/graph";
-import { setSelected } from "@/web/view/currentViewStore/store";
 import { useShowResolvedComments } from "@/web/view/miscTopicConfigStore";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 interface Props {
   graphPartId: string;

diff --git a/src/web/topic/components/Indicator/FoundResearchIndicator.tsx b/src/web/topic/components/Indicator/FoundResearchIndicator.tsx
@@ -8,7 +8,7 @@ import { useResearchNodes } from "@/web/topic/store/graphPartHooks";
 import { useDisplayScores } from "@/web/topic/store/scoreHooks";
 import { Score } from "@/web/topic/utils/graph";
 import { getNumericScore, scoreColors } from "@/web/topic/utils/score";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 interface Props {
   graphPartId: string;

diff --git a/src/web/topic/components/Indicator/Indicator.tsx b/src/web/topic/components/Indicator/Indicator.tsx
@@ -1,7 +1,8 @@
 import { type ButtonProps } from "@mui/material";
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, useContext } from "react";
 
 import { StyledButton } from "@/web/topic/components/Indicator/Indicator.styles";
+import { WorkspaceContext } from "@/web/topic/components/TopicWorkspace/WorkspaceContext";
 import { MuiIcon } from "@/web/topic/utils/node";
 import { useShowIndicators } from "@/web/view/userConfigStore";
 
@@ -25,6 +26,7 @@ export const Indicator = ({
   filled = true,
   graphPartIndicator = true,
 }: IndicatorProps) => {
+  const workspaceContext = useContext(WorkspaceContext);
   const showIndicators = useShowIndicators();
 
   const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -36,8 +38,9 @@ export const Indicator = ({
     }
   };
 
-  // no need to hide indicators that aren't for graph parts e.g. JustificationTreeIndicator
-  const showIndicator = showIndicators || !graphPartIndicator;
+  // Nice to always show indicators in details view so there's some way for new users to be exposed to them.
+  // No need to hide indicators that aren't for graph parts e.g. JustificationTreeIndicator.
+  const showIndicator = workspaceContext === "details" || showIndicators || !graphPartIndicator;
 
   return (
     <>

diff --git a/src/web/topic/components/Indicator/JustificationIndicator.tsx b/src/web/topic/components/Indicator/JustificationIndicator.tsx
@@ -8,7 +8,7 @@ import { useTopLevelJustification } from "@/web/topic/store/graphPartHooks";
 import { useDisplayScores } from "@/web/topic/store/scoreHooks";
 import { Score } from "@/web/topic/utils/graph";
 import { getNumericScore, scoreColors } from "@/web/topic/utils/score";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 interface Props {
   graphPartId: string;

diff --git a/src/web/topic/components/Indicator/NotesIndicator.tsx b/src/web/topic/components/Indicator/NotesIndicator.tsx
@@ -4,7 +4,7 @@ import { useCallback } from "react";
 
 import { emitter } from "@/web/common/event";
 import { Indicator } from "@/web/topic/components/Indicator/Indicator";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 interface Props {
   graphPartId: string;

diff --git a/src/web/topic/components/Indicator/QuestionIndicator.tsx b/src/web/topic/components/Indicator/QuestionIndicator.tsx
@@ -8,7 +8,7 @@ import { useResearchNodes } from "@/web/topic/store/graphPartHooks";
 import { useDisplayScores } from "@/web/topic/store/scoreHooks";
 import { Score } from "@/web/topic/utils/graph";
 import { getNumericScore, scoreColors } from "@/web/topic/utils/score";
-import { setSelected } from "@/web/view/currentViewStore/store";
+import { setSelected } from "@/web/view/selectedPartStore";
 
 interface Props {
   graphPartId: string;

diff --git a/src/web/topic/components/Node/EditableNode.tsx b/src/web/topic/components/Node/EditableNode.tsx
@@ -22,7 +22,7 @@ import { useUserCanEditTopicData } from "@/web/topic/store/userHooks";
 import { Node } from "@/web/topic/utils/graph";
 import { nodeDecorations } from "@/web/topic/utils/node";
 import { useUnrestrictedEditing } from "@/web/view/actionConfigStore";
-import { setSelected, useIsGraphPartSelected } from "@/web/view/currentViewStore/store";
+import { setSelected, useIsGraphPartSelected } from "@/web/view/selectedPartStore";
 import { useFillNodesWithColor } from "@/web/view/userConfigStore";
 
 interface Props {

diff --git a/src/web/topic/components/Score/Score.tsx b/src/web/topic/components/Score/Score.tsx
@@ -69,8 +69,10 @@ export const Score = ({ graphPartId }: ScoreProps) => {
   ) : undefined;
   const isInteractive = hoverCircle !== undefined;
 
-  // always show score on table because the main purpose of the table is to compare scores
-  const showScore = showIndicators || workspaceContext === "table";
+  // Nice to show scores in details view so there's some way for new users to be exposed to them.
+  // Always show score on table because the main purpose of the table is to compare scores.
+  const showScore =
+    workspaceContext === "table" || workspaceContext === "details" || showIndicators;
   const showScoreClasses = showScore ? "" : " hidden";
 
   if (!isInteractive) {