refactor(word-cloud): convert rotation and color controls to React components (POC)

superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts → superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.tsx

@@ -21,6 +21,7 @@ import {
   ControlPanelConfig,
   getStandardizedControls,
 } from '@superset-ui/chart-controls';
+import { RotationControl, ColorSchemeControl } from './controls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -63,25 +64,14 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [<RotationControl name="rotation" key="rotation" renderTrigger />],
         [
-          {
-            name: 'rotation',
-            config: {
-              type: 'SelectControl',
-              label: t('Word Rotation'),
-              choices: [
-                ['random', t('random')],
-                ['flat', t('flat')],
-                ['square', t('square')],
-              ],
-              renderTrigger: true,
-              default: 'square',
-              clearable: false,
-              description: t('Rotation to apply to words in the cloud'),
-            },
-          },
+          <ColorSchemeControl
+            name="color_scheme"
+            key="color_scheme"
+            renderTrigger
+          />,
         ],
-        ['color_scheme'],
       ],
     },
   ],

superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controls/ColorSchemeControl.tsx

@@ -0,0 +1,62 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { getCategoricalSchemeRegistry } from '@superset-ui/core';
+import InternalColorSchemeControl from './ColorSchemeControl/index';
+import { ColorSchemes } from './ColorSchemeControl/index';
+// NOTE: We copied the Explore ColorSchemeControl into this plugin to avoid
+// pulling the entire frontend src tree into this package’s tsconfig (importing
+// from src/ was dragging in fixtures, tests, and other plugins). Keep this copy
+// in sync with upstream changes, and consider moving it into a shared package
+// once the control-panel refactor settles so all consumers can reuse it.
+import { ControlComponentProps } from '@superset-ui/chart-controls';
+
+type ColorSchemeControlWrapperProps = ControlComponentProps<string> & {
+  clearable?: boolean;
+};
+
+export default function ColorSchemeControlWrapper({
+  name = 'color_scheme',
+  value,
+  onChange,
+  clearable = true,
+  label,
+  description,
+  ...rest
+}: ColorSchemeControlWrapperProps) {
+  const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
+  const choices = categoricalSchemeRegistry.keys().map(s => [s, s]);
+  const schemes = categoricalSchemeRegistry.getMap() as ColorSchemes;
+
+  return (
+    <InternalColorSchemeControl
+      name={name}
+      value={value ?? ''}
+      onChange={onChange}
+      clearable={clearable}
+      choices={choices}
+      schemes={schemes}
+      hasCustomLabelsColor={false}
+      label={typeof label === 'string' ? label : undefined}
+      description={typeof description === 'string' ? description : undefined}
+      {...rest}
+    />
+  );
+}
+
+ColorSchemeControlWrapper.displayName = 'ColorSchemeControlWrapper';

superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controls/ColorSchemeControl/ColorSchemeLabel.tsx

@@ -0,0 +1,126 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { css, SupersetTheme } from '@apache-superset/core/ui';
+import { useRef, useState } from 'react';
+import { Tooltip } from '@superset-ui/core/components';
+
+type ColorSchemeLabelProps = {
+  colors: string[];
+  id: string;
+  label: string;
+};
+
+export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
+  const { id, label, colors } = props;
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const labelNameRef = useRef<HTMLElement>(null);
+  const labelsColorRef = useRef<HTMLElement>(null);
+  const handleShowTooltip = () => {
+    const labelNameElement = labelNameRef.current;
+    const labelsColorElement = labelsColorRef.current;
+    if (
+      labelNameElement &&
+      labelsColorElement &&
+      (labelNameElement.scrollWidth > labelNameElement.offsetWidth ||
+        labelNameElement.scrollHeight > labelNameElement.offsetHeight ||
+        labelsColorElement.scrollWidth > labelsColorElement.offsetWidth ||
+        labelsColorElement.scrollHeight > labelsColorElement.offsetHeight)
+    ) {
+      setShowTooltip(true);
+    }
+  };
+  const handleHideTooltip = () => {
+    setShowTooltip(false);
+  };
+
+  const colorsList = () =>
+    colors.map((color: string, i: number) => (
+      <span
+        data-test="color"
+        key={`${id}-${i}`}
+        css={(theme: { sizeUnit: number }) => css`
+          padding-left: ${theme.sizeUnit / 2}px;
+          :before {
+            content: '';
+            display: inline-block;
+            background-color: ${color};
+            border: 1px solid ${color === 'white' ? 'black' : color};
+            width: 9px;
+            height: 10px;
+          }
+        `}
+      />
+    ));
+
+  const tooltipContent = () => (
+    <>
+      <span>{label}</span>
+      <div>{colorsList()}</div>
+    </>
+  );
+
+  return (
+    <Tooltip
+      data-testid="tooltip"
+      overlayClassName="color-scheme-tooltip"
+      title={tooltipContent()}
+      key={id}
+      open={showTooltip}
+    >
+      <span
+        className="color-scheme-option"
+        onMouseEnter={handleShowTooltip}
+        onMouseLeave={handleHideTooltip}
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        `}
+        data-test={id}
+      >
+        <span
+          className="color-scheme-label"
+          ref={labelNameRef}
+          css={(theme: SupersetTheme) => css`
+            min-width: 125px;
+            padding-right: ${theme.sizeUnit * 2}px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          `}
+        >
+          {label}
+        </span>
+        <span
+          ref={labelsColorRef}
+          css={(theme: SupersetTheme) => css`
+            flex: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            padding-right: ${theme.sizeUnit}px;
+          `}
+        >
+          {colorsList()}
+        </span>
+      </span>
+    </Tooltip>
+  );
+}