Merge pull request #648 from amelioro/clean-when-indicators-showing

Clean when indicators showing

src/web/topic/components/CriteriaTable/EdgeCell.tsx

@@ -1,6 +1,7 @@
 import { openContextMenu } from "@/web/common/store/contextMenuActions";
 import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators";
 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";
 
@@ -18,13 +19,21 @@ export const EdgeCell = ({ edge }: { edge: Edge }) => {
       onContextMenu={(event) => openContextMenu(event, { edge })}
       role="button"
     >
-      <CommonIndicators graphPart={edge} notes={edge.data.notes} />
-      <ContentIndicators
-        className="ml-0"
-        graphPartId={edge.id}
-        graphPartType="edge"
-        color="paperPlain"
-      />
+      <CommonIndicators graphPart={edge} />
+      <div className="flex">
+        <StatusIndicators
+          graphPartId={edge.id}
+          color="paperPlain"
+          notes={edge.data.notes}
+          className="my-0 ml-0"
+        />
+        <ContentIndicators
+          className="m-0"
+          graphPartId={edge.id}
+          graphPartType="edge"
+          color="paperPlain"
+        />
+      </div>
     </div>
   );
 };

src/web/topic/components/Edge/ScoreEdge.tsx

@@ -16,19 +16,16 @@ import {
 } from "@/web/topic/components/Edge/ScoreEdge.styles";
 import { getPathDefinitionForEdge } from "@/web/topic/components/Edge/svgPathDrawer";
 import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators";
-import {
-  LeftCornerStatusIndicators,
-  RightCornerContentIndicators,
-  nodeWidthPx,
-} from "@/web/topic/components/Node/EditableNode.styles";
+import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndicators";
+import { StatusIndicators } from "@/web/topic/components/Indicator/StatusIndicators";
+import { nodeWidthPx } from "@/web/topic/components/Node/EditableNode.styles";
 import { setCustomEdgeLabel } from "@/web/topic/store/actions";
 import { useIsNodeSelected } from "@/web/topic/store/edgeHooks";
 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 { useShowIndicators } from "@/web/view/userConfigStore";
 
 const flowMarkerId = "flowMarker";
 const nonFlowMarkerId = "nonFlowMarker";
