Hide details panel on result change (#9)

It fixes the bug when the details panel is shown and the selected row is
no longer available.

Author: nablaone

src/components/result/ResultTable.tsx

@@ -5,7 +5,7 @@ import {
   TableRow,
 } from "../ui/table";
 import { TabularResult } from "../../lib/types";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { RowDetailPanel } from "./RowDetailPanel";
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
 
@@ -233,6 +233,11 @@ export function ResultTable({ tabularResult, onFilterChange, onOrderChange }: Re
   const [isDetailOpen, setIsDetailOpen] = useState(false);
   const [hoveredRow, setHoveredRow] = useState<number | null>(null);
 
+  useEffect(() => {
+    setIsDetailOpen(false);
+    setSelectedRow(null);
+  }, [tabularResult]);
+
   const handleRowClick = (row: number) => {
     setSelectedRow(row);
     setIsDetailOpen(true);

src/components/result/RowDetailPanel.tsx

@@ -281,13 +281,14 @@ export function RowDetailPanel({ tabularResult, selectedRow, onClose, isOpen }:
     }, 300);
   };
 
-
-
-
   if (selectedRow == null) {
     return null;
   }
 
+  if (selectedRow >= tabularResult.rows.length) {
+    return null;
+  }
+
   return (
     <div className={`detail-panel ${isOpen ? 'open' : ''}`}>
       <div className="detail-panel-content">