+ The Overview tab provides a brief description of the concept.
+ Hovering over the
+ besides the concept name displays the corresponding ontological
+ identifier, and where applicable, a link to the entry on the ontology's website.
+
+ The Studies tab displays studies referencing or researching the concept.
+ Studies are grouped into { studySources.length } categories:
+ { studySources.map((source, i) => (
+
+ { i === studySources.length - 1 ? "and " : ""}
+ { source }
+ { i !== studySources.length - 1 ? ", " : ". " }
+
+ )) }
+ By default, all studies are shown, but categories can be filtered
+ out by clicking on them. You can also click on studies to view which of their variables are
+ related to the concept.
+
+ The CDEs tab displays{ context.brand === "heal" ? " HEAL-approved" : "" } common data elements (CDEs)
+ associated with the concept. A CDE is a standardized question used across studies and clinical
+ trials with a precisely defined set of permissible responses to ensure consistent data collection.
+ {context.brand === "heal" ?
+ The
+ HEAL CDE program
+ provides further information.
+ : null}
+
+ The Knowledge Graphs tab displays relevant edges from the ROBOKOP Knowledge Graph
+ portion connected to the concept and containing your search terms. This section highlights
+ potential interesting knowledge graph relationships and shows terms (e.g., synonyms) that
+ would be returned as related concepts.
+
+ The Explanation tab explains why a particular concept was returned for a search. Specifically,
+ it breaks down the concept's relevance score based on information where the search query
+ was found, including the concept's name, synonyms, and related terms (as shown in the Knowledge Graphs tab).
+
+ },
+ 'tranql': {
+ title: 'TranQL',
+ icon: ,
+ content: ,
+ }
}
const links = {
'robokop' : { title: 'ROBOKOP', icon: , url: "https://robokop.renci.org/" }
@@ -207,7 +273,41 @@ export const ConceptModalBody = ({ result }) => {
}
)
}
+
+ const loadRelatedStudies = async (cdeId) => {
+ const formatCdeQuery = () => {
+ return `\
+ SELECT publication->study
+ FROM "/schema"
+ WHERE publication="${cdeId}"`
+ }
+ const tranqlUrl = context.tranql_url
+ const controller = new AbortController()
+ fetchCdesTranqlController.current.push(controller)
+ const res = await fetch(
+ `${tranqlUrl}tranql/query`,
+ {
+ headers: { 'Content-Type': 'text/plain' },
+ method: 'POST',
+ body: formatCdeQuery(),
+ signal: controller.signal
+ }
+ )
+ const message = await res.json()
+ const studies = []
+ const nodes = message.message.knowledge_graph.nodes
+ for (const [key, value] of Object.entries(nodes)) {
+ const name = value.name;
+ const urlAttribute = value.attributes.find(attr => attr.name === 'url');
+ urlAttribute && studies.push({c_id: key,
+ c_name: name,
+ c_link: urlAttribute.value});
+ }
+ return studies
+ }
+
const relatedConcepts = {}
+ const relatedStudies = {}
if (cdeData) {
const cdeIds = cdeData.elements.map((cde) => cde.id)
await Promise.all(cdeIds.map(async (cdeId, i) => {
@@ -221,10 +321,21 @@ export const ConceptModalBody = ({ result }) => {
relatedConcepts[cdeId] = null
}
}))
+ await Promise.all(cdeIds.map(async (cdeId, i) => {
+ try {
+ relatedStudies[cdeId] = await loadRelatedStudies(cdeId)
+ } catch (e) {
+ // Here, we explicitly want to halt execution and forward this error to the outer handler
+ // if a related concept request was aborted, because we now have stale data and don't want to
+ // update state with it.
+ if (e.name === "CanceledError" || e.name === "AbortError") throw e
+ }
+ }))
}
setCdes(cdeData)
/** Note that relatedConcepts are *TranQL* concepts/nodes, not DUG concepts. Both have the top level fields `id` and `name`. */
setCdeRelatedConcepts(relatedConcepts)
+ setCdeRelatedStudies(relatedStudies)
setCdesLoading(false)
} catch (e) {
// Check both because this function uses both Fetch API & Axios
@@ -248,6 +359,7 @@ export const ConceptModalBody = ({ result }) => {
setStudies([])
setCdes(null)
setCdeRelatedConcepts(null)
+ setCdeRelatedStudies(null)
setGraphs([])
getVars()
@@ -310,12 +422,25 @@ export const ConceptModalBody = ({ result }) => {
defaultSelectedKeys={ ['overview'] }
mode="inline"
theme="light"
+ className="concept-modal-tabs"
selectedKeys={ [currentTab] }
>
{
Object.keys(tabs).map(key => (
- setCurrentTab(key) }>
- { tabs[key].icon }{ tabs[key].title }
+ setCurrentTab(key) }>
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/search/concept-modal/tabs/explanation.js b/src/components/search/concept-modal/tabs/explanation.js
index 5f9bda09..c06f30c6 100644
--- a/src/components/search/concept-modal/tabs/explanation.js
+++ b/src/components/search/concept-modal/tabs/explanation.js
@@ -25,9 +25,19 @@ const palette = [
const parseScoreDetail = ({ value, description, details }) => {
if (value === 0) return null
+ // For "sum of:", relevant details contribute their own scores to a final aggregate value.
+ // (e.g., in a relevance scoring for a term over two search fields, perhaps name and description, maybe the name detail
+ // has score 5.2 and the description detail has score 3.3, then the aggregate score 8.5 will be used.)
if (description === "sum of:") {
return details.flatMap((detail) => parseScoreDetail(detail))
}
+ // For "max of:", only the detail with maximum score is used to compute the score.
+ // (e.g., in a relevance scoring for a term over two search fields, perhaps name and description, maybe the name detail
+ // has score 5.2 and the description detail has score 3.3, then the score of 5.2 will be used.)
+ if (description === "max of:") {
+ const maximalDetail = details.reduce((acc, cur) => cur.value > acc.value ? cur : acc, details[0])
+ return [parseScoreDetail(maximalDetail)]
+ }
const explainPattern = /^weight\((?.+):(?.+) in (?\d+)\) \[(?.+)\], result of:$/
const match = description.match(explainPattern)
@@ -91,16 +101,16 @@ export const ExplanationTab = ({ result }) => {
.reduce((acc, cur) => {
const { fieldMatch, termMatch, source, value } = cur
const [fieldMatchName, fieldMatchDescription] = (
- fieldMatch === "name" ? ["Name", "The name of this concept"]
- : fieldMatch === "description" ? ["Description", "The description of this concept"]
- : fieldMatch === "search_terms" ? ["Search terms", "Synonymous names for this concept"]
- : fieldMatch === "optional_terms" ? ["Related terms", "Search terms for concepts related to this concept"]
+ fieldMatch === "name" ? ["Concept Name", "Contribution to the score because the search query matched this concept's name"]
+ : fieldMatch === "description" ? ["Description", "Contribution to the score because we found the search query in this concept's description"]
+ : fieldMatch === "search_terms" ? ["Synonyms", "Contribution to the score because we found the search query in this concept's synonyms"]
+ : fieldMatch === "optional_terms" ? ["Related terms", "Contribution to the score because we found the search query among this concept's semantically related terms"]
: ["", ""]
)
- const advancedBreakdownString = ` ${ fieldMatchName.endsWith("s") ? "contain" : "contains"} the term "${ termMatch }"`
+ const advancedBreakdownString = `term "${ termMatch }"`
if (fieldMatch && termMatch) acc.push({
name: `${ fieldMatchName }`,
- description: `${ fieldMatchDescription }${ advancedBreakdown ? advancedBreakdownString : ""}`,
+ description: advancedBreakdown ? `${ fieldMatchDescription.replace("query", advancedBreakdownString) }` : `${fieldMatchDescription}`,
key: source,
matchedField: fieldMatch,
matchedTerms: termMatch,
@@ -154,7 +164,7 @@ export const ExplanationTab = ({ result }) => {
textAlign: "center"
},
autoRotate: false,
- formatter: (v) => v.value.toFixed(1)
+ formatter: (v) => (v.value/totalScore*100).toFixed(0)+'%'
},
tooltip: {
formatter: (datum) => {
@@ -172,10 +182,10 @@ export const ExplanationTab = ({ result }) => {
fontSize: 15,
fontWeight: 500
}}>
- Score breakdown
+ Explanation for this concept's relation to your search
- Why am I seeing this result?
+ What does the total score returned by the search mean?
- )
-}
-
-/** Component that handles display of Variable Results */
-export const VariableSearchResults = () => {
- const { query, variableResults, variableStudyResults, totalVariableResults } = useHelxSearch()
- const { analyticsEvents } = useAnalytics()
-
- const [collapseHistogram, setCollapseHistogram] = useState(false)
- const [page, setPage] = useState(0)
- /** filteredVariables holds the variables displayed in the histogram */
- const [_filteredVariables, _setFilteredVariables] = useState([variableResults])
- const filteredVariables = useMemo(() => _filteredVariables[page], [_filteredVariables, page])
- const setFilteredVariables = useCallback((value) => {
- const currentPage = _filteredVariables[page]
- const currentPageVariableIds = currentPage.map((variable) => variable.id)
- // If it's a duplicate of the current value, don't add it again.
- if (
- value.length === currentPage.length &&
- value.every((variable) => currentPageVariableIds.includes(variable.id))
- ) return
- // _filteredVariables.push(value)
- const newValue = [..._filteredVariables.slice(0, page + 1), value]
- _setFilteredVariables(newValue)
- setPage(newValue.length - 1)
- }, [_filteredVariables, page])
- const overrideFilterHistory = useCallback((value) => {
- _setFilteredVariables([value])
- setPage(0)
- }, [])
-
- /** noResults indicates that the search yielded no variables. The layout should be hidden. */
- const noResults = useMemo(() => totalVariableResults === 0, [totalVariableResults])
-
- const absScoreRange = useMemo(() => {
- // if (variableResults.length < 2) return undefined
- return [
- Math.min(...variableResults.map((result) => result.score)),
- Math.max(...variableResults.map((result) => result.score))
- ]
- }, [variableResults])
- const scoreRange = useMemo(() => {
- // if (filteredVariables.length < 2) return undefined
- return [
- Math.min(...filteredVariables.map((result) => result.score)),
- Math.max(...filteredVariables.map((result) => result.score))
- ]
- }, [filteredVariables])
-
- const studyResultsForDisplay = useMemo(() => {
- const filteredIds = filteredVariables.map((result) => result.id)
- return variableStudyResults.filter((study) => study.elements.some((variable) => filteredIds.includes(variable.id)))
- }, [filteredVariables, variableStudyResults])
-
- /** useEffect added to address bug whereby displayed results were not updating when a new
- * search term was entered */
- useEffect(() => {
- // Basically, just reset the filteredVariables history back to new.
- overrideFilterHistory(variableResults);
- }, [variableResults, variableStudyResults]);
-
- /** studyNamesForDisplay holds names of user selected studies to highlight in histogram */
- const [studyNamesForDisplay, setStudyNamesForDisplay] = useState([])
-
- const variablesHistogram = useRef()
- const variableHistogramConfig = useMemo(() => {
- const [minScore, maxScore] = absScoreRange
- const hex = (x) => {
- x = x.toString(16)
- return (x.length === 1) ? '0' + x : x
- }
- // const absScoredVariables = filteredVariables.reduce((acc, variable) => {
- // const absRatio = (variable.score - minScore) / (maxScore - minScore)
- // const colorIdx = absRatio < 1 ? Math.floor((COLOR_GRADIENT.length - 1) * absRatio) : COLOR_GRADIENT.length - 2
- // acc[variable.id] = {
- // absRatio,
- // colorIdx
- // }
- // return acc
- // }, {})
- // for (let colorIdx=0; colorIdx colorIdx === curIdx)
- // const minRatio = Math.min(...valuesInIdx.map((val) => val.absRatio))
- // const maxRatio = Math.max(...valuesInIdx.map((val) => val.absRatio))
- // valuesInIdx.forEach((val) => {
- // val.relRatio = (val.absRatio - minRatio) / (maxRatio - minRatio)
- // })
- // console.log(valuesInIdx.length, minRatio, maxRatio)
- // }
- const clamp = (x, min, max) => Math.max(min, Math.min(x, max))
- return {
- ...variableHistogramConfigStatic,
- data: [...filteredVariables].sort((a, b) => a.score - b.score),
- color: ({ id }) => {
- const { score } = filteredVariables.find((result) => result.id === id)
- const absRatio = (score - minScore) / (maxScore - minScore)
- // const continuousRatio = ([...variableResults].sort((a, b) => a.score - b.score).findIndex((result) => result.id === id) + 1) / variableResults.length
- /**
- * `continuousRatio` will create a continuous gradient across the histogram. This doesn't really indicate anything though, just looks pretty.
- * `absRatio` is the norm of score between [minScore, maxScore] and will color the histogram against a gradient according to individual scores.
- */
- return COLOR_GRADIENT(absRatio).toString()
- },
- /*seriesField: "id",
- legend: {
- layout: "vertical",
- position: "right-top",
- title: {
- text: "Score Legend",
- spacing: 12
- },
- offsetX : 24,
- custom: true,
- items: GRADIENT_CONSTITUENTS.map((color, i) => ({
- id: color,
- name: (() => {
- const startRatio = Math.round(i / GRADIENT_CONSTITUENTS.length * 100) / 100
- const endRatio = Math.round((i + 1) / GRADIENT_CONSTITUENTS.length * 100) / 100
- const startScore = (startRatio * maxScore) - (startRatio * minScore) + minScore
- const endScore = (endRatio * maxScore) - (endRatio * minScore) + minScore
- const count = variableResults.filter((result) => result.score >= startScore && result.score <= endScore).length
- return `${ startRatio === 0 ? Math.floor(startScore) : Math.ceil(startScore) } - ${ endRatio === 1 ? Math.ceil(endScore) : Math.floor(endScore) }`
- })(),
- // value: "",
- marker: {
- spacing: 28,
- style: {
- fill: color
- },
- symbol: (x, y, r) => {
- const x_r = 24
- const y_r = 6
- return [["M", x - x_r, y - y_r], ["L", x + x_r, y - y_r], ["L", x + x_r, y + y_r], ["L", x - x_r, y + y_r], ["Z"]]
- // return [["M", x - r, y - r], ["L", x + r, y - r], ["L", x + r, y + r], ["L", x - r, y + r], ["Z"]]
- }
- }
- }))
- }*/
- }
- }, [filteredVariables, variableResults, absScoreRange])
-
- const studyDataSources = useMemo(() => {
- const palette = new Palette(chroma.rgb(255 * .75, 255 * .25, 255 * .25), {mode: 'hex'})
- return variableStudyResults.reduce((acc, cur) => {
- const dataSource = cur.data_source
- if (!acc.hasOwnProperty(dataSource)) acc[dataSource] = {
- count: 1,
- color: palette.getNextColor()
- }
- else acc[dataSource].count += 1
- return acc
- }, {})
- }, [variableStudyResults])
-
- const hiddenDataSources = useMemo(() => {
- const allDataSources = Object.keys(studyDataSources)
- const activeDataSources = filteredVariables.reduce((acc, cur) => {
- if (!acc.includes(cur.data_source)) acc.push(cur.data_source)
- return acc
- }, [])
- return allDataSources.filter((dataSource) => !activeDataSources.includes(dataSource))
- }, [filteredVariables, studyDataSources])
-
- const [filteredPercentileLower, filteredPercentileUpper] = useMemo(() => {
- const relativeMin = Math.min(...filteredVariables.map((result) => result.score))
- const relativeMax = Math.max(...filteredVariables.map((result) => result.score))
- return [
- (variableResults.filter((result) => result.score <= relativeMin).length / variableResults.length) * 100,
- (variableResults.filter((result) => result.score <= relativeMax).length / variableResults.length) * 100
- ]
- }, [variableResults, filteredVariables])
-
- /**
- * Triggered by the Start Over button.
- */
- const startOverHandler = () => {
- analyticsEvents.variableViewStartOverPressed(query)
- /** Restores the variables shown in the histogram back to the original inputs */
- overrideFilterHistory(variableResults)
-
- /** Resets selected study names to none selected */
- setStudyNamesForDisplay([])
-
- let histogramObj = variablesHistogram.current.getChart()
- /** Removes 'active' state property, which allows bar highlighting when a study is selected */
- histogramObj.setState('active', () => true, false);
- }
-
- useEffect(() => {
- let histogramObj = variablesHistogram.current.getChart()
- /** Restores histogram data to refreshed value of filteredVariables, which is based on no filtering */
- histogramObj.update({ ...variableHistogramConfig, data: [...filteredVariables].sort((a, b) => a.score - b.score) })
- }, [variableHistogramConfig, filteredVariables])
-
- /** Update the highlighted variables whenever highlighted studies change or filtered variables change */
- useEffect(() => {
- const histogramObj = variablesHistogram.current.getChart()
- const variableIdsFilteredByStudy = studyNamesForDisplay.length > 0 ? (
- filteredVariables.filter(_var => studyNamesForDisplay.includes(_var.study_name)).map(el => el.id)
- ) : []
- histogramObj.setState("active", (d) => variableIdsFilteredByStudy.includes(d.id))
- histogramObj.setState("active", (d) => !variableIdsFilteredByStudy.includes(d.id), false)
- }, [studyNamesForDisplay, filteredVariables])
-
- /**
- * Whenever the brush filter is used, the value of filtered Variables &
- * studyResults gets updated based on the filteredData in the histogram
- */
- useEffect(() => {
- let histogramObj = variablesHistogram.current.getChart()
- const handle = (e) => {
- let newFilteredVariables = e.view.filteredData
- let updatedStudyResults = updateStudyResults(newFilteredVariables, studyResultsForDisplay);
- if (newFilteredVariables.length !== filteredVariables.length) {
- setFilteredVariables(newFilteredVariables)
- }
- }
- histogramObj.on('mouseup', handle)
- return () => {
- // Remove the click handler when the effect demounts.
- histogramObj.off('mouseup', handle)
- }
- }, [studyResultsForDisplay, filteredVariables])
-
- const onScoreSliderChange = useCallback((score) => {
- if (score === undefined || (score[0] === scoreRange[0] && score[1] === scoreRange[1])) return
- const [minScore, maxScore] = score
- const histogramObj = variablesHistogram.current.getChart()
- const newFilteredVariables = variableResults.filter((variable) => (
- variable.score >= minScore && variable.score <= maxScore
- ))
- let updatedStudyResults = updateStudyResults(newFilteredVariables, studyResultsForDisplay);
- if (filteredVariables.length !== newFilteredVariables.length) {
- setFilteredVariables(newFilteredVariables)
- }
- }, [variableResults, filteredVariables, studyResultsForDisplay, scoreRange])
-
- const onDataSourceChange = useCallback((dataSource, hidden) => {
- const histogramObj = variablesHistogram.current.getChart()
- const newHiddenDataSources = hidden
- ? [...hiddenDataSources, dataSource]
- : hiddenDataSources.filter((source) => source !== dataSource)
- const newFilteredVariables = variableResults.filter((variable) => (
- !newHiddenDataSources.includes(variable.data_source)
- ))
- let updatedStudyResults = updateStudyResults(newFilteredVariables, studyResultsForDisplay);
- if (filteredVariables.length !== newFilteredVariables.length) {
- setFilteredVariables(newFilteredVariables)
- }
- }, [hiddenDataSources, variableResults, filteredVariables, studyResultsForDisplay])
-
- /**
- * Takes a studyName, selected by the user in the studies table & updates data going to
- * the histogram, to toggle highlighting of variables from the selected study.
- *
- * Outcome:
- * - Updates variable highlighting in histogram based on selected studies
- * - Updates the contents of studyNamesForDisplay
- */
- function toggleStudyHighlightingInHistogram(studyName) {
- /** Check in studyName is in the array of studyNamesForDisplay, then either add or
- * remove the study.
- */
- let idx = studyNamesForDisplay.indexOf(studyName)
- let newStudyNamesForDisplay = [...studyNamesForDisplay]
- if (idx > -1) {
- newStudyNamesForDisplay.splice(idx, 1)
- } else {
- newStudyNamesForDisplay = [...newStudyNamesForDisplay, studyName]
- }
- setStudyNamesForDisplay(newStudyNamesForDisplay);
- }
-
- return (
-
- {
- const isCollapsed = !collapseHistogram
- analyticsEvents.variableViewHistogramToggled(query, !isCollapsed)
- setCollapseHistogram(isCollapsed)
- } }
- >
-
- {/* The results header has a bottom margin of 16, so the divider shouldn't have a top margin. */}
-
-
- Variables according to Dug score
-
-
- Dug score
-
-
-
- This is the metric used by Dug to describe how relevant a result is
-
-
- The score is calculated from how closely the search query matches information known about a result
-
+ Something unexpected went wrong during the tour.
+
+ )
+ error = message
+ // Cull every step after the current step.
+ tour.steps.splice(tour.steps.indexOf(tour.getCurrentStep()!) + 1, tour.steps.length)
+ // Add an error step
+ tour.addStep({
+ id: "error",
+ attachTo: {
+ element: "head"
+ },
+ showOn: () => error !== null,
+ title: () => "Sorry!",
+ text: () => error!,
+ buttons: [
+ {
+ classes: secondaryButtonClass,
+ text: 'Exit',
+ action: () => tour.cancel()
+ },
+ {
+ classes: primaryButtonClass,
+ text: 'Reload',
+ action: () => window.location.reload()
+ }
+ ]
+ })
+ // Advance to error step.
+ tour.next()
+ }
+ if (context.brand === "heal") return [
+ {
+ id: "main.intro",
+ path: homePathPattern,
+ attachTo: {
+ // We want to mount to a sizeless element so that nothing is "highlighted",
+ // i.e., everything is backdrop except the floating tour popup.
+ element: "head"
+ },
+ title: "Welcome to HEAL Semantic Search (HSS)",
+ text: renderToStaticMarkup(
+
+ HSS is an open-access search engine for exploring the HEAL research landscape.
+ HSS is not the search you use every day - it uses linked knowledge to return concepts related
+ to your search. This enables researchers to find biomedical concepts of interest
+ in the HEAL space such as diseases, phenotypes, anatomical parts, and drugs. Click next
+ to begin a tour.
+
+ When a user searches for a term, HSS returns relevant biomedical concepts in the form of concept cards.
+ Each card has some abbreviated information, allowing you to zoom in on studies, variables, and CDEs that
+ are related to the concept.
+
+ In HSS, a concept is a named entity defined in an ontology or another formal knowledge source. This means
+ the biomedical concept, and its relation to the search query, comes from a well-defined, established source.
+
+ You can click on each of the tabs in the side bar for more detailed information, such as
+ associated studies, common data elements (CDEs), knowledge graphs, and an explanation
+ about why the concept was included in the search result.
+
+ Search results are scored based on their search term relevance.
+ Higher scoring, more relevant results are shown first. Further down,
+ you'll see concepts less directly relevant to your original
+ query but still potentially of unexpected interest.
+
+ HSS also offers variable-level searching. Click on the Variables button
+ shows variables matching the search terms or synonyms grouped by study.
+ Similar to concepts, variable results are scored based on the level of the match
+ between variable information (name, description, related terms) and the search terms.
+
+ Variable search returns all the variables with a match with the search term.
+ HSS provides a histogram filter to zoom in on higher-scoring results (those more
+ relevant to the search query). Hovering the mouse pointer over each variable in the
+ histogram displays additional information, including its name, description, and study.
+
+ This concludes the introductory tour of HSS. For more detailed information,
+ read our User Guide
+ or visit our support page to revisit the tour or access the Help Portal, where you can report bugs,
+ request technical assistance, submit feedback, or submit other requests.
+
+ Happy searching!
+
+ ),
+ buttons: [
+ {
+ classes: secondaryButtonClass,
+ text: 'Back',
+ type: 'back'
+ },
+ {
+ classes: primaryButtonClass,
+ text: 'Done',
+ type: 'next'
+ }
+ ],
+ when: {
+ show: () => { supportNavDomMask.showMask() },
+ hide: () => { supportNavDomMask.hideMask() },
+ cancel: () => { supportNavDomMask.hideMask() },
+ complete: () => { supportNavDomMask.hideMask() }
+ }
+ }
+ ]
+ return []
+ }, [searchBarDomMask, basePath, navigate, doSearch, context])
+
+ const tour = useShepherdTour({ tourOptions, steps: tourSteps })
+
+ useEffect(() => {
+ let unlisten: () => void
+ const startTour = () => {
+ setTourStarted(true)
+ unlisten = globalHistory.listen(({ location }) => {
+ const { options } = tour.getCurrentStep()!
+ const pathMatches = (options as any).path.test(location.pathname)
+ if (!pathMatches) tour.cancel()
+ })
+ }
+ const cleanupTour = () => {
+ setTourStarted(false)
+ unlisten()
+ }
+ tour.on("start", startTour)
+ tour.on("complete", cleanupTour)
+ tour.on("cancel", cleanupTour)
+
+ return () => {
+ tour.off("start", startTour)
+ tour.off("complete", cleanupTour)
+ tour.off("cancel", cleanupTour)
+ }
+ }, [tour, navigate])
+
+ useEffect(() => {
+ let existingSettings = new Map()
+ // Some default UI behaviors are assumed for the tour (e.g. search will bring you to the concept view first)
+ const override = (name: string, newValue: any) => {
+ // console.info("overriding setting", name)
+ existingSettings.set(name, localStorage.getItem(name))
+ localStorage.setItem(name, JSON.stringify(newValue))
+ }
+ const restore = (name: string) => {
+ // console.info("restoring setting", name)
+ const restoredValue = existingSettings.get(name)!
+ if (restoredValue === null) localStorage.removeItem(name)
+ else localStorage.setItem(name, restoredValue)
+ }
+ const overrideSettings = () => {
+ // console.log("overriding")
+ // override("search_history", [])
+ override("search_layout", SearchLayout.GRID)
+ }
+ const restoreSettings = () => {
+ // console.log("restoring", Array.from(existingSettings.keys()).length, "settings")
+ Array.from(existingSettings.keys()).forEach((overridedSetting) => {
+ restore(overridedSetting)
+ })
+ }
+
+ const setup = () => {
+ overrideSettings()
+ window.addEventListener("beforeunload", cleanup)
+ }
+ const cleanup = () => {
+ // restoreSettings()
+ window.removeEventListener("beforeunload", cleanup)
+ }
+ tour.on("start", setup)
+ tour.on("complete", cleanup)
+ tour.on("cancel", cleanup)
+ return () => {
+ tour.off("start", setup)
+ tour.off("complete", cleanup)
+ tour.off("cancel", cleanup)
+ window.removeEventListener("beforeunload", cleanup)
+ }
+ }, [tour])
+
+ return (
+
+ { children }
+
+ )
+}
+
+export const useTourContext = () => useContext(TourContext)
\ No newline at end of file
diff --git a/src/contexts/tour-context/index.ts b/src/contexts/tour-context/index.ts
new file mode 100644
index 00000000..cb7300ec
--- /dev/null
+++ b/src/contexts/tour-context/index.ts
@@ -0,0 +1 @@
+export * from './context'
\ No newline at end of file
diff --git a/src/contexts/tour-context/tour.css b/src/contexts/tour-context/tour.css
new file mode 100644
index 00000000..fa13deaa
--- /dev/null
+++ b/src/contexts/tour-context/tour.css
@@ -0,0 +1,79 @@
+.shepherd-element {
+ border-radius: 2px !important;
+}
+
+.shepherd-content {
+ background: #fff;
+ box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
+ border-radius: 2px !important;
+}
+
+.shepherd-header {
+ background: #fff !important;
+ padding: 8px 16px !important;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.shepherd-header > h3 {
+ font-weight: 500 !important;
+ font-size: 15px;
+}
+
+.shepherd-text {
+ padding: 16px;
+ font-size: 14px;
+}
+
+.shepherd-button.ant-btn-default:hover {
+ background: initial;
+ color: #1890ff;
+}
+
+.shepherd-button.ant-btn-default:active {
+ color: #096dd9;
+}
+
+.shepherd-button.ant-btn-primary:hover {
+ background: #40a9ff;
+ color: #fff;
+}
+
+.shepherd-button.ant-btn-primary:active {
+ background: #096dd9;
+ color: #fff;
+}
+
+.shepherd-arrow {
+ z-index: 99999;
+}
+
+.shepherd-arrow::before {
+ background: #fff !important;
+}
+
+.shepherd-element:not(.shepherd-has-title) .shepherd-header {
+ padding: 0;
+ padding-bottom: 8px;
+ border-bottom: none;
+}
+
+.shepherd-element:not(.shepherd-has-title) .shepherd-header > button {
+ position: absolute;
+ top: 4px;
+ right: 8px;
+}
+
+
+/* .shepherd-header > h3 {
+ padding: 12px;
+ padding-bottom: 0;
+}
+
+.shepherd-header > button {
+ position: absolute;
+ top: -2px;
+ right: 4px;
+}
+.shepherd-header > h3 + button {
+ position: static !important;
+} */
\ No newline at end of file
diff --git a/src/hooks/index.js b/src/hooks/index.js
index f4a8dae8..740608c5 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -3,4 +3,8 @@ export * from './use-local-storage'
export * from './use-search-index'
export * from './use-lunr-search'
export * from './use-is-scrollable'
-export * from './use-page-activity'
\ No newline at end of file
+export * from './use-page-activity'
+export * from './use-truncated-element'
+export * from './use-synthetic-dom-mask'
+export * from './use-state-callback'
+export * from './use-shepherd'
diff --git a/src/hooks/use-local-storage.js b/src/hooks/use-local-storage.js
index a100bccf..7d496063 100644
--- a/src/hooks/use-local-storage.js
+++ b/src/hooks/use-local-storage.js
@@ -2,9 +2,54 @@
* Source: https://github.com/RENCI/ncdot-road-safety-client/blob/53c147c434d6d29d9ecbb0d682a3127c08086559/src/hooks/use-local-storage.js
*/
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
-export const useLocalStorage = (key, initialValue) => {
+/** `storage` events do not fire on the same tab.
+ * this code monkey patches a global, custom `localStorageModified`
+ * event. */
+// Note: window context preserved across HMR reloading so should not cause buggy race conditions in local development
+// when modifying this file hopefully. Maybe still better safe than sorry to hard refresh the page after changing this code.
+if (!window.hasOwnProperty("localStorage2")) {
+ window.localStorage2 = {
+ setItem: window.localStorage.setItem.bind(window.localStorage),
+ removeItem: window.localStorage.removeItem.bind(window.localStorage),
+ clear: window.localStorage.clear.bind(window.localStorage)
+ }
+}
+window.localStorage.setItem = function() {
+ const cancelled = window.dispatchEvent(new CustomEvent("localStorageModified", {
+ // If arguments undefined,
+ detail: { type: "set", key: arguments[0], value: arguments[1] },
+ bubbles: true,
+ cancelable: true
+ }))
+ !cancelled && window.localStorage2.setItem.apply(this, arguments)
+}
+window.localStorage.removeItem = function() {
+ const cancelled = window.dispatchEvent(new CustomEvent("localStorageModified", {
+ detail: { type: "remove", key: arguments[0] },
+ bubbles: true,
+ cancelable: true
+ }))
+ !cancelled && window.localStorage2.removeItem.apply(this, arguments)
+}
+window.localStorage.clear = function() {
+ const cancelled = window.dispatchEvent(new CustomEvent("localStorageModified", {
+ detail: { type: "clear" },
+ bubbles: true,
+ cancelable: true
+ }))
+ !cancelled && window.localStorage2.clear.apply(this, arguments)
+}
+
+/**
+ *
+ * @param {string} key - Name of the key in localStorage to use.
+ * @param {any} initialValue - Default value (if key is not set), may be any JSON-serializable value
+ * @param {boolean} [observeOtherPages=false] - If true, watches for external localStorage changes to the value in other tabs/windows.
+ * @returns
+ */
+export const useLocalStorage = (key, initialValue, observeOtherPages=true) => {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
@@ -12,7 +57,11 @@ export const useLocalStorage = (key, initialValue) => {
// Get from local storage by key
const item = window.localStorage.getItem(key)
// Parse stored json or if none return initialValue
- return item ? JSON.parse(item) : initialValue
+ if (item) return JSON.parse(item)
+ else {
+ window.localStorage2.setItem(key, JSON.stringify(initialValue))
+ return initialValue
+ }
} catch (error) {
// If error also return initialValue
console.log(error)
@@ -22,19 +71,61 @@ export const useLocalStorage = (key, initialValue) => {
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
- const setValue = value => {
+ const setValue = useCallback((value) => {
try {
- // Allow value to be a function so we have same API as useState
- const valueToStore = value instanceof Function ? value(storedValue) : value
// Save state
- setStoredValue(valueToStore)
- // Save to local storage
- window.localStorage.setItem(key, JSON.stringify(valueToStore))
+ setStoredValue((existingValue) => {
+ // Allow value to be a function so we have same API as useState
+ const valueToStore = value instanceof Function ? value(existingValue) : value
+ // Save to local storage
+ // Use the non-monkey patched version to avoid double-calling setState in the effect.
+ window.localStorage2.setItem(key, JSON.stringify(valueToStore))
+ return valueToStore
+ })
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error)
}
- }
+ }, [])
+
+ useEffect(() => {
+ const storageCallback = (e) => {
+ const newValue = JSON.parse(localStorage.getItem(key))
+ setStoredValue(newValue)
+ }
+ const modifiedCallback = (e) => {
+ const { type } = e.detail
+ let newValue
+ switch (type) {
+ case "set": {
+ const { key: keyEvt, value } = e.detail
+ if (key !== keyEvt) return
+ newValue = JSON.parse(value)
+ break
+ }
+ case "remove": {
+ const { key: keyEvt } = e.detail
+ if (key !== keyEvt) return
+ newValue = null
+ break
+ }
+ case "clear": {
+ newValue = null
+ break
+ }
+ }
+ // Don't double set state, could lead to weird race conditions with other code working with localStorage.
+ setStoredValue(newValue)
+ }
+ // Storage changed in another tab/window
+ if (observeOtherPages) window.addEventListener("storage", storageCallback)
+ // Storage changed in this tab
+ window.addEventListener("localStorageModified", modifiedCallback)
+ return () => {
+ window.removeEventListener("storage", storageCallback)
+ window.removeEventListener("localStorageModified", modifiedCallback)
+ }
+ }, [key, observeOtherPages])
return [storedValue, setValue]
}
\ No newline at end of file
diff --git a/src/hooks/use-lunr-search.js b/src/hooks/use-lunr-search.js
index 2fcbcc40..59966529 100644
--- a/src/hooks/use-lunr-search.js
+++ b/src/hooks/use-lunr-search.js
@@ -5,7 +5,7 @@
*
*/
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
import { useLunr } from './'
export const useLunrSearch = ({
@@ -39,13 +39,21 @@ export const useLunrSearch = ({
initIndex,
populateIndex
)
+
+ const docMap = useMemo(() => {
+ const map = new Map()
+ docs.forEach((doc) => map.set(doc[ref], doc))
+ return map
+ }, [docs, ref])
+
+ const getDocByRef = useCallback((ref) => docMap.get(ref), [docMap])
const lexicalSearch = useCallback((...args) => {
const result = lunrLexicalSearch(...args)
const searchTokens = []
result.forEach(({ ref: id, score, matchData: { metadata } }) => {
// `ref` is always a string, so the doc ref needs to be converted to a string.
- const doc = docs.find((doc) => doc[ref].toString() === id)
+ const doc = getDocByRef(id)
Object.entries(metadata).forEach(([partialTerm, hitFields]) => {
Object.entries(hitFields).forEach(([ field, meta ]) => {
const { position: [[start, length]] } = meta
@@ -56,7 +64,7 @@ export const useLunrSearch = ({
})
})
return { hits: result, tokens: searchTokens }
- }, [docs, lunrLexicalSearch])
+ }, [docs, getDocByRef, lunrLexicalSearch])
return {
index, lexicalSearch
diff --git a/src/hooks/use-search-index.js b/src/hooks/use-search-index.js
index b000de4d..5a96db53 100644
--- a/src/hooks/use-search-index.js
+++ b/src/hooks/use-search-index.js
@@ -22,8 +22,13 @@ export const useLunr = (initIndex, populateIndex) => {
}, [initIndex, populateIndex])
// Takes a lexical search, i.e. a user inputted search query, transforms it into a lunr search query, and executes the search.
const lexicalSearch = useCallback((searchQuery, options={
- // Can be either a number or a function with signature (term: string) => number (e.g. if you want to increase fuzziness for longer terms)
- // By default, use fuzziness of 1 character and give an extra character of fuzziness to terms longer than 4 characters.
+ /**
+ * Can be either a number or a function with signature (term: string) => number (e.g. if you want to increase fuzziness for longer terms)
+ * By default, use fuzziness of 1 character and give an extra character of fuzziness to terms longer than 4 characters.
+ * IMPORTANT NOTE: Lunr stems each word before it makes it into the index. This means that the edit distance may be more forgiving
+ * than specified. For example: `interim` and `interval` have an LD of 3. However, when stemmed, we get `interim` => `interim`
+ * and `interval` => `interv` and `interim/interv` only have an LD of 2.
+ */
fuzziness: (term) => term.length >= 5 ? 2 : 1,
prefixSearch: true
}) => {
@@ -43,7 +48,6 @@ export const useLunr = (initIndex, populateIndex) => {
q.term(token, { boost: 10, usePipeline: false, wildcard: lunr.Query.wildcard.TRAILING })
}
if (fuzziness) {
-
// Fuzzy search without prefix
q.term(token, { boost: 1, usePipeline: false, editDistance: typeof fuzziness === 'function' ? fuzziness.call(null, token) : fuzziness })
}
diff --git a/src/hooks/use-shepherd.tsx b/src/hooks/use-shepherd.tsx
new file mode 100644
index 00000000..ce2087d0
--- /dev/null
+++ b/src/hooks/use-shepherd.tsx
@@ -0,0 +1,89 @@
+/** PULLED FROM ARCHIVED REACT-SHEPHERD REPOSITORY */
+import React, { FC, useMemo } from 'react';
+import Shepherd from '@groupe/shepherd.js';
+import {Tour, TourOptions, Step, StepOptionsButton, StepOptions} from '@groupe/shepherd.js';
+
+type StepType = 'back' | 'cancel' | 'next';
+export interface ShepherdButtonWithType extends StepOptionsButton {
+ type?: StepType;
+}
+
+export interface ShepherdOptionsWithType extends StepOptions {
+ buttons?: ReadonlyArray;
+}
+
+interface ShepherdProps {
+ steps: Array;
+ tourOptions: TourOptions;
+ children: React.ReactNode;
+}
+
+const ShepherdTourContext = React.createContext(null);
+const ShepherdTourContextConsumer = ShepherdTourContext.Consumer;
+
+/**
+ * Take a set of steps and formats to use actions on the buttons in the current context
+ * @param {Array} steps
+ * @param {Array} tour
+ * @private
+ */
+const addSteps = (steps: Array, tour: Tour) => {
+ // Return nothing if there are no steps
+ if (!steps.length) {
+ return [];
+ }
+
+ const parsedStepsforAction = steps.map((step: StepOptions): StepOptions => {
+ const { buttons } = step;
+
+ if (buttons) {
+ step.buttons = buttons.map((button: ShepherdButtonWithType) => {
+ const {
+ action, classes, disabled, label, secondary, text, type,
+ } = button;
+ return {
+ action: type ? tour[type] : action,
+ classes,
+ disabled,
+ label,
+ secondary,
+ text,
+ type,
+ };
+ });
+ }
+
+ return step;
+ });
+
+ return parsedStepsforAction.forEach((step: any) => tour.addStep(step));
+};
+
+// for instances where Context can't be used or doesn't make sense
+export const useShepherdTour = ({ tourOptions, steps }: Pick) => {
+ const tourObject = useMemo(() => {
+ const tourInstance = new Shepherd.Tour(tourOptions) as Tour;
+
+ addSteps(steps, tourInstance);
+
+ return tourInstance;
+ }, [tourOptions, steps]);
+
+ return tourObject;
+};
+
+export const ShepherdTour: FC = ({ children, tourOptions, steps }) => {
+ const tourObject = useMemo(() => {
+ const tourInstance = new Shepherd.Tour(tourOptions) as Tour;
+
+ addSteps(steps, tourInstance);
+
+ return tourInstance;
+ }, [tourOptions, steps]);
+
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/hooks/use-state-callback.tsx b/src/hooks/use-state-callback.tsx
new file mode 100644
index 00000000..6496aef3
--- /dev/null
+++ b/src/hooks/use-state-callback.tsx
@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/** Source: https://stackoverflow.com/a/61842546 */
+export function useStateCallback(
+ initialState: T
+): [T, (state: T, cb?: (state: T) => void) => void] {
+ const [state, setState] = useState(initialState);
+ const cbRef = useRef<((state: T) => void) | undefined>(undefined); // init mutable ref container for callbacks
+
+ const setStateCallback = useCallback((state: T, cb?: (state: T) => void) => {
+ cbRef.current = cb; // store current, passed callback in ref
+ setState(state);
+ }, []); // keep object reference stable, exactly like `useState`
+
+ useEffect(() => {
+ // cb.current is `undefined` on initial render,
+ // so we only invoke callback on state *updates*
+ if (cbRef.current) {
+ cbRef.current(state);
+ cbRef.current = undefined; // reset callback after execution
+ }
+ }, [state]);
+
+ return [state, setStateCallback];
+}
\ No newline at end of file
diff --git a/src/hooks/use-synthetic-dom-mask.tsx b/src/hooks/use-synthetic-dom-mask.tsx
new file mode 100644
index 00000000..f9676081
--- /dev/null
+++ b/src/hooks/use-synthetic-dom-mask.tsx
@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { v4 as uuid } from 'uuid'
+import { useStateCallback } from './use-state-callback'
+
+interface SyntheticDOMMaskOptions {
+ padding?: number | { top: number, right: number, bottom: number, left: number }
+ resizeInterval?: number
+ selectorInterval?: number
+ blockClicks?: boolean
+}
+
+const prepareMaskContainer = (): HTMLDivElement => {
+ const mask = document.createElement("div")
+ mask.id = "mask-" + uuid()
+ mask.style.position = "fixed"
+ mask.style.zIndex = "999999"
+ mask.style.pointerEvents = "none"
+ mask.style.borderRadius = "4px"
+ mask.style.display = "none"
+ document.body.prepend(mask)
+ return mask
+}
+
+export const useSyntheticDOMMask = (
+ selector: string,
+ options: SyntheticDOMMaskOptions = {}
+) => {
+ const { padding, resizeInterval, selectorInterval, blockClicks } = {
+ padding: 0,
+ resizeInterval: 0,
+ selectorInterval: 10,
+ blockClicks: false,
+ ...options
+ }
+
+ const [mask] = useState(prepareMaskContainer)
+ const [elements, setElements] = useState(undefined)
+ const [elementMasks, setElementMasks] = useState | undefined>(undefined)
+ const [show, setShow] = useStateCallback(false)
+
+ const showMask = useCallback(async () => {
+ return new Promise((resolve) => {
+ setShow(true, () => resolve())
+ })
+ }, [])
+
+ const context = useMemo(() => ({
+ showMask,
+ hideMask: () => setShow(false),
+ selector: "#" + mask.id,
+ originalSelector: selector,
+ element: mask
+ }) as const, [mask, selector])
+
+ const [paddingTop, paddingRight, paddingBottom, paddingLeft] = useMemo(() => (typeof padding === "number" ? [
+ padding,
+ padding,
+ padding,
+ padding
+ ] : [
+ padding.top,
+ padding.right,
+ padding.bottom,
+ padding.left
+ ]), [padding])
+
+ const resize = useCallback((element: HTMLElement, bb: DOMRect) => {
+ const elBB = element.getBoundingClientRect()
+ if (elBB.x !== bb.x) element.style.left = (bb.x) + "px"
+ if (elBB.y !== bb.y) element.style.top = (bb.y) + "px"
+ if (elBB.width !== bb.width) element.style.width = (bb.width) + "px"
+ if (elBB.height !== bb.height) element.style.height = (bb.height) + "px"
+ }, [])
+
+ const computeMinimumBounds = useCallback((elements: Element[]): DOMRect => {
+ if (elements.length === 0) return new DOMRect(0, 0, 0, 0)
+ let [x1, y1, x2, y2] = [Infinity, Infinity, -Infinity, -Infinity]
+ elements.forEach((element) => {
+ const bb = element.getBoundingClientRect()
+ if (bb.width === 0 || bb.height === 0) return
+ x1 = Math.min(x1, bb.x - paddingLeft)
+ y1 = Math.min(y1, bb.y - paddingTop)
+ x2 = Math.max(x2, bb.right + paddingRight)
+ y2 = Math.max(y2, bb.bottom + paddingBottom)
+ })
+ return new DOMRect(x1, y1, x2 - x1, y2 - y1)
+ }, [paddingTop, paddingRight, paddingBottom, paddingLeft])
+
+ useEffect(() => {
+ mask.style.pointerEvents = blockClicks ? "auto" : "none"
+ }, [mask, blockClicks])
+
+ // Maintain up-to-date list of DOM elements matching the given selector
+ useEffect(() => {
+ const interval = window.setInterval(() => {
+ const elements = Array.from(document.querySelectorAll(selector))
+ setElements((oldElements) => {
+ // We absolutely don't want to update if query set hasn't changed.
+ // Can't use JSON comparison because of circular references in DOM nodes.
+ if (!oldElements) return elements
+ if (oldElements.length !== elements.length) return elements
+ const equal = oldElements.every((oldElement, i) => {
+ const element = elements[i]
+ return element === oldElement
+ })
+ if (equal) return oldElements
+ else return elements
+
+ })
+ }, selectorInterval)
+ return () => {
+ window.clearInterval(interval)
+ }
+ }, [selector, selectorInterval])
+
+ // Make sure the mask displays properly and maintains correct position/size
+ useEffect(() => {
+ const observers: IntersectionObserver[] = []
+ let cancelled = false
+ if (!mask || !elementMasks) return
+ if (!show) mask.style.display = "none"
+ else {
+ mask.style.display = "block"
+
+ const resizeMasks = () => {
+ const elements = Array.from(elementMasks.keys())
+ const maskBounds = computeMinimumBounds(elements)
+ elements.forEach((element) => {
+ const elementMask = elementMasks.get(element)!
+ const elementBB = element.getBoundingClientRect()
+ // Mask elements are positioned relative to the mask container
+ resize(elementMask, new DOMRect(
+ elementBB.x - maskBounds.x,
+ elementBB.y - maskBounds.y,
+ elementBB.width,
+ elementBB.height
+ ))
+ })
+ resize(mask, maskBounds)
+ }
+
+ const resizeLoop = () => {
+ resizeMasks()
+ if (!cancelled) window.requestAnimationFrame(resizeLoop)
+ }
+ resizeLoop()
+
+ Array.from(elementMasks.keys()).forEach((element) => {
+ const elementMask = elementMasks.get(element)!
+ })
+
+ /*
+ Array.from(elementMasks.keys()).forEach((element) => {
+ const elementMask = elementMasks.get(element)!
+ elementMask.style.backgroundColor = "red"
+
+ // For some reason, intersection observers not working on Chrome when root is specified...
+ // The idea here is that we observe the intersection ratio between the mask and the element,
+ // and if the ratio ever goes below 1.0 (100% intersection), then we know the element has changed
+ // position/size and the mask needs to be resized. This would be the most "efficient" solution for us.
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ console.log(entry, entry.intersectionRatio)
+ })
+ }, { root: element })
+ observer.observe(element)
+ observers.push(observer)
+ })
+ */
+ }
+
+ return () => {
+ observers.forEach((observer) => observer.disconnect())
+ cancelled = true
+ }
+ }, [mask, elementMasks, show, resizeInterval, computeMinimumBounds])
+
+ // Generate the mask
+ useEffect(() => {
+ if (!elements) return
+
+ // Delete old masks.
+ mask.innerHTML = ""
+ const newMasks = new Map()
+ elements.forEach((element) => {
+ const maskElement = document.createElement("div")
+ maskElement.style.backgroundColor = "transparent"
+ maskElement.style.position = "absolute"
+ mask.appendChild(maskElement)
+ newMasks.set(element, maskElement)
+ })
+
+ setElementMasks(newMasks)
+ }, [mask, elements])
+
+ useEffect(() => {
+ document.body.prepend(mask)
+ return () => {
+ mask.remove()
+ }
+ }, [])
+
+ return context
+}
\ No newline at end of file
diff --git a/src/hooks/use-truncated-element.js b/src/hooks/use-truncated-element.js
new file mode 100644
index 00000000..17bb70c2
--- /dev/null
+++ b/src/hooks/use-truncated-element.js
@@ -0,0 +1,23 @@
+// Source: https://stackoverflow.com/a/75859314
+import React, { useState, useLayoutEffect } from 'react'
+
+export const useTruncatedElement = ({ ref }) => {
+ const [isTruncated, setIsTruncated] = useState(false)
+ const [isReadingMore, setIsReadingMore] = useState(false)
+
+ useLayoutEffect(() => {
+ const { offsetHeight, scrollHeight } = ref.current || {}
+
+ if (offsetHeight && scrollHeight && offsetHeight < scrollHeight) {
+ setIsTruncated(true)
+ } else {
+ setIsTruncated(false)
+ }
+ }, [ref])
+
+ return {
+ isTruncated,
+ isReadingMore,
+ setIsReadingMore,
+ }
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 39dd4549..253a912e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
@import url('antd/dist/antd.css');
+@import url('rc-texty/assets/index.css');
*, *::before, *::after {
box-sizing: border-box;
@@ -10,6 +11,7 @@ body {
/* font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ position: relative;
}
code {
diff --git a/src/utils/index.js b/src/utils/index.js
index e27a3c1e..74d94734 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -3,4 +3,6 @@ export * from './kg-links';
export * from './memory-converter';
export * from './update-tab-name';
export * from './call-with-retry'
-export * from './palette'
\ No newline at end of file
+export * from './palette'
+export * from './wait-for-element'
+export * from './scroll-into-view'
\ No newline at end of file
diff --git a/src/utils/scroll-into-view.js b/src/utils/scroll-into-view.js
new file mode 100644
index 00000000..88ea1a53
--- /dev/null
+++ b/src/utils/scroll-into-view.js
@@ -0,0 +1,14 @@
+export function scrollIntoViewIfNeeded(element, scrollOptions) {
+ if (typeof element === "string") element = document.querySelector(element)
+ if (!element) return
+ const rect = element.getBoundingClientRect()
+ const isInViewport = (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ )
+ if (!isInViewport) {
+ element.scrollIntoView({ block: "center", inline: "nearest", ...scrollOptions });
+ }
+}
\ No newline at end of file
diff --git a/src/utils/wait-for-element.js b/src/utils/wait-for-element.js
new file mode 100644
index 00000000..e90d3ba9
--- /dev/null
+++ b/src/utils/wait-for-element.js
@@ -0,0 +1,127 @@
+/** matches(attributeValue): boolean */
+export function waitForAttribute(node, attributeName, matches, timeout) {
+ let _resolve, _reject
+ let promise = new Promise(function (resolve, reject) {
+ _resolve = resolve
+ _reject = reject
+ })
+
+ const observer = new MutationObserver(function (mutationList) {
+ for (const mutation of mutationList) {
+ if (mutation.type === "attributes" && mutation.attributeName === attributeName) {
+ if (matches(node.getAttribute(mutation.attributeName))) {
+ _resolve()
+ observer.disconnect()
+ clearTimeout(timerId)
+ }
+ }
+ }
+ })
+
+ // first time check
+ if (matches(node.getAttribute(attributeName))) {
+ _resolve()
+ return promise
+ }
+
+ const timeoutOption = timeout !== undefined ? timeout : 2000
+
+ // start
+ observer.observe(node, {
+ attributes: true,
+ attributeFilter: [attributeName]
+ })
+
+ // timeout
+ var timerId = timeoutOption !== null ? setTimeout(function () {
+ _reject(new Error("element attribute never matched, timed out:" + selector));
+ observer.disconnect();
+ }, timeoutOption) : undefined;
+
+ return promise
+
+}
+
+/** Adapted from wait-for-element */
+export function waitForElement(selector, timeout) {
+ var _resolve, _reject;
+ var promise = new Promise(function (resolve, reject) {
+ _resolve = resolve;
+ _reject = reject;
+ });
+
+
+ var observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation) {
+ for (var i = 0; i < mutation.addedNodes.length; i++) {
+ var addedNode = mutation.addedNodes[i];
+ if (typeof addedNode.matches === "function" && addedNode.matches(selector)) {
+ _resolve(addedNode);
+ observer.disconnect();
+ clearTimeout(timerId);
+ }
+ }
+ });
+ });
+ // first time check
+ var element = document.querySelector(selector);
+ if (element != null) {
+ _resolve(element);
+ return promise;
+ }
+ var timeoutOption = timeout !== undefined ? timeout : 2000;// 2s
+ // start
+ observer.observe(document.body, {
+ childList: true, subtree: true
+ })
+ // timeout
+ var timerId = timeoutOption !== null ? setTimeout(function () {
+ _reject(new Error("Not found element match the selector:" + selector));
+ observer.disconnect();
+ }, timeoutOption) : undefined;
+
+ return promise;
+}
+
+/** Adapted from wait-for-element */
+export function waitForNoElement(selector, timeout) {
+ var _resolve, _reject;
+ var promise = new Promise(function (resolve, reject) {
+ _resolve = resolve;
+ _reject = reject;
+ });
+
+
+ var observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation) {
+ for (var i = 0; i < mutation.removedNodes.length; i++) {
+ var removedNode = mutation.removedNodes[i];
+ if (typeof removedNode.matches === "function" && removedNode.matches(selector)) {
+ // Run a check
+ if (!document.querySelector(selector)) {
+ _resolve();
+ observer.disconnect();
+ clearTimeout(timerId);
+ }
+ }
+ }
+ });
+ });
+ // first time check
+ if (!document.querySelector(selector)) {
+ _resolve();
+ return promise;
+ }
+ var timeoutOption = timeout !== undefined ? timeout : 2000;// 2s
+ // start
+ observer.observe(document.body, {
+ childList: true, subtree: true
+ });
+ // timeout
+ var timerId = timeoutOption !== null ? setTimeout(function () {
+ _reject(new Error("elements matching the selector still exist: " + selector));
+ observer.disconnect();
+ }, timeoutOption) : undefined;
+
+ return promise;
+}
\ No newline at end of file
diff --git a/src/views/search.js b/src/views/search.js
index 83e76209..fbc97f88 100644
--- a/src/views/search.js
+++ b/src/views/search.js
@@ -1,19 +1,14 @@
-import { Fragment, useEffect } from 'react'
-import { HelxSearch, SearchForm, Results, useHelxSearch } from '../components/search'
+import { Fragment } from 'react'
+import { Results, useHelxSearch } from '../components/search'
import { Typography } from 'antd'
import { Breadcrumbs } from '../components/layout'
import { useEnvironment } from '../contexts'
import { useTitle } from './'
+import { GuidedTourButton } from '../components/guided-tour'
const { Title } = Typography
-export const SearchView = () => (
-
-
-
-)
-
-const ScopedSearchView = () => {
+export const SearchView = () => {
const { context } = useEnvironment();
const { query } = useHelxSearch()
@@ -24,7 +19,6 @@ const ScopedSearchView = () => {
// We need to override the withView useTitle since we have dynamic needs here.
useTitle(query ? ["Search", query] : "")
-
return (
@@ -32,6 +26,8 @@ const ScopedSearchView = () => {
{context.workspaces_enabled === 'true' && Search}
+ { context.brand === "heal" && }
+
diff --git a/src/views/splash-screen.js b/src/views/splash-screen.js
index b5352b51..f30dceaa 100644
--- a/src/views/splash-screen.js
+++ b/src/views/splash-screen.js
@@ -25,6 +25,12 @@ export const SplashScreenView = withWorkspaceAuthentication((props) => {
? `${appstoreContext.dockstore_app_specs_dir_url}/${props.app_name}/icon.png`
: undefined
), [appstoreContext, props.app_name])
+
+ const breadcrumbs = useMemo(() => [
+ { text: 'Home', path: '/helx' },
+ { text: 'Workspaces', path: '/helx/workspaces' },
+ { text: `${ props.app_name }`, path: `` },
+ ], [])
useTitle("Connecting")
@@ -58,7 +64,6 @@ export const SplashScreenView = withWorkspaceAuthentication((props) => {
shouldCancel = true
}
}, [decoded_url])
-
if (loading) {
return (