@@ -99,7 +96,6 @@ export const ScoreEdge = ({ inReactFlow, ...flowEdge }: EdgeProps & Props) => {
   const userCanEditTopicData = useUserCanEditTopicData(sessionUser?.username);
 
   const unrestrictedEditing = useUnrestrictedEditing();
-  const showIndicators = useShowIndicators();
   const avoidEdgeLabelOverlap = useAvoidEdgeLabelOverlap();
 
   const edge = convertToEdge(flowEdge);
@@ -157,31 +153,41 @@ export const ScoreEdge = ({ inReactFlow, ...flowEdge }: EdgeProps & Props) => {
       className={
         // pointer-events is set because this div is within an SVG and doesn't handle pointer-events properly by default
         "[pointer-events:all] flex flex-col items-center justify-center bg-white p-1 rounded-xl" +
-        // when hiding indicators, div only contains the label text, so border doesn't seem necessary (if this looks awkward, we can always show border instead)
-        (!showIndicators && spotlight === "normal" ? " border-none" : "") +
+        // border adds a lot of clutter so only show it if we're highlighting the edge
+        (spotlight === "normal" ? " border-none" : "") +
         // allow other components to apply conditional css related to this edge, e.g. when it's hovered/selected
         // separate from react-flow__edge because sometimes edges are rendered outside of react-flow (e.g. details pane), and we still want to style these
         " diagram-edge" +
         (flowEdge.selected ? " selected" : "")
       }
     >
-      <CommonIndicators graphPart={edge} notes={edge.data.notes} />
-      <Typography
-        variant="body1"
-        margin="0"
-        contentEditable={userCanEditTopicData && unrestrictedEditing}
-        suppressContentEditableWarning // https://stackoverflow.com/a/49639256/8409296
-        onBlur={(event) => {
-          const text = event.target.textContent?.trim();
-          if (text && text !== lowerCase(edge.label) && text !== edge.data.customLabel)
-            setCustomEdgeLabel(edge, text);
-        }}
-        className="nopan"
-      >
-        {labelText}
-      </Typography>
-      <LeftCornerStatusIndicators graphPartId={edge.id} color="paperPlain" />
-      <RightCornerContentIndicators graphPartId={edge.id} graphPartType="edge" color="paperPlain" />
+      <div className="flex">
+        <Typography
+          variant="body1"
+          margin="0"
+          contentEditable={userCanEditTopicData && unrestrictedEditing}
+          suppressContentEditableWarning // https://stackoverflow.com/a/49639256/8409296
+          onBlur={(event) => {
+            const text = event.target.textContent?.trim();
+            if (text && text !== lowerCase(edge.label) && text !== edge.data.customLabel)
+              setCustomEdgeLabel(edge, text);
+          }}
+          className="nopan"
+        >
+          {labelText}
+        </Typography>
+        {/* only use margin when indicators are showing */}
+        <CommonIndicators graphPart={edge} className="mx-0 *:ml-0.5" />
+      </div>
+      <div className="absolute bottom-0 flex translate-y-4">
+        <StatusIndicators graphPartId={edge.id} color="paperPlain" notes={edge.data.notes} />
+        <ContentIndicators
+          graphPartId={edge.id}
+          graphPartType="edge"
+          color="paperPlain"
+          className="ml-0"
+        />
+      </div>
     </StyledDiv>
   );
 

src/web/topic/components/Indicator/CommonIndicators.tsx

@@ -3,23 +3,21 @@ import { memo } from "react";
 
 import { ContextIndicator } from "@/web/topic/components/Indicator/ContextIndicator";
 import { CriteriaTableIndicator } from "@/web/topic/components/Indicator/CriteriaTableIndicator";
-import { DetailsIndicator } from "@/web/topic/components/Indicator/DetailsIndicator";
 import { Score } from "@/web/topic/components/Score/Score";
 import { GraphPart } from "@/web/topic/utils/graph";
 
 interface Props {
   graphPart: GraphPart;
-  notes: string;
+  className?: string;
 }
 
-const CommonIndicatorsBase = ({ graphPart, notes }: Props) => {
+const CommonIndicatorsBase = ({ graphPart, className }: Props) => {
   return (
-    <Stack direction="row" margin="2px" spacing="2px">
+    <Stack direction="row" margin="2px" spacing="2px" className={className}>
       {/* TODO: should this be moved because it's not used for all graph parts? */}
       <ContextIndicator graphPart={graphPart} />
       {/* TODO: should this be moved because it's only used for problem? */}
       <CriteriaTableIndicator nodeId={graphPart.id} />
-      <DetailsIndicator graphPartId={graphPart.id} notes={notes} />
       <Score graphPartId={graphPart.id} />
     </Stack>
   );

src/web/topic/components/Indicator/DetailsIndicator.tsx → src/web/topic/components/Indicator/NotesIndicator.tsx

@@ -1,4 +1,5 @@
 import { Notes } from "@mui/icons-material";
+import { ButtonProps } from "@mui/material";
 import { useCallback } from "react";
 
 import { emitter } from "@/web/common/event";
@@ -8,15 +9,18 @@ import { setSelected } from "@/web/view/currentViewStore/store";
 interface Props {
   graphPartId: string;
   notes: string;
+  partColor: ButtonProps["color"];
 }
 
-export const DetailsIndicator = ({ graphPartId, notes }: Props) => {
-  const hasDetails = notes.length > 0;
+export const NotesIndicator = ({ graphPartId, notes, partColor }: Props) => {
+  const hasNotes = notes.length > 0;
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
     emitter.emit("viewBasics");
   }, [graphPartId]);
 
-  return <Indicator Icon={Notes} title={"View details"} onClick={onClick} filled={hasDetails} />;
+  if (!hasNotes) return <></>;
+
+  return <Indicator Icon={Notes} title={"View notes"} onClick={onClick} color={partColor} />;
 };

src/web/topic/components/Indicator/StatusIndicators.tsx

@@ -2,25 +2,31 @@ import { type ButtonProps, Stack } from "@mui/material";
 import { memo } from "react";
 
 import { ForceShownIndicator } from "@/web/topic/components/Indicator/ForceShownIndicator";
+import { NotesIndicator } from "@/web/topic/components/Indicator/NotesIndicator";
 import { useIndicateWhenNodeForcedToShow } from "@/web/view/userConfigStore";
 
 interface Props {
   graphPartId: string;
   color: ButtonProps["color"];
+  notes: string;
   className?: string;
 }
 
 /**
  * Future: e.g. controversial, hot, solid
  */
-const StatusIndicatorsBase = ({ graphPartId, color, className }: Props) => {
+const StatusIndicatorsBase = ({ graphPartId, color, notes, className }: Props) => {
   const indicateWhenNodeForcedToShow = useIndicateWhenNodeForcedToShow();
 
   return (
     <Stack direction="row" margin="2px" spacing="2px" className={className}>
       {indicateWhenNodeForcedToShow && (
         <ForceShownIndicator nodeId={graphPartId} partColor={color} />
       )}
+      {/* This is more of a content indicator, but there isn't enough space to show 5 content indicators */}
+      {/* to the right of the node handle, so we're putting it here as an easy hack. */}
+      {/* TODO: https://github.com/amelioro/ameliorate/issues/630 */}
+      <NotesIndicator graphPartId={graphPartId} notes={notes} partColor={color} />
     </Stack>
   );
 };

src/web/topic/components/Node/EditableNode.styles.tsx

@@ -77,5 +77,5 @@ export const LeftCornerStatusIndicators = styled(StatusIndicators)`
   left: 0;
   bottom: 0;
   // amount that looks decent hanging over the edge of node
-  transform: translate(-0.625px, 65%);
+  transform: translate(-0.625rem, 65%);
 `;

src/web/topic/components/Node/EditableNode.tsx

@@ -138,7 +138,7 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
             {typeText}
           </NodeTypeSpan>
         </NodeTypeDiv>
-        <CommonIndicators graphPart={node} notes={node.data.notes} />
+        <CommonIndicators graphPart={node} />
       </TopDiv>
       {/* grow to fill out remaining space with this div because it contains the textarea */}
       <MiddleDiv className="flex grow px-1 pb-2 pt-1">
@@ -168,7 +168,11 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
         {node.type !== "rootClaim" && ( // root claim indicators don't seem very helpful
           <>
             {/* TODO?: how to make corner indicators not look bad in the table? they're cut off */}
-            <LeftCornerStatusIndicators graphPartId={node.id} color={backgroundColorType} />
+            <LeftCornerStatusIndicators
+              graphPartId={node.id}
+              color={backgroundColorType}
+              notes={node.data.notes}
+            />
             <RightCornerContentIndicators
               graphPartId={node.id}
               graphPartType="node"