Skip to content

Commit

Permalink
feat: Add an ability to expand details of dimension
Browse files Browse the repository at this point in the history
  • Loading branch information
@bprusinowski
bprusinowski committed Nov 28, 2022
1 parent 14ecd8c commit a12389d
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 97 deletions.
178 changes: 142 additions & 36 deletions app/components/metadata-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ import {
Typography,
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { AnimatePresence, Transition } from "framer-motion";
import React, { useMemo, useState } from "react";

import { DataSource } from "@/configurator";
import { BackButton, DataSource } from "@/configurator";
import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
import { DRAWER_WIDTH } from "@/configurator/components/drawer";
import { MotionBox } from "@/configurator/components/presence";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { Icon, getDimensionIconName } from "@/icons";
import { getDimensionIconName, Icon } from "@/icons";
import SvgIcArrowRight from "@/icons/components/IcArrowRight";
import SvgIcClose from "@/icons/components/IcClose";
import useEvent from "@/utils/use-event";

Expand All @@ -31,6 +34,9 @@ type State = {
toggle: () => void;
activeSection: Section;
setActiveSection: (d: Section) => void;
selectedDimension: DimensionMetadataFragment | undefined;
setSelectedDimension: (d: DimensionMetadataFragment | undefined) => void;
clearSelectedDimension: () => void;
};

const Context = React.createContext<State | undefined>(undefined);
Expand All @@ -42,15 +48,21 @@ export const ContextProvider = ({
}) => {
const [open, setOpen] = React.useState(false);
const [activeSection, setActiveSection] = React.useState<Section>("general");
const [selectedDimension, setSelectedDimension] = React.useState<
DimensionMetadataFragment | undefined
>(undefined);

const ctx = React.useMemo(() => {
const ctx: State = React.useMemo(() => {
return {
open,
toggle: () => setOpen(!open),
activeSection,
setActiveSection,
selectedDimension,
setSelectedDimension,
clearSelectedDimension: () => setSelectedDimension(undefined),
};
}, [open, activeSection]);
}, [open, activeSection, selectedDimension]);

return <Context.Provider value={ctx}>{children}</Context.Provider>;
};
Expand Down Expand Up @@ -109,10 +121,12 @@ const useOtherStyles = makeStyles<Theme>((theme) => {
},
},
tabPanel: {
padding: 0,
},
tabPanelContent: {
display: "flex",
flexDirection: "column",
gap: theme.spacing(4),
padding: 0,
},
icon: {
display: "inline",
Expand Down Expand Up @@ -156,6 +170,21 @@ export const MetadataPanel = ({
);
};

const animationProps: Transition = {
transition: {
duration: 0.2,
},
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
exit: {
opacity: 0,
},
};

const PanelInner = ({
datasetIri,
dataSource,
Expand Down Expand Up @@ -217,8 +246,20 @@ const PanelInner = ({
/>
</TabList>

<TabPanelGeneral datasetIri={datasetIri} dataSource={dataSource} />
<TabPanelData dimensions={dimensions} />
<AnimatePresence>
{activeSection === "general" ? (
<MotionBox key="general-tab" {...animationProps}>
<TabPanelGeneral
datasetIri={datasetIri}
dataSource={dataSource}
/>
</MotionBox>
) : activeSection === "data" ? (
<MotionBox key="data-tab" {...animationProps}>
<TabPanelData dimensions={dimensions} />
</MotionBox>
) : null}
</AnimatePresence>
</TabContext>

<Content />
Expand Down Expand Up @@ -281,6 +322,7 @@ const TabPanelData = ({
dimensions: DimensionMetadataFragment[];
}) => {
const classes = useOtherStyles();
const { selectedDimension, setSelectedDimension } = useContext();
const [searchInput, setSearchInput] = useState("");

const filteredDimensions = useMemo(() => {
Expand All @@ -293,36 +335,100 @@ const TabPanelData = ({

return (
<TabPanel className={classes.tabPanel} value="data">
{/* Extract into a component (as it's also used in MultiFilter drawer?) */}
<Input
className={classes.search}
value={searchInput}
onChange={(e) => setSearchInput(e.target.value.toLowerCase())}
placeholder={t({
id: "select.controls.metadata.search",
message: "Jump to...",
})}
startAdornment={
<InputAdornment position="start">
<Icon name="search" size={16} />
</InputAdornment>
}
sx={{ typography: "body2" }}
/>
{filteredDimensions.map((d) => (
<Box key={d.iri}>
<Flex>
<Icon
className={classes.icon}
name={getDimensionIconName(d.__typename)}
<AnimatePresence exitBeforeEnter={true}>
{selectedDimension ? (
<MotionBox key="dimension-selected" {...animationProps}>
<BackButton onClick={() => setSelectedDimension(undefined)}>
<Trans id="button.back">Back</Trans>
</BackButton>
<Box sx={{ mt: 4 }}>
<TabPanelDataDimension
dim={selectedDimension}
expandable={false}
/>
</Box>
</MotionBox>
) : (
<MotionBox
key="dimension-not-selected"
className={classes.tabPanelContent}
{...animationProps}
>
{/* Extract into a component (as it's also used in MultiFilter drawer?) */}
<Input
className={classes.search}
value={searchInput}
onChange={(e) => setSearchInput(e.target.value.toLowerCase())}
placeholder={t({
id: "select.controls.metadata.search",
message: "Jump to...",
})}
startAdornment={
<InputAdornment position="start">
<Icon name="search" size={16} />
</InputAdornment>
}
sx={{ typography: "body2" }}
/>
<Typography variant="body2" fontWeight="bold">
{d.label}
</Typography>
</Flex>
<Typography variant="body2">{d.description}</Typography>
</Box>
))}
{filteredDimensions.map((d) => (
<TabPanelDataDimension key={d.iri} dim={d} expandable={true} />
))}
</MotionBox>
)}
</AnimatePresence>
</TabPanel>
);
};

const TabPanelDataDimension = ({
dim,
expandable,
}: {
dim: DimensionMetadataFragment;
expandable: boolean;
}) => {
const classes = useOtherStyles();
const { setSelectedDimension } = useContext();
const { description, showExpandButton } = React.useMemo(() => {
if (dim.description && expandable) {
if (dim.description.length > 180) {
return {
description: dim.description.slice(0, 180) + "…",
showExpandButton: true,
};
}
}

return {
description: dim.description,
showExpandButton: false,
};
}, [dim.description, expandable]);
const iconName = React.useMemo(() => {
return getDimensionIconName(dim.__typename);
}, [dim.__typename]);

return (
<div>
<Flex>
<Icon className={classes.icon} name={iconName} />
<Typography variant="body2" fontWeight="bold">
{dim.label}
</Typography>
</Flex>
{description && <Typography variant="body2">{description}</Typography>}
{showExpandButton && (
<Button
component="a"
variant="text"
size="small"
onClick={() => setSelectedDimension(dim)}
endIcon={<SvgIcArrowRight />}
sx={{ p: 0 }}
>
Show more
</Button>
)}
</div>
);
};
2 changes: 1 addition & 1 deletion app/configurator/components/configurator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const BackContainer = ({ children }: { children: React.ReactNode }) => {
);
};

const BackButton = ({
export const BackButton = ({
children,
onClick,
}: { children: React.ReactNode } & ButtonProps) => {
Expand Down
30 changes: 15 additions & 15 deletions app/locales/de/messages.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ msgstr "Filter nach oben verschieben"
msgid "No results"
msgstr "Kein Ergebnis"

#: app/components/chart-preview.tsx:181
#: app/components/chart-preview.tsx:187
msgid "annotation.add.description"
msgstr "[ Ohne Beschreibung ]"

#: app/components/chart-preview.tsx:145
#: app/components/chart-preview.tsx:149
msgid "annotation.add.title"
msgstr "[ Ohne Titel ]"

Expand All @@ -61,9 +61,9 @@ msgstr "Alle Datensätze"
msgid "browse.datasets.description"
msgstr "Erkunden Sie die vom LINDAS Linked Data Service bereitgestellten Datensätze, indem Sie entweder nach Kategorien oder Organisationen filtern oder direkt nach bestimmten Stichworten suchen. Klicken Sie auf einen Datensatz, um detailliertere Informationen zu erhalten und Ihre eigenen Visualisierungen zu erstellen."

#: app/configurator/components/stepper.tsx:65
#~ msgid "button.back"
#~ msgstr "Zurück"
#: app/components/metadata-panel.tsx:318
msgid "button.back"
msgstr "Zurück"

#: app/pages/v/[chartId].tsx:166
msgid "button.copy.visualization"
Expand Down Expand Up @@ -445,16 +445,16 @@ msgstr "Italienisch"
msgid "controls.measure"
msgstr "Messwert"

#: app/components/metadata-panel.tsx:228
#: app/components/metadata-panel.tsx:240
#: app/components/metadata-panel.tsx:251
#: app/components/metadata-panel.tsx:263
msgid "controls.metadata-panel.metadata"
msgstr "Metadata"

#: app/components/metadata-panel.tsx:208
#: app/components/metadata-panel.tsx:231
msgid "controls.metadata-panel.section.data"
msgstr "Daten"

#: app/components/metadata-panel.tsx:198
#: app/components/metadata-panel.tsx:221
msgid "controls.metadata-panel.section.general"
msgstr "Allgemeines"

Expand Down Expand Up @@ -761,7 +761,7 @@ msgstr "Cube IRI"
msgid "data.source"
msgstr "Datenquelle"

#: app/components/chart-published.tsx:159
#: app/components/chart-published.tsx:163
msgid "data.source.notTrusted"
msgstr "Dieses Diagramm verwendet keine vertrauenswürdige Datenquelle."

Expand All @@ -781,7 +781,7 @@ msgstr "Datensatz"
msgid "dataset.footnotes.updated"
msgstr "Neuestes Update"

#: app/components/chart-published.tsx:168
#: app/components/chart-published.tsx:172
msgid "dataset.hasImputedValues"
msgstr "Einige Daten in diesem Datensatz fehlen und wurden interpoliert, um die Lücken zu füllen."

Expand Down Expand Up @@ -826,13 +826,13 @@ msgstr "Relevanz"
msgid "dataset.order.title"
msgstr "Titel"

#: app/components/chart-preview.tsx:112
#: app/components/chart-published.tsx:137
#: app/components/chart-preview.tsx:116
#: app/components/chart-published.tsx:141
#: app/configurator/components/dataset-preview.tsx:120
msgid "dataset.publicationStatus.draft.warning"
msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"

#: app/components/chart-published.tsx:148
#: app/components/chart-published.tsx:152
msgid "dataset.publicationStatus.expires.warning"
msgstr "Achtung, dieser Datensatz ist abgelaufen.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"

Expand Down Expand Up @@ -1019,7 +1019,7 @@ msgstr "visualize.admin.ch"
msgid "select.controls.filters.search"
msgstr "Suche"

#: app/components/metadata-panel.tsx:295
#: app/components/metadata-panel.tsx:329
msgid "select.controls.metadata.search"
msgstr "Springen zu..."

Expand Down
Loading

0 comments on commit a12389d

Please sign in to comment.