data grid size changes

fixie-ai · Apr 16, 2024 · b2affb9 · b2affb9
1 parent 872e75d
commit b2affb9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/website/src/components/DataGrid.astro b/website/src/components/DataGrid.astro
@@ -28,7 +28,7 @@ import 'ag-grid-community/styles/ag-theme-quartz.css';
     <label for="cdgRegionSelector">Europe (Paris)</label>
   </div>
   <br />
-  <div id="myGrid" class="ag-theme-quartz text-sm bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white " style="width: 800px;"></div>
+  <div id="myGrid" class="ag-theme-quartz text-sm bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white w-full"></div>
 </form>
 
 <script>

diff --git a/website/src/utils/DataGridDefinitions.ts b/website/src/utils/DataGridDefinitions.ts
@@ -52,7 +52,7 @@ export const TokensDefinition = {
 };
 
 export const TotalTimeDefinition = {
-	title: "Total Time",
+	title: "Total",
 	definition: "The total time from the start of the request until the response is complete, i.e., the last token has been generated. Total time = TTFT + TPS * Tokens. Lower values = lower latency/faster performance."
 };
 
@@ -64,8 +64,8 @@ const columnModel = {
 	field: "model",
 	headerName: ModelDefinition.title,
 	headerTooltip: ModelDefinition.definition,
-	headerClass: headerClass,
-	minWidth: 400, 
+	//TODO: Make this ~200 on mobile screen size by default
+	minWidth: 300,
 	// tooltipField: "output"
 };
 
@@ -75,7 +75,6 @@ const columnRegion = {
 	headerName: RegionDefinition.title,
 	headerTooltip: RegionDefinition.definition,
 	headerClass: headerClass,
-	maxWidth: 100
 };
 
 // TTR column
@@ -84,7 +83,6 @@ const columnTTR = {
 	headerName: TTRDefinition.title,
 	headerTooltip: TTRDefinition.definition,
 	headerClass: headerClass,
-	maxWidth: 90,
 	valueFormatter: (p: ValueFormatterParam) => p.value.toFixed(2)
 };
 
@@ -94,6 +92,7 @@ const columnTTFT = {
 	headerName: TTFTDefinition.title,
 	headerTooltip: TTFTDefinition.definition,
 	headerClass: headerClass,
+	minWidth: 100,
 	// minWidth: 80,
 	// maxWidth: 90,
 	valueFormatter: (p: ValueFormatterParam) => p.value.toFixed(2)
@@ -105,6 +104,7 @@ const columnTPS = {
 	headerName: TPSDefinition.title,
 	headerTooltip: TPSDefinition.definition,
 	headerClass: headerClass,
+	minWidth: 100,
 	// minWidth: 90,
 	// maxWidth: 90,
 	valueFormatter: (p: ValueFormatterParam) => p.value.toFixed(2)
@@ -116,7 +116,6 @@ const columnNumTokens = {
 	headerName: TokensDefinition.title,
 	headerTooltip: TokensDefinition.definition,
 	headerClass: headerClass,
-	minWidth: 100,
 	// maxWidth: 100,
 	wrapHeaderText: true
 };
@@ -127,6 +126,7 @@ const columnTotalTime = {
 	headerName: TotalTimeDefinition.title,
 	headerTooltip: TotalTimeDefinition.definition,
 	headerClass: headerClass,
+	minWidth: 100,
 	// minWidth: 100,
 	// maxWidth: 100,
 	wrapHeaderText: true,
@@ -140,7 +140,6 @@ export const gridOptions = {
 	enableCellTextSelection: true,
   defaultColDef: {
     filter: true,
-		resizable: false,
     // minWidth: 80,	
   },
 	domLayout: 'autoHeight',