From 12458eb03299148f50beac3a4d0bd8bd35f6f70d Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 3 Jun 2022 15:26:49 -0400 Subject: [PATCH 1/4] add sample metadata author and year --- app/src/pages/explorer/sample/sample.html | 48 ++++++++++++----------- app/src/pages/explorer/sample/sample.js | 12 ++++++ 2 files changed, 38 insertions(+), 22 deletions(-) diff --git a/app/src/pages/explorer/sample/sample.html b/app/src/pages/explorer/sample/sample.html index 8ddf6af1..fb8bb482 100644 --- a/app/src/pages/explorer/sample/sample.html +++ b/app/src/pages/explorer/sample/sample.html @@ -3,59 +3,63 @@
-
-

Sample ID: {{ this.$route.params.label.toUpperCase() }}

-
- {{ header.sample_label.toUpperCase() }} - {{ header.process_label.toUpperCase() }} -
DOI: {{ header.DOI }}
-
-
-
+
+
+

+ {{`${header.sample_label.toUpperCase()} ${header.process_label.toUpperCase()}`}} +

+
+

Metadata:

+
+

Author: {{ sampleAuthor }}

+

Year: {{ sampleYear }}

+

DOI: {{ header.DOI }}

+

{{`Sample ID: ${this.$route.params.label.toUpperCase()}`}}

+

Material Components and Attributes:

  • Class: {{ material.class }}
  • Role: {{ material.role }}
  • - {{ property.type }}: - {{ property.value }} - {{ property.units }} + {{`${property.type}: ${property.value} ${property.units.toLowerCase()}`}}
- +

Sample Images

- +
- +

Curated Properties of Nanocomposite Sample

Scalar attributes:
  • - {{ property.type }}: - {{ property.value }} - {{ property.units }} + {{`${property.type}: ${property.value} ${property.units.toLowerCase()}` }}
- +

Curated Processing Steps and Parameters

Class: {{ processLabel }}
Processing Steps:
  • - {{ step.parameterLabel }} - {{ step.description }} + {{ step.parameterLabel }} | {{ step.description }}
- +

Other Samples from this Research Article

diff --git a/app/src/pages/explorer/sample/sample.js b/app/src/pages/explorer/sample/sample.js index e39807f6..ddbaea19 100644 --- a/app/src/pages/explorer/sample/sample.js +++ b/app/src/pages/explorer/sample/sample.js @@ -163,6 +163,18 @@ export default { } }, + computed: { + sampleId () { + return this.$route.params.label + }, + sampleYear () { + return this.$route.params.label.split('-').pop() + }, + sampleAuthor () { + return this.$route.params.label.split('-').slice(0, -1).pop() + } + }, + watch: { $route: 'fetchSamplePageData' }, From 5eb64b4039580d6028f39ba523c7ae1035430f6e Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 17 Jun 2022 12:49:39 -0400 Subject: [PATCH 2/4] add nullish coalesing --- app/src/pages/explorer/sample/sample.html | 2 +- app/src/pages/explorer/sample/sample.js | 230 +++++++++++----------- 2 files changed, 119 insertions(+), 113 deletions(-) diff --git a/app/src/pages/explorer/sample/sample.html b/app/src/pages/explorer/sample/sample.html index fb8bb482..e0456d6b 100644 --- a/app/src/pages/explorer/sample/sample.html +++ b/app/src/pages/explorer/sample/sample.html @@ -11,7 +11,7 @@

{{`${header.sample_label.toUpperCase()} ${header.process_label.toUpperCase()}`}}

-

Metadata:

+

Metadata:

Author: {{ sampleAuthor }}

Year: {{ sampleYear }}

