From 9543cdf998d45041663020f7b1306ba2a7482ec7 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Wed, 25 Aug 2021 13:31:14 +0600 Subject: [PATCH] [catalog/resource page][l]: implemented resource page with core Table component. --- .../catalog/components/resource/About.tsx | 55 ++++++++++++++++++- .../catalog/components/resource/Preview.tsx | 32 +++++++++++ .../resource/{DataExplorer.tsx => View.tsx} | 17 +++--- examples/catalog/graphql/queries.ts | 31 +++++++++++ .../[org]/[dataset]/r/[resource]/index.tsx | 9 ++- 5 files changed, 128 insertions(+), 16 deletions(-) create mode 100644 examples/catalog/components/resource/Preview.tsx rename examples/catalog/components/resource/{DataExplorer.tsx => View.tsx} (52%) diff --git a/examples/catalog/components/resource/About.tsx b/examples/catalog/components/resource/About.tsx index 16b358b6..ecbd7626 100644 --- a/examples/catalog/components/resource/About.tsx +++ b/examples/catalog/components/resource/About.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/display-name */ import { useQuery } from '@apollo/react-hooks'; +import * as timeago from 'timeago.js'; import { ErrorMessage } from '../_shared'; import { GET_DATASET_QUERY } from '../../graphql/queries'; -import { ResourceInfo } from 'portal'; const About: React.FC<{ variables: any }> = ({ variables }) => { const { loading, error, data } = useQuery(GET_DATASET_QUERY, { @@ -21,7 +21,58 @@ const About: React.FC<{ variables: any }> = ({ variables }) => { (item) => item.name === variables.resource ); - return ; + const stats = [ + { name: 'File', stat: resource.title || resource.name }, + { name: 'Description', stat: resource.description || 'N/A' }, + { name: 'Size', stat: resource.size || 'N/A' }, + { + name: 'Created', + stat: resource.created && timeago.format(resource.created), + }, + { + name: 'Updated', + stat: resource.updated && timeago.format(resource.updated), + }, + { name: 'Download', stat: resource.path, link: true }, + ]; + + return ( + <> +
+

+ {result.title || result.name} +

+
+
+
+ {stats.map((item) => ( +
+
+ {item.name} +
+
+ {item.link ? ( + + {resource.format || 'Click'} + + ) : ( + item.stat + )} +
+
+ ))} +
+
+ + ); }; export default About; diff --git a/examples/catalog/components/resource/Preview.tsx b/examples/catalog/components/resource/Preview.tsx new file mode 100644 index 00000000..163c4609 --- /dev/null +++ b/examples/catalog/components/resource/Preview.tsx @@ -0,0 +1,32 @@ +import { useQuery } from '@apollo/react-hooks'; +import { PlotlyChart, Table } from 'portal'; +import { ErrorMessage } from '../_shared'; +import { GET_DATASTORE_DATA } from '../../graphql/queries'; + +const Preview: React.FC<{ view: any }> = ({ view }) => { + const variables = { + resource_id: view.resources, + }; + const { loading, error, data } = useQuery(GET_DATASTORE_DATA, { + variables, + // Setting this value to true will make the component rerender when + // the "networkStatus" changes, so we are able to know if it is fetching + // more data + notifyOnNetworkStatusChange: true, + }); + + if (error) return ; + if (loading) return
Loading
; + + const { result } = data.datastore; + + // Assuming for now it is always a table view + const columns = result.fields.map((field) => ({ + field: field.id, + headerName: field.id, + })); + + return ; +}; + +export default Preview; diff --git a/examples/catalog/components/resource/DataExplorer.tsx b/examples/catalog/components/resource/View.tsx similarity index 52% rename from examples/catalog/components/resource/DataExplorer.tsx rename to examples/catalog/components/resource/View.tsx index 264b408c..34d70c15 100644 --- a/examples/catalog/components/resource/DataExplorer.tsx +++ b/examples/catalog/components/resource/View.tsx @@ -1,9 +1,10 @@ import { useQuery } from '@apollo/react-hooks'; +import Preview from './Preview'; import { ErrorMessage } from '../_shared'; -import { GET_DATASET_QUERY } from '../../graphql/queries'; +import { GET_RESOURCE_VIEWS } from '../../graphql/queries'; -const DataExplorer: React.FC<{ variables: any }> = ({ variables }) => { - const { loading, error, data } = useQuery(GET_DATASET_QUERY, { +const View: React.FC<{ variables: any }> = ({ variables }) => { + const { loading, error, data } = useQuery(GET_RESOURCE_VIEWS, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching @@ -14,12 +15,10 @@ const DataExplorer: React.FC<{ variables: any }> = ({ variables }) => { if (error) return ; if (loading) return
Loading
; - const { result } = data.dataset; - const resource = result.resources.find( - (item) => item.name === variables.resource - ); + const { result } = data.views; + const previews = result.map((view) => ); - return <>{JSON.stringify(resource)}; + return <>{previews}; }; -export default DataExplorer; +export default View; diff --git a/examples/catalog/graphql/queries.ts b/examples/catalog/graphql/queries.ts index a5c37edf..1fe9130b 100644 --- a/examples/catalog/graphql/queries.ts +++ b/examples/catalog/graphql/queries.ts @@ -1,5 +1,35 @@ import gql from 'graphql-tag'; +export const GET_RESOURCE_VIEWS = gql` + query views($id: String) { + views(id: $id) @rest(type: "Response", path: "resource_view_list?{args}") { + result @type(name: "View") { + id + title + description + resources: resource_id + viewType: view_type + series + group + type: graph_type + } + } + } +`; + +export const GET_DATASTORE_DATA = gql` + query datastore($resource_id: String) { + datastore(resource_id: $resource_id) + @rest(type: "Response", path: "datastore_search?{args}") { + result { + count: total + fields + records + } + } + } +`; + export const GET_ORG_QUERY = gql` query org($id: String) { org(id: $id) @rest(type: "Response", path: "organization_show?{args}") { @@ -27,6 +57,7 @@ export const GET_DATASET_QUERY = gql` created: metadata_created updated: metadata_modified resources { + id name title description diff --git a/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx b/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx index f09113c1..1e49dcb0 100644 --- a/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx +++ b/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx @@ -4,7 +4,8 @@ import Head from 'next/head'; import { initializeApollo } from '../../../../../lib/apolloClient'; import Nav from '../../../../../components/home/Nav'; import About from '../../../../../components/resource/About'; -import DataExplorer from '../../../../../components/resource/DataExplorer'; +import View from '../../../../../components/resource/View'; +import Footer from '../../../../../components/home/Footer'; import { GET_DATASET_QUERY } from '../../../../../graphql/queries'; const Resource: React.FC<{ variables: any }> = ({ variables }) => { @@ -24,11 +25,9 @@ const Resource: React.FC<{ variables: any }> = ({ variables }) => {