Squashed commits

src/browser/components/buttons/index.tsx

@@ -36,12 +36,7 @@ export const EditorButton = (props: any): JSX.Element => {
   const { icon, title, color, width, onClick, ...rest } = props
   const overrideColor = { ...(color ? { color } : {}) }
   return (
-    <BaseButton
-      onClick={onClick}
-      title={title}
-      style={overrideColor}
-      width={width}
-    >
+    <BaseButton onClick={onClick} title={title} style={overrideColor}>
       <SVGInline
         svg={icon}
         accessibilityLabel={title}
@@ -52,7 +47,7 @@ export const EditorButton = (props: any): JSX.Element => {
   )
 }
 
-const BaseButton: any = styled.span`
+const BaseButton = styled.span`
   font-family: ${props => props.theme.streamlineFontFamily};
   font-style: normal !important;
   font-weight: 400 !important;
@@ -107,10 +102,10 @@ export const StyledNavigationButton = styled.button`
   }
 `
 
-export const NavigationButtonContainer: any = styled.li`
+export const NavigationButtonContainer = styled.li<{ isOpen: boolean }>`
   min-height: 70px;
   height: 70px;
-  background-color: ${(props: any) =>
+  background-color: ${props =>
     !props.isOpen ? 'transparent' : props.theme.drawerBackground};
   &:focus {
     outline: none;

src/browser/modules/Carousel/Carousel.tsx

@@ -108,7 +108,7 @@ export default function Carousel({
     <StyledCarousel
       data-testid="carousel"
       onKeyUp={(e: any) => onKeyDown(e)}
-      tabIndex="0"
+      tabIndex={0}
     >
       {visibleSlide > 0 && (
         <CarouselButton

src/browser/modules/Carousel/styled.tsx

@@ -22,7 +22,7 @@ import styled from 'styled-components'
 import { bounceRight } from 'browser-styles/animations'
 import { dark } from 'browser-styles/themes'
 
-export const StyledCarousel: any = styled.div`
+export const StyledCarousel = styled.div`
   padding-bottom: 20px;
   min-height: 100%;
   width: 100%;

src/browser/modules/D3Visualization/components/Explorer.tsx

@@ -205,24 +205,16 @@ export class ExplorerComponent extends Component<any, ExplorerComponentState> {
         />
       )
     }
-    const inspectingItemType =
-      !this.state.inspectorContracted &&
-      ((this.state.hoveredItem && this.state.hoveredItem.type !== 'canvas') ||
-        (this.state.selectedItem && this.state.selectedItem.type !== 'canvas'))
 
     return (
       <StyledFullSizeContainer
         id="svg-vis"
         className={
           Object.keys(this.state.stats.relTypes).length ? '' : 'one-legend-row'
         }
-        forcePaddingBottom={
-          inspectingItemType ? this.state.forcePaddingBottom : null
-        }
       >
         {legend}
         <GraphComponent
-          fullscreen={this.props.fullscreen}
           frameHeight={this.props.frameHeight}
           relationships={this.state.relationships}
           nodes={this.state.nodes}
@@ -238,7 +230,6 @@ export class ExplorerComponent extends Component<any, ExplorerComponentState> {
         />
         <InspectorComponent
           hasTruncatedFields={this.props.hasTruncatedFields}
-          fullscreen={this.props.fullscreen}
           hoveredItem={this.state.hoveredItem}
           selectedItem={this.state.selectedItem}
           graphStyle={this.state.graphStyle}

src/browser/modules/D3Visualization/components/Graph.tsx

@@ -22,7 +22,6 @@ import React, { Component } from 'react'
 import { createGraph, mapRelationships, getGraphStats } from '../mapper'
 import { GraphEventHandler } from '../GraphEventHandler'
 import '../lib/visualization/index'
-import { dim } from 'browser-styles/constants'
 import { StyledZoomHolder, StyledSvgWrapper, StyledZoomButton } from './styled'
 import { ZoomInIcon, ZoomOutIcon } from 'browser-components/icons/Icons'
 import graphView from '../lib/visualization/components/graphView'
@@ -59,14 +58,6 @@ export class GraphComponent extends Component<any, State> {
     })
   }
 
-  getVisualAreaHeight() {
-    return this.props.frameHeight && this.props.fullscreen
-      ? this.props.frameHeight -
-          (dim.frameStatusbarHeight + dim.frameTitlebarHeight * 2)
-      : this.props.frameHeight - dim.frameStatusbarHeight ||
-          this.svgElement.parentNode.offsetHeight
-  }
-
   componentDidMount() {
     if (this.svgElement != null) {
       this.initGraphView()
@@ -81,16 +72,9 @@ export class GraphComponent extends Component<any, State> {
   initGraphView() {
     if (!this.graphView) {
       const NeoConstructor = graphView
-      const measureSize = () => {
-        return {
-          width: this.svgElement.offsetWidth,
-          height: this.getVisualAreaHeight()
-        }
-      }
       this.graph = createGraph(this.props.nodes, this.props.relationships)
       this.graphView = new NeoConstructor(
         this.svgElement,
-        measureSize,
         this.graph,
         this.props.graphStyle
       )
@@ -104,7 +88,6 @@ export class GraphComponent extends Component<any, State> {
       )
       this.graphEH.bindEventHandlers()
       this.props.onGraphModelChange(getGraphStats(this.graph))
-      this.graphView.resize()
       this.graphView.update()
     }
   }
@@ -124,12 +107,6 @@ export class GraphComponent extends Component<any, State> {
     if (prevProps.styleVersion !== this.props.styleVersion) {
       this.graphView.update()
     }
-    if (
-      this.props.fullscreen !== prevProps.fullscreen ||
-      this.props.frameHeight !== prevProps.frameHeight
-    ) {
-      this.graphView.resize()
-    }
   }
 
   zoomButtons() {
@@ -141,20 +118,21 @@ export class GraphComponent extends Component<any, State> {
           }
           onClick={this.zoomInClicked.bind(this)}
         >
-          <ZoomInIcon regulateSize={this.props.fullscreen ? 2 : 1} />
+          <ZoomInIcon regulateSize={1} />
         </StyledZoomButton>
         <StyledZoomButton
           className={
             this.state.zoomOutLimitReached ? 'faded zoom-out' : 'zoom-out'
           }
           onClick={this.zoomOutClicked.bind(this)}
         >
-          <ZoomOutIcon regulateSize={this.props.fullscreen ? 2 : 1} />
+          <ZoomOutIcon regulateSize={1} />
         </StyledZoomButton>
       </StyledZoomHolder>
     )
   }
 
+  //TODO zoom in iconsize
   render() {
     return (
       <StyledSvgWrapper>

src/browser/modules/D3Visualization/components/Inspector.tsx

@@ -216,10 +216,7 @@ export class InspectorComponent extends Component<
     }
 
     return (
-      <StyledStatusBar
-        fullscreen={this.props.fullscreen}
-        className="status-bar"
-      >
+      <StyledStatusBar className="status-bar">
         <StyledStatus className="status">
           <StyledInspectorFooter
             className={

src/browser/modules/D3Visualization/components/styled.tsx

@@ -194,7 +194,7 @@ export const StyledStatusBarWrapper = styled.div`
   height: 68px;
   display: none;
 `
-export const StyledStatusBar: any = styled.div`
+export const StyledStatusBar = styled.div`
   min-height: 39px;
   line-height: 39px;
   color: ${props => props.theme.secondaryText};
@@ -340,7 +340,7 @@ export const StyledCaptionSelector = styled.a`
   }
 `
 
-export const StyledFullSizeContainer: any = styled.div`
+export const StyledFullSizeContainer = styled.div`
   position: relative;
   height: 100%;
 `

src/browser/modules/D3Visualization/lib/visualization/components/graphView.ts

@@ -25,11 +25,11 @@ export default class graphView {
   graph: any
   style: any
   viz: any
-  constructor(element: any, measureSize: any, graph: any, style: any) {
+  constructor(element: any, graph: any, style: any) {
     this.graph = graph
     this.style = style
     const forceLayout = layout.force()
-    this.viz = viz(element, measureSize, this.graph, forceLayout, this.style)
+    this.viz = viz(element, this.graph, forceLayout, this.style)
     this.callbacks = {}
     const { callbacks } = this
     this.viz.trigger = (() => (event: any, ...args: any[]) =>
@@ -67,11 +67,6 @@ export default class graphView {
     return this
   }
 
-  resize() {
-    this.viz.resize()
-    return this
-  }
-
   boundingBox() {
     return this.viz.boundingBox()
   }

src/browser/modules/D3Visualization/lib/visualization/components/visualization.ts

@@ -24,13 +24,7 @@ import * as vizRenderers from '../renders/init'
 import { menu as menuRenderer } from '../renders/menu'
 import vizClickHandler from '../utils/clickHandler'
 
-const vizFn = function(
-  el: any,
-  measureSize: any,
-  graph: any,
-  layout: any,
-  style: any
-) {
+const vizFn = function(el: any, graph: any, layout: any, style: any) {
   const viz: any = { style }
 
   const root = d3.select(el)
@@ -338,26 +332,12 @@ const vizFn = function(
     if (updateViz) {
       force.update(graph, [layoutDimension, layoutDimension])
 
-      viz.resize()
       viz.trigger('updated')
     }
 
     return (updateViz = true)
   }
 
-  viz.resize = function() {
-    const size = measureSize()
-    return root.attr(
-      'viewBox',
-      [
-        0,
-        (layoutDimension - size.height) / 2,
-        layoutDimension,
-        size.height
-      ].join(' ')
-    )
-  }
-
   // @ts-expect-error ts-migrate(2339) FIXME: Property 'boundingBox' does not exist on type '{ s... Remove this comment to see the full error message
   viz.boundingBox = () => container.node().getBBox()
 

src/browser/modules/Frame/DefaultFrame.tsx

@@ -34,6 +34,6 @@ const DefaultFrame = ({ frame }: any): JSX.Element => {
     frameContents = 'Unknown command'
   }
 
-  return <FrameTemplate header={frame} contents={frameContents} />
+  return <FrameTemplate contents={frameContents} />
 }
 export default DefaultFrame