{/* { md && } */}
diff --git a/src/components/search/results/variable-view-layout/variable-results.css b/src/components/search/results/variable-view-layout/variable-results.css
index eb230735..bb530f69 100644
--- a/src/components/search/results/variable-view-layout/variable-results.css
+++ b/src/components/search/results/variable-view-layout/variable-results.css
@@ -1,3 +1,12 @@
+.variable-histogram-collapse-panel > .ant-collapse-header {
+ padding: 0 !important;
+ align-items: center !important;
+ margin-bottom: 16px;
+}
+.variable-histogram-collapse-panel > .ant-collapse-content > .ant-collapse-content-box {
+ padding: 0 !important;
+}
+
.histogram-startover-btn {
margin-bottom: 10px;
}
diff --git a/src/components/search/results/variable-view-layout/variable-results.js b/src/components/search/results/variable-view-layout/variable-results.js
index 2393587e..43075624 100644
--- a/src/components/search/results/variable-view-layout/variable-results.js
+++ b/src/components/search/results/variable-view-layout/variable-results.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react'
-import { Typography, Button, Space, Divider, Slider, Tooltip } from 'antd'
+import React, { useEffect, useState, useRef, useMemo, useCallback, Fragment } from 'react'
+import { Typography, Button, Space, Divider, Slider, Tooltip, Collapse } from 'antd'
import { ArrowLeftOutlined, ArrowRightOutlined, InfoCircleFilled } from '@ant-design/icons'
import { generate, presetPalettes, red, volcano, orange, gold, yellow, green, cyan, blue, geekblue, purple, magenta } from '@ant-design/colors'
import { Column } from '@ant-design/plots';
@@ -14,6 +14,7 @@ import { useDebounce, useDebouncedCallback } from 'use-debounce'
import './variable-results.css';
const { Text, Title } = Typography
+const { Panel } = Collapse
// Between 0-9
const COLOR_INTENSITY = 4
@@ -132,6 +133,7 @@ const HistogramLegend = ({ title: _title, items, style, ...props }) => {
export const VariableSearchResults = () => {
const { variableResults, variableStudyResults, totalVariableResults } = useHelxSearch()
+ const [collapseHistogram, setCollapseHistogram] = useState(false)
const [page, setPage] = useState(0)
/** filteredVariables holds the variables displayed in the histogram */
const [_filteredVariables, _setFilteredVariables] = useState([variableResults])
@@ -361,122 +363,137 @@ export const VariableSearchResults = () => {
return (
- {/* 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
-
-
-
- Viewing {filteredVariables.length} variables within the {Math.floor(filteredPercentileLower)}-{Math.floor(filteredPercentileUpper)} percentiles
-
-
- ) }
-
-
-
-
-
result.score)) }
- max={ Math.max(...variableResults.map((result) => result.score)) }
- step={ null }
- marks={ variableResults.reduce((acc, cur) => {
- acc[cur.score] = {
- label: cur.score,
- style: {
- display: "none"
- }
+ setCollapseHistogram(!collapseHistogram) }
+ >
+
+ {/* 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
+
+
+
+
+ }>
+ { filteredVariables.length < totalVariableResults && (
+
+
+ Viewing {filteredVariables.length} variables within the {Math.floor(filteredPercentileLower)}-{Math.floor(filteredPercentileUpper)} percentiles
+
-
{
- const [minScore, maxScore] = absScoreRange
- 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
- const filteredCount = filteredVariables.filter((result) => result.score >= startScore && result.score <= endScore).length
- return {
- id: color,
- name: {
- name: `${ startRatio === 0 ? Math.floor(startScore) : Math.ceil(startScore) } - ${ endRatio === 1 ? Math.ceil(endScore) : Math.floor(endScore) }`,
- style: filteredCount === 0 ? { color: "rgba(0, 0, 0, 0.25)" } : undefined
- },
- description: {
- description: filteredCount < count ? `(${ filteredCount } / ${ count } variables)` : `(${ count } variables)`,
- style: filteredCount === 0 ? { color: "rgba(0, 0, 0, 0.25)" } : undefined
- },
- marker: {
- path: (w, h) => {
- const x = 0
- const y = 0
- return `M ${ x },${ y } L ${ x + w }, ${ y } L ${ x + w }, ${ y + h } L ${ x }, ${ y + h } L ${ x },${ y } Z`
+ ) }
+
+
+
+
+ result.score)) }
+ max={ Math.max(...variableResults.map((result) => result.score)) }
+ step={ null }
+ marks={ variableResults.reduce((acc, cur) => {
+ acc[cur.score] = {
+ label: cur.score,
+ style: {
+ display: "none"
+ }
+ }
+ return acc
+ }, {}) }
+ // Margin to align with the histogram
+ style={{ marginRight: 0, marginBottom: 4, marginTop: 16, flexGrow: 1 }}
+ className="histogram-slider"
+ />
+
+
{
+ const [minScore, maxScore] = absScoreRange
+ 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
+ const filteredCount = filteredVariables.filter((result) => result.score >= startScore && result.score <= endScore).length
+ return {
+ id: color,
+ name: {
+ name: `${ startRatio === 0 ? Math.floor(startScore) : Math.ceil(startScore) } - ${ endRatio === 1 ? Math.ceil(endScore) : Math.floor(endScore) }`,
+ style: filteredCount === 0 ? { color: "rgba(0, 0, 0, 0.25)" } : undefined
+ },
+ description: {
+ description: filteredCount < count ? `(${ filteredCount } / ${ count } variables)` : `(${ count } variables)`,
+ style: filteredCount === 0 ? { color: "rgba(0, 0, 0, 0.25)" } : undefined
},
- // path: [["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"]],
- style: {
- fill: filteredCount > 0 ? color : "rgba(0, 0, 0, 0.15)"
+ marker: {
+ path: (w, h) => {
+ const x = 0
+ const y = 0
+ return `M ${ x },${ y } L ${ x + w }, ${ y } L ${ x + w }, ${ y + h } L ${ x }, ${ y + h } L ${ x },${ y } Z`
+ },
+ // path: [["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"]],
+ style: {
+ fill: filteredCount > 0 ? color : "rgba(0, 0, 0, 0.15)"
+ }
}
}
- }
- }) }
- style={{ marginLeft: 24, marginRight: 8, flexShrink: 0 }}
- />
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
diff --git a/src/components/search/results/variable-view-layout/variable-view-layout.js b/src/components/search/results/variable-view-layout/variable-view-layout.js
index 953f5fe4..44e4c759 100644
--- a/src/components/search/results/variable-view-layout/variable-view-layout.js
+++ b/src/components/search/results/variable-view-layout/variable-view-layout.js
@@ -1,20 +1,29 @@
import { Fragment } from 'react'
-import { Spin } from 'antd'
+import { Spin, Typography, Empty } from 'antd'
import { VariableSearchResults } from './'
import { ResultsHeader } from '../'
import { useHelxSearch, SearchForm } from '../../'
+const { Text } = Typography
+
export const VariableViewLayout = () => {
- const { error, totalVariableResults, isLoadingVariableResults } = useHelxSearch()
+ const { query, error, totalVariableResults, isLoadingVariableResults } = useHelxSearch()
return (
- { error && { error.message } }
{ isLoadingVariableResults ? (
) : (
+ { error.message ? (
+ { error.message }
+ ) : query && totalVariableResults === 0 ? (
+ No results were found for "{ query }"
+ } />
+ // No results found
+ ) : null }
{totalVariableResults > 0 && }
diff --git a/src/views/view.tsx b/src/views/view.tsx
index 053197ac..bfc9d4a3 100644
--- a/src/views/view.tsx
+++ b/src/views/view.tsx
@@ -1,4 +1,5 @@
-import { ComponentType, useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useEnvironment } from '../contexts'
interface ViewProps {
// Note: a null title is equivalent to an empty string or empty array, it will just display "HeLx UI" as the title.
@@ -12,11 +13,15 @@ interface ViewProps {
* The "HeLx UI" component is appended to the end of all titles, does not need to be included.
*/
export const useTitle = (title: string | string[] | null) => {
+ const { context } = useEnvironment() as any
if (title === "") title = []
const titleSegments = Array.isArray(title) ? title : [title]
+ const websiteTitle = useMemo(() => {
+ return context?.meta.title ?? "HeLx UI"
+ }, [context])
useEffect(() => {
- if (title !== null) document.title = [...titleSegments, "HeLx UI"].join(" · ")
- }, [titleSegments])
+ if (title !== null) document.title = [...titleSegments, websiteTitle].join(" · ")
+ }, [titleSegments, websiteTitle])
}
// export function withView(
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 879f64ca..1d7ec7a1 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -44,6 +44,52 @@ const createCopyPlugin = ({
]
})
)
+const createHtmlWebpackPlugin = ({
+ isDevelopment
+}) => {
+ /**
+ * In production, we have an extra step where we generate an index template
+ * which is then turned into our final index file using sed substitutions from
+ * environment variables.
+ *
+ * In development, we just want to directly generate an index.html.
+ */
+ return new HtmlWebpackPlugin({
+ template: path.resolve(paths.public, 'index.ejs'),
+ filename: isDevelopment ? "index.html" : "index_template.html",
+ templateParameters: {
+ isDevelopment,
+ publicUrl: '/static/frontend/'
+ },
+ minify: {
+ html5: true,
+ collapseWhitespace: true,
+ minifyCSS: true,
+ minifyJS: true,
+ minifyURLs: true,
+ removeAttributeQuotes: false,
+ removeComments: true,
+ removeEmptyAttributes: true,
+ removeOptionalTags: true,
+ removeRedundantAttributes: true,
+ removeScriptTypeAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ useShortDoctype: true
+ }
+ })
+}
+const createMiniCssExtractPlugin = ({
+ isDevelopment
+}) => (
+ // CSS HMR doesn't work with contenthash
+ isDevelopment ? new MiniCssExtractPlugin({
+ filename: '[name].css',
+ chunkFilename: '[id].css'
+ }) : new MiniCssExtractPlugin({
+ filename: '[name].[contenthash].css',
+ chunkFilename: '[id].[contenthash].css'
+ })
+)
const baseConfig = {
entry: paths.entryPoint,
output: {
@@ -90,36 +136,10 @@ const baseConfig = {
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
- }
+ },
]
},
- plugins: [
- new HtmlWebpackPlugin({
- template: path.resolve(paths.public, 'index.ejs'),
- templateParameters: {
- publicUrl: '/static/frontend/'
- },
- minify: {
- html5: true,
- collapseWhitespace: true,
- minifyCSS: true,
- minifyJS: true,
- minifyURLs: true,
- removeAttributeQuotes: true,
- removeComments: true,
- removeEmptyAttributes: true,
- removeOptionalTags: true,
- removeRedundantAttributes: true,
- removeScriptTypeAttributes: true,
- removeStyleLinkTypeAttributese: true,
- useShortDoctype: true
- }
- }),
- new MiniCssExtractPlugin({
- filename: '[name].[contenthash].css',
- chunkFilename: '[id].[contenthash].css'
- })
- ],
+ plugins: [],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
@@ -134,5 +154,7 @@ module.exports = {
paths,
baseConfig,
createBabelLoader,
- createCopyPlugin
+ createCopyPlugin,
+ createHtmlWebpackPlugin,
+ createMiniCssExtractPlugin
}
\ No newline at end of file
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index d6f5059c..0f91ef45 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,11 +1,15 @@
-const express = require('express')
const path = require('path')
const webpack = require('webpack')
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
const { merge } = require('webpack-merge')
-const { baseConfig, paths, createBabelLoader, createCopyPlugin } = require('./webpack.base.config.js')
+const {
+ baseConfig, paths,
+ createBabelLoader, createCopyPlugin, createHtmlWebpackPlugin,
+ createMiniCssExtractPlugin
+} = require('./webpack.base.config.js')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = merge(baseConfig, {
mode: 'development',
@@ -34,6 +38,8 @@ module.exports = merge(baseConfig, {
rules: [ createBabelLoader({ isDevelopment: true }) ]
},
plugins: [
+ createMiniCssExtractPlugin({ isDevelopment: true }),
+ createHtmlWebpackPlugin({ isDevelopment: true }),
new ReactRefreshPlugin(),
new ForkTsCheckerPlugin({
async: false
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
index d1a5add7..5a8fab32 100644
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -1,8 +1,13 @@
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin')
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const { merge } = require('webpack-merge')
-const { baseConfig, paths, createBabelLoader, createCopyPlugin } = require('./webpack.base.config.js');
+const {
+ baseConfig, paths,
+ createBabelLoader, createCopyPlugin, createHtmlWebpackPlugin,
+ createMiniCssExtractPlugin
+} = require('./webpack.base.config.js')
console.log("Creating optimized production build. This may take a while...")
module.exports = merge(baseConfig, {
@@ -19,6 +24,8 @@ module.exports = merge(baseConfig, {
rules: [ createBabelLoader({ isDevelopment: false }) ]
},
plugins: [
+ createMiniCssExtractPlugin({ isDevelopment: false }),
+ createHtmlWebpackPlugin({ isDevelopment: false }),
new webpack.EnvironmentPlugin({
'NODE_ENV': 'production'
}),