finished details sidebar for LMPs

Author: MadcowD

ell-studio/src/components/LMPDetailsSidePanel.js

@@ -47,7 +47,7 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
         <div className="space-y-4">
           <div className="bg-[#161b22] p-3 rounded">
             <div className="flex justify-between items-center mb-2">
-              <h3 className="text-sm font-semibold text-white">Version</h3>
+              <h3 className="text-md font-semibold text-white">Version</h3>
               <VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
             </div>
             <StatItem icon={FiClock} label="Created" value={getTimeAgo(new Date(lmp.created_at))} />
@@ -58,15 +58,15 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
 
           {lmp.lm_kwargs && (
             <div className="bg-[#161b22] p-3 rounded">
-              <h3 className="text-sm font-semibold mb-2 text-white">LM Keywords</h3>
+              <h3 className="text-md font-semibold mb-2 text-white">LM Keywords</h3>
               <pre className="overflow-x-auto text-xs text-gray-300">
                 <code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
               </pre>
             </div>
           )}
 
           <div className="bg-[#161b22] p-3 rounded">
-            <h3 className="text-sm font-semibold mb-2 text-white">Uses</h3>
+            <h3 className="text-md font-semibold mb-2 text-white">Uses</h3>
             {uses && uses.length > 0 ? (
               <ul className="space-y-1">
                 {uses.filter(use => !!use).map((use) => (
@@ -101,19 +101,33 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
 
           <div className="bg-[#161b22] p-3 rounded">
             <h3 className="text-sm font-semibold mb-2 text-white">Version History</h3>
-            <div className="space-y-1 max-h-48 overflow-y-auto">
+            <div className="space-y-2 max-h-48 overflow-y-auto">
               {versionHistory.map((version, index) => (
                 <Link
                   key={version.lmp_id}
                   to={`/lmp/${version.name}/${version.lmp_id}`}
-                  className={`block text-xs ${version.lmp_id === lmp.lmp_id ? 'text-blue-400 font-semibold' : 'text-gray-400'} hover:text-white`}
+                  className={`block p-2 rounded ${
+                    version.lmp_id === lmp.lmp_id
+                      ? 'bg-blue-900 bg-opacity-30'
+                      : 'hover:bg-gray-800'
+                  }`}
                 >
-                  <div className="flex justify-between items-center">
-                    <span>v{versionHistory.length - index}</span>
-                    <span>{getTimeAgo(new Date(version.created_at))}</span>
+                  <div className="flex justify-between items-center text-sm">
+                    <span className={`font-semibold ${
+                      version.lmp_id === lmp.lmp_id ? 'text-blue-400' : 'text-white'
+                    }`}>
+                      v{versionHistory.length - index}
+                    </span>
+                    <span className="text-gray-400 text-xs">
+                      <FiCalendar className="inline mr-1" size={12} />
+                      {format(new Date(version.created_at), 'MMM d, yyyy')}
+                    </span>
                   </div>
                   {version.commit_message && (
-                    <p className="text-gray-500 truncate">{version.commit_message}</p>
+                    <p className="text-gray-400 text-xs mt-1 truncate">
+                      <FiGitCommit className="inline mr-1" size={12} />
+                      {version.commit_message}
+                    </p>
                   )}
                 </Link>
               ))}

ell-studio/src/components/MetricChart.js

@@ -182,9 +182,9 @@ function MetricChart({ rawData, dataKey, color, title, yAxisLabel, aggregation="
   return (
     <div className="bg-[#161b22] p-4 rounded-lg shadow-lg">
       <div className="flex justify-between items-center mb-4">
-        <h3 className="text-lg font-semibold text-white">{title}</h3>
+        <h3 className="text-md font-semibold text-white">{title}</h3>
         <select
-          className="bg-[#0d1117] text-white border border-gray-700 rounded px-2 py-1"
+          className="bg-[#0d1117] text-white text-sm border border-gray-700 rounded px-2 py-1"
           value={selectedTimeRange}
           onChange={(e) => setSelectedTimeRange(e.target.value)}
         >
@@ -195,11 +195,11 @@ function MetricChart({ rawData, dataKey, color, title, yAxisLabel, aggregation="
           ))}
         </select>
       </div>
-      <div className="h-80">
+      <div className="h-64">
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={aggregatedData}
-            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+            margin={{ top: 5, right: 20, left: 0, bottom: 0 }}
           >
             <defs>
               <linearGradient id={`color${title}`} x1="0" y1="0" x2="0" y2="1">
@@ -210,17 +210,18 @@ function MetricChart({ rawData, dataKey, color, title, yAxisLabel, aggregation="
             <XAxis
               dataKey="date"
               stroke="#4a5568"
-              tick={{ fill: "#4a5568" }}
+              tick={{ fill: "#4a5568", fontSize: 10 }}
               tickFormatter={formatXAxis}
             />
             <YAxis
               stroke="#4a5568"
-              tick={{ fill: "#4a5568" }}
+              tick={{ fill: "#4a5568", fontSize: 10 }}
               label={{
                 value: yAxisLabel,
                 angle: -90,
                 position: "insideLeft",
                 fill: "#4a5568",
+                fontSize: 12,
               }}
             />
             <CartesianGrid strokeDasharray="3 3" stroke="#2d3748" />
@@ -229,11 +230,12 @@ function MetricChart({ rawData, dataKey, color, title, yAxisLabel, aggregation="
                 backgroundColor: "#1f2937",
                 border: "none",
                 color: "#fff",
+                fontSize: 12,
               }}
               labelFormatter={(label) => format(new Date(label), "PPpp")}
               formatter={formatTooltip}
             />
-            <Legend />
+            <Legend wrapperStyle={{ fontSize: 12 }} />
             <Area
               type="monotone"
               dataKey={dataKey}
@@ -244,7 +246,7 @@ function MetricChart({ rawData, dataKey, color, title, yAxisLabel, aggregation="
             />
             <Brush
               dataKey="date"
-              height={30}
+              height={20}
               stroke={color}
               fill="#161b22"
               onChange={handleZoom}

ell-studio/src/pages/LMP.js

@@ -291,11 +291,13 @@ function LMP() {
         <>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={30} minSize={20}>
-            <LMPDetailsSidePanel
-              lmp={lmp}
+            <div className="h-full overflow-y-auto hide-scrollbar">
+              <LMPDetailsSidePanel
+                lmp={lmp}
               uses={uses}
-              versionHistory={versionHistory}
-            />
+                versionHistory={versionHistory}
+              />
+            </div>
           </ResizablePanel>
         </>
       )}