Merge pull request #581 from OpenKnowledgeMaps/back-button-zoom

Back/forward button zoom in, zoom out, select and deselect paper.

Author: Konstiman

vis/js/actions/index.js

@@ -20,7 +20,6 @@ export const NOT_QUEUED_IN_ANIMATION = [
   "ZOOM_OUT",
   "SELECT_PAPER",
   "DESELECT_PAPER",
-  "DESELECT_PAPER_BACKLINK",
   "FILE_CLICKED",
   "SEARCH",
   "FILTER",
@@ -29,20 +28,23 @@ export const NOT_QUEUED_IN_ANIMATION = [
 
 export const zoomIn = (
   selectedAreaData,
-  source = null,
   callback,
-  alreadyZoomed = false
+  alreadyZoomed = false,
+  isFromBackButton = false,
+  selectedPaperData = null
 ) => ({
   type: "ZOOM_IN",
   selectedAreaData,
-  source,
   callback,
   alreadyZoomed,
+  isFromBackButton,
+  selectedPaperData,
 });
 
-export const zoomOut = (callback) => ({
+export const zoomOut = (callback, isFromBackButton = false) => ({
   type: "ZOOM_OUT",
   callback,
+  isFromBackButton,
 });
 
 /**
@@ -97,10 +99,11 @@ export const filter = (id) => ({ type: "FILTER", id });
 
 export const sort = (id) => ({ type: "SORT", id });
 
-export const selectPaper = (paper) => ({
+export const selectPaper = (paper, isFromBackButton = false) => ({
   type: "SELECT_PAPER",
   safeId: paper.safe_id,
   paper,
+  isFromBackButton,
 });
 
 export const deselectPaper = () => ({ type: "DESELECT_PAPER" });
@@ -114,10 +117,6 @@ export const showPreview = (paper) => ({ type: "SHOW_PREVIEW", paper });
 
 export const hidePreview = () => ({ type: "HIDE_PREVIEW" });
 
-export const deselectPaperBacklink = () => ({
-  type: "DESELECT_PAPER_BACKLINK",
-});
-
 export const updateDimensions = (chart, list) => ({
   type: "RESIZE",
   listHeight: list.height,

vis/js/components/KnowledgeMap.js

@@ -34,7 +34,6 @@ const KnowledgeMap = (props) => {
   };
 
   const handleOtherAreaZoomIn = (bubble) => {
-    handleDeselectPaper();
     handleZoomIn(bubble, true);
     trackMatomoEvent("Knowledge map", "Zoom in", "Bubble");
   };

vis/js/components/Streamgraph.js

@@ -25,7 +25,7 @@ import {
   TOOLTIP_OFFSET,
 } from "../utils/streamgraph";
 
-import { deselectPaper, zoomIn, zoomOut } from "../actions";
+import { zoomIn, zoomOut } from "../actions";
 
 /**
  * Class representing the streamgraph visualization.
@@ -541,7 +541,6 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   onAreaClick: (stream) => {
-    dispatch(deselectPaper());
     dispatch(
       zoomIn({ title: stream.key, color: stream.color, docIds: stream.docIds })
     );

vis/js/components/listentries/BasicListEntries.js

@@ -15,8 +15,7 @@ import { shorten } from "../../utils/string";
 const BasicListEntries = ({
   displayedData,
   handleZoomIn,
-  handleSelectPaper,
-  handleDeselectPaper,
+  handleSelectPaperWithZoom,
   handlePDFClick,
   handleAreaMouseover,
   handleAreaMouseout,
@@ -31,16 +30,14 @@ const BasicListEntries = ({
     if (disableClicks) {
       return;
     }
-    handleSelectPaper(paper);
-    handleZoomIn(paper);
+    handleSelectPaperWithZoom(paper);
   };
 
   const handleAreaClick = (paper) => {
     if (disableClicks) {
       return;
     }
-    handleDeselectPaper();
-    handleZoomIn(paper, "list-area");
+    handleZoomIn(paper);
   };
 
   return (

vis/js/components/listentries/ClassificationListEntries.js

@@ -27,7 +27,7 @@ const ClassificationListEntries = ({
   disableClicks,
   handleZoomIn,
   handleSelectPaper,
-  handleDeselectPaper,
+  handleSelectPaperWithZoom,
   handlePDFClick,
   handleAreaMouseover,
   handleAreaMouseout,
@@ -37,18 +37,18 @@ const ClassificationListEntries = ({
     if (disableClicks) {
       return;
     }
-    handleSelectPaper(paper);
     if (!isStreamgraph) {
-      handleZoomIn(paper);
+      handleSelectPaperWithZoom(paper);
+    } else {
+      handleSelectPaper(paper);
     }
   };
 
   const handleAreaClick = (paper) => {
     if (disableClicks) {
       return;
     }
-    handleDeselectPaper();
-    handleZoomIn(paper, "list-area");
+    handleZoomIn(paper);
   };
 
   return (

vis/js/components/listentries/StandardListEntries.js

@@ -34,7 +34,7 @@ const StandardListEntries = ({
   disableClicks,
   handleZoomIn,
   handleSelectPaper,
-  handleDeselectPaper,
+  handleSelectPaperWithZoom,
   handlePDFClick,
   handleAreaMouseover,
   handleAreaMouseout,
@@ -44,18 +44,18 @@ const StandardListEntries = ({
     if (disableClicks) {
       return;
     }
-    handleSelectPaper(paper);
     if (!isStreamgraph) {
-      handleZoomIn(paper);
+      handleSelectPaperWithZoom(paper);
+    } else {
+      handleSelectPaper(paper);
     }
   };
 
   const handleAreaClick = (paper) => {
     if (disableClicks) {
       return;
     }
-    handleDeselectPaper();
-    handleZoomIn(paper, "list-area");
+    handleZoomIn(paper);
   };
 
   return (