merging self assessments (hidden) and responsiveness

src/components/Sankey.tsx

@@ -5,7 +5,7 @@ import type { HeatmapProps as SankeyDiagramProps } from '../types'; // Reuse the
 const SankeyDiagram: React.FC<SankeyDiagramProps> = ({ matrix, judge1, judge2, onCellClick }) => {
     // --- Refs and State for Responsiveness ---
     const containerRef = useRef<HTMLDivElement>(null);
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const [dimensions, setDimensions] = useState({ width: 1, height: 1 });
 
     // --- Effect to measure container size ---
     useEffect(() => {
@@ -22,7 +22,6 @@ const SankeyDiagram: React.FC<SankeyDiagramProps> = ({ matrix, judge1, judge2, o
         observer.observe(currentRef);
         }
 
-        // Cleanup function to disconnect the observer when the component unmounts
         return () => {
         if (currentRef) {
             observer.unobserve(currentRef);
@@ -31,9 +30,9 @@ const SankeyDiagram: React.FC<SankeyDiagramProps> = ({ matrix, judge1, judge2, o
     }, []);
 
     // --- Layout Constants ---
-    const NODE_WIDTH = 0;
+    const NODE_WIDTH = 0; // padding on both sides of the edges
     const NODE_GAP = 10; // Vertical gap between nodes
-    const PADDING = { top: 0, bottom: 0, left: 10, right: 10 };
+    const PADDING = { top: 0, bottom: 0, left: 10, right: 10 }; // Padding around the SVG
 
     // --- Calculation Logic inside useMemo ---
     const sankeyData = useMemo(() => {
@@ -189,7 +188,7 @@ const SankeyDiagram: React.FC<SankeyDiagramProps> = ({ matrix, judge1, judge2, o
                             ))}
                         </g>
 
-                        {/* 
+                        {/* Removing nodes for now (no real value add but keeping it commented-out for later)
                         <g>
                             {sankeyData.nodes.map(node => (
                             <g key={node.id}>

src/components/itemList.tsx

@@ -134,7 +134,7 @@ const AssessmentItem: React.FC<AssessmentItemProps> = memo(({
         )}
       </div>
 
-      <div className="third-assessment">
+      {/* <div className="third-assessment">
         <div>
           <h4>Provide Human Assessment</h4>
           <p className="assessment-hint">Click to copy assessment tuple for response ID: <code>{item.r_uuid}</code></p>
@@ -170,7 +170,7 @@ const AssessmentItem: React.FC<AssessmentItemProps> = memo(({
             {copied ? '✓ Copied!' : 'Copy'}
           </button>
         </div>
-      )}
+      )} */}
     </div>
   );
 });

src/index.css

@@ -87,6 +87,7 @@ body {
 
 /* Filter Bar Styles */
 .filter-bar {
+  position:relative;
   background: var(--bg-color);
   border-radius: 16px;
   padding: 2rem;
@@ -102,6 +103,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  max-width: 100%;
 }
 
 .filter-label {
@@ -768,10 +770,10 @@ h4 {
 
 /* Responsive Design */
 @media (max-width: 1200px) {
-  .charts-container {
+  /* .charts-container {
     grid-template-columns: 1fr;
     height: auto;
-  }
+  } */
   
   .heatmap-container {
     width: 100%;
@@ -780,6 +782,21 @@ h4 {
   }
 }
 
+
+@media (max-width: 1000px) {
+  .charts-container {
+    flex-direction: column;
+    height:auto;
+  }
+  
+  .waterfall-container, .sankey-container, .heatmap-container {
+    width: 100%;
+    max-width: none;
+    height: 500px;
+  }
+  
+}
+
 @media (max-width: 768px) {
   .main-content {
     padding: 1rem;
@@ -790,7 +807,8 @@ h4 {
   }
   
   .filter-bar {
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
     padding: 1.5rem;
   }
   
@@ -872,4 +890,4 @@ select:focus-visible {
     border-color: #10b981;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
   }
-}
+}