style: fix select on metadata panel (#796)

frontend/src/metadata/MetadataPanel.svelte

@@ -12,7 +12,6 @@
 	import IconButton, { Icon } from "@smui/icon-button";
 	import { tooltip } from "@svelte-plugins/tooltips";
 	import { InternMap } from "internmap";
-	import Svelecte from "svelecte";
 	import {
 		getHistogramCounts,
 		getHistogramMetrics,
@@ -274,35 +273,23 @@
 <div class="side-container">
 	<div id="selections">
 		{#if $model !== undefined}
-			<div>
+			<div style:margin-right={"10px"}>
 				<div class="options-header">Model</div>
-				<Svelecte
-					style="z-index: 5; margin-right: 10px; width: 167px; margin-top: 5px;"
-					name="init-model-select"
-					labelAsValue={true}
-					options={$models}
-					value={$model}
-					on:change={(e) => {
-						if (e.detail.label !== $model) {
-							model.set(e.detail.label);
-						}
-					}} />
+				<select bind:value={$model}>
+					{#each $models as mod}
+						<option value={mod}>{mod}</option>
+					{/each}
+				</select>
 			</div>
 		{/if}
 		{#if $metric !== undefined}
 			<div>
 				<div class="options-header">Metric</div>
-				<Svelecte
-					style="z-index: 5; width: 167px; margin-top: 5px;"
-					name="init-metric-select"
-					labelAsValue={true}
-					options={$metrics}
-					value={$metric}
-					on:change={(e) => {
-						if (e.detail.label !== $metric) {
-							metric.set(e.detail.label);
-						}
-					}} />
+				<select bind:value={$metric}>
+					{#each $metrics as met}
+						<option value={met}>{met}</option>
+					{/each}
+				</select>
 			</div>
 		{/if}
 	</div>
@@ -540,8 +527,15 @@
 </div>
 
 <style>
+	select {
+		width: 175px;
+		height: 35px;
+		border: 1px solid var(--G4);
+		border-radius: 5px;
+	}
 	.options-header {
 		margin-top: 5px;
+		margin-bottom: 5px;
 		color: var(--G2);
 	}
 	#slice-header {

frontend/src/util/util.ts

@@ -1,4 +1,3 @@
-import { ZenoColumnType, type ZenoColumn } from "../zenoservice";
 import {
 	folders,
 	metric,
@@ -13,7 +12,7 @@ import {
 	tab,
 	tags,
 } from "../stores";
-import { ZenoService } from "../zenoservice";
+import { ZenoColumnType, ZenoService, type ZenoColumn } from "../zenoservice";
 
 export async function getInitialData() {
 	const sets = await ZenoService.getSettings();
@@ -25,9 +24,7 @@ export async function getInitialData() {
 	metrics.set(inits.metrics);
 	folders.set(inits.folders);
 
-	model.set(
-		inits.models.length > 0 ? inits.models[inits.models.length - 1] : ""
-	);
+	model.set(inits.models.length > 0 ? inits.models[0] : "");
 	metric.set(inits.metrics.length > 0 ? inits.metrics[0] : "");
 
 	const slicesRes = await ZenoService.getSlices();