Workset Widget

Workset Summary

Visualization type	Description
Summary	This visulatization provides a comprehensive summary of the selected workset, detailing its word count, unique word count, longest and shortest documents, highest and lowest vocabulary densities across all the volumes contained within the workset.

Components

Widget component

/src/components/widgets/Summary/index.tsx

LineGraph component to render the summary data

/src/components/widgets/Summary/lineGraph.tsx

How it works

The Workset summary widget receives data from its parent Widget component (/src/components/widgets/index.tsx) through props. The parent component fetches the data and passes it down.

It transforms the graph data to create a combined array for export purposes. This transformation combines document length and density information by using the document ID as a key to match corresponding values from both lengthGraph and densityGraph objects.

const chartDataHistogram = useMemo(() => {
    if (data.lengthGraph) {
      var output_array = [];
      for (const [key, value] of Object.entries(data.lengthGraph)) {
        output_array.push({ 'title': value.title, 'length': value.value, 'density': data.densityGraph[key].value })
      }
      return output_array;
    }
    else {
      return [];
    }
  }, [data]);

The raw data object needs to be converted into an array format that the word cloud visualization library can understand. Each word-frequency pair becomes an object with text and value properties.

useEffect(() => {
  // Convert the data object into an array, sort it, and take the top 100
  const newWordCloudData = Object.keys(data).map(entry => ({
    text: entry,
    value: data[entry]
  }));
  setwordCloudData(newWordCloudData);
}, [data]);

The transformed word cloud data is synchronized with the global dashboard state using the useDashboardState hook. This allows other dashboard components to access the word cloud data for filtering or analysis purposes.

useEffect(() => {
  onChangeWidgetState({
    widgetType: widgetType,
    data: wCloud
  })
}, [widgetType, wCloud])

The actual word cloud visualization is handled by the WordCloudChart component. The main widget creates a container with fixed height and passes the transformed data to this component.

<Box sx={{ height: '400px', position: 'relative' }} ref={chartWrapper}>
  <WordCloudChart data={wCloud}></WordCloudChart>
</Box>

The WordCloudChart component receives the array data and processes it further. It calculates the maximum frequency value to properly scale word sizes and manages the visualization parameters.

useEffect(() => {
    const values = props.data.map((r) => {
      return r.value;
    });
    setMax(Math.max(...values));
    setData(props.data);
  }, [props.data]);

The actual rendering uses react-d3-cloud library with calculated parameters. Font sizes are scaled based on word frequency relative to the maximum value, and each word is rotated based on its frequency value.

const fontSize = useCallback((word) => {
    return (600 * word.value) / max;
  }, [max])
  const rotate = useCallback((word) => {
    return word.value % 360;
  }, [])

<WordCloud  
    width={1800}
    height={3000}
    data={data}
    fontSize={fontSize}
    rotate={rotate}
    padding={6} 
    random={Math.random}      
/>

Full source code

Here