diff --git a/app/src/pages/explorer/sample/sample.js b/app/src/pages/explorer/sample/sample.js index ddbaea19..a6c543a8 100644 --- a/app/src/pages/explorer/sample/sample.js +++ b/app/src/pages/explorer/sample/sample.js @@ -1,13 +1,13 @@ -import { querySparql, parseSparql } from '@/modules/sparql' -import sampleQueries from '@/modules/queries/sampleQueries' -import Spinner from '@/components/Spinner' +import { querySparql, parseSparql } from "@/modules/sparql"; +import sampleQueries from "@/modules/queries/sampleQueries"; +import Spinner from "@/components/Spinner"; export default { - name: 'SampleView', + name: "SampleView", components: { - Spinner + Spinner, }, - data () { + data() { return { header: null, materialComponents: null, @@ -16,115 +16,121 @@ export default { processingSteps: null, sampleImages: null, otherSamples: null, - loading: false - } + loading: false, + }; }, methods: { - async fetchData (query) { - const sampleId = this.$route.params.label - return await querySparql(query(sampleId)) + async fetchData(query) { + const sampleId = this.$route.params.label; + return await querySparql(query(sampleId)); }, - parseHeader (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null - const [sampleData] = parsedData - return sampleData + parseHeader(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; + const [sampleData] = parsedData; + return sampleData; }, - parseOtherSamples (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null - const links = parsedData.map(({ sample }) => sample.split('/').pop()) - return links + parseOtherSamples(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; + const links = parsedData.map(({ sample }) => sample.split("/").pop()); + return links; }, - parseProcessLabel (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null - const [processLabelObject] = parsedData - const { process_label: processLabel } = processLabelObject - return processLabel + parseProcessLabel(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; + const [processLabelObject] = parsedData; + const { process_label: processLabel } = processLabelObject; + return processLabel; }, - parseMaterialData (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null - const seen = new Set() + parseMaterialData(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; + const seen = new Set(); const filteredArr = parsedData .filter((item) => { - const duplicate = seen.has(item.std_name) - seen.add(item.std_name) - return !duplicate + const duplicate = seen.has(item.std_name); + seen.add(item.std_name); + return !duplicate; }) .map((item) => { return { class: item.std_name, - role: item.role - } - }) + role: item.role, + }; + }); filteredArr.forEach((element) => { const materialProperties = parsedData .filter((item) => item.std_name === element.class) .map((item) => { - const { attrUnits, attrValue: value, attrType } = item - const units = attrUnits || '' - const type = attrType - .split('/') - .pop() - .match(/[A-Z][a-z]+|[0-9]+/g) - .join(' ') + const { attrUnits, attrValue, attrType } = item; + const units = attrUnits ?? ""; + const value = attrValue ?? ""; + const type = + attrType + .split("/") + .pop() + .match(/[A-Z][a-z]+|[0-9]+/g) + .join(" ") ?? ""; return { type, units, - value - } - }) - element.materialProperties = materialProperties - }) - return filteredArr + value, + }; + }); + element.materialProperties = materialProperties; + }); + return filteredArr; }, - parseCuratedProperties (data) { - if (!data) return null - const parseData = parseSparql(data) - if (!parseData || parseData.length === 0) return null + parseCuratedProperties(data) { + if (!data) return null; + const parseData = parseSparql(data); + if (!parseData || parseData.length === 0) return null; const curatedProperties = parseData.map((property) => { - const { AttrType, value, Units: units } = property - const type = AttrType.split('/') - .pop() - .match(/[A-Z][a-z]+|[0-9]+/g) - .join(' ') + let { AttrType, value, Units: units } = property; + value = value ?? ""; // check for empty values + units = units ?? ""; + const type = + AttrType.split("/") + .pop() + .match(/[A-Z][a-z]+|[0-9]+/g) + .join(" ") ?? ""; + return { type, units, - value - } - }) - return curatedProperties + value, + }; + }); + return curatedProperties; }, - parseProcessingSteps (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null + parseProcessingSteps(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; const steps = parsedData.map( ({ param_label: parameterLabel, Descr: description }) => { - return { parameterLabel, description } + return { parameterLabel, description }; } - ) - return steps + ); + return steps; }, - parseSampleImages (data) { - if (!data) return null - const parsedData = parseSparql(data) - if (!parsedData || parsedData.length === 0) return null + parseSampleImages(data) { + if (!data) return null; + const parsedData = parseSparql(data); + if (!parsedData || parsedData.length === 0) return null; const images = parsedData.map((item) => { - return { src: item.image, alt: item.sample } - }) - return images + return { src: item.image, alt: item.sample }; + }); + return images; }, - async fetchSamplePageData () { - this.loading = true + async fetchSamplePageData() { + this.loading = true; await Promise.allSettled([ this.fetchData(sampleQueries.materialComponents), this.fetchData(sampleQueries.curatedProperties), @@ -132,14 +138,14 @@ export default { this.fetchData(sampleQueries.processingSteps), this.fetchData(sampleQueries.sampleImages), this.fetchData(sampleQueries.otherSamples), - this.fetchData(sampleQueries.header) + this.fetchData(sampleQueries.header), ]) .then((res) => { const data = res.map((promise) => { - if (promise.status === 'fulfilled') return promise.value - console.error(promise.reason) - return null - }) + if (promise.status === "fulfilled") return promise.value; + console.error(promise.reason); + return null; + }); const [ materialComponents, curatedProperties, @@ -147,38 +153,38 @@ export default { processingSteps, sampleImages, otherSamples, - header - ] = data - this.materialComponents = this.parseMaterialData(materialComponents) + header, + ] = data; + this.materialComponents = this.parseMaterialData(materialComponents); this.curatedProperties = - this.parseCuratedProperties(curatedProperties) - this.processLabel = this.parseProcessLabel(processLabel) - this.processingSteps = this.parseProcessingSteps(processingSteps) - this.sampleImages = this.parseSampleImages(sampleImages) - this.otherSamples = this.parseOtherSamples(otherSamples) - this.header = this.parseHeader(header) - this.loading = false + this.parseCuratedProperties(curatedProperties); + this.processLabel = this.parseProcessLabel(processLabel); + this.processingSteps = this.parseProcessingSteps(processingSteps); + this.sampleImages = this.parseSampleImages(sampleImages); + this.otherSamples = this.parseOtherSamples(otherSamples); + this.header = this.parseHeader(header); + this.loading = false; }) - .catch((e) => console.error(e)) - } + .catch((e) => console.error(e)); + }, }, computed: { - sampleId () { - return this.$route.params.label + sampleId() { + return this.$route.params.label ?? ""; + }, + sampleYear() { + return this.$route.params.label.split("-").pop() ?? ""; }, - sampleYear () { - return this.$route.params.label.split('-').pop() + sampleAuthor() { + return this.$route.params.label.split("-").slice(0, -1).pop() ?? ""; }, - sampleAuthor () { - return this.$route.params.label.split('-').slice(0, -1).pop() - } }, watch: { - $route: 'fetchSamplePageData' + $route: "fetchSamplePageData", + }, + created() { + this.fetchSamplePageData(); }, - created () { - this.fetchSamplePageData() - } -} +}; From a28f32cbda067c8564b981251dc600c966d92e3f Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 17 Jun 2022 12:50:50 -0400 Subject: [PATCH 3/4] lint code --- app/src/pages/explorer/sample/sample.js | 220 ++++++++++++------------ 1 file changed, 110 insertions(+), 110 deletions(-) diff --git a/app/src/pages/explorer/sample/sample.js b/app/src/pages/explorer/sample/sample.js index a6c543a8..0792bae9 100644 --- a/app/src/pages/explorer/sample/sample.js +++ b/app/src/pages/explorer/sample/sample.js @@ -1,13 +1,13 @@ -import { querySparql, parseSparql } from "@/modules/sparql"; -import sampleQueries from "@/modules/queries/sampleQueries"; -import Spinner from "@/components/Spinner"; +import { querySparql, parseSparql } from '@/modules/sparql' +import sampleQueries from '@/modules/queries/sampleQueries' +import Spinner from '@/components/Spinner' export default { - name: "SampleView", + name: 'SampleView', components: { - Spinner, + Spinner }, - data() { + data () { return { header: null, materialComponents: null, @@ -16,121 +16,121 @@ export default { processingSteps: null, sampleImages: null, otherSamples: null, - loading: false, - }; + loading: false + } }, methods: { - async fetchData(query) { - const sampleId = this.$route.params.label; - return await querySparql(query(sampleId)); + async fetchData (query) { + const sampleId = this.$route.params.label + return await querySparql(query(sampleId)) }, - parseHeader(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; - const [sampleData] = parsedData; - return sampleData; + parseHeader (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null + const [sampleData] = parsedData + return sampleData }, - parseOtherSamples(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; - const links = parsedData.map(({ sample }) => sample.split("/").pop()); - return links; + parseOtherSamples (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null + const links = parsedData.map(({ sample }) => sample.split('/').pop()) + return links }, - parseProcessLabel(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; - const [processLabelObject] = parsedData; - const { process_label: processLabel } = processLabelObject; - return processLabel; + parseProcessLabel (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null + const [processLabelObject] = parsedData + const { process_label: processLabel } = processLabelObject + return processLabel }, - parseMaterialData(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; - const seen = new Set(); + parseMaterialData (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null + const seen = new Set() const filteredArr = parsedData .filter((item) => { - const duplicate = seen.has(item.std_name); - seen.add(item.std_name); - return !duplicate; + const duplicate = seen.has(item.std_name) + seen.add(item.std_name) + return !duplicate }) .map((item) => { return { class: item.std_name, - role: item.role, - }; - }); + role: item.role + } + }) filteredArr.forEach((element) => { const materialProperties = parsedData .filter((item) => item.std_name === element.class) .map((item) => { - const { attrUnits, attrValue, attrType } = item; - const units = attrUnits ?? ""; - const value = attrValue ?? ""; + const { attrUnits, attrValue, attrType } = item + const units = attrUnits ?? '' + const value = attrValue ?? '' const type = attrType - .split("/") + .split('/') .pop() .match(/[A-Z][a-z]+|[0-9]+/g) - .join(" ") ?? ""; + .join(' ') ?? '' return { type, units, - value, - }; - }); - element.materialProperties = materialProperties; - }); - return filteredArr; + value + } + }) + element.materialProperties = materialProperties + }) + return filteredArr }, - parseCuratedProperties(data) { - if (!data) return null; - const parseData = parseSparql(data); - if (!parseData || parseData.length === 0) return null; + parseCuratedProperties (data) { + if (!data) return null + const parseData = parseSparql(data) + if (!parseData || parseData.length === 0) return null const curatedProperties = parseData.map((property) => { - let { AttrType, value, Units: units } = property; - value = value ?? ""; // check for empty values - units = units ?? ""; + let { AttrType, value, Units: units } = property + value = value ?? '' // check for empty values + units = units ?? '' const type = - AttrType.split("/") + AttrType.split('/') .pop() .match(/[A-Z][a-z]+|[0-9]+/g) - .join(" ") ?? ""; + .join(' ') ?? '' return { type, units, - value, - }; - }); - return curatedProperties; + value + } + }) + return curatedProperties }, - parseProcessingSteps(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; + parseProcessingSteps (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null const steps = parsedData.map( ({ param_label: parameterLabel, Descr: description }) => { - return { parameterLabel, description }; + return { parameterLabel, description } } - ); - return steps; + ) + return steps }, - parseSampleImages(data) { - if (!data) return null; - const parsedData = parseSparql(data); - if (!parsedData || parsedData.length === 0) return null; + parseSampleImages (data) { + if (!data) return null + const parsedData = parseSparql(data) + if (!parsedData || parsedData.length === 0) return null const images = parsedData.map((item) => { - return { src: item.image, alt: item.sample }; - }); - return images; + return { src: item.image, alt: item.sample } + }) + return images }, - async fetchSamplePageData() { - this.loading = true; + async fetchSamplePageData () { + this.loading = true await Promise.allSettled([ this.fetchData(sampleQueries.materialComponents), this.fetchData(sampleQueries.curatedProperties), @@ -138,14 +138,14 @@ export default { this.fetchData(sampleQueries.processingSteps), this.fetchData(sampleQueries.sampleImages), this.fetchData(sampleQueries.otherSamples), - this.fetchData(sampleQueries.header), + this.fetchData(sampleQueries.header) ]) .then((res) => { const data = res.map((promise) => { - if (promise.status === "fulfilled") return promise.value; - console.error(promise.reason); - return null; - }); + if (promise.status === 'fulfilled') return promise.value + console.error(promise.reason) + return null + }) const [ materialComponents, curatedProperties, @@ -153,38 +153,38 @@ export default { processingSteps, sampleImages, otherSamples, - header, - ] = data; - this.materialComponents = this.parseMaterialData(materialComponents); + header + ] = data + this.materialComponents = this.parseMaterialData(materialComponents) this.curatedProperties = - this.parseCuratedProperties(curatedProperties); - this.processLabel = this.parseProcessLabel(processLabel); - this.processingSteps = this.parseProcessingSteps(processingSteps); - this.sampleImages = this.parseSampleImages(sampleImages); - this.otherSamples = this.parseOtherSamples(otherSamples); - this.header = this.parseHeader(header); - this.loading = false; + this.parseCuratedProperties(curatedProperties) + this.processLabel = this.parseProcessLabel(processLabel) + this.processingSteps = this.parseProcessingSteps(processingSteps) + this.sampleImages = this.parseSampleImages(sampleImages) + this.otherSamples = this.parseOtherSamples(otherSamples) + this.header = this.parseHeader(header) + this.loading = false }) - .catch((e) => console.error(e)); - }, + .catch((e) => console.error(e)) + } }, computed: { - sampleId() { - return this.$route.params.label ?? ""; + sampleId () { + return this.$route.params.label ?? '' }, - sampleYear() { - return this.$route.params.label.split("-").pop() ?? ""; - }, - sampleAuthor() { - return this.$route.params.label.split("-").slice(0, -1).pop() ?? ""; + sampleYear () { + return this.$route.params.label.split('-').pop() ?? '' }, + sampleAuthor () { + return this.$route.params.label.split('-').slice(0, -1).pop() ?? '' + } }, watch: { - $route: "fetchSamplePageData", - }, - created() { - this.fetchSamplePageData(); + $route: 'fetchSamplePageData' }, -}; + created () { + this.fetchSamplePageData() + } +} From d50c814c55ce31eefe0884d285227d07e0976aaf Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Fri, 17 Jun 2022 16:36:07 -0400 Subject: [PATCH 4/4] add container to metadata and user computed sampleId --- app/src/pages/explorer/sample/sample.html | 16 +++++++++------- app/src/pages/explorer/sample/sample.js | 3 +-- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/src/pages/explorer/sample/sample.html b/app/src/pages/explorer/sample/sample.html index e0456d6b..39f8c8f6 100644 --- a/app/src/pages/explorer/sample/sample.html +++ b/app/src/pages/explorer/sample/sample.html @@ -11,13 +11,15 @@

{{`${header.sample_label.toUpperCase()} ${header.process_label.toUpperCase()}`}}

-

Metadata:

-
-

Author: {{ sampleAuthor }}

-

Year: {{ sampleYear }}

-

DOI: {{ header.DOI }}

-

{{`Sample ID: ${this.$route.params.label.toUpperCase()}`}}

-
+

Material Components and Attributes:

    diff --git a/app/src/pages/explorer/sample/sample.js b/app/src/pages/explorer/sample/sample.js index 0792bae9..58474c2b 100644 --- a/app/src/pages/explorer/sample/sample.js +++ b/app/src/pages/explorer/sample/sample.js @@ -21,8 +21,7 @@ export default { }, methods: { async fetchData (query) { - const sampleId = this.$route.params.label - return await querySparql(query(sampleId)) + return await querySparql(query(this.sampleId)) }, parseHeader (data) { if (!data) return null