\n \n {/* Background grid pattern is handled by CSS */}\n \n {/* Incision Lines */}\n {diagramData.incisionLines.map((incision) => (\n \n showTooltip(e, incision.name)}\n onMouseLeave={hideTooltip}\n />\n \n ))}\n\n {/* Anatomical Landmarks */}\n {diagramData.landmarks.map((landmark) => (\n \n handleLandmarkClick(landmark)}\n onMouseEnter={(e) => showTooltip(e, `${landmark.name}: ${landmark.description}`)}\n onMouseLeave={hideTooltip}\n />\n \n {landmark.name}\n \n \n ))}\n\n {/* Annotations */}\n {diagramData.annotations.map((annotation) => (\n \n showTooltip(e, annotation.text)}\n onMouseLeave={hideTooltip}\n >\n {annotation.text}\n \n \n ))}\n \n\n {/* Tooltip */}\n {tooltip.visible && (\n \n {tooltip.content}\n

\n )}\n

\n\n {/* Legend */}\n

Diagram Legend

\n {/* Landmarks */}\n

\n
\n Anatomical Landmarks\n

\n •\n {landmark.name}\n

\n\n {/* Incisions */}\n

\n
\n Incision Lines\n

\n
\n {incision.name}\n

\n\n {/* Annotations */}\n

\n 💬\n Annotations\n

\n \n {annotation.type === 'warning' ? '⚠' : annotation.type === 'info' ? 'ℹ' : '📍'}\n \n {annotation.text}\n

\n\n {/* Interactive Instructions */}\n

Interactive Features

• Hover over landmarks and incision lines to see detailed information
• Click on landmarks to highlight them
• Use the legend below to understand diagram elements

\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Sanya56/SURGICALGALA/code/frontend/components/AnatomyDiagram.tsx","extension","actionData","errors"]

Diagram Legend

\n \n Anatomical Landmarks\n

\n \n Incision Lines\n

\n 💬\n Annotations\n

Interactive Features

\n
\n Anatomical Landmarks\n

\n
\n Incision Lines\n