[Prototype] Multi-select column

frontend/lib/package.json

@@ -47,6 +47,7 @@
  "axios": "^1.6.0",
  "baseui": "12.2.0",
  "camelcase": "^7.0.1",
+ "chroma-js": "^2.4.2",
  "classnames": "^2.3.2",
  "clipboard": "^2.0.11",
  "color2k": "^2.0.2",
@@ -85,6 +86,7 @@
  "react-markdown": "^8.0.7",
  "react-plotly.js": "^2.6.0",
  "react-responsive-carousel": "^3.2.23",
+ "react-select": "^5.8.0",
  "react-syntax-highlighter": "^15.5.0",
  "react-webcam": "7.1.1",
  "react-window": "^1.8.8",
@@ -125,6 +127,7 @@
  "@testing-library/react": "^12.1.4",
  "@testing-library/react-hooks": "^8.0.1",
  "@testing-library/user-event": "^14.4.3",
+ "@types/chroma-js": "^2.4.3",
  "@types/d3": "^7.4.0",
  "@types/d3-graphviz": "^2.6.7",
  "@types/enzyme": "^3.10.12",

frontend/lib/src/components/widgets/DataFrame/columns/ListColumn.ts

@@ -14,65 +14,79 @@
  * limitations under the License.
  */
 
-import { GridCell, BubbleCell, GridCellKind } from "@glideapps/glide-data-grid"
+import { GridCell, GridCellKind } from "@glideapps/glide-data-grid"
 
 import { isNullOrUndefined } from "@streamlit/lib/src/util/utils"
 
 import {
  BaseColumn,
  BaseColumnProps,
  toSafeArray,
- toSafeString,
- isMissingValueCell,
+ arrayToCopyValue,
 } from "./utils"
+import { MultiSelectCell } from "./cells/MultiSelectCell"
 
 /**
  * A column type that supports optimized rendering values of array/list types.
  */
 function ListColumn(props: BaseColumnProps): BaseColumn {
  const cellTemplate = {
- kind: GridCellKind.Bubble,
- data: [],
+ kind: GridCellKind.Custom,
+ readonly: !props.isEditable,
  allowOverlay: true,
  contentAlign: props.contentAlignment,
  style: props.isIndex ? "faded" : "normal",
- } as BubbleCell
+ data: {
+ kind: "multi-select-cell",
+ values: [],
+ options: undefined,
+ allowCreation: true,
+ allowDuplicates: true,
+ },
+ copyData: "",
+ } as MultiSelectCell
 
  return {
  ...props,
  kind: "list",
  sortMode: "default",
- isEditable: false, // List column is always readonly
+ themeOverride: {
+ roundingRadius: 4,
+ },
  getCell(data?: any): GridCell {
- const cellData = isNullOrUndefined(data) ? [] : toSafeArray(data)
+ if (isNullOrUndefined(data)) {
+ return {
+ ...cellTemplate,
+ data: {
+ ...cellTemplate.data,
+ values: null,
+ },
+ isMissingValue: true,
+ copyData: "",
+ } as MultiSelectCell
+ }
+
+ const cellData = toSafeArray(data)
 
  return {
  ...cellTemplate,
- data: cellData,
- isMissingValue: isNullOrUndefined(data),
- copyData: isNullOrUndefined(data)
- ? ""
- : toSafeString(
- cellData.map((x: any) =>
- // Replace commas with spaces since commas are used to
- // separate the list items.
- typeof x === "string" && x.includes(",")
- ? x.replace(/,/g, " ")
- : x
- )
- ),
- } as BubbleCell
+ data: {
+ ...cellTemplate.data,
+ values: cellData,
+ },
+ copyData: arrayToCopyValue(cellData),
+ } as MultiSelectCell
  },
- getCellValue(cell: BubbleCell): string[] | null {
- if (isNullOrUndefined(cell.data) || isMissingValueCell(cell)) {
+ getCellValue(cell: MultiSelectCell): string[] | null {
+ if (isNullOrUndefined(cell.data?.values)) {
  return null
  }
 
- return cell.data
+ return cell.data.values
  },
  }
 }
 
-ListColumn.isEditableType = false
+ListColumn.isEditableType = true
 
 export default ListColumn

