Add label picker

source/Panel/LabelList/LabelList.scss

@@ -5,4 +5,8 @@ div.label-list-panel-root {
     min-height: 100%;
     padding: 10px;
     box-sizing: border-box;
+}
+
+div.label-list-pabel-err-msg {
+    padding-bottom: 5px;
 }

source/Panel/LabelList/LabelList.tsx

@@ -3,6 +3,7 @@ import { Component } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
@@ -29,6 +30,12 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
                 this.labelInnerClick = false;
             }}
         >
+            {labels.length <=0 ? 
+                <ErrorMessage
+                    className="label-list-pabel-err-msg"
+                    i18nKey="Panel.Info.Label.List.Error.Nodata"
+                /> : null
+            }
             <LabelListComponent
                 labels={labels}
                 focusLabel={this.props.status ? this.props.status.focusLabel : undefined}

source/Panel/RangeDetails/RangeDetails.tsx

@@ -7,6 +7,7 @@ import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
+import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange")
@@ -14,6 +15,7 @@ class RangeDetails extends Component<IMixinStatusProps> {
     
     public readonly AttrI18nKey: AllI18nKeys[] = [
         "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Label",
         "Common.Attr.Key.Display",
         "Common.Attr.Key.Update",
         "Common.Attr.Key.Color",
@@ -58,6 +60,11 @@ class RangeDetails extends Component<IMixinStatusProps> {
             {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
                 status.changeRangeAttrib(range.id, "displayName", val);
             })}
+
+            <LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
+                labels={this.props.status?.model.labelPool ?? []}
+                // labels={[]}
+            />
             
             <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
                 if (this.props.status) {