Skip to content

Commit

Permalink
Merge pull request #3550 from ingef/update-concept-tree-node-styles
Browse files Browse the repository at this point in the history
Refactor concept search and concept tree list
  • Loading branch information
Kadrian authored Sep 7, 2024
2 parents e871d72 + cba386c commit 7254523
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 38 deletions.
35 changes: 18 additions & 17 deletions frontend/src/js/concept-trees/ConceptTreeList.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import styled from "@emotion/styled";
import { FC, useMemo } from "react";
import { useMemo } from "react";
import { useSelector } from "react-redux";

import type { DatasetT } from "../api/types";
import type { StateT } from "../app/reducers";

import tw from "tailwind-styled-components";
import ConceptTreeListItem from "./ConceptTreeListItem";
import ConceptTreesLoading from "./ConceptTreesLoading";
import ConceptsProgressBar from "./ConceptsProgressBar";
Expand All @@ -18,26 +18,27 @@ import { useRootConceptIds } from "./useRootConceptIds";
@param show For historic reasons, it was necessary to only hide / show the concept tree list,
instead of mounting / unmounting it. Maybe we can remove this in the future.
*/
const Root = styled("div")<{ show?: boolean }>`
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 10px 0;
white-space: nowrap;
margin-bottom: 10px;
display: ${({ show }) => (show ? "initial" : "none")};
const Root = tw("div")<{ $show?: boolean }>`
flex-grow
shrink-0
basis-0
px-[10px]
overflow-y-auto
whitespace-nowrap
mb-[10px]
${({ $show }) => ($show ? "block" : "hidden")}
`;

interface PropsT {
const ConceptTreeList = ({
datasetId,
}: {
datasetId: DatasetT["id"] | null;
}

const ConceptTreeList: FC<PropsT> = ({ datasetId }) => {
}) => {
const trees = useSelector<StateT, TreesT>(
(state) => state.conceptTrees.trees,
);

const loading = useSelector<StateT, boolean>(
(state) => state.conceptTrees.loading,
);
Expand Down Expand Up @@ -69,7 +70,7 @@ const ConceptTreeList: FC<PropsT> = ({ datasetId }) => {
if (search.loading) return null;

return (
<Root show={activeTab === "conceptTrees"}>
<Root $show={activeTab === "conceptTrees"}>
{loading && <ConceptTreesLoading />}
{!loading && !areTreesAvailable && !areDatasetsPristineOrLoading && (
<EmptyConceptTreeList />
Expand Down
16 changes: 6 additions & 10 deletions frontend/src/js/concept-trees/ConceptTreeListItem.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { FC } from "react";

import type { ConceptIdT } from "../api/types";

import ConceptTree from "./ConceptTree";
Expand All @@ -8,18 +6,16 @@ import { getConceptById } from "./globalTreeStoreHelper";
import type { SearchT, TreesT } from "./reducer";
import { isNodeInSearchResult } from "./selectors";

interface PropsT {
trees: TreesT;
conceptId: ConceptIdT;
search: SearchT;
onLoadTree: (id: string) => void;
}

const ConceptTreeListItem: FC<PropsT> = ({
const ConceptTreeListItem = ({
trees,
conceptId,
search,
onLoadTree,
}: {
trees: TreesT;
conceptId: ConceptIdT;
search: SearchT;
onLoadTree: (id: string) => void;
}) => {
const tree = trees[conceptId];

Expand Down
9 changes: 3 additions & 6 deletions frontend/src/js/concept-trees/globalTreeStoreHelper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,10 @@ export const globalSearch = async (trees: TreesT, query: string) => {
//
// TODO: Refactor the state and keep both root trees as well as concept trees in a single format
// Then simply use that here
const formattedTrees = Object.keys(trees).reduce<
Record<string, Record<string, ConceptT>>
>((all, key) => {
all[key] = { [key]: trees[key] };
const formattedTrees = Object.fromEntries(
Object.keys(trees).map((key) => [key, { [key]: trees[key] }]),
);

return all;
}, {});
const combinedTrees = Object.assign({}, formattedTrees, window.conceptTrees);

const result = Object.keys(combinedTrees)
Expand Down
3 changes: 0 additions & 3 deletions frontend/src/js/query-node-editor/FilterListMultiSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,6 @@ const FilterListMultiSelect: FC<PropsT> = ({
(resolvedResponse.resolvedFilter?.value?.length || 0) > 0 ||
resolvedResponse.unknownCodes.length > 0;

console.log("hasSomethingToInsert", hasSomethingToInsert);
console.log("resolvedResponse", resolvedResponse);

if (!hasSomethingToInsert) return;

const value = includeUnresolved
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const Template: Story<
},
]);
const onLoad = (str: string) => {
console.log("ONLOAD MORE WITH ", str);
setLoading(true);
setTimeout(() => {
setOptions((opts) => {
Expand All @@ -52,7 +51,6 @@ const Template: Story<
};

const onResolve = (csvLines: string[]) => {
console.log(csvLines);
setValue(csvLines.map((line) => ({ value: line, label: line })));
};

Expand Down

0 comments on commit 7254523

Please sign in to comment.