Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On the chart editing screen, the icon of dataset should be similar to those used on the “Dataset” screen. #29710

Open
xavier-GitHub76 opened this issue Jul 26, 2024 · 4 comments
Assignees
Labels
dashboard:design Related to the Dashboard UI/UX

Comments

@xavier-GitHub76
Copy link
Contributor

Hello,

Physical and virtual data sets do not have the same pictogram.
image
image

On the chart editing screen, the icon should be similar to those used on the “Dataset” screen.

image

@dosubot dosubot bot added the dashboard:design Related to the Dashboard UI/UX label Jul 26, 2024
@kasiazjc
Copy link
Contributor

Hello,

Physical and virtual data sets do not have the same pictogram. image image

On the chart editing screen, the icon should be similar to those used on the “Dataset” screen.

image

Hi, thanks for raising this! I definitely agree, do you think it's something you would be able to change? 🙏

@xavier-GitHub76
Copy link
Contributor Author

xavier-GitHub76 commented Aug 21, 2024

I can try but I'm a novice.
Could you help me to identify files to changed ?

After, I will try to see how to add the control on the kind of dataset and apply the good SVG :

Physical dataset :

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" viewBox="0 0 24 24">
    <path fill="currentColor" fill-rule="evenodd" d="M21 2.5H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-18a1 1 0 0 0-1-1m-13 18H4v-4h4zm0-6H4v-4h4zm0-6H4v-4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4v-4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4v-4h4z" clip-rule="evenodd"></path>
</svg>

Virtual Dataset :

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" viewBox="0 0 24 24"> 
    <path fill="#136478" d="M4 4.5h16v16H4z"></path>
    <path fill="#A5DBE9" fill-rule="evenodd" d="M21 2.5H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-18a1 1 0 0 0-1-1m-13 18H4v-4h4zm0-6H4v-4h4zm0-6H4v-4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4v-4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4v-4h4z" clip-rule="evenodd"></path>
</svg>

@qingshan007
Copy link

Problem Investigation:

After investigation, it was found that the rendering type was incorrect
Create a chart type that is always table
datasource type: table

On the chart construction page, switch datasets (virtual or physical):

datasource type: virtual
datasource type: physical

Without modifying or destroying the original logic of the newly created dataset:
Locate to: superset-frontend\src\explore\components\controls\DatasourceControl\index.jsx

  1. Add judgment logic, where the physical dataset SQL field is always='', and the virtual one is the SQL during construction:
const dynamicDatasourceType = datasource?.sql
      ? DatasourceType.Query
      : DatasourceType.Table;
  1. Use a new judgment:
{/* {datasourceIconLookup[datasource?.type]} */}
↓
{datasourceIconLookup[dynamicDatasourceType]}
  1. Modify the icon:
// Assign icon for each DatasourceType.   If no icon assingment is found in the lookup, no icon will render
// export const datasourceIconLookup = {
//   [DatasourceType.Query]: (
//     <Icons. ConsoleSqlOutlined className="datasource-svg" />
//   ),
//   [DatasourceType.Table]: <Icons.DatasetPhysical className="datasource-svg" />,
// };
↓
export const datasourceIconLookup = {
[DatasourceType.Query]: <Icons.DatasetVirtual className="datasource-svg" />,
[DatasourceType.Table]: <Icons.DatasetPhysical className="datasource-svg" />,
};
  1. Result:
    Switch datasets and display icons of corresponding types
    Create a regular chart OR by entering it from the dataset page and displaying the corresponding type of icon

@qingshan007
Copy link

@xavier-GitHub76 @kasiazjc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dashboard:design Related to the Dashboard UI/UX
Projects
None yet
Development

No branches or pull requests

3 participants