frontend/lib/src/components/widgets/DataFrame/columns/MultiSelectColumn.ts

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { GridCell, GridCellKind } from "@glideapps/glide-data-grid"
+
+import { isNullOrUndefined } from "@streamlit/lib/src/util/utils"
+import { EmotionTheme } from "@streamlit/lib/src/theme"
+
+import {
+ BaseColumn,
+ BaseColumnProps,
+ toSafeString,
+ mergeColumnParameters,
+ arrayToCopyValue,
+ getErrorCell,
+ toSafeArray,
+} from "./utils"
+import { MultiSelectCell } from "./cells/MultiSelectCell"
+import { unique } from "vega-lite"
+
+type SelectOption = { value: string; label?: string; color?: string }
+
+/**
+ * Unifies the options into the format required by the multi-select cell.
+ *
+ * @param options The options to prepare.
+ * @returns The prepared options in the format required by the multi-select cell.
+ */
+export const prepareOptions = (
+ options: readonly (string | SelectOption)[]
+): { value: string; label?: string; color?: string }[] => {
+ if (isNullOrUndefined(options)) {
+ return []
+ }
+
+ return options
+ .filter(opt => opt !== null && opt !== "")
+ .map(option => {
+ if (typeof option === "string") {
+ return {
+ value: toSafeString(option).trim(),
+ label: undefined,
+ color: undefined,
+ }
+ }
+
+ return {
+ value: toSafeString(option.value).trim(),
+ label: option.label ?? undefined,
+ color: option.color ?? undefined,
+ }
+ })
+}
+
+export interface MultiSelectColumnParams {
+ readonly options: (string | SelectOption)[]
+}
+
+function MultiSelectColumn(
+ props: BaseColumnProps,
+ theme: EmotionTheme
+): BaseColumn {
+ const parameters = mergeColumnParameters(
+ // Default parameters:
+ {
+ options: [],
+ },
+ // User parameters:
+ props.columnTypeOptions
+ ) as MultiSelectColumnParams
+
+ const preparedOptions = prepareOptions(parameters.options)
+ const uniqueOptions = unique(
+ preparedOptions.map(opt => opt.value),
+ x => x
+ )
+
+ const cellTemplate = {
+ kind: GridCellKind.Custom,
+ readonly: !props.isEditable,
+ allowOverlay: true,
+ contentAlign: props.contentAlignment,
+ style: props.isIndex ? "faded" : "normal",
+ data: {
+ kind: "multi-select-cell",
+ values: [],
+ options: preparedOptions,
+ allowCreation: false,
+ allowDuplicates: false,
+ },
+ copyData: "",
+ } as MultiSelectCell
+
+ return {
+ ...props,
+ kind: "multiselect",
+ sortMode: "default",
+ themeOverride: {
+ roundingRadius: 4,
+ bgBubble: theme.colors.primary,
+ bgBubbleSelected: theme.colors.primary,
+ textBubble: theme.colors.white,
+ },
+ getCell(data?: any, validate?: boolean): GridCell {
+ if (isNullOrUndefined(data)) {
+ return {
+ ...cellTemplate,
+ data: {
+ ...cellTemplate.data,
+ values: null,
+ },
+ isMissingValue: true,
+ copyData: "",
+ } as MultiSelectCell
+ }
+
+ let cellData = toSafeArray(data)
+
+ cellData = cellData.map((x: any) => toSafeString(x).trim())
+
+ if (validate && cellData.length > 0) {
+ // Filter out values that are not in the options list:
+ cellData = cellData.filter((x: string) => uniqueOptions.includes(x))
+ if (cellData.length === 0) {
+ return getErrorCell(
+ toSafeString(data),
+ "The values could not be matched with the configured options."
+ )
+ }
+ }
+
+ return {
+ ...cellTemplate,
+ data: {
+ ...cellTemplate.data,
+ values: cellData,
+ },
+ copyData: arrayToCopyValue(cellData),
+ } as MultiSelectCell
+ },
+ getCellValue(cell: MultiSelectCell): string[] | null {
+ if (isNullOrUndefined(cell.data?.values)) {
+ return null
+ }
+
+ return cell.data.values
+ },
+ }
+}
+
+MultiSelectColumn.isEditableType = true
+
+export default MultiSelectColumn