Skip to content

feat: Metadata panel v1 #906

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.

Sign up for GitHub

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

Merged
bprusinowski merged 17 commits into from
Nov 28, 2022
Merged

feat: Metadata panel v1 #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1b1c070
refactor: DRAWER_WIDTH instead of constant
bprusinowski Nov 22, 2022
33e29bb
feat: Add skeleton of MetadataPanel
bprusinowski Nov 22, 2022
8c61fa3
feat: Allow MetadataPanel to be attached to a container
bprusinowski Nov 22, 2022
33ebdc7
refactor: Do not style chart tabs in theme
bprusinowski Nov 22, 2022
0d8a448
feat: Add skeleton of tabs in metadata panel
bprusinowski Nov 22, 2022
68872bf
refactor: Make SX optional
bprusinowski Nov 23, 2022
80ae8e4
feat: Add general metadata to metadata panel
bprusinowski Nov 28, 2022
82d893d
feat: Update styles
bprusinowski Nov 23, 2022
6e65314
refactor: Extract MotionBox one level up
bprusinowski Nov 23, 2022
0b3ad68
feat: Fetch more metadata
bprusinowski Nov 23, 2022
4817ae7
feat: Add basic list of dimensions (metadata panel)
bprusinowski Nov 28, 2022
67435c1
feat: Add icons to metadata panel
bprusinowski Nov 23, 2022
1f08db9
feat: Add searching to data panel
bprusinowski Nov 23, 2022
5432e7a
chore: Merge main
bprusinowski Nov 28, 2022
1210de2
chore: Add translations
bprusinowski Nov 28, 2022
b5fed5e
refactor: Extract useDrawerStyles
bprusinowski Nov 28, 2022
14ecd8c
feat: Add metadata flag
bprusinowski Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 47 additions & 17 deletions app/components/chart-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import Head from "next/head";
import * as React from "react";
import { useMemo } from "react";

