Add metric description tooltip to System Submission Drawer Page (#513)

* add metric descriptions * add metric info in systemSubmitDrawer * move tooltip to the right
neulab · Nov 18, 2022 · 27b03b6 · 27b03b6
1 parent 5e58902
commit 27b03b6
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/frontend/src/components/SystemSubmitDrawer/index.tsx b/frontend/src/components/SystemSubmitDrawer/index.tsx
@@ -128,6 +128,9 @@ export function SystemSubmitDrawer(props: Props) {
   const [state, setState] = useState(State.loading);
   const [taskCategories, setTaskCategories] = useState<TaskCategory[]>([]);
   const [languageCodes, setLanguageCodes] = useState<LanguageCode[]>([]);
+  const [metricDescriptions, setMetricDescriptions] = useState<{
+    [key: string]: string;
+  }>({});
   const { filtered: inputLangFiltered, setQuery: setInputLangQuery } =
     useSearch<LanguageCode>(languageCodes, filterFunc);
   const { filtered: outputLangFiltered, setQuery: setOutputLangQuery } =
@@ -163,6 +166,7 @@ export function SystemSubmitDrawer(props: Props) {
       setState(State.loading);
       setTaskCategories(await backendClient.tasksGet());
       setLanguageCodes(await backendClient.languageCodesGet());
+      setMetricDescriptions(await backendClient.metricDescriptionsGet());
       setState(State.other);
     }
 
@@ -686,6 +690,14 @@ export function SystemSubmitDrawer(props: Props) {
                   options={(selectedTask?.supported_metrics || []).map(
                     (opt) => ({
                       value: opt,
+                      label: (
+                        <Tooltip
+                          placement="right"
+                          title={metricDescriptions[opt]}
+                        >
+                          <div>{opt}</div>
+                        </Tooltip>
+                      ),
                     })
                   )}
                 />