Feature/dataset explorer chart

cccs-build/superset/Dockerfile

@@ -1,8 +1,7 @@
 # Vault CA container import
 ARG VAULT_CA_CONTAINER=uchimera.azurecr.io/cccs/hogwarts/vault-ca:master_11376_a25c34e1
 FROM $VAULT_CA_CONTAINER AS vault_ca
-FROM uchimera.azurecr.io/cccs/superset-base:cccs-2.1_20230605182047_b6972
-
+FROM uchimera.azurecr.io/cccs/superset-base:feature_dataset-explorer-chart_20230621174917_b7116
 USER root
 
 COPY *requirements.txt /tmp/

superset-frontend/src/cccs-viz/plugins/index.ts

@@ -29,3 +29,4 @@ export { default as AtAGlanceUserIdChartPlugin } from './plugin-chart-at-a-glanc
 export { default as AtAGlanceUserIDSasChartPlugin } from './plugin-chart-at-a-glance-user-id-sas/src/plugin';
 export { default as ApplicationLinksChartPlugin } from './plugin-chart-application-links/src/plugin';
 export { default as IFrameVisualizationChartPlugin } from './plugin-chart-iframe/src/plugin';
+export { default as DatasetExplorerChartPlugin } from './plugin-chart-dataset-explorer/src/plugin';

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/advancedDataTypeValueControl/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { ensureIsArray, withTheme } from '@superset-ui/core';
+import { connect } from 'react-redux';
+import SelectControl from 'src/explore/components/controls/SelectControl';
+import useAdvancedDataTypes from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/useAdvancedDataTypes';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  externalValidationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: any[] | any;
+  datasource: any;
+  multi: boolean;
+  freeForm: boolean;
+  advancedDataType: string;
+  onChange: (values: any, errors: any[]) => void;
+  disabled: boolean;
+  description: any;
+}
+
+const AdvancedDataTypeValueControlValueControl: React.FC<Props> = ({
+  onChange,
+  externalValidationErrors,
+  datasource,
+  multi,
+  freeForm,
+  advancedDataType,
+  label,
+  disabled,
+  value = [],
+  description,
+}) => {
+  const [rawValues, setRawValues] = useState([]);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [currentAdvancedDataType, setCurrentAdvancedDataType] =
+    useState<string>();
+
+  const {
+    advancedDataTypesState,
+    subjectAdvancedDataType,
+    fetchAdvancedDataTypeValueCallback,
+  } = useAdvancedDataTypes(() => {});
+
+  const onChangeWrapper = (selection: any) => {
+    setValidationErrors([...validationErrors, 'Validation in progress']);
+    setRawValues(selection);
+  };
+
+  // clear selection on advancedDataType change
+  useEffect(() => {
+    const rawData = value[0] ? value[0].rawData : [];
+    onChangeWrapper(
+      (currentAdvancedDataType &&
+        currentAdvancedDataType !== advancedDataType) ||
+        !advancedDataType
+        ? []
+        : rawData,
+    );
+    setCurrentAdvancedDataType(advancedDataType);
+  }, [advancedDataType]);
+
+  useEffect(() => {
+    const data =
+      advancedDataTypesState.parsedAdvancedDataType.length > 0 &&
+      advancedDataTypesState.parsedAdvancedDataType.split(',').length > 0
+        ? {
+            data: advancedDataTypesState.values,
+            columns: datasource.columns
+              .filter((col: any) => col.advanced_data_type === advancedDataType)
+              .map((col: any) => col.column_name),
+            rawData: rawValues,
+          }
+        : { data: [], columns: [], rawData: [] };
+    onChange(data, validationErrors);
+  }, [advancedDataTypesState, validationErrors]);
+
+  useEffect(() => {
+    fetchAdvancedDataTypeValueCallback(
+      rawValues,
+      advancedDataTypesState,
+      ensureIsArray(advancedDataType)[0],
+    );
+  }, [advancedDataType, rawValues, subjectAdvancedDataType]);
+
+  useEffect(() => {
+    setValidationErrors(
+      advancedDataTypesState.errorMessage
+        ? [advancedDataTypesState.errorMessage]
+        : [],
+    );
+  }, [advancedDataTypesState]);
+
+  return (
+    <SelectControl
+      hovered
+      description={advancedDataTypesState.parsedAdvancedDataType || description}
+      value={rawValues}
+      validationErrors={ensureIsArray(
+        [...validationErrors, ...externalValidationErrors].at(0),
+      )}
+      onChange={onChangeWrapper}
+      multi={multi}
+      freeForm={disabled ? false : freeForm}
+      label={label}
+      disabled={disabled}
+    />
+  );
+};
+
+function mapStateToProps({ charts, explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedAdvancedDataTypeValueControlValueControl = withTheme(
+  AdvancedDataTypeValueControlValueControl,
+);
+
+export default connect(mapStateToProps)(
+  themedAdvancedDataTypeValueControlValueControl,
+);

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/changeDatasourceButton/index.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { ChangeDatasourceModal } from 'src/components/Datasource';
+import { withTheme } from '@superset-ui/core';
+import { connect, useDispatch } from 'react-redux';
+import Button from 'src/components/Button';
+import { updateFormDataByDatasource } from 'src/explore/actions/exploreActions';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: object[];
+  datasource: any;
+  onChange: (a: any) => void;
+}
+
+const ChangeDatasourceButtonControll: React.FC<Props> = ({
+  onChange,
+  datasource,
+}) => {
+  const dispatch = useDispatch();
+  const [showChangeDatasourceModal, setShowChangeDatasourceModal] =
+    useState<Boolean>(false);
+
+  const toggleChangeDatasourceModal = () => {
+    setShowChangeDatasourceModal(!showChangeDatasourceModal);
+  };
+  const onDatasourceSave = (new_datasource: any) => {
+    dispatch(updateFormDataByDatasource(datasource, new_datasource));
+  };
+  const onChangeWrapper = (a: any) => {
+    onChange(a);
+  };
+
+  return (
+    <>
+      <Button
+        buttonStyle="primary"
+        onClick={() => setShowChangeDatasourceModal(true)}
+      >
+        Swap dataset
+      </Button>
+      {showChangeDatasourceModal && (
+        <ChangeDatasourceModal
+          onDatasourceSave={onDatasourceSave}
+          onHide={toggleChangeDatasourceModal}
+          show={showChangeDatasourceModal}
+          onChange={onChangeWrapper}
+        />
+      )}
+    </>
+  );
+};
+
+function mapStateToProps({ explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedChangeDatasourceButtonControll = withTheme(
+  ChangeDatasourceButtonControll,
+);
+
+export default connect(mapStateToProps)(themedChangeDatasourceButtonControll);

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/datetimeControl/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { SLOW_DEBOUNCE, SupersetClient, t, withTheme } from '@superset-ui/core';
+import {
+  buildTimeRangeString,
+  formatTimeRange,
+} from 'src/explore/components/controls/DateFilterControl/utils';
+import { Input } from 'src/components/Input';
+import { connect } from 'react-redux';
+import rison from 'rison';
+import ControlHeader from 'src/explore/components/ControlHeader';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { useDebouncedEffect } from 'src/explore/exploreUtils';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: object[];
+  onChange: (value: any, errors: any[]) => void;
+  default: string;
+  disabled: boolean;
+}
+
+const SEPARATOR = ' : ';
+const fetchTimeRange = async (timeRange: string) => {
+  const query = rison.encode_uri(timeRange);
+  const endpoint = `/api/v1/time_range/?q=${query}`;
+  try {
+    const response = await SupersetClient.get({ endpoint });
+    const timeRangeString = buildTimeRangeString(
+      response?.json?.result?.since || '',
+      response?.json?.result?.until || '',
+    );
+    return {
+      value: formatTimeRange(timeRangeString),
+    };
+  } catch (response) {
+    const clientError = await getClientErrorObject(response);
+    return {
+      // keep labelling consistent in error messages
+      error: (clientError.message || clientError.error)
+        .replace('From date', 'Start date')
+        .replace('to date', 'end date'),
+    };
+  }
+};
+
+const DatetimeControl: React.FC<Props> = props => {
+  const [timeRange, setTimeRange] = useState(props.default);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [actualTimeRange, setactualTimeRange] = useState<string>();
+
+  const [since, until] = timeRange.split(SEPARATOR);
+
+  useEffect(() => {
+    props.onChange(timeRange, validationErrors);
+  }, [timeRange, since, until, validationErrors]);
+
+  function onChange(control: 'since' | 'until', value: string) {
+    if (control === 'since') {
+      setTimeRange(`${value}${SEPARATOR}${until}`);
+    } else {
+      setTimeRange(`${since}${SEPARATOR}${value}`);
+    }
+  }
+
+  useDebouncedEffect(
+    () => {
+      fetchTimeRange(timeRange)
+        .then(value => {
+          setactualTimeRange(
+            value?.value ? `Actual Time Range ${value?.value}` : '',
+          );
+          setValidationErrors(value?.error ? [value?.error] : []);
+        })
+        .catch(error => {
+          setValidationErrors(error);
+        });
+    },
+    SLOW_DEBOUNCE,
+    [timeRange],
+  );
+
+  const headerProps = {
+    name: props.name,
+    label: props.label,
+    validationErrors,
+    description: actualTimeRange,
+    hovered: true,
+  };
+
+  return (
+    <>
+      <ControlHeader {...headerProps} />
+      <div className="control-label">{t('START (INCLUSIVE)')} </div>
+      <Input
+        key="since"
+        value={since}
+        onChange={e => onChange('since', e.target.value)}
+        disabled={props.disabled}
+      />
+      <div className="control-label">{t('END (EXCLUSIVE)')} </div>
+      <Input
+        key="until"
+        value={until}
+        onChange={e => onChange('until', e.target.value)}
+        disabled={props.disabled}
+      />
+    </>
+  );
+};
+
+// Tried to hook this up through stores/control.jsx instead of using redux
+// directly, could not figure out how to get access to the color_scheme
+function mapStateToProps({ charts, explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedDrillActionConfigControl = withTheme(DatetimeControl);
+
+export default connect(mapStateToProps)(themedDrillActionConfigControl);

superset-frontend/src/cccs-viz/plugins/plugin-chart-dataset-explorer/src/index.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export { default as CccsDataSetExplorerPlugin } from './plugin';
+/**
+ * Note: this file exports the default export from CccsGrid.tsx.
+ * If you want to export multiple visualization modules, you will need to
+ * either add additional plugin folders (similar in structure to ./plugin)
+ * OR export multiple instances of `ChartPlugin` extensions in ./plugin/index.ts
+ * which in turn load exports from CccsGrid.tsx
+ */