Merge branch '#267'

tetherless-world · Nov 5, 2020 · 86cad80 · 86cad80
2 parents 8b0b2eb + 7d8869f
commit 86cad80
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 39 deletions.
diff --git a/gui/src/kg/components/kg/search/KgSearchFacetsGrid.tsx b/gui/src/kg/components/kg/search/KgSearchFacetsGrid.tsx
@@ -18,15 +18,17 @@ import {StringFacetForm} from "kg/components/kg/search/StringFacetForm";
 import {KgSource} from "shared/models/kg/source/KgSource";
 import {resolveSourceId} from "shared/models/kg/source/resolveSourceId";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import {KgSourcePill} from "shared/components/kg/source/KgSourcePill";
 
 const FacetAccordion: React.FunctionComponent<{
   children: React.ReactNode;
+  defaultExpanded?: boolean;
   id: string;
   title: string;
-}> = ({children, id, title}) => {
+}> = ({children, defaultExpanded, id, title}) => {
   return (
     <Grid item className="facet" data-cy={id + "-facet"}>
-      <Accordion>
+      <Accordion defaultExpanded={defaultExpanded}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           {title}
         </AccordionSummary>
@@ -114,7 +116,7 @@ export const KgSearchFacetsGrid: React.FunctionComponent<{
         </FacetAccordion>
       </Grid>
       <Grid item>
-        <FacetAccordion id="sources" title="Sources">
+        <FacetAccordion defaultExpanded={true} id="sources" title="Sources">
           <StringFacetForm
             currentState={
               query.filters && query.filters.sourceIds
@@ -124,6 +126,7 @@ export const KgSearchFacetsGrid: React.FunctionComponent<{
             onChange={(newState) =>
               onChangeFilter((filters) => (filters.sourceIds = newState))
             }
+            renderValueLabel={(value) => <KgSourcePill source={value} />}
             valueUniverse={facets.sourceIds.map((sourceId) => ({
               count: sourceId.count,
               id: sourceId.value,

diff --git a/gui/src/kg/components/kg/search/KgSearchResultsTable.tsx b/gui/src/kg/components/kg/search/KgSearchResultsTable.tsx
@@ -10,6 +10,10 @@ import {KgSearchResultLink} from "shared/components/kg/search/KgSearchResultLink
 import {getKgSearchResultLabel} from "shared/models/kg/search/getKgSearchResultLabel";
 import {getKgSearchResultSourceIds} from "shared/models/kg/search/getKgSearchResultSourceIds";
 import {resolveSourceId} from "shared/models/kg/source/resolveSourceId";
+import {kgId} from "shared/api/kgId";
+import {useHistory} from "react-router-dom";
+import {Hrefs} from "shared/Hrefs";
+import {HrefsContext} from "shared/HrefsContext";
 
 // const showListAsColumn = (list: string[]) =>
 //   list.map((item) => (
@@ -40,6 +44,9 @@ export const KgSearchResultsTable: React.FunctionComponent<{
   rowsPerPage,
   title,
 }) => {
+  const history = useHistory();
+  const hrefs = React.useContext<Hrefs>(HrefsContext);
+
   // https://github.com/gregnb/mui-datatables/issues/756
   // Since the MUIDataTable has its own state, it ignores passed in values
   // for page and rowsPerPage
@@ -153,8 +160,15 @@ export const KgSearchResultsTable: React.FunctionComponent<{
                   .map((sourceId) => resolveSourceId({allSources, sourceId}))
                   .map((source, sourceIndex) => (
                     <span data-cy={`source-${sourceIndex}`} key={source.id}>
-                      <KgSourcePill source={source} />
-                      <br />
+                      <KgSourcePill
+                        idOnly={true}
+                        onClick={() => {
+                          history.push(
+                            hrefs.kg({id: kgId}).source({sourceId: source.id})
+                          );
+                        }}
+                        source={source}
+                      />
                     </span>
                   ))
               : null;
@@ -201,6 +215,8 @@ export const KgSearchResultsTable: React.FunctionComponent<{
           onChangePage,
           onChangeRowsPerPage,
           onColumnSortChange,
+          print: false,
+          search: false,
           selectableRows: "none",
           serverSide: true,
           setRowProps(_, rowIndex) {

diff --git a/gui/src/kg/components/kg/search/StringFacetForm.tsx b/gui/src/kg/components/kg/search/StringFacetForm.tsx
@@ -3,19 +3,26 @@ import {StringFilter} from "shared/models/kg/search/StringFilter";
 import {invariant} from "ts-invariant";
 import {Checkbox, FormControlLabel, List, ListItem} from "@material-ui/core";
 
+interface StringFacetValue {
+  count: number;
+  id: string;
+  label: string;
+}
+
 export const StringFacetForm: React.FunctionComponent<{
   currentState?: StringFilter; // value id's only
   onChange: (newState?: StringFilter) => void;
-  valueUniverse: readonly {
-    count: number;
-    id: string;
-    label: string;
-  }[];
-}> = ({currentState, onChange, valueUniverse}) => {
+  renderValueLabel?: (value: StringFacetValue) => React.ReactNode;
+  valueUniverse: readonly StringFacetValue[];
+}> = ({currentState, onChange, renderValueLabel, valueUniverse}) => {
   if (valueUniverse.length === 0) {
     return null;
   }
 
+  if (!renderValueLabel) {
+    renderValueLabel = (value) => value.label;
+  }
+
   // Build sets of the excludeValueIdSet and includeValueIdSet values to avoid repeatedly iterating over the arrays.
   const excludeValueIdSet: Set<string> =
     currentState && currentState.exclude
@@ -101,7 +108,7 @@ export const StringFacetForm: React.FunctionComponent<{
                 />
               }
               data-cy={"facet-value-" + value.id}
-              label={value.label}
+              label={renderValueLabel!(value)}
             />
           </ListItem>
         );

diff --git a/gui/src/shared/components/kg/node/KgNodeContextEdgesGrid.tsx b/gui/src/shared/components/kg/node/KgNodeContextEdgesGrid.tsx
@@ -16,7 +16,7 @@ import {
   KgNodeContextTopEdge,
 } from "shared/models/kg/node/KgNodeContext";
 import {resolveSourceIds} from "shared/models/kg/source/resolveSourceIds";
-import {Link} from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import {Hrefs} from "shared/Hrefs";
 import {kgId} from "shared/api/kgId";
 import {KgSourcePill} from "shared/components/kg/source/KgSourcePill";
@@ -67,6 +67,7 @@ export const KgNodeContextEdgesGrid: React.FunctionComponent<{
   nodeContext: KgNodeContext;
 }> = ({allSources, nodeContext}) => {
   const classes = useStyles();
+  const history = useHistory();
   const hrefs = React.useContext<Hrefs>(HrefsContext);
 
   const relatedNodeLabelsByNodeId: {
@@ -150,6 +151,11 @@ export const KgNodeContextEdgesGrid: React.FunctionComponent<{
                   <KgSourcePill
                     idOnly={true}
                     key={source.id}
+                    onClick={() => {
+                      history.push(
+                        hrefs.kg({id: kgId}).source({sourceId: source.id})
+                      );
+                    }}
                     source={source}
                     size="small"
                   />

diff --git a/gui/src/shared/components/kg/node/KgNodeSourcesCard.tsx b/gui/src/shared/components/kg/node/KgNodeSourcesCard.tsx
@@ -8,20 +8,36 @@ import {
 } from "@material-ui/core";
 import {KgSourcePill} from "shared/components/kg/source/KgSourcePill";
 import * as React from "react";
+import {kgId} from "shared/api/kgId";
+import {useHistory} from "react-router-dom";
+import {Hrefs} from "shared/Hrefs";
+import {HrefsContext} from "shared/HrefsContext";
 
 export const KgNodeSourcesCard: React.FunctionComponent<{
   nodeSources: readonly KgSource[];
-}> = ({nodeSources}) => (
-  <Card>
-    <CardHeader title="Source(s)"></CardHeader>
-    <CardContent>
-      <List>
-        {nodeSources.map((source) => (
-          <ListItemText data-cy="node-source" key={source.id}>
-            <KgSourcePill source={source} />
-          </ListItemText>
-        ))}
-      </List>
-    </CardContent>
-  </Card>
-);
+}> = ({nodeSources}) => {
+  const history = useHistory();
+  const hrefs = React.useContext<Hrefs>(HrefsContext);
+
+  return (
+    <Card>
+      <CardHeader title="Source(s)"></CardHeader>
+      <CardContent>
+        <List>
+          {nodeSources.map((source) => (
+            <ListItemText data-cy="node-source" key={source.id}>
+              <KgSourcePill
+                onClick={() => {
+                  history.push(
+                    hrefs.kg({id: kgId}).source({sourceId: source.id})
+                  );
+                }}
+                source={source}
+              />
+            </ListItemText>
+          ))}
+        </List>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/gui/src/shared/components/kg/node/KgNodesTable.tsx b/gui/src/shared/components/kg/node/KgNodesTable.tsx
@@ -4,7 +4,7 @@ import MUIDataTable, {MUIDataTableColumn} from "mui-datatables";
 import {resolveSourceId} from "shared/models/kg/source/resolveSourceId";
 import {KgSourcePill} from "shared/components/kg/source/KgSourcePill";
 import {List, ListItem, ListItemText} from "@material-ui/core";
-import {Link} from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import {Hrefs} from "shared/Hrefs";
 import {kgId} from "shared/api/kgId";
 import {HrefsContext} from "shared/HrefsContext";
@@ -19,6 +19,7 @@ export const KgNodesTable: React.FunctionComponent<{
     sourceIds: readonly string[];
   }[];
 }> = ({allSources, nodes}) => {
+  const history = useHistory();
   const hrefs = React.useContext<Hrefs>(HrefsContext);
 
   const columns: MUIDataTableColumn[] = React.useMemo(
@@ -106,7 +107,14 @@ export const KgNodesTable: React.FunctionComponent<{
                   .map((sourceId) => resolveSourceId({allSources, sourceId}))
                   .map((source, sourceIndex) => (
                     <span data-cy={`source-${sourceIndex}`} key={source.id}>
-                      <KgSourcePill source={source} />
+                      <KgSourcePill
+                        onClick={() => {
+                          history.push(
+                            hrefs.kg({id: kgId}).source({sourceId: source.id})
+                          );
+                        }}
+                        source={source}
+                      />
                       <br />
                     </span>
                   ))
@@ -138,8 +146,11 @@ export const KgNodesTable: React.FunctionComponent<{
         columns={columns}
         data={data}
         options={{
+          filter: false,
           download: false,
+          print: false,
           rowsPerPage: 15,
+          search: false,
           selectableRows: "none",
           setRowProps(_, rowIndex) {
             return {"data-cy": "node-" + rowIndex};

diff --git a/gui/src/shared/components/kg/source/KgSourcePill.tsx b/gui/src/shared/components/kg/source/KgSourcePill.tsx
@@ -1,30 +1,20 @@
 import * as React from "react";
 import {KgSource} from "shared/models/kg/source/KgSource";
 import {Chip, ChipProps} from "@material-ui/core";
-import {useHistory} from "react-router-dom";
-import {Hrefs} from "shared/Hrefs";
-import {kgId} from "shared/api/kgId";
 import * as d3 from "d3";
-import {HrefsContext} from "shared/HrefsContext";
 
 const colors = d3.scaleOrdinal(d3.schemeTableau10);
 
 export const KgSourcePill: React.FunctionComponent<
   {idOnly?: boolean; source: KgSource} & ChipProps
 > = ({idOnly, source, ...chipProps}) => {
-  const history = useHistory();
-  const hrefs = React.useContext<Hrefs>(HrefsContext);
-
   const color = colors(source.id);
 
   return (
     <Chip
       data-cy="source-link"
       label={idOnly ? source.id : `${source.id}: ${source.label}`}
       variant="outlined"
-      onClick={() => {
-        history.push(hrefs.kg({id: kgId}).source({sourceId: source.id}));
-      }}
       style={{color, borderColor: color, margin: "2px"}}
       {...chipProps}
     />