Fold graph by default

public/js/collapse_preferences.js

@@ -2,6 +2,16 @@ export default class CollapsePreferences {
     constructor(component) {
         this.component = component;
         this.collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];
+        const firstVisit = localStorage.getItem(`firstVisit${component.path}`) === null;
+
+        // Set default collapse preference for 'Graphical Overview' to true only on first visit
+        if (firstVisit) {
+            if (this.component.name === 'Graphical Overview' && !this.collapsePreferences.includes(this.component.name)) {
+                this.collapsePreferences.push(this.component.name);
+                localStorage.setItem('collapsePreferences', JSON.stringify(this.collapsePreferences));
+            }
+            localStorage.setItem(`firstVisit${component.path}`, 'false');
+        }
     }
 
     toggleCollapse() {

public/js/report.js

@@ -200,6 +200,7 @@ class Report extends Component {
                         params={this.state.params}
                     />
                     <GraphicalOverview
+                        path={location.pathname}
                         queries={this.state.queries}
                         prorgam={this.state.program}
                         plugins={this.plugins}

public/js/report/graphical_overview.js

@@ -1,7 +1,7 @@
 import Circos from '../circos';
 import ReportHeader from './report_header';
 
-const GraphicalOverview = ({queries, program, plugins}) => {
+const GraphicalOverview = ({queries, program, plugins, path}) => {
     /**
     * Does the report have at least two hits? This is used to determine
     * whether Circos should be enabled or not.
@@ -26,7 +26,9 @@ const GraphicalOverview = ({queries, program, plugins}) => {
     }
 
     return (
-        <ReportHeader name="Graphical Overview" renderContent={renderContent} renderable={atLeastTwoHits()} />
+        <div className="graphical-overview">
+            <ReportHeader name="Graphical Overview" path={path} renderContent={renderContent} renderable={atLeastTwoHits()} />
+        </div>
     )
 }
 

public/js/report/report_header.js

@@ -4,7 +4,7 @@ import CollapsePreferences from '../collapse_preferences';
 const ReportHeader = (props) => {
     const [state, setState] = useState({ collapsed: null });
     const [renderable, _setRenderable] = useState(props.renderable === undefined ? true : props.renderable);
-    const collapsePreferences = new CollapsePreferences({ name: props.name, state: { ...state }, setState: setState });
+    const collapsePreferences = new CollapsePreferences({ name: props.name, path: props.path, state: { ...state }, setState: setState });
 
     if (state.collapsed === null) setState({ collapsed: collapsePreferences.preferenceStoredAsCollapsed() });
     if (!renderable) return null;

spec/features/search_and_results_spec.rb

@@ -368,6 +368,9 @@ def nucleotide_query
     perform_search(query: protein_query,
                    databases: protein_databases.values_at(0))
 
+    ## on first visit the graph is not visible
+    find('.graphical-overview h3').click
+
     ## Check that there is a circos vis and unfold it.
     expect(page).to have_selector('.circos > .grapher-header > h4', text: 'Chord diagram of queries and their top hits')