import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
import { useQueryFilters } from "@/charts/shared/chart-helpers";
Expand All @@ -19,9 +20,14 @@ import GenericChart from "@/components/common-chart";
import DebugPanel from "@/components/debug-panel";
import Flex from "@/components/flex";
import { HintYellow } from "@/components/hint";
import { MetadataPanel } from "@/components/metadata-panel";
import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
import { DataSetTable } from "@/configurator/components/datatable";
import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
import { flag } from "@/configurator/components/flag";
import {
DimensionMetadataFragment,
useDataCubeMetadataWithComponentValuesQuery,
} from "@/graphql/query-hooks";
import { DataCubePublicationStatus } from "@/graphql/resolver-types";
import { useLocale } from "@/locales/use-locale";
import useEvent from "@/utils/use-event";
Expand Down Expand Up @@ -67,7 +73,7 @@ export const ChartPreviewInner = ({
const [state, dispatch] = useConfiguratorState();
const locale = useLocale();
const classes = useStyles();
const [{ data: metaData }] = useDataCubeMetadataQuery({
const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
variables: {
iri: dataSetIri,
sourceType: dataSource.type,
Expand All @@ -84,6 +90,13 @@ export const ChartPreviewInner = ({

const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));

const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
return [
...(metaData?.dataCubeByIri?.dimensions ?? []),
...(metaData?.dataCubeByIri?.measures ?? []),
];
}, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);

return (
<Flex
sx={{
Expand Down Expand Up @@ -112,25 +125,42 @@ export const ChartPreviewInner = ({
state.state === "PUBLISHING") && (
<>
<>
<Typography
variant="h2"
<Flex
sx={{
color: state.meta.title[locale] === "" ? "grey.500" : "text",
justifyContent: "space-between",
alignItems: "flex-start",
}}
className={classes.title}
onClick={() =>
dispatch({
type: "ACTIVE_FIELD_CHANGED",
value: "title",
})
}
>
{state.meta.title[locale] === "" ? (
<Trans id="annotation.add.title">[ Title ]</Trans>
) : (
state.meta.title[locale]
<Typography
variant="h2"
sx={{
color:
state.meta.title[locale] === "" ? "grey.500" : "text",
}}
className={classes.title}
onClick={() =>
dispatch({
type: "ACTIVE_FIELD_CHANGED",
value: "title",
})
}
>
{state.meta.title[locale] === "" ? (
<Trans id="annotation.add.title">[ Title ]</Trans>
) : (
state.meta.title[locale]
)}
</Typography>

{flag("metadata") && (
<MetadataPanel
datasetIri={dataSetIri}
dataSource={dataSource}
dimensions={allDimensions}
top={96}
/>
)}
</Typography>
</Flex>
<Head>
<title key="title">
{state.meta.title[locale] === ""
Expand Down
37 changes: 31 additions & 6 deletions app/components/chart-published.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Trans } from "@lingui/macro";
import { Box, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import * as React from "react";
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useRef } from "react";

import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
import { isUsingImputation } from "@/charts/shared/imputation";
Expand All @@ -19,6 +19,7 @@ import {
import GenericChart from "@/components/common-chart";
import Flex from "@/components/flex";
import { HintBlue, HintRed, HintYellow } from "@/components/hint";
import { MetadataPanel } from "@/components/metadata-panel";
import {
ChartConfig,
ConfiguratorStatePublishing,
Expand All @@ -27,12 +28,16 @@ import {
PublishedConfiguratorStateProvider,
} from "@/configurator";
import { DataSetTable } from "@/configurator/components/datatable";
import { flag } from "@/configurator/components/flag";
import { parseDate } from "@/configurator/components/ui-helpers";
import {
DEFAULT_DATA_SOURCE,
useIsTrustedDataSource,
} from "@/domain/datasource";
import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
import {
DimensionMetadataFragment,
useDataCubeMetadataWithComponentValuesQuery,
} from "@/graphql/query-hooks";
import { DataCubePublicationStatus } from "@/graphql/resolver-types";
import { useLocale } from "@/locales/use-locale";
import useEvent from "@/utils/use-event";
Expand Down Expand Up @@ -65,6 +70,7 @@ export const ChartPublished = ({

const useStyles = makeStyles((theme: Theme) => ({
root: {
position: "relative",
display: "flex",
flexGrow: 1,
flexDirection: "column",
Expand All @@ -91,7 +97,9 @@ export const ChartPublishedInner = ({
const locale = useLocale();
const isTrustedDataSource = useIsTrustedDataSource(dataSource);

const [{ data: metaData }] = useDataCubeMetadataQuery({
const rootRef = useRef<HTMLDivElement>(null);

const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
variables: {
iri: dataSet,
sourceType: dataSource.type,
Expand All @@ -116,8 +124,15 @@ export const ChartPublishedInner = ({
} = useChartTablePreview();
const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));

const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
return [
...(metaData?.dataCubeByIri?.dimensions ?? []),
...(metaData?.dataCubeByIri?.measures ?? []),
];
}, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);

return (
<Box className={classes.root}>
<Box className={classes.root} ref={rootRef}>
<ChartErrorBoundary resetKeys={[chartConfig]}>
{metaData?.dataCubeByIri?.publicationStatus ===
DataCubePublicationStatus.Draft && (
Expand Down Expand Up @@ -161,11 +176,21 @@ export const ChartPublishedInner = ({
</HintBlue>
</Box>
)}
{meta.title[locale] !== "" && (
<Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Typography component="div" variant="h2" mb={2}>
{meta.title[locale]}
</Typography>
)}

{flag("metadata") && (
<MetadataPanel
datasetIri={dataSet}
dataSource={dataSource}
dimensions={allDimensions}
container={rootRef.current}
/>
)}
</Flex>

{meta.description[locale] && (
<Typography component="div" variant="body1" mb={2}>
{meta.description[locale]}
Expand Down
16 changes: 13 additions & 3 deletions app/components/chart-selection-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,10 +195,20 @@ const TabsInner = ({
}) => {
return (
<Box display="flex" sx={{ width: "100%", alignItems: "flex-start" }}>
<Tabs value={0} sx={{ position: "relative", top: 1, flexGrow: 1 }}>
{/* TODO: Generate dynamically when chart composition is implemented */}
<Tabs
value={0}
TabIndicatorProps={{ style: { display: "none" } }}
sx={{ position: "relative", top: 1, flexGrow: 1 }}
>
{/* TODO: Generate dynamically when chart composition is implemented. Add useStyles */}
<Tab
sx={{ p: 0, background: "white" }}
sx={{
p: 0,
background: "white",
border: "1px solid",
borderBottomWidth: 0,
borderColor: "divider",
}}
onClick={onActionButtonClick}
label={
<TabContent iconName={getIconName(chartType)} editable={editable} />
Expand Down
Loading