-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Datasets): Add tab to display datasetversionfile columns (#910)
* feat(Datasets): Add tab to display datasetversionfile columns * fix(Datasets): fix bad import name and percentage compute * feat(Datasets): use count instead of totalValues * chore: text color when hovering tab links was incorrect * chore: Improve the styles * Small adaptations --------- Co-authored-by: Quentin Gérôme <[email protected]>
- Loading branch information
1 parent
3b595d4
commit 9226340
Showing
11 changed files
with
256 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
src/datasets/features/DatasetVersionFileColumns/DatasetVersionFileColumns.generated.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as Types from '../../../graphql/types'; | ||
|
|
||
| import { gql } from '@apollo/client'; | ||
| import * as Apollo from '@apollo/client'; | ||
| const defaultOptions = {} as const; | ||
| export type DatasetVersionFileColumnsMetadataQueryVariables = Types.Exact<{ | ||
| id: Types.Scalars['ID']['input']; | ||
| }>; | ||
|
|
||
|
|
||
| export type DatasetVersionFileColumnsMetadataQuery = { __typename?: 'Query', datasetVersionFile?: { __typename?: 'DatasetVersionFile', id: string, attributes: Array<{ __typename?: 'MetadataAttribute', id: string, key: string, value?: any | null, system: boolean }> } | null }; | ||
|
|
||
| export type DatasetVersionFileColumns_FileFragment = { __typename?: 'DatasetVersionFile', id: string }; | ||
|
|
||
| export const DatasetVersionFileColumns_FileFragmentDoc = gql` | ||
| fragment DatasetVersionFileColumns_file on DatasetVersionFile { | ||
| id | ||
| } | ||
| `; | ||
| export const DatasetVersionFileColumnsMetadataDocument = gql` | ||
| query DatasetVersionFileColumnsMetadata($id: ID!) { | ||
| datasetVersionFile(id: $id) { | ||
| id | ||
| attributes { | ||
| id | ||
| key | ||
| value | ||
| system | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| /** | ||
| * __useDatasetVersionFileColumnsMetadataQuery__ | ||
| * | ||
| * To run a query within a React component, call `useDatasetVersionFileColumnsMetadataQuery` and pass it any options that fit your needs. | ||
| * When your component renders, `useDatasetVersionFileColumnsMetadataQuery` returns an object from Apollo Client that contains loading, error, and data properties | ||
| * you can use to render your UI. | ||
| * | ||
| * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; | ||
| * | ||
| * @example | ||
| * const { data, loading, error } = useDatasetVersionFileColumnsMetadataQuery({ | ||
| * variables: { | ||
| * id: // value for 'id' | ||
| * }, | ||
| * }); | ||
| */ | ||
| export function useDatasetVersionFileColumnsMetadataQuery(baseOptions: Apollo.QueryHookOptions<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables> & ({ variables: DatasetVersionFileColumnsMetadataQueryVariables; skip?: boolean; } | { skip: boolean; }) ) { | ||
| const options = {...defaultOptions, ...baseOptions} | ||
| return Apollo.useQuery<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>(DatasetVersionFileColumnsMetadataDocument, options); | ||
| } | ||
| export function useDatasetVersionFileColumnsMetadataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>) { | ||
| const options = {...defaultOptions, ...baseOptions} | ||
| return Apollo.useLazyQuery<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>(DatasetVersionFileColumnsMetadataDocument, options); | ||
| } | ||
| export function useDatasetVersionFileColumnsMetadataSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>) { | ||
| const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} | ||
| return Apollo.useSuspenseQuery<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>(DatasetVersionFileColumnsMetadataDocument, options); | ||
| } | ||
| export type DatasetVersionFileColumnsMetadataQueryHookResult = ReturnType<typeof useDatasetVersionFileColumnsMetadataQuery>; | ||
| export type DatasetVersionFileColumnsMetadataLazyQueryHookResult = ReturnType<typeof useDatasetVersionFileColumnsMetadataLazyQuery>; | ||
| export type DatasetVersionFileColumnsMetadataSuspenseQueryHookResult = ReturnType<typeof useDatasetVersionFileColumnsMetadataSuspenseQuery>; | ||
| export type DatasetVersionFileColumnsMetadataQueryResult = Apollo.QueryResult<DatasetVersionFileColumnsMetadataQuery, DatasetVersionFileColumnsMetadataQueryVariables>; |
141 changes: 141 additions & 0 deletions
141
src/datasets/features/DatasetVersionFileColumns/DatasetVersionFileColumns.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import { gql, useQuery } from "@apollo/client"; | ||
| import { useMemo } from "react"; | ||
| import Spinner from "core/components/Spinner"; | ||
| import { MetadataAttribute } from "graphql/types"; | ||
| import { camelCase } from "lodash"; | ||
| import Card from "core/components/Card"; | ||
| import DescriptionList from "core/components/DescriptionList"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import Badge from "core/components/Badge"; | ||
| import { percentage } from "datasets/helpers/dataset"; | ||
|
|
||
| export type DatasetColumn = { | ||
| id: string; | ||
| columnName: string; | ||
| constantValues?: boolean; | ||
| dataType: string; | ||
| distinctValues: number; | ||
| key: string; | ||
| missingValues: number; | ||
| system: boolean; | ||
| uniqueValues?: number; | ||
| count: number; | ||
| }; | ||
|
|
||
| type DatasetVersionFileColumnsProps = { | ||
| file: any; | ||
| }; | ||
|
|
||
| const DatasetVersionFileColumns = (props: DatasetVersionFileColumnsProps) => { | ||
| const { t } = useTranslation(); | ||
| const { file } = props; | ||
| const { data, loading } = useQuery( | ||
| gql` | ||
| query DatasetVersionFileColumnsMetadata($id: ID!) { | ||
| datasetVersionFile(id: $id) { | ||
| id | ||
| attributes { | ||
| id | ||
| key | ||
| value | ||
| system | ||
| } | ||
| } | ||
| } | ||
| `, | ||
| { | ||
| variables: { | ||
| id: file.id, | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| const { columns, total } = useMemo(() => { | ||
| if (!data?.datasetVersionFile.attributes) { | ||
| return { columns: [], total: 0 }; | ||
| } | ||
|
|
||
| const { attributes } = data.datasetVersionFile; | ||
| const res: Array<DatasetColumn> = Object.values( | ||
| attributes.reduce((acc: any, item: MetadataAttribute) => { | ||
| const [columnKey, property] = item.key.split("."); | ||
| if (!acc[columnKey]) { | ||
| acc[columnKey] = { | ||
| id: item.id, | ||
| key: columnKey, | ||
| system: item.system, | ||
| }; | ||
| } | ||
| acc[columnKey][camelCase(property)] = item.value; | ||
| return acc; | ||
| }, {}), | ||
| ); | ||
|
|
||
| return { | ||
| columns: res, | ||
| total: res.length ? res[0].count + res[0].missingValues : 0, | ||
| }; | ||
| }, [data]); | ||
|
|
||
| if (loading) | ||
| return ( | ||
| <div className="flex justify-center items-center h-24 p-4"> | ||
| <Spinner size="md" /> | ||
| </div> | ||
| ); | ||
|
|
||
| if (!columns.length) { | ||
| return ( | ||
| <div className="text-sm text-gray-500 italic w-full flex justify-center p-4"> | ||
| {t("Columns metadata not available.")} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="grid grid-cols-1 2xl:grid-cols-2 gap-4"> | ||
| {columns.map((column: DatasetColumn) => ( | ||
| <Card | ||
| key={column.key} | ||
| title={ | ||
| <div className="flex justify-between"> | ||
| <span className="max-w-[80%] font-semibold text-sm font-mono"> | ||
| {column.columnName} | ||
| </span> | ||
| <div> | ||
| <Badge className="text-xs bg-gray-100 font-mono"> | ||
| {column.dataType} | ||
| </Badge> | ||
| </div> | ||
| </div> | ||
| } | ||
| > | ||
| <Card.Content> | ||
| <DescriptionList compact> | ||
| <DescriptionList.Item label={t("Distinct")}> | ||
| <code className="font-mono text-sm text-gray-600"> | ||
| {`${column.distinctValues} (${percentage(column.distinctValues, total)}%)`} | ||
| </code> | ||
| </DescriptionList.Item> | ||
| <DescriptionList.Item label={t("Missing")} className="gap-4"> | ||
| <code className="font-mono text-sm text-gray-600 "> | ||
| {`${column.missingValues} (${percentage(column.missingValues, total)}%)`} | ||
| </code> | ||
| </DescriptionList.Item> | ||
| </DescriptionList> | ||
| </Card.Content> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| DatasetVersionFileColumns.fragments = { | ||
| file: gql` | ||
| fragment DatasetVersionFileColumns_file on DatasetVersionFile { | ||
| id | ||
| } | ||
| `, | ||
| }; | ||
|
|
||
| export default DatasetVersionFileColumns; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import DatasetVersionFileColumns from "./DatasetVersionFileColumns"; | ||
|
|
||
| export default DatasetVersionFileColumns; |
Oops, something went